上个月，我们发布了 Mac 应用的 70 版本，其中包含 macOS Big Sur 的重大 UI 刷新。虽然我们的设计团队花费了很长时间来设计在更新的操作系统中让 Sketch 看起来最好的方式，但他们还有另一个项目需要考虑——Mac 应用的新图标。
UI 需要数百小时的工作才能达到像素级的完美，但是重新设计一个图标（可能每天都在你的 Dock 中并且在你的眼前）也不是一件小事。
本周，我们与该项目的设计负责人 Prekesh 坐下来，了解他如何重新构想新时代的 Sketch 图标，以及为什么它从来不像重新创建我们著名的菱形那样简单。
实验
重新构想在整个行业中如此知名的图标并非易事。对于 Prekesh 而言，目标是尝试做一些新的事情，同时保持 Sketch 的本质。
“我想我将创建的第一个文档称为‘绝对不是白色框上的菱形’”，他带着一丝苦笑说道。“我们尝试尽可能多地探索想法和选项，看看我们能用 Big Sur 的新风格做些什么。” 他并不是在开玩笑。该过程从 iPad 上的近 50 个概念开始，使用 Apple Pencil 绘制。
他解释说：“我只是开始勾勒出脑海中浮现的一堆想法，无论多么古怪。” “目的是将想法扔到墙上，看看哪些行得通，哪些行不通，以及我们可以继续推进什么。” 接下来，他将这些图纸导入 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 的新设计以及 Apple 自己的图标——他是 Apple 的忠实拥护者。“我喜欢新的方向，”他说。“图标的圆形矩形的限制无疑会鼓励人们更有创意地使用该空间。”
回顾重新设计如此著名的图标的过程，Prekesh 承认他感到肩负着巨大的责任。“起初有点超现实，因为我基本上在整个职业生涯中都仰慕了以前图标的设计师，”他解释说。“对于 Emanuel Sá（我们的首席设计官）和 Marcelo Marfil（我们的设计总监）委托我探索并创建应用程序图标的下一个版本，我感到非常高兴。但是压力很大！” 他笑着说。
Sketch 电影宇宙
仿佛重新设计每天在你的 Dock 中看到的图标还不够，但这并不是旅程的终点。除了你使用的 Mac 应用版本外，我们还维护了几个测试版本，每个版本都处于不同的开发阶段。 从 QA 团队的 Debug 版本和早期的 Experimental 版本，一直到我们的 Private 和 Public Beta 版本，我们为每个版本使用不同的图标，因此很清楚谁在测试什么功能以及何时测试。
以前，每个发行版本都有一个不同颜色的菱形。 在顶行：发行版、Beta 版和私有版。 在底行：内部版、实验版和调试版。
之前，我们只是用不同颜色的菱形来表示不同的版本。但在 Big Sur 上，Prekesh 决定玩点花样。“我想过一些点子，让图标呈现出从‘Xcode build’图标到公开发布图标的视觉进度，讲述一个故事，”他解释道。“但这只会让我们内部人员明白，对于这些图标来说，这并不是正确的方法。”
最终的结果是六个完全独特的图标，每个图标都有自己的配色方案和风格。Prekesh 有机会将早期那些更异想天开的想法变为现实。
这个受《黑客帝国》启发的方案差点成为了我们 Debug 版本的图标。最终，团队决定采用一个更接近 Xcode 蓝色 macOS 图标的设计。
“我们的 Experimental build 总是包含我们正在开发的最新功能，Glenn Hitchcock（设计团队的另一位成员）提出了一个想法，尝试一些能表明它真的‘与众不同’的东西。所以为什么不把菱形放在太空里呢？”
Experimental build 图标。在这种情况下，它确实名副其实。
那隐藏在幕后的图标呢？“那个有点搞笑。我们想在 Twitter 上预告新图标，所以我花了一天的大部分时间来绘制那块布，只是为了用在一个预告图片中，”他笑着说。“做了这么多工作之后，我意识到我们可以把它用作 Private Beta 图标。这样就节省了我一些时间！”
“Marcelo 特别告诉我不要在这上面花太多时间，因为它只是用在 Twitter 上，我还有更多图标要做，”Prekesh 笑着说。
对于 Prekesh 来说，挑战在于赋予每个图标自己的个性，并确保它能传达人们对该版本的期望。他对结果感到满意。公平地说，这些图标在团队内部也受到了欢迎。
团队全员合影。顶行：Release、Beta 和 Private。底行：Internal、Experimental 和 Debug
“我怀疑有些人会看到这些图标，并想将它们用作他们主要的 Sketch 图标，”他笑着说。“嘿，我只能说：我们正在招聘 - 快来加入我们！”
我们很高兴能让你看到我们在 Sketch 上所做工作的幕后花絮。你想看到什么？在社交媒体上告诉我们，我们会考虑你的想法，作为我们下一个幕后花絮的内容。现在，我们希望你喜欢使用最新的 Mac 版本。
