UI界面设计

macOS Big Sur版Sketch 70的新图标设计过程故事

2450

上个月，Sketch发布了Mac应用程序的版本Sketch 70，其中包含针对macOS Big Sur的UI更新。尽管Sketch的设计团队花了很长时间研究最佳方法，以使Sketch在更新的OS中看起来很棒，但他们还有另一个项目需要考虑-Mac应用程序的新图标。

UI设计师需要数百小时的工作才能获得完美的像素体验，但是要重新设计一个可能整天都放在Dock中（并且在您眼前）的图标，不是一件容易的事。

本周，我们与项目的设计负责人Prekesh进行了座谈，以了解他如何重新构想一个新时代的Sketch图标，以及为什么它从来没有像重新创建我们著名的sketch钻石图标那样简单。

重塑

整个行业内如此知名的图标绝非易事。对于Prekesh，目标是尝试做一些新的事情，同时保持Sketch的自身特色。

他笑着说：“我想我的第一份图标设计文件绝对不是白盒子上的钻石。” “我们尝试探索尽可能多的想法和选择，以了解我们可以使用Big Sur的新样式做什么。” 他不是在开玩笑。该过程从他在iPad上使用Apple Pencil绘制的近50个概念开始。

他解释说：“无论多么古怪的念头我都有想过。” “目标是将想法都拿出来，看看有什么是可行的，哪些是不可行的。” 接下来，他将这些图纸放入Sketch中，并开始以更高的保真度探索不同的方法。

在最初的素描阶段，Prekesh有一些有趣的探索想法：“并不是所有这些想法实际上都能真正变成应用程序图标，但是我将最喜欢的图标带到了Sketch中。”

当他在我们内部的Slack频道发布更新后，新的点子越来越多，这让他从团队中的其他设计师那里获得了大量有用的反馈。普雷克斯（Prekesh）考虑了彻底重塑该应用程序图标的利弊。

在探索了将矢量编辑和钢笔图形结合的设计后，Prekesh发现，随着图标的缩小，这些想法变得混乱了-此外，Sketch远不止矢量编辑这一项功能。

Prekesh在制作诸如铅笔之类的额外工具上也花费了大量时间，但是这些想法太过单一了。

他解释说：“我们尝试过远离钻石，但考虑到它是我们品牌的重要组成部分，所以放弃了这样的想法。” “因此，我们创建了一堆新的钻石形状-有些具有透视图，有些没有透视图；有些面多一些，有些少一些。” 于是，这就成了一个问题，如何让他们与背景有机的结合起来。

他开始转向使用钻石的想法，但方式不同。通过采用旧的自上而下的替代图标，他进行了研究并对其进行了调整，以使其适合于松鼠形状。

平衡

在前景形状和背景之间取得平衡非常困难。他说：“我们很快发现，在圆角矩形背景和钻石之间经常存在视觉上的冲突感。”

这些是第一个在图标中包含Sketch UI元素的想法。普雷克斯（Prekesh）尝试在菱形和侧边栏中增加一些透明度。

随着概念工作的不断进行，窗户和钻石的隐喻一直存在。平衡背景和菱形被证明是一个挑战，这让Prekesh略微简化了背景。

随着工作的进展，两个设计映入了我们的眼帘，两者的背景相似-一个使用与我们目前的钻石非常接近的元素，另一个使用更立体的方法。

自从图标重绘工作开始以来，Prekesh还致力于开发新的3D钻石版本。您将在此页面上的其他所有模型中看到这个稍微倾斜的变体。

然后，他使用Blender创建了粗糙的3D渲染。

最后，经过数周的内部测试以及公司各团队的大量投入，这一决定很明确。这将是我们的最终图标：

通过将图标的背景还原为基本内容，并在侧边栏上添加微妙的透明度，我们认为它实现了很好的平衡。

一切都在细节中

对于Prekesh来说，正是这些小细节使我们的新图标变得与众不同。他说：“我喜欢它的微妙之处。” “有些细节和迭代会更新前一个图标，但这不是非常大的变动。” 但是，在他绘制了所有古怪的草图之后，他是否对我们最终设计出让人感到熟悉的设计感到失望？他解释说：“并非如此。经过我们的所有探索，这是正确的选择。” “而且我喜欢一些细微的细节。圆角矩形背景实际上是Sketch的Big Sur用户界面的简化表示，左侧的侧边栏具有透明性，这意味着它会略微呈现墙纸的背景颜色。” 钻石本身也是一种传承-Prekesh对图标进行了重新绘制，以改善对比度并使其更具活力。另外，新的，更深的阴影使它感觉好像真的在UI前面浮动。

侧边栏中的微妙透明性意味着您可以通过图标观察到墙纸的颜色。

普雷克斯（Prekesh）说，他从Big Sur的新设计以及Apple自家的图标中汲取了灵感。他说：“我喜欢这个新方向。” “对图标的圆角矩形的限制无疑将鼓励人们更创造性地使用该空间。”

在重塑这样一个著名图标的过程中，Prekesh承认他感到肩负着巨大的责任。他解释说：“起初想的有点多，总想做大的改变。” “对于Emanuel（Sá，我们的首席设计官）和Marcelo（Marfil，我们的设计总监）委托我探索和创建应用程序图标的下一个版本，我感到非常棒。但是压力实在是不小！” 他笑了。

Sketch隐藏图标展示

除了你在Dock中每天看到的金黄色钻石图标，以及您使用的Mac应用程序的版本，我们还维护多个测试版本，每个版本都处于不同的开发阶段。从质量检查小组的Debug版本和早期的实验版本，一直到我们的Private和Public Beta版本，我们对每个版本的程序使用不同的图标。

以前，每个发行版本都有不同的彩色钻石。第一行：Release，Beta和Private。第二行：内部版本，实验版本和调试版本。

以前，我们只是使用不同颜色的钻石来表示不同的版本。但是对于Big Sur来说，普雷克斯（Prekesh）决定找点乐子。他解释说：“我想到了从Xcode build图标一直到公开发布图标的文字视觉上的进步，并且它们讲述了一个故事。”

结果是六个完全独特的图标，每个图标都有自己的配色方案和风格。对于Prekesh来说，这是一个将这些早期的，更古怪的想法变为现实的机会。

这种受Matrix启发的设计几乎成为了Debug版本的图标。最后，团队决定设计一种更接近Xcode的蓝色macOS图标的设计。

“我们的实验版本始终包含我们正在开发的最新功能，Glenn （设计团队的另一位成员）想到尝试一些表明它确实在“那里”的东西。为什么不把钻石放到太空呢？”于是，太空版本的钻石出现了。

实验版本图标，它确实做到了名副其实

那么隐藏在窗帘后面的图标呢？“这件事说起来挺有趣，我们原本想在Twitter上发布这个新图标，所以我花了整整一天的时间画出要用于预告片图像的布料，”他笑着说。“完成所有这些工作后，我意识到我们可以将其实际用于Private Beta图标。这样就节省了我一些时间！”

“ Marcelo明确地告诉我不要花太多时间，因为那是给Twitter使用的，但我仍然需要在图标上做更多的工作，” Prekesh笑着说。

对于Prekesh而言，挑战在于为每个图标赋予其自己的身份-并确保它传达了人们对该版本的期望。

第一行：Release，Beta和Private。第二行：内部版本，实验版本和调试版本。