自从我们发布了针对 Big Sur 的主要重新设计 已经快一年了。随着 macOS 新版本的发布，我们认为是时候再次审视我们为 UI 大修所做的一些更改了——这次，重点关注工具栏图标。
作为一款设计应用，我们非常努力地将这些小细节做到完美——这已经融入到我们的 DNA 中。团队在重新设计工具栏图标时非常谨慎，以确保它们能够提供 Sketch 独有的特色，同时在 Mac 上也能显得恰到好处。为了帮助我们深入了解细节并分享一些幕后见解，我们采访了我们才华横溢的图标设计师 Janik Baumgartner。
Big Sur，重大更新
新图标的一个细微但重要的变化是它们的大小。在 Catalina 中，工具栏图标的标准大小为 19 x 19 像素。在 Big Sur（以及现在的 Monterey）中，它为 24 x 24 像素。
左侧的 Catalina 工具栏图标比 Big Sur 和 Monterey 中的新图标小 5 个像素
“通常，更大的尺寸可以让我们在工具栏图标中添加更多细节，但随着更新而来的是略微加粗的线条粗细，”Janik 解释道。以前，在 macOS 工具栏图标中，1pt 线是标准——Big Sur 和 Monterey 的标准线条粗细现在是 1.5pt。“将这两者与其他新的更改结合起来带来了独特的挑战。这是一件新鲜事物，”他说。
一层新鲜的（单色的）涂料
图标大小并不是 Big Sur 带来的唯一挑战。新工具栏图标最大的变化之一是缺少颜色——这是 Sketch 的图标自十多年前首次发布以来的特色。Janik 强调，“这一点对我们来说尤其是一个巨大的挑战，因为 Sketch 带有一组相当复杂的工具栏图标——而且数量很多！”
“设计一套单色图标的关键是确保您为图标使用独特的、清晰的形状，”他解释道。由于团队不能再依赖颜色，因此主要识别因素必须是轮廓。“我们试图尽可能区分这些轮廓和形状。我们还专注于以一种一目了然的方式对默认工具栏集中图标进行分组。”
找出新的 Sketch 风格
在图标的风格方面，团队显然希望确保 Sketch 在 Big Sur 和 Monterey 上仍然感觉很合适。“我们简要考虑过使用 Apple 自身的 SF Symbols，但由于它们旨在支持多种粗细和尺寸，因此它们的边缘有时可能会显得略微模糊，”Janik 解释道。
经过多次讨论，团队决定 Apple 的 Symbols 不适合 Big Sur 上的第一个 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，以在完成的图标上创建清晰的外边缘。
细微之处的美丽
“我们团队在工具栏重新设计方面获得的反馈令人惊叹，”Janik 分享道。“这是一个非常激动人心的挑战，绝对是团队的共同努力。能够向人们展示我们在 Sketch 的细枝末节上付出了多少努力，这真是太好了。”
以下是一些完成的工具栏图标，尽显其魅力。
我们喜欢向您展示我们在 Sketch 上工作的幕后花絮。您想看到什么？在社交媒体上告诉我们，我们会考虑您对我们下次偷看的想法。现在，我们希望您喜欢使用最新的 Mac 版本。
