图标演变之旅
2017年10月24日 Chris Dias,@chrisdias
总结
感谢所有热情的反馈。这些反馈非常有用、令人痛苦,同时也很有趣。我们将稳定版(Stable)的橙色图标改为蓝色,并将预览版(Insiders)保持为绿色。
![]()
你最喜欢的颜色是什么?
在《巨蟒与圣杯》中,守桥人问兰斯洛爵士三个问题,然后才允许他穿过死亡之桥。如果兰斯洛爵士全部答对,他就可以通过。如果答错,就会过早死去。兰斯洛爵士在被问到最喜欢的颜色时回答了蓝色,并被允许通过。
我们回答的是“橙色”。
致歉与透明度
首先,为延迟回复表示歉意。我们一直在关注反馈,阅读了每一条意见,并就下一步措施进行了“热烈”的讨论。我们相信我们有了一个合理的计划,希望与大家分享,并期待就这个我们现在知道的极具争议性的话题继续对话。
为了完全透明,我们想分享一些历史背景,我们认为这有助于理解我们当初是如何选择橙色的。
欢迎加入这个大家庭
早在三月份,我们(更广泛的 Visual Studio 团队)就着手为我们生产的所有开发工具创建一种“家族”感觉。如果你再读一遍那篇博客文章,你会发现我们必须在一套“具有挑战性”的公司品牌指南(例如,单一颜色)内进行工作。
把责任归咎于指南很容易,但同时,拥有一套易于识别且广为人知的产品是一种宝贵的资产。相反,我们承担了在约束内工作的挑战,同时也与公司上下合作,发展指南并解决我们面临的问题。
当我们看到对第一套图标的负面反馈时,我们一头扎进了 VS Code 图标的设计。我们希望设计出一个能让广大社区和我们自己都觉得即时、视觉上和情感上都具有吸引力的图标。
这是一些早期的设计

除了右上角那个,这些设计都没有真正让我们眼前一亮。
![]()
这个被否决了,因为它不包含任何折叠,而折叠是家族设计的一个组成部分。回到画板。
我们对无限标志迭代了一段时间,例如

包括一个会让你眼睛疼的设计

直到我们确定了当前的“鱼”形,这个设计在数量有限的开发人员中测试良好。
旋转
我们在 macOS(和 Linux)上有更多的设计自由,这就是为什么我们在那里有不同的图标。虽然我们想保持相同的图标形状,但我们不限于单一颜色,并且可以通过将图标安装在深色面板上解决对比度问题。旋转实际上遵循了苹果设计指南。
话虽如此,关于旋转过时以及安装使得图标在 Dock 中看起来比其他图标小很多的反馈是完全合理的。
疲劳
到仲夏时,图标疲劳感袭来。我们已经进行了如此多的迭代,最终我们决定采用当前的形状,并将“预发布”设计用于 Insiders。预发布由右侧和底部的哈希框表示

哈希框在尺寸较大时看起来不错(例如在 PowerPoint 幻灯片上),但在尺寸较小时,框会非常模糊,图标也会变得不清晰。我们迭代了许多白色、黑色以及不同深浅的橙色和绿色的轮廓。这里将它们放大以查看边缘。

为了解决这个问题,我们还尝试了 Windows 上的 macOS 版本,但这看起来格格不入,在小尺寸下甚至更糟。最后,我们决定放弃预发布设计,转而为 Insiders 使用不同的颜色。绿色是可用的,而且是现有的 Insiders 颜色,所以我们就采用了绿色。
瞧,Insiders 版

图标占用
在 VS Code 出现之前,有 Visual Studio Monaco,这是我们完全基于浏览器的 Workbench,让你可以实时编辑 Azure App Service Web 应用。由于它是一个在线产品并且我们需要一个图标,我们“借用”了蓝色的无限符号。
当我们第一次发布 VS Code 时,一切都发生得很快,图标是我们最不关心的问题。不管你对新图标有什么看法,旧图标在桌面上和任务栏及 Dock 中看起来都相当糟糕,它最初真的是 meant to be 一个网站图标。
![]()
后来,当我们决定家族中的每个产品都有自己的颜色时,由于蓝色已经被占用,我们不得不拿出别的东西。此外,我们是从他们那里偷来的,所以把它还回去似乎是正确的 :)
南瓜香料
此时,我们几乎用完了家族调色板中的颜色,只剩下了现在臭名昭著的橙色。有人担心与 Sublime Text 的调色板相似,但在我们测试时没有人提出异议。老实说,我们对最新的 Sublime 使用折叠彩带感到更加惊讶。
如何快速产生大量反馈...
Insiders 版本使用橙色和绿色图标大约两个月,因为我们迭代了上面概述的问题,但并没有太多负面反馈。
也许我们的担忧是没有根据的。也许用户真的会喜欢新图标,而对一些问题的焦虑不值得失眠。我们决定不对可能不是问题的事情大做文章。我们推出了更改,并在发行说明中对新图标进行了少量提及。
然后问题和评论开始涌入。
![]()

每天都有额外的评论,每条评论都以新的有趣方式表达对新图标的不满。在前几天之后,我们以为反馈会放缓,我们将能够解决个别问题。事实证明,我们错了。反馈源源不断。新的问题被打开,评论涌入的速度快于我们能回应的速度。Hacker News、Visual Studio Magazine。高中朋友在 Facebook 上发表评论。太棒了。
你是我的男孩,蓝色!
这就把我们带到了今天。
我们回顾了自从我们发布 1.17.0(其中引入了稳定版橙色图标)以来所有已打开和评论的问题的全部反馈。很明显,VS Code 的万圣节发布对很多人来说效果不佳,为此我们深表歉意。
巧合的是,在我写这篇文章时,mdb07a很好地总结了 Windows 上的反馈和问题。我是在转述,还有更多问题,但最主要的问题是
- 颜色变化太过剧烈,橙色与蓝色是相反的颜色,使得以前看起来不错的东西现在看起来很糟糕。
- 一个完全依赖透明度来创建负空间的扁平单色图标使其辨识度降低,加剧了区分性问题。
- 新边框又大又粗,比无限符号更引人注目。
在 macOS 上,最普遍的反馈是倾斜看起来过时,使得图标的重要部分在 Dock 中看起来比其他图标小。
所有这些反馈都敦促我们回去看看是否可以在继续创建产品家族的同时做得更好。因此,我们将把稳定版图标更改为备受喜爱的蓝色。
![]()
这与状态栏和编辑器中的其他蓝色搭配得很好

对于难以区分稳定版和预览版的用户,绿色和蓝色搭配在一起效果更好。这是使用 Sim Daltonism 应用程序(红色盲)查看的两个图标

不可避免的是,我们将有多个产品共享颜色,所以我们不再担心 VS Code 共享蓝色。
我们正在探索为 macOS 使用非倾斜图标,基于 @donysukardi 在这里的评论。我们还不能说我们一定会这样做,但我们正在探索它,无论如何,我们都会在该问题中发布更新。
展望未来
从橙色改为蓝色并不能解决所有问题,但这向前迈出了一步。我们确实希望图标设计能够继续发展,并愿意接受家族内 VS Code 的新想法。
我们吸取了关于如何演变和推出图标更改的艰难教训,所以谢谢你们。对于那些喜欢橙色图标的人,我们希望你们更喜欢蓝色。
谢谢,Chris