编者注

本文首发于 Nikita Prokopov 的个人博客,原文 It’s hard to justify Tahoe icons,少数派经作者授权转载、翻译。

在编译过程中,我们参考了作者 @Nullpinter  的译文版本(发布于该作者的个人博客)的标题和部分二级标题,在此表示感谢。正文内容为少数派编辑部独立编译。


在读 1992 年版的《Macintosh 人机交互指南》(Macintosh Human Interface Guidelines)的时候,我发现了这张精美的插图:

随附的说明是:

时间快转到 2025 年,Apple 发布了 macOS Tahoe。最主要的变化?当数每个菜单选项都加上了不讨喜、容易使人分心、难以辨认、杂乱无章、支离破碎、让人感到疑惑和沮丧的图标(这是 Apple 自己的说法,可不是我编的!):

Sequoia → Tahoe

这就很糟糕了。但为什么呢?我们不妨深入探讨一下!

免责声明:本文混合了来自 macOS 26.1 和 26.2 版本的截图,均取自系统预装的 Apple 原生应用。截图前未修改任何系统设置。

图标应当具有区分度

图标的主要功能是帮助你更快地找到所需内容。

或许这听起来有违直觉,但给所有东西都加上图标却是错误的做法。与众不同的东西往往更加显眼,但如果所有东西都有一个对应的图标,那谁都没办法从中脱颖而出。

同样的道理也适用于颜色:黑白图标看起来很整洁,但并不能帮你更快地找到目标!

微软曾深谙此道:

在下图右侧版本的菜单中,你会发现定位「保存」(Save)或「共享」(Share)的速度要快得多:

右边的菜单看上去更清爽,也更整洁。

如果是彩色版本效果则会更好(文本与图标分离得更清晰,找起来更快):

我知道你可能不喜欢它的样子,我也不喜欢,毕竟要把这些图标处理好并非易事。但背后的原则是依然成立的:即便这个色彩选用未经实际设计的粗糙版本,也是更易用的。

应用间的一致性

具备一致性(consistency)的图标才是真正有用的图标,毕竟在找到这些图标之前,我得先掌握它们的它们大概都有什么共性。

例如在看到「剪切」(Cut)命令和它旁边的图标长什么样之后,那我下一次找寻「剪切」操作时或许就会省点功夫直接去找这个图标:

Tahoe 在这方面表现如何呢?请看「新建」图标的「五十度灰」:

我甚至把它们收集在了一起,好让这种荒谬感更加显而易见。

诚然,其中一些图标所代表的操作与其他不同,所以图标也有差异。但如果说创建「智能文件夹」和创建「日记条目」是两码事,下面这些又该如何解释呢?

或者这些:

还有这些:

还是别找借口了吧。

「打开」这个操作也是一样:

「保存」也是:

是的,其中一个保存图标竟然是个勾选的标记,而且它们甚至连箭头的方向都统一不了!

再看看「关闭」按钮:

「查找」(有时叫搜索,有时叫筛选):

「删除」(出自剪切-拷贝-粘贴-删除操作):

「最小化窗口」:

这些图标所对应的都不是什么生僻又特殊的功能,相反它们所代表的都是基础操作,是垒砌操作系统的基石。这些操作每个应用都有,并且布局上也总在相近的位置。它们看起来不应该有这么多花样!

应用内的一致性

图标也用于工具栏(toolbars)。从概念上讲,工具栏中的操作与通过菜单调用的操作是完全相同的,因此应该使用相同的图标。所以实现起来的方式也应该是最简单的:在同一个应用内、甚至通常同时出现在屏幕上的图标,保持一致能有多难呢?

那我们看看「预览」:

「照片」:同样的用了上述两种图标,但这次调换了一下顺序¯_(ツ)_/¯

「地图」和其他应用在「缩放」功能上的图标选用也常有差异:

图标复用

和完全不具备一致性类似的,另一个大忌是将同一个图标用于不同的操作。想象一下:我已经学会了下面这个图标代表「新建」:

并且我打开另一个应用也看到了它。「太棒了,」我想,「我知道这个图标是什么意思了」:

上当了吧!

你可能会想:好吧,下面这个图标代表「快速查看」:

有时候确实如此,但在另一些时候,这个图标的意思是「显示已完成项」:

有时候下面这个图标意味着「导入」:

但有时候它也代表着「更新」:

与上面提到的一致性问题类似,图标复用问题不仅发生在不同应用之间。有时你可以在工具栏看到这个图标:

然后在同一个应用的菜单里,发现同一个图标代表了别的东西:

有时完全相同的图标会在同一个菜单中相遇。

有时还会贴在一起。

有时它们甚至会将一整串相同的图标排成列:

这显然对谁都没帮助。如果所有图标都一样,用户很难快速定位到菜单项,也不会正确理解其背后所指代的功能。

目前为止图标复用最惨烈的案例是「照片」应用:

感觉那个负责为每个菜单项选择一个对应图标的人,可能头发都已经掉光了。

理解万岁。

细节要素过多

审视图标时,我们通常能包容它们在最终落地环节中的一些微小差异。例如下面这些理论上来说各不相同的路标,实际上都在帮助我们理解同一件事:

图标也是如此:如果你在一个地方画了一个飞出盒子的箭头,在另一个地方也画了同样的内容,但箭头的角度、描边的宽度,或者一个是实心的另一个不是,都不影响我们将这两个图标理解为同一个意思。

比如指望下面这个两个图标表达完全不同的两个意思是在想什么呢?得了吧!

两个仅仅在字号上有细微差别的字母 A:

铅笔代表「重命名」,但稍粗一点的铅笔就代表「高亮」?

方向不同的对角线箭头?

占据 2/3 空间的三个点 vs. 占据全部空间的三个点。认真的吗?

颜色更深的点?

一张因纸角是否折叠,或纸上是否有线条而改变含义的纸?

但「大 Boss」还得是箭头。下面这些箭头的意义各不相同:

按上面这张图的道理,用户必须专业到足以区分圆圈被挤压的程度、箭头从顶部向右还是底部向右出发,以及箭头末端各延伸了多长。

我在乎这些细节吗?说实话,不在乎。如果 Apple 能将这里的连续性一以贯之地应用到图标上,我或许会试试。但 Apple 指望我在一个地方区分「新建」的两种图标样式,同时又要我在另一个地方留意这种微小的细节?

抱歉,看完上面这一切之后,这已经是信任问题的范畴了。

细节过多

图标理应在一定距离外也易于识别。每个图标设计师都知道:太细即是禁忌。为了特定的美学追求偶尔可以包容,但你不能依赖细节。

Tahoe 菜单里的图标就可以说是太细了。它们中的大多数都容纳在 12×12 像素的正方形内(因为 Retina 屏幕的原因实际分辨率为 24×24),而且由于许多图标不是正方形,这些图标的某些尺寸往往小于 12 个像素。

这可没有多少发挥的空间!要知道 Windows 95 的图标甚至都是 16×16 的。如果我们按同时代最具代表性的每英寸 72 点的 DPI 来计算,我们能得到一个物理大小为 0.22 英寸(5.6 毫米)的图标——而在配备 254 DPI 屏幕的现代 MacBook Pro 上,Tahoe 的 24×24 图标换算下来为 0.09 英寸(2.4 毫米)。24 固然比 16 更大,但实际效果却是这些图标的面积变成了原来的四分之一!

模拟 72 DPI 下的 16×16(左)与 254 DPI 下的 24×24(右)的物理尺寸对比

所以当我看到下面这个菜单时:

我有些纠结了。我知道这些图标各不相同,但我很难分辨它们具体画的是什么。

即使放大 20 倍也依然是一团糟:

还有这三个不同的图标:

难道我应该在这里分清楚加号和星标吗?

有些线条比其他线条厚了半个像素,这竟然也是决定图标意义的关键:

这画的是箭头?

还是笔刷?

看,这里有个小照相机。

它甚至有一个更小的取景器,如果你放大 20 倍就几乎清晰可见了:

还有这里。一个方框,方框里有一个圆,圆里面还有小到只有 2 个像素高度的字母 i:

没看见?

我也没看见。但它确实有个 i……

还有下面这个居然是一个窗口!它甚至有「红绿灯」按钮!真是太可爱了:

请记住:这些都是 retina 像素,是真实像素的 1/4。乔布斯本人曾说过它们理应是不可见的。

It turns out there’s a magic number right around 300 pixels per inch, that when you hold something around to 10 to 12 inches away from your eyes, is the limit of the human retina to differentiate the pixels.

但 Tahoe 的图标却指望你能看清它们。

像素网格

当发挥空间有限时,每个像素都至关重要。审慎对待每一个像素,才能做出好的图标。

在 Tahoe 的图标这里,Apple 决定使用矢量字体来替代老式的位图(bitmaps)。这为 Apple 节省了资源——绘制一次,随处可用,并且还具备尺寸、显示分辨率和字宽上的灵活性。

但这样做是有代价的:字体很难在垂直方向上精确渲染,比如它们的尺寸无法直接与像素一一对应,描边宽度也无法与像素网格(pixel grid)形成 1 对 1 映射等。所以这些矢量字体虽然随处可用,但处处都模糊且平庸:

Tahoe 图标(左)及其像素对齐版本(右)

可用的像素越多,或图形越简单,它们的观感自然也会更好一点。

iPad OS 26 vs macOS 26

但「复杂的细节」和「微小的图标尺寸」是个致命的组合。在 Apple 发布 380+ DPI 的 MacBook 之前,我们仍然得在像素网格这件事情上多加留意。

令人困惑的隐喻

图标还可以有另一个功能:帮助用户理解命令的含义。

例如,在知晓特定使用上下文(移动窗口)的前提下,这些图标比文字更能快达意:

但这些图标发挥作用的前提是,用户必须理解图标上画的是什么。它必须是用户熟知对象和计算机操作之间的清晰转化(如垃圾桶 → 删除),是被广泛使用的符号、易于理解的图示。《人机交互指南》(HIG)指出:

比如最低级的错误是对对象的错误呈现。例如这是选中操作实际看起来的样子:

但选中操作的图标长这样:

老实说,我这篇随笔前前后后写了一个星期,但我至今完全不理解它为什么长这样。无边记/预览应用中有一个类似的对象,但它代表的一个文本框:

它在 SF Symbols 中也被叫做 character.textbox

那为什么它变成了「全选」的隐喻?我猜这可能是一个失误。

另一个地方则在 Mac 上使用了 iOS 的文本选择样式作为隐喻!

有些概念对应显而易见或约定俗成的隐喻。在这种情况下,不使用它们也是一种错误。例如书签:

Apple 出于某些原因选择了一本书:

有时你也有现成的界面元素可以用于图标,但这种做法也容易给用户造成混淆。比如长方形里的点看起来像输入密码而不是权限编辑:

再比如这里的图标显示的是「勾选」,但实际动作却对应「取消勾选」。

这是糟糕的情况:图标不仅没有提供帮助,反而主动误导了用户。

构建一个对象加上某种指示符的双层级图标也很诱人,比如一个复选框加一个叉号,意思理应是「删除复选框」:

或者一个用户加一个复选标记,意思理应「选择用户」:

所以不幸的是这类图标构造很少真的有效。用户不会根据你提供的积木来造句,他们根本没有兴趣去解这些谜。

寻找隐喻(metaphors)很难,相对来说名词比动词隐喻更好找,但菜单项大多是动词。「打开」这个操作看起来像什么?为什么会像一个指向右上角的箭头?

我并不是说 Apple 搞错一个显而易见的「打开」的隐喻,事实上确实没有这种隐喻。但这其实也是关键:如果你找不到好的隐喻,不使用图标比使用一个糟糕的、令人困惑或违背直觉的图标要好。

我喜欢通过一个游戏来测试隐喻的质量。即去掉标签,试着猜测含义。不信你试试:

只要够努力就能给每个操作找到一个完美对应的图标,这事儿纯属痴心妄想。这是一场从一开始就注定失败的战斗,再多的资金或「管理层决策」都无法改变这一点。这当中的问题百分之百也都是自找的。

话虽如此,我还是要在该表扬的地方表扬 Apple。他们选得好的那些隐喻,确实是非常直观:

成对操作

在所有令人困惑的隐喻中,有一个场景尤为特别:为那些功能完全相反的成对操作选择隐喻。比如撤销/重做、打开/关闭、左/右。

如果这些图标使用相同的隐喻,那效果是极好的:

因为这能节省你的时间和认知资源。学会一个,就能举一反三。

正因如此,为相互关联的成对操作使用不同的隐喻也是一个常见错误:

或者这里:

另一个错误是在没有成对操作的地方制造关联。比如「返回」和「查看全部」?

Tahoe 中有些菜单同时存在这两个错误。例如「显示/隐藏」缺少成对操作的关联性,而「已完成/子任务」之间却有:

「导入」与「共享」互为成对操作,而不是「导出」:

图标中的文字

再次引用 HIG:

HIG 的作者反对将文字作为图标的一部分。所以像这样的:

或者这样的:

至少在 1992 年是行不通的。

我表示同意,但 Tahoe 有更严重的问题:完全由文字组成的图标。比如这个:

很难分清「不应被字面阅读的、抽象的隐喻式图标文字」在哪里结束,而真正的文本又从哪里开始。图标和菜单操作文本在这里使用相同的字体、相同的颜色,那我该如何区分它们呢?图标在这里反而成了障碍:A...完成?Aa 字体?这些操作到底是什么意思?

我也许能理解下面这两个图标:

里面的点应该代表着什么,由此推导出下面这个图标的思维过程也可以理解:

但是这个图标呢?

没有任何装饰、没有任何效果,就是纯文本的 Abc,认真的吗?

文本转换

有人可能会认为使用图标来演示文本转换是个好主意。

比如当你看到这个:

或者这个:

或者这个:

仅凭图标就能理解文本会发生什么变化,图标即操作。

另外 BIU 对应的操作(加粗、斜体、下划线)在文本处理领域已有共识,那这样做似乎没有缺点?

不完全是。问题还是一样——文字图标看起来像文字而不是图标。此外,这些图标也是多余的,取第一个字母并重复一遍有什么意义?「Bold」(加粗)这个词本身就是以字母「B」开头的,读起来也不拗口,为什么要出现两次?当你再看它时:

它甚至作为快捷键提示又被重复了一次……

这个菜单其实有一个更好的设计方案:

而且 Apple 至少在 33 年前就知道了。

图标中的系统元素

操作系统当然会为了自己的目的使用一些视觉元素。比如窗口控件、大小调整手柄、光标、快捷方式等。在图标中使用这些元素也是错误的。

不幸的是,Apple 也掉进了这个陷阱。他们重复使用了箭头。

快捷键符号:

HIG 甚至有一个专门针对省略号(ellipsis)的章节,说明在菜单以外的其他地方使用是多么的危险。

而这正是 Tahoe 所面临的问题。

图标打断了阅读

如果没有图标,你可以直接从上到下扫视菜单,只读头几个字母。因为它们都是对齐的:

macOS Sequoia

但在 Tahoe 中,有些菜单项有图标、有些没有,所以它们的对齐方式也不一样了:

有些项目可能既有复选标记又有图标,或者只有其中一个,或者两个都没有,于是我们就遇到了这样的情况:

麻了。

特别提名

这个菜单值得单独拿出来说一说:

不同的动作使用相同的图标、没有显而易见的隐喻、不知为何让第一个图标比第二和第三个稍小一点。恭喜!它集齐了所有缺点。

HIG 还有参考价值吗?

我多次提到 HIG,你可能会想:一份 1992 年的界面手册在今天还有参考价值吗?计算机经历了巨变,我们不也该套用一份新的原则、设计和规范吗?

是,也不是。比如如何让图标适应黑白显示器的建议已经过时了。但设计规则——只要是好的规则——在今天依然适用,因为它们是基于人、而不是计算机的运作方式才提出来的。

人类不会每年发布一个新版本,我们的记忆力不会翻倍,我们的视力也不会变得更敏锐。注意力的运作方式一如既往。视觉识别、运动技能——这一切都和 1992 年一模一样。

所以没错,在我们直接与脑机接口相连之前,HIG 将永远具有参考价值。

结语

在我看来,Apple 选择了一项不可能完成的任务:为每个菜单项添加一个对应图标。而事实上根本没有足够多合理的隐喻来支撑这样的做法。

即便是有,这项任务的前提本身也值得商榷:所有东西都有图标,并不意味着用户能更快地找到他们想要的东西。

即便前提成立,我仍然希望我能说:考虑到目标宏伟,他们已经尽力了。但这也不是事实:他们在一致性地应用隐喻以及图标本身的设计方面,做得实在很糟糕。

Apple 成功地在一个操作系统版本中集齐了图标设计中的常见错误,而我希望这篇文章能帮助大家避免它们。我热爱计算机、热爱界面设计、热爱视觉交互。看到 30 年前就已经人人可用的好设计共识在今天被完全忽视或抛弃,让我感到很难过。

往好的方面想:拥有比 Apple 更好设计已经没那么难了!让我们为此干杯。新年快乐!

来自 SF Symbols:一个正在打电话的笑脸

注释

在审阅本文时,有人向我推荐了 Jim Nielsen 的文章,他的观点与我不谋而合。我认为这是我们的推论背后存在某种共同真理的迹象。

另外请注意:Safari 的「文件」菜单自 26.0 以来变得更糟了,以前它只有 4 个图标,现在有 18 个!

感谢 Kevin、Ryan 和 Nicki 阅读本文的草稿。

更新:鸣谢

> 关注 少数派公众号,解锁全新阅读体验 📰

> 实用、好用的 正版软件,少数派为你呈现 🚀

51
9