为 Tahoe 图标辩护很难
本文信息来源:tonsky
我在阅读 1992 年的 Macintosh Human Interface Guidelines( 来源 )时,发现了这张不错的示意图:

并附带如下解释:

快进到 2025 年。Apple 发布了 macOS Tahoe。最大的“卖点”?是在每一个菜单项中添加令人不快、分散注意力、难以辨认、杂乱无章、拥挤、令人困惑、让人沮丧的图标(这是他们的说法,不是我的!):

它很糟糕。但究竟糟糕在哪里?让我们深入探讨一下!
免责声明:截图混合来自 macOS 26.1 和 26.2,仅取自系统预装的 Apple 原生应用。未修改任何系统设置。
图标应该起到区分的作用
图标的主要功能是帮助你更快地找到你想要的内容。
也许有点反直觉,给所有东西都加上图标恰恰是完全错误的做法。要想突出,事物就必须与众不同。但如果所有东西都有图标,那就没有任何东西能脱颖而出了。
同样的道理也适用于颜色:黑白图标看起来很干净,但它们并不能帮助你更快地找到东西!
Microsoft 以前是懂这一点的:

看看在右侧的版本中,你能多快找到 Save 或 Share:

它看起来也更干净、更不杂乱。
使用带颜色的版本会更好(文本与图标的区分更清晰,更容易快速找到):

我知道你不会喜欢它的外观。我也不喜欢。这些图标很难配合使用。你必须真正针对颜色进行设计才能好看。但这个原则依然成立:它用起来要容易得多。
应用之间的一致性
如果你希望图标真正起作用,它们就必须是一致的。我需要能够学会该看什么。
例如,我看到一个“剪切”命令,旁边还有 。好吧,我想。下次我在找“剪切”时,可能可以省点时间,直接去找
。
Tahoe 在这方面表现如何?我向你呈现:“新”的五十种样子:

我甚至把它们全部收集到一起,这样这种情况的荒谬性就更加明显了。

当然,其中一些是不同的操作,所以它们有不同的图标。我想,创建一个智能文件夹和创建一条日志条目确实不一样。但这个呢?

或者这个:

或者这个:

没有任何借口。
打开也是同样的问题:

存储:

是的。其中一个还是对勾。而且他们甚至连箭头的方向都无法统一!
关闭:

查找(有时被称为搜索,有时又叫筛选):

删除(来自“剪切-复制-粘贴-删除”的经典操作):

最小化窗口。

这些并不是什么冷门或独特的操作。这些都是操作系统的基础,是最根本的功能。每个应用都有,而且它们总是在同一个位置。它们不应该看起来不同!
同一应用内部的一致性
图标也用于工具栏中。从概念上看,工具栏中的操作与通过菜单调用的操作是完全相同的,因此应该使用相同的图标。这是最容易实现的情况:在同一个应用中,往往甚至在同一个屏幕上。保持一致到底有多难?
预览:

照片:同样的 和
不匹配,但却是反过来的 ¯_(ツ)_/¯

地图以及其他应用经常为变焦使用不同的符号:

图标的重复使用
另一个致命的大罪是用同一个图标表示不同的操作。想象一下:我已经学会 表示“新建”:

然后我打开一个应用,看到了 。“不错”,我想,“我已经知道它是什么意思了”:

知道了!
你可能会想:好吧, 表示快速查看:

有时可以。但在其他时候, 的意思是“显示已完成”:

有时 表示“导入”:

有时 表示“更新”:

和一致性问题一样,图标复用并不只发生在不同应用之间。有时你会在工具栏中看到 :

然后进入同一个应用中的菜单,看看 却表示其他含义:

有时,相同的图标会出现在同一个菜单中。

有时还会彼此相邻。

有时他们会把一整排完全相同的图标堆在一起:

这对任何人都没有帮助。如果所有图标都一样,没有任何用户会更快找到菜单项,也不会更好地理解其功能。
到目前为止,图标复用情况最糟糕的要数照片应用:

感觉负责为每个菜单项挑选一个独特图标的人已经黔驴技穷了。
可以理解。
细节过多
在查看图标时,我们通常会容忍实现上的细微差别。比如,这让我们能够理解这些在技术上并不相同的道路标志表达的是同一个意思:

图标也是如此:如果你在一个地方画的是一个从盒子里向外的箭头,而在另一个地方画的是箭头和盒子,但角度略有不同,或线条粗细不同,或其中一个是实心的,我们也会理解它们表达的是同一个含义。
比如说, 本来就应该和
表示不同的东西?得了吧!

或者只有两个字母 A、仅在字号上略有差别:

一支铅笔代表“重命名”,而一支稍微粗一点的铅笔却代表“高亮”?

使用不同对角线的箭头?

三个点占据 ⅔ 的空间 vs 三个点占满整个空间。认真的吗?

稍微更深色的点?

根据角是否被折起或里面是否有线条而改变含义的纸?

但最终的首领却是箭头。它们全都不一样:

据称,用户必须成为注意力方面的专家,去分辨那个圆被压扁了多少,是从上向右开始还是从下向右开始,以及箭头末端延伸了多远。
我在乎吗?说实话,不在乎。如果 Apple 能始终如一地用这些规则,我也许还会试着接受。但 Apple 在一个地方把 和
当作同一个意思,却又指望我在另一个地方注意到这种微不足道的细节?
抱歉,我无法信任你。在我见过这一切之后更不可能。
细节化
图标本应在远处就能轻松识别。每个图标设计师都知道:细小的细节是禁区。你有时可以为了美观加入它们,但你不能 依赖 于此。
而且 Tahoe 菜单里的图标非常小。大多数都只能放进一个 12×12 像素的正方形里(由于 Retina,实际分辨率是 24×24),而且因为很多图标并不是正方形,它们其中一个维度通常甚至还不到 12。
这点空间实在太有限了!就连 Windows 95 都有 16×16 的图标。如果按那个时代典型的 DPI——每英寸 72 个点来算,图标的物理尺寸约为 0.22 英寸(5.6 毫米)。而在一台配备 254 DPI 的现代 MacBook Pro 上,Tahoe 的 24×24 图标只有 0.09 英寸(2.4 毫米)。当然,24 比 16 大,但实际上,这些图标的面积却小了 4 倍!

所以当我看到这个时:

我很吃力。我能看出它们不一样,但我完全很难判断到底画的是什么。
即使放大 20×,依然一团糟:

或者这里。这是三个不同的图标:

我是该在这里区分加号还是闪光吗?

这些线条中有一些比其他线条粗了半个像素,而这居然被当成了主要设计点:

这应该是一个箭头吗?

一把画笔?

看,一个小小的相机。

它甚至还有一个更小的取景器,你在放大到 20× 时几乎才能看到:

或者看这里。有一个盒子,盒子里面是一个圆,而圆里面是一个微小的字母 i,总高度只有 2 个像素:

没看到吗?

我也没看到。但它确实在那里……
而这居然是一个窗口!它甚至还有交通灯!真可爱:

记住:这些是视网膜像素,只有真实像素的 1/4。史蒂夫·乔布斯本人曾声称它们是不可见的。
事实证明,大约在每英寸 300 像素左右存在一个神奇的数值,当你将物体放在离眼睛大约 10 到 12 英寸的距离时,这正是人类视网膜能够分辨像素的极限。
然而,Tahoe 的图标却依赖于你能够看清它们。
像素网格
当可用空间如此之少时,每一个像素都很重要。你可以做出一个好的图标,但前提是你必须非常谨慎地选择每一个像素。
对于 Tahoe 图标,Apple 决定使用矢量字体,而不是传统的位图。这为 Apple 节省了资源——画一次,到处使用。任何尺寸、任何显示分辨率、任何字重都可以。
但这也有缺点:字体在垂直方向上很难定位,它们的大小 并不能直接映射到像素 ,笔画宽度也无法与像素网格一一对应等。因此,它们在任何地方都能工作,但在任何地方看起来都模糊而平庸:

当你给它们更多像素时,它们确实会工作得更好。

或者让图形更简单。但小细节与微小图标尺寸的组合是致命的。因此,在 Apple 发布 380+ DPI 的 MacBook 之前,不幸的是,我们仍然不得不关注像素网格。
令人困惑的隐喻
图标可能还承担着另一种功能:帮助用户理解命令的含义。
例如,一旦你了解了使用情境(移动窗口),这些图标比文字更快地说明正在发生什么事情:

但要让这一点成立,用户必须能理解图标上画的是什么。它必须是一个熟悉的物体,且能清晰对应到电脑中的操作(例如:垃圾桶 → 删除)、一个被广泛使用的符号,或者一张易于理解的示意图。HIG:

一个新手常犯的错误是对对象的表述不准确。比如,当前的选择状态看起来是这样的:

但它的图标却是这样的:

说实话,我已经写这篇文章一周了,但至今仍然完全搞不明白为什么它会长成这样。有一个看起来像这样的对象,但它在 Freeform/Preview 里其实是一个文本块:

在 SF Symbols 里它被叫做 character.textbox:

为什么它会变成“全选”的隐喻?我最靠谱的猜测是:这是个错误。
还有一个地方直接把 iOS 上的文本选中当成隐喻用。在 Mac 上!

有些概念拥有明显或已经被广泛确立的隐喻。在这种情况下,不使用它们就是一种错误。比如书签: 。Apple 不知为何选择了“书”的图标:

有时你已经有一个界面元素,可以直接用来做图标。但请不要让用户产生混淆。矩形里的点看起来像密码输入,而不是权限:

这里的图标表示“将军”,但实际动作是“取消将军”。

这是个糟糕的错误:图标不仅没有帮助,反而主动让用户感到困惑。
人们也很容易想去构造一种两层含义的图标:一个对象加上某种指示符号。比如,一个复选框加上一个叉号,表示“删除复选框”:

或者一个用户加上一个对勾,就像“检查用户”:

不幸的是,这样的构造方式很少奏效。用户并不会用你提供的构建块来拼句子;他们也没有兴趣去解这些谜题。
寻找隐喻很难。名词比动词更容易,而菜单项大多是动词。“打开”看起来应该是什么样子?像一个指向右上角的箭头?为什么?

我并不是说 Apple 错过了一个显而易见的“打开”的隐喻。并没有。关键就在这里:如果找不到好的隐喻,不使用图标要比使用糟糕、令人困惑或毫无意义的图标更好。
我喜欢用一个小游戏来测试隐喻的质量。把文字标签移除,试着去猜它的含义。试试看:

认为只要想得足够多,就能为每一个操作找到一个好图标,这是自欺欺人。根本不存在这样的可能。这从一开始就是一场必败的战斗。再多的钱或所谓的“管理层决策”都无法改变这一点。这些问题 100% 是自找的。
话虽如此,该给 Apple 认可的地方还是要给。当他们在选择隐喻方面做得好的时候,确实做得很好:

对称操作
一种特别容易让人困惑的隐喻情况是:对彼此完全相反的操作使用不同的隐喻。比如 Undo/Redo、Open/Close、Left/Right。
当它们的图标使用同一个隐喻时,这是好的做法:

因为它能节省你的时间和认知资源。学会一个,就等于免费获得另一个。
正因如此,不为相关操作使用通用隐喻是一个错误:

或者在这里:

另一个错误是在不存在对称性的地方强行制造对称。“返回”和“查看全部”?

Tahoe 中的一些菜单同时犯了这两种错误。例如,Show/Hide 之间缺乏对称性,而 completed/subtasks 之间却制造了虚假的对称:

Import 不是与 Export 镜像对应,而是与 Share 对应:

图标中的文字
再次引用 HIG:

HIG 的作者认为,不应该把文本作为图标的一部分。所以像这样的设计:

或者这样的:

在 1992 年都是行不通的。
我同意这一点,但 Tahoe 还有更严重的问题:由仅仅文本组成的图标。比如这样:

不清楚“带有隐喻、抽象含义且并非打算被逐字阅读的图标文字”和真正的文字之间的界线在哪里。它们使用相同的字体、相同的颜色,那我该如何区分?图标反而成了干扰:A...Complete?AaFont?这是什么意思?
和
也许还能理解。点状符号多少还能代表些什么,我也能想象出形成
时的思路。但
呢?没有装饰,没有效果,只是纯粹的 Abc。真的吗?
文本转换
有人可能会认为,用图标来说明文本变换是个更好的主意。
比如,你看到这个:

或者这样:

或者这个:

只凭图标本身就能理解对文本会发生什么。图标是在用图示来表达动作。
另外,BIU 在文字处理领域早已是既定标准,那是不是只有好处?
并非如此。问题依然一样——文字型图标看起来像文字,而不像图标。而且,这些图标显得过度 。把首字母拿出来再重复一遍到底有什么意义?“Bold”这个词本身就以字母 “B” 开头,阅读同样轻松,为什么要重复一次?再看看它:

它还作为快捷方式又重复了一次……
其实有一种更好的方式来设计这个菜单:

而 Apple 至少在 33 年前就已经知道这一点。

图标中的系统元素
当然,操作系统会将一些视觉元素用于其自身的用途,比如窗口控件、调节大小的手柄、光标、快捷方式等。把这些元素用在图标中是一个错误。

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

快捷键:

HIG 专门有一整节讨论省略号,以及在菜单中其他地方使用省略号是多么危险。

而 Tahoe 中也存在完全相同的问题。

图标会破坏快速浏览
没有图标时,你只需从上到下浏览菜单,只看每一项的首字母即可。因为它们全部对齐:

而在 Tahoe 中,一些菜单项有图标,一些没有,而且对齐方式也各不相同:

有些项目既可以同时有对勾 和 图标,也可以只有其中之一,或者两者都没有,于是就会出现这样的情况:

呃。
特别一提
这个菜单值得单独归为一个类别:

相同的图标却对应不同的操作。缺失了最显而易见的隐喻。不知为何,第一个图标还被做得比第二个和第三个稍微小一点。恭喜!它把所有问题都集齐了。
HIG 还相关吗?
我反复提到 HIG,你可能会想:一份发布于 1992 年的界面指南在今天还有相关性吗?计算机不是已经发生了如此巨大的变化,以至于需要完全新的原则、设计和范式了吗?
是也不是。当然,关于如何让图标适配黑白显示器的建议已经过时了。但这些原则——只要它们是好的原则——仍然适用,因为它们基于人类的工作方式,而不是计算机的工作方式。
人类不会每年迎来一次新发布。我们的记忆力不会翻倍,视力也不会变得更加敏锐。注意力的运作方式始终如一。视觉识别、运动技能——这一切都和 1992 年时完全一样。
所以,在我们拥有直接的芯片到大脑接口之前,HIG 都将保持相关性。
结论
在我看来,Apple 接下了一个几乎不可能完成的任务:给每一个菜单项都加上一个图标。根本没有足够多好的隐喻可以支撑这种做法。
但即便如此,这个前提本身也值得怀疑:如果什么都有图标,并不意味着用户就能更快地找到他们想要的东西。
即使这个前提站得住脚,我也希望自己能说一句:在既定目标下,他们已经尽力了。但事实并非如此:他们在一致地应用隐喻以及图标本身的设计上,持续做得很糟糕。
我希望这篇文章能帮助大家避免图标设计中的常见错误,而 Apple 则设法在一次 OS 发布中把这些错误全部集齐了。我热爱计算机,我热爱界面,我热爱视觉传达。看到那些三十年前就已经广为人知、完全可用的优秀知识,在今天被彻底无视或丢弃,我感到很难过。
换个角度看:现在要设计出比 Apple 更好的东西,已经没那么难了!为此干杯。新年快乐!

备注
在审阅这篇文章期间,我了解到 Jim Nielsen 的文章 ,其中击中了许多与我相同的观点。我把这视为一个迹象,说明我们的推理背后存在某种共同的事实。
另外注意:自 26.0 起,Safari → File 菜单变得更糟了。以前只有 4 个图标,现在有 18 个!
感谢 Kevin、Ryan 和 Nicki 阅读本文的草稿。