图标之旅

2017年10月24日 Chris Dias, @chrisdias

总结

感谢所有热情的反馈。这些反馈既有帮助，又令人痛苦，同时还很有趣。我们将稳定版（Stable）的橙色图标改为蓝色，而内部预览版（Insiders）则保持绿色。

你最喜欢的颜色是什么？

在《巨蟒与圣杯》中，守桥人向兰斯洛特爵士提出了三个问题，才允许他穿过死亡之桥。如果三个问题都答对，兰斯洛特爵士就能通过；如果答错，就会遭遇不幸的死亡。当被问到最喜欢的颜色时，兰斯洛特爵士回答“蓝色”，并获准通过。

我们回答的是“橙色”。

致歉与透明度

首先，对于延迟回复表示歉意。我们一直在关注反馈，阅读了每一条意见，并就后续步骤进行了“热烈”的讨论。我们相信我们有一个合理的计划，并希望与大家分享，我们也期待就这个我们现在知道是如此具有争议性的话题继续对话。

为了完全透明，我们想分享一些历史，因为我们认为这有助于理解我们最初是如何采用橙色的。

欢迎加入大家庭

早在三月，我们（更广泛的Visual Studio团队）着手为我们生产的所有开发工具创建一种“家族”感。如果你再读一遍那篇博客文章，你会发现我们必须在一套“具有挑战性”的企业品牌指南（例如，单一颜色）内工作。

把责任归咎于指南很容易，但与此同时，拥有一套易于广泛识别的产品是一项宝贵的资产。相反，我们接受了在限制内工作的挑战，同时也在公司内部努力改进指南并解决我们面临的问题。

当我们看到最初的图标集收到负面反馈时，我们便全身心投入到VS Code图标的设计中。我们希望制作出一个能让广大社区和我们都立刻感到视觉和情感上都吸引人的图标。

以下是一些早期设计

除了右上角的那个，这些设计都没有真正吸引我们。

这个被否决了，因为它不包含任何折叠，而折叠是家族设计的一个组成部分。回到绘图板。

我们对无限符号进行了多次迭代，例如

包括一个会让你眼睛疼的

直到我们确定了当前的“鱼”形图标，虽然只有少数开发者参与测试，但结果良好。

旋转

我们在macOS（和Linux）上有更多的设计自由度，这就是为什么我们在那里有不同的图标。虽然我们想保持相同的图标形状，但我们不限于单一颜色，并且可以通过将图标安装在深色面板上来解决对比度问题。旋转实际上遵循了Apple设计指南。

话虽如此，关于旋转过时以及安装方式使得图标在Dock中看起来比其他图标小这方面的反馈是完全公正的。

疲惫

到仲夏时，图标疲劳感袭来。我们已经做了太多次迭代，最终我们说就用现在的形状吧，并且为内部测试版（Insiders）检查了“预发布”设计。预发布版由右下角的哈希框表示。

在较大尺寸（例如PowerPoint幻灯片上）时，哈希看起来很棒，但在较小尺寸时，盒子会变得非常模糊，图标也变得模糊不清。我们尝试了白色、黑色以及不同深浅的橙色和绿色的多种轮廓。这里将其放大以查看边缘。

为了解决这个问题，我们还尝试将macOS版本应用到Windows上，结果看起来格格不入，在小尺寸下甚至更糟。最终，我们决定放弃预发布设计，为内部测试版使用不同的颜色。绿色可用，而且是现有的内部测试版颜色，所以我们选择了它。

瞧，内部测试版！

图标占用

在VS Code出现之前，有Visual Studio Monaco，这是一个完全基于浏览器的工作台，允许你实时编辑Azure App Service网页应用。由于它是一个在线产品，我们需要一个图标，所以我们“借用”了蓝色的无限符号。

当我们首次发布VS Code时，一切都发生得如此迅速，图标是我们最不关心的问题。无论你如何看待新图标，旧图标在桌面、任务栏和Dock上看起来都相当糟糕，它最初的目的只是一个网站图标。

后来，当我们决定家族中的每个产品都拥有自己的颜色，而且蓝色已经被占用，我们就不得不想出别的东西。另外，我们是从他们那里“偷”来的，所以归还似乎是正确的：）。

南瓜香料

此时，我们几乎用尽了家族调色板中的颜色，除了现在臭名昭著的橙色。有人担心它与Sublime Text的颜色调色板相似，但在我们测试时没有人提出异议。老实说，我们对最新Sublime使用折叠缎带感到更惊讶。

如何快速获得大量反馈...

内部测试版（Insiders builds）使用了橙色和绿色图标大约2个月，期间我们迭代解决了上述问题，但并没有收到太多负面反馈。

也许我们的担忧是没有根据的。也许用户真的会喜欢新图标，而针对少数问题的焦虑不值得失眠。我们决定不点亮一个可能不是问题的东西。我们推动了更改，并在发行说明中对新图标做了小小的提及。

然后，问题和评论开始蜂拥而至。

每天都有新的评论，每条都以新颖有趣的方式表达对新图标的不满。最初的几天过后，我们以为反馈会减缓，我们能够逐一解决问题。结果，我们错了。反馈源源不断。新的问题被提出，评论来得比我们回复得还快。Hacker News，Visual Studio Magazine。高中朋友在Facebook上发表评论。太棒了。

你真是好样的，蓝色！

这就把我们带到了今天。

我们已经审阅了自我们发布1.17.0（其中引入了稳定版的橙色图标）以来所有已提出和评论的广泛反馈。很明显，VS Code的万圣节发布对许多人来说效果不佳，为此我们深表歉意。

巧合的是，在我写这篇文章时，mdb07a做得很好，总结了Windows上的反馈和问题。我在此转述，还有更多问题，但主要问题是：

• 颜色变化过于剧烈，橙色与蓝色是反色，使得以前看起来不错的，现在看起来很糟糕。
• 扁平的单色图标完全依赖透明度来创建负空间，使其辨识度降低，加剧了区分问题。
• 新边框又大又粗，比无限符号更引人注目。

在macOS上，最普遍的反馈是倾斜看起来过时，并且使得图标的重要部分在Dock中比其他图标显得小。

所有这些反馈促使我们回去看看是否能在继续创造产品家族的同时做得更好。因此，我们将把稳定版图标改为备受喜爱的蓝色。

它与状态栏和编辑器中的其他蓝色搭配得很好

对于难以区分稳定版（Stable）和内部预览版（Insiders）的用户，绿色和蓝色搭配效果更好。这是使用Sim Daltonism应用（绿色盲）看到的两个图标：

我们不可避免地会有多个产品共享颜色，所以我们不再担心VS Code共享蓝色。

我们正在探索为macOS使用非倾斜图标，这是基于@donysukardi在这里的评论。我们还不能确定会这样做，但我们正在探索，无论如何，我们都会在该问题中发布更新。

展望未来

从橙色改为蓝色并不能解决所有问题，但这向前迈出了一步。我们确实期望图标设计继续演变，并对VS Code在家族中的新想法持开放态度。

我们从图标更改的演变和推广中吸取了艰难的教训，谢谢你们。对于那些喜欢橙色图标的人，我们希望你们更喜欢蓝色。

谢谢，Chris