上个月，我们发布了 Mac 应用程序的 70 版，其中包含了针对 macOS Big Sur 的主要 UI 更新。虽然我们的设计团队花了很长时间来研究如何让 Sketch 在更新后的操作系统中看起来很棒，但他们还有另一个项目要考虑——Mac 应用程序的新图标。
UI 需要数百小时的工作才能做到像素完美，但重新设计一个图标，它可能整天、每天都停留在你的 Dock 中（就在你眼前），这也不是一件容易的事。
本周，我们与该项目的首席设计师 Prekesh 坐下来，了解他是如何重新构思 Sketch 图标以适应新时代的，以及为什么这永远不会像简单地重新创建我们著名的钻石一样简单。
实验
重新构思一个在整个行业中如此知名的图标绝非易事。对于 Prekesh 来说，目标是尝试做一些新的东西，同时保持 Sketch 的本质。
“我想我创建的第一个文档叫做‘绝对不是白盒子上的钻石’，”他带着狡黠的笑容说。“我们试图探索尽可能多的想法和选项，看看我们能用 Big Sur 的新风格做到什么。” 他没有开玩笑。这个过程从在 iPad 上用 Apple Pencil 绘制的近 50 个概念开始。
“我只是开始草拟一些出现在我脑海中的想法，无论它们多么古怪，”他解释道。“目标是把想法抛到墙上，看看哪些有效，哪些无效，以及我们可以继续哪些。”接下来，他将这些图画带入 Sketch，并开始以更高的保真度探索不同的方法。
Prekesh 在最初的草图阶段探索了一些有趣的想法：“这些想法并不一定都能真正成为应用程序图标，但我把我最喜欢的那些带进了 Sketch。”
当他在我们内部 Slack 频道发布更新时，兴奋开始增长，他从团队中其他设计师那里获得了大量有用的反馈。一些更“超前”的设计确实引起了人们的兴趣，因为 Prekesh 考虑了彻底重新设计应用程序图标的优缺点。
在探索了将矢量编辑和钢笔融入图标的一些方法后，Prekesh 发现这些想法在图标缩小后变得杂乱——而且，Sketch 远不止是一个矢量编辑器。
Prekesh 很享受制作铅笔等额外工具，但这些想法过于单色。
“我们尝试过放弃钻石，但这似乎有点愚蠢，因为它是我们品牌的重要组成部分，”他解释道。“所以我们创建了一堆新的钻石形状——有些有透视，有些没有；有些有更多面，有些有更少面。”从那时起，问题就变成了哪些最有效，以及如何将这些元素与不同的背景相结合。
他开始转向使用钻石但以不同方式使用钻石的想法。通过采用他以前使用过的旧的替代自上而下的图标，并对其进行调整以适合圆角矩形形状。
找到平衡
在前景形状和背景之间取得平衡特别困难。“我们很快发现，圆角矩形背景和钻石之间经常存在视觉冲突，”他说。“我们知道我们需要找到一种方法让它们相互补充，而不是为了吸引观众的注意力而争斗。”
这些是第一个将 Sketch UI 元素包含在图标中的想法。Prekesh 尝试在其中加入一些透明度——在钻石和侧边栏中。
随着概念工作的继续，窗口和钻石的比喻仍然存在。平衡背景和钻石证明是一个挑战，这导致 Prekesh 对背景进行了一些简化。
随着工作的进展，两个领先者出现了，它们都采用了类似的背景——一个使用非常接近我们当前钻石的东西，另一个采用了更 3D 的方法。
由于我们正在更新图标，因此 Prekesh 还制作了钻石的新 3D 版本。你会看到这个略微倾斜的变体在该页面上的其他模型中使用。
然后他使用Blender 创建粗略的 3D 渲染用于照明参考。
最终，经过几个星期的内部测试以及来自公司各个团队的大量投入，答案显而易见。这将是我们最终的图标
通过将图标的背景简化到最基本的形式，并向侧边栏添加微妙的透明度，我们认为它达到了很好的平衡。
细节很重要
对于 Prekesh 来说，使我们的新图标特别的是那些细微之处。“我喜欢它的微妙之处，”他说。“有一些细节和迭代更新了以前的图标，但并没有偏离使 Sketch 图标成为 Sketch 图标的东西。”但在经历了他所有古怪的草图之后，他是否对我们最终选择了人们会觉得熟悉的设计感到失望呢？
“没有，这才是我们在探索了所有可能性之后，感觉最合适的选择，”他解释道。“而且有一些细微的细节我非常喜欢。圆角矩形背景实际上是对Sketch Big Sur 用户界面的简化表示，左侧的侧边栏具有透明度，这意味着它会轻微地呈现你壁纸的背景颜色。”钻石本身也得到了一些改进——Prekesh 从头开始重新绘制和重新着色，以提高对比度并使其略微更鲜艳。此外，一个新的、更深的阴影使其看起来像是真的漂浮在 UI 前面。
侧边栏中的微妙透明度意味着你可以通过图标看到你壁纸的暗示。
Prekesh 说，他从 Big Sur 的新设计以及苹果自己的图标中获得了灵感——他非常喜欢这些图标。“我喜欢这个新方向，”他说。“对于图标来说，圆角矩形的限制无疑会鼓励人们更具创造性地利用这个空间。”
回想起重新设计这样一个知名图标的过程，Prekesh 承认他感到肩负着巨大的责任。“起初有点超现实，因为我一直以来都仰慕以前图标的设计师，”他解释道。“让 Emanuel Sá（我们的首席设计官）和 Marcelo Marfil（我们的设计总监）委托我探索和创作应用程序图标的下一个版本感觉很棒。但压力很大！”他笑着说。
Sketch 电影宇宙
好像重新设计你每天都会在 Dock 中看到的图标还不够具有挑战性，这还不是旅程的结束。除了我们使用的 Mac 应用程序版本，我们还维护着多个测试版本，每个版本都处于不同的开发阶段。从 QA 团队的 Debug 版本和早期的 Experimental 版本，一直到我们的 Private 和 Public Beta 版本，我们对每个版本都使用不同的图标，这样就能清楚地知道谁在测试哪些功能以及何时测试。
以前，每个发布版本都有一个不同颜色的钻石。在最上面一行：Release、Beta 和 Private。在最下面一行：Internal、Experimental 和 Debug。
之前，我们只是用不同颜色的钻石来表示不同的版本。但是对于 Big Sur，Prekesh 决定玩点花样。“我想到了一些想法，从 ‘Xcode 构建’ 图标到公开发行图标，都存在着直观的视觉进展，并且它们讲述了一个故事，”他解释说。“但那只对我们内部人员有意义，对于这些来说，感觉不是正确的做法。”
最终的结果是六个完全独特的图标，每个图标都有自己的配色方案和风格。这是 Prekesh 将一些早期更奇特的想法付诸实践的机会。
这个受《黑客帝国》启发的设计几乎成为了我们调试版本的图标。最后，团队决定选择一个更接近 Xcode 蓝色 macOS 图标的设计。
“我们的实验版本总是包含我们正在开发的最新功能，而 Glenn Hitchcock（设计团队的另一名成员）则想到用一些东西来表明它真的是 ‘走在时代前沿’ 的。所以为什么不把钻石放在太空中呢？”
实验版本图标。在这种情况下，它确实名副其实。
而隐藏在幕后的图标呢？“那个有点滑稽。我们想在 Twitter 上取笑一下新图标，所以我在一天的大部分时间里都在绘制用来遮蔽的布料，它原本只会在预告片图像中使用，”他笑着说。“做了这么多工作后，我意识到我们实际上可以把它用作我们的私人测试版图标。这样就省了我一些时间！”
“Marcelo 特别告诉我不要在这个上面花太多时间，因为它是为了 Twitter，我还有更多工作要做，”Prekesh 微笑着说。
对于 Prekesh 来说，挑战在于赋予每个图标独特的身份——并确保它传达出人们对该版本应该期望的某种信息。他对结果感到满意。可以公平地说，它们在内部团队中也获得了很好的评价。
完整的团队集结。顶排：发行版、测试版和私人版。底排：内部版、实验版和调试版
“我怀疑有些人会看到这些并想把它们用作他们的主要 Sketch 图标，”他微笑着说。“嘿，我只能说：我们正在招聘——加入我们吧！”
我们喜欢让您一睹我们为 Sketch 所做的工作的幕后花絮。您想看什么？在社交媒体上告诉我们，我们将考虑您的想法，作为我们下次偷看的目标。现在，我们希望您喜欢使用最新的 Mac 版本。
