Sketch设计师:如何重新设计Sketch的工具栏图标?

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

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 翻译:静电

相关推荐

Sketch 78更新记录

Sketch版本 V78/78.1 发布于 2021 年 10 月20 日 Sketch 78.1主要改进 修复了在 macOS Monterey 上使用 OpenType 功能 ...

Sketch 77 新功能和改进

Sketch 77 近日发布,我们看看新的版本中有哪些新功能 节省点击次数 你们都知道,你们可以通过双击群组来深入了解它们 ...

微信扫一扫,分享到朋友圈

Sketch设计师:如何重新设计Sketch的工具栏图标?