图标之旅
2017年10月24日 Chris Dias, @chrisdias
总结
感谢大家所有热情洋溢的反馈。这些反馈既非常有帮助，又让人“痛苦”，同时也充满了趣味。我们决定将稳定版（Stable）的图标颜色由橙色改为蓝色，并保留内测版（Insiders）的绿色。
你最喜欢的颜色是什么？
在电影《巨蟒与圣杯》(Monty Python and the Holy Grail)中，守桥人问了兰斯洛特爵士三个问题才允许他通过死亡之桥。只要三个问题都答对，兰斯洛特爵士就能通过；如果答错，就会遭遇不幸。当被问及最喜欢的颜色时，兰斯洛特爵士回答了“蓝色”，并获准通过了桥梁。
而我们的回答是“橙色”。
致歉与透明度
首先，对于回应迟缓，我们深表歉意。我们一直在关注大家的反馈，阅读了每一条评论，并针对后续步骤进行了“激烈”的讨论。我们相信我们已经制定了一份合理的计划，并希望与大家分享。我们期待就这个我们现在深知极具争议的话题，与大家继续交流。
为了保持完全透明，我们想分享一些背景历史，因为我们认为这有助于理解我们当初是如何选定橙色的。
欢迎加入这个大家庭
早在三月，我们（更广泛的 Visual Studio 团队）就着手为我们制作的所有开发工具营造一种“家族感”。如果你重读那篇博文，就会发现我们必须在一些“具有挑战性”的企业品牌准则（例如，统一使用一种颜色）内进行工作。
将问题归咎于准则很容易，但同时，拥有一套易于识别且具有广泛辨识度的产品是非常宝贵的资产。因此，我们选择迎接挑战，在准则的约束下工作，同时在公司内部推动准则的演进，以解决我们面临的问题。
当我们看到最初那套图标引发的负面反馈时，我们全心投入到 VS Code 图标的设计中。我们希望制作出一款无论是广大社区还是我们自己，都能在视觉和情感上瞬间产生共鸣的图标。
以下是一些早期的设计方案
除了右上角的那一个，其他设计都没能让我们眼前一亮。
那个方案被否决了，因为它没有包含“折叠”元素，这是家族设计语言的一个重要组成部分。只好重回绘图板。
我们针对无限符号标志迭代了很长一段时间，例如：
包括一个可能会让你眼花缭乱的设计
直到我们定下了现在的“鱼”形图标，该图标在小范围开发者测试中表现良好。
旋转
我们在 macOS（和 Linux）上拥有更多的设计自由度，这就是为什么那里的图标不同。虽然我们想保持相同的图标形状，但我们不受单一颜色的限制，并且可以通过将图标置于深色面板上来解决对比度问题。图标的旋转实际上遵循了 Apple 设计准则。
话虽如此，关于“旋转设计过时”以及“衬底使得图标在 Dock 栏中显得比其他图标小”的反馈是完全合理的。
疲劳感
到了仲夏，图标设计出现了疲劳。我们进行了太多次迭代，最终决定采用当前的形状，并为 Insiders 版本签入了“预发布”设计。预发布状态由右侧和底部的网格方块表示。
这个网格在尺寸较大时（例如在 PowerPoint 幻灯片中）看起来很棒，但在尺寸较小时，方块会变得模糊，导致整个图标看起来洗掉了色泽。我们尝试了多种白色、黑色以及不同深浅的橙色和绿色边框。为了看清边缘，这里放大了显示。
为了解决这个问题，我们也尝试在 Windows 上使用 macOS 版本的图标，但看起来非常不协调，在小尺寸下效果更糟。最终，我们决定放弃预发布图标设计，改用不同的颜色来区分 Insiders 版本。绿色当时是可用的，也是 Insiders 已有的颜色，所以我们就选用了它。
搞定，这就是 Insiders 版
图标占用
在 VS Code 出现之前，有 Visual Studio Monaco，这是我们基于浏览器的全功能工作台，用于在线编辑 Azure App Service Web 应用。由于它是一个在线产品，我们需要一个图标，所以我们“借用”了蓝色的无限符号。
当我们首次发布 VS Code 时，一切进行得太快了，图标是我们最不关心的事。无论你如何看待新图标，旧图标在桌面、任务栏和 Dock 栏上确实看起来很糟糕，它原本只是作为网页图标（favicon）设计的。
后来，当我们决定家族中的每个产品都应有自己的颜色时，因为蓝色已经被占用了，我们不得不另想他法。而且，既然是我们从他们那里“借”来的，还回去似乎也是正确的做法 :)。
南瓜香料（橙色）
此时，家族调色板中的颜色几乎被我们用光了，只剩下如今臭名昭著的橙色。我们曾担心它与 Sublime Text 的配色方案相似，但在测试时没有人提出异议。老实说，我们对 Sublime 最近使用的折叠丝带设计感到更加惊讶。
如何快速收集大量反馈……
在接下来的两个月里，随着我们对上述问题进行迭代，Insiders 版本一直使用着橙色和后来的绿色图标，期间并没有收到太多负面反馈。
也许我们的担忧是多余的。也许用户真的会喜欢这些新图标，而对于少数几个问题所引发的焦虑并不值得我们寝食难安。我们决定不再对可能并非问题的问题过度关注。我们推送了更改，并在版本说明中简要提到了新图标。
紧接着，问题和评论接踵而至。
每天都有额外的评论，以各种新鲜且引人注目的方式表达对新图标的厌恶。最初几天过后，我们本以为反馈会慢下来，让我们能逐一解决问题。结果，我们错了。反馈源源不断。新的 Issue 被创建，评论涌入的速度快到我们无法及时回复。Hacker News、Visual Studio Magazine，甚至连高中的朋友都在 Facebook 上发表评论。太惊人了。
你是我的好孩子，蓝色！
这就是我们今天所处的情况。
我们回顾了自 1.17.0 版本（我们引入橙色图标的稳定版）发布以来所有打开和评论的 Issue 中的反馈。很明显，VS Code 的万圣节版图标对许多人来说并不友好，对此我们深表歉意。
巧合的是，在我撰写本文时，mdb07a 对 Windows 上的反馈和问题总结做得非常出色。我在此进行概括，实际上还有更多问题，但主要问题如下：
- 颜色变化太过剧烈，橙色是蓝色的补色，导致之前看起来协调的设计现在看起来很糟糕。
- 扁平的单色图标完全依赖透明度来创造负空间，这使其特征不明显，加剧了辨识度问题。
- 新的边框太大且过于醒目，以至于在视觉上比无限符号本身更抢眼。
在 macOS 上，最普遍的反馈是倾斜角度看起来过时，且使得图标的重要部分在 Dock 栏中相比其他图标显得较小。
所有这些反馈促使我们重新审视，看看是否能在保持产品家族统一性的同时做得更好。因此，我们将稳定版的图标改回了广受喜爱的蓝色。
蓝色与编辑器中的状态栏以及其他蓝色元素配合得很好。
对于那些在区分稳定版和内测版图标时有困难的用户来说，绿色和蓝色的搭配效果更好。以下是使用 Sim Daltonism 应用模拟的对比图（绿色盲/色弱视角）：
拥有多个共享颜色的产品是不可避免的，因此我们不再担心 VS Code 共享蓝色这一问题。
我们正在探索在 macOS 上使用非倾斜图标，灵感来自于 @donysukardi 的评论。虽然目前还不能确定一定会这样做，但我们会对此进行研究，无论结果如何，我们都会在该 Issue 中发布更新。
展望未来
从橙色变回蓝色并不能解决所有问题，但这迈出了向前的一步。我们确实期望图标设计能够持续演进，并对 VS Code 在家族框架内的新设计理念持开放态度。
我们从如何演进和发布图标变更中吸取了深刻的教训，谢谢大家。对于那些喜欢橙色图标的人，我们希望你们能更喜欢蓝色。
谢谢，Chris