新Sketch设计背后的故事：如何重设计Sketch的工具栏图标？

静电说：Big Sur已经发布了快一年了。这些天，随着新版本MacOS的发布，Sketch开发团队的设计师Janik Baumgartner 分享了对于工具栏图标重新设计的心得。接下来这篇文章，我们可以从中学到一些有用的知识。第一，默认图标尺寸变化对不同密度显示器效果的影响。第二，如何为单色图标带来更多的可识别性。 第三，1.5pt线条如何进行描边填充处理？

在这之前我们也翻译了一篇关于Sketch设计师如何重塑Sketch图标的故事，大家可以看这篇 新Sketch图标背后的故事：如何为Big Sur重塑风格

Sketch作为一款关于设计的应用，小细节是非常重要的一环，因为这是Sketch这个产品的DNA。团队在设计工具栏图标的时候非常谨慎小心，以确保用户不会对这些最常用的内容感到不适应。

Big Sur中的大更新

新图标的一个微妙但重要的变化是尺寸。在 Catalina 中，工具栏图标的标准尺寸是 19 x 19px。在Big Sur（现在是Monterey中），它的尺寸是 24 x 24px。

Catalina 左侧的工具栏图标比 Big Sur 和 Monterey 中的新图标小五个像素

“通常，更大的尺寸允许我们为工具栏图标添加更多细节，但随着更新的出现，线条粗细略重，”Janik 解释道。以前，1pt 线是 macOS 工具栏图标的标准——对于 Big Sur 和 Monterey，标准线宽现在是 1.5pt。”他说。

新的单色图标

图标大小并不是 Big Sur 带来的唯一挑战。新工具栏图标的最大变化之一是没有颜色——这是 Sketch 的图标自十多年前首次发布以来一直存在的。Janik 强调说，“这对我们来说是一个巨大的挑战，因为 Sketch 带有一组相当复杂的工具栏图标——而且很多！”

“设计单色图标集的关键是确保为图标使用独特、清晰的形状，”他解释道。由于团队不能再依赖颜色，主要的识别因素必须是轮廓。“我们试图尽可能区分这些轮廓和形状。我们还专注于以易于浏览的方式对默认工具栏中的图标进行分组。”

新的Sketch风格

当谈到图标的风格时，团队显然希望确保 Sketch 在大苏尔和蒙特雷仍然有宾至如归的感觉。“我们曾短暂考虑过使用 Apple 自己的 SF Symbols，但由于它们旨在支持多种重量和尺寸，因此它们的边缘有时会显得有些模糊，”Janik 解释说。

经过大量讨论后，团队认为 Apple 的 Symbols 不适合在Sketch上使用。“对我们来说，突出图标中的关键细节很重要，让其他细节淡入背景，”他强调说。

事实证明，布尔运算的图标比较难以识别。在探索了几种不同的方法后，团队确定了这张图片中间的风格，将线条与填充形状相结合。

在尝试了几种不同的方法后，团队决定采用半填充样式，它提供了良好的易读性，同时又不会偏离 macOS 样式太远。团队创建了一组基于线条的图标，以较低的不透明度填充，这种方式很不错，并且仍然与新的 macOS 设计语言保持一致。这种风格长期以来一直是 Sketch 的一部分——确切地说是从Sketch 52版本开始的——帮助团队将他们自己的设计特征添加到组合中。他补充说：“它对我们来说非常有效，因为它让我们为更复杂的图标添加了所需的额外细节。”

暗黑模式

当然，由于 macOS 支持明暗模式，团队的工作还没有完成。他们选择创建一组自定义的、部分填充的图标，而不是使用 Apple 的 Symbols——这两种模式使用相同的基于行的图标。这意味着设计师需要单独调整它们，以确保每个图标都是完美的。

“我们必须牢记，图标需要在较暗的 UI 设置中易于观看，并且具有良好的易读性，”Janik说。“通过测试不同的不透明度级别，我们找到了满足我们要求的正确平衡点——即在符合黑暗主题的同时，还能让设计保持与众不同。”

设计1.5pt图标

在设计新图标时，线和点的增加成为最大的因素。“如果您没有以正确的方式将形状放置在像素网格上的话，带有 1.5pt 线条的图标在 Retina (@2x) 和非 Retina (@1x) 显示器上看起来非常模糊。”Janik 解释说。我们知道 4K 和 5K 显示器对于与像素网格不完全对齐的图标更为宽容——但他们认为让图标在低密度屏幕上看起来清晰也很重要。

这个问题的答案其实很简单——只要让形状的外边缘看起来很清晰即可。这意味着团队必须确保外线始终位于全像素上，而内边缘始终是半像素。

我们知道你在想什么——团队只是使用了内边框，对吗？不！Janik 解释了原因。

“虽然在某些情况下使用内部边框会更容易，但当你需要一个带有开放路径的图标时，事情很快就会变得混乱或不一致，”他说。“如果您仅对少数图标使用外边框或内边框，则始终需要仔细检查，是否计算了适合您系统的正确角半径或“视觉”形状大小。我们采用居中对齐的边界来确保开放路径和封闭路径之间的一致性。”

如您所见，当外边缘没有以完整像素展示时，图标最终看起来会很模糊。最后，Janik 将形状层的每边的周长扩大了 0.25pt，以在完成的图标上创建清晰的外边缘。

原文：https://uxdesign.cc/design-handoff-what-engineers-really-want-to-see-5fc0b5c3cdc2

作者：George George 翻译：静电