很難為 Tahoe 的圖示辯護
原文由 Nikita Prokopov 于 發布，訂閱此部落格
我在讀 1992 年的《Macintosh Human Interface Guidelines》時，發現了這張很棒的插圖：
旁邊還附了這段說明：
快轉到 2025 年。Apple 推出了 macOS Tahoe。主打亮點是什麼？在每個選單項目旁邊都加上令人不悅、分散注意力、難以辨識、雜亂、擁擠、讓人困惑又沮喪的圖示（這些形容詞都是他們自己說的，不是我講的！）：
很糟。到底糟在哪裡？我們來仔細看看！
聲明：截圖混用了 macOS 26.1 與 26.2，皆來自系統內建的 Apple 原生 App，未更動任何系統設定。
圖示應該要能區分
圖示最主要的功能，是幫你更快找到想找的東西。
或許有點違反直覺，但給每個東西都加上圖示，恰恰是錯誤的做法。想凸顯出來，就得與眾不同。但如果每個東西都有圖示，就沒有東西能凸顯出來。
顏色也是一樣的道理：黑白圖示看起來乾淨，但並不會幫你更快找到東西！
Microsoft 過去是懂這個道理的：
看看右邊的版本，你能多快找到「儲存」或「分享」：
而且看起來更乾淨、更不擁擠。
如果換成彩色版本會更好（文字和圖示分得更清楚，也更好找）：
我知道你不會喜歡它的樣子。我也不喜歡。這些圖示很難處理得好看。要讓彩色設計得好看，得真的下功夫去設計。但原則不變：用起來就是輕鬆得多。
App 之間的一致性
想讓圖示有用，就必須一致。我得有辦法學會該去找什麼。
舉例來說，我看到「剪下」指令旁邊有一個 
。好，我心想，下次要找「剪下」時，也許就能省點時間，直接去找 就好。
在這方面，Tahoe 做得如何呢？獻給各位：五十道陰影之「新增」：
我甚至把全部收集在一起，讓情況有多荒謬更一目了然。
當然，有些是不同的操作，所以用不同的圖示也算合理。我猜，建立智慧型檔案夾跟建立日誌項目畢竟不一樣。但這個呢？
或是這個：
還有這個：
這就沒什麼藉口好說了。
「開啟」也是一樣的情況：
「儲存」：
沒錯，其中一個竟然是勾勾。而且連箭頭的方向都無法統一！
「關閉」：
「尋找」（有時叫「搜尋」，有時又叫「篩選」）：
「刪除」（就是剪下、複製、貼上、刪除的那個刪除）：
「縮小視窗」。
這些都不是什麼冷門、特殊的操作。這些是作業系統最基本、最核心的功能。每個 App 都有，而且永遠都在同一個位置。它們根本不該長得不一樣！
同一個 App 內部的一致性
圖示也會用在工具列上。概念上，工具列上的操作跟透過選單執行的操作是一樣的，所以本來就該用同樣的圖示。這是最簡單的狀況：在同一個 App 裡，很多時候甚至在同一個畫面上。要保持一致到底有多難？
「預覽程式」：
「照片」：同樣的 
和 
不一致，只是反過來而已 ¯\_(ツ)_/¯
「地圖」和其他 App 常常對縮放使用不同的符號：
圖示重複使用
另一個不可饒恕的大忌，就是拿同一個圖示去代表不同的動作。想像一下：我已經學會 
代表「新增」：
然後我打開另一個 App，又看到 。「太好了」，我想，「我已經知道這是什麼意思了」：
中招了吧！
你可能會想：好，
代表快速查看：
有時候的確是。但有時候， 卻代表「顯示已完成」：
有時候 
是「輸入」：
有時候 又是「更新」：
跟一致性的問題一樣，圖示重複使用不只發生在不同 App 之間。有時候你在工具列上看到 
：
然後在同一個 App的選單裡，卻發現 代表的是另一回事：
有時候一模一樣的圖示會出現在同一個選單裡。
有時候還緊鄰在一起。
有時候甚至整排都是同樣的圖示：
這對誰都沒有幫助。沒有任何使用者會因為所有圖示都長一樣，就更快找到選單項目或更了解功能。
目前圖示重複使用最誇張的案例是「照片」App：
感覺像是那個被要求為每個選單項目挑一個獨特圖示的人，靈感已經徹底用光了。
可以理解。
過度講究細微差異
看圖示的時候，我們通常會容許執行上的些微差異。這讓我們例如能理解，這些技術上不同的道路標誌其實是同一個意思：
圖示也一樣：如果你在一個地方畫了個從方框往外指的箭頭，另一個地方也畫了箭頭和方框，只是角度稍微不同、線條粗細不同，或是一個是填滿的，我們會把它們理解為同一個意思。
像是， 難道應該要跟 
代表不同的意思？拜託！
或是兩個只有字級稍微不同的字母 A：
一支鉛筆代表「重新命名」，但稍微粗一點的鉛筆就代表「標示」？
使用不同對角線方向的箭頭？
佔了三分之二空間的三個點，跟佔滿整個空間的三個點。認真的嗎？
顏色稍微深一點的點？
一張紙，就因為角落有沒有折起來、裡面有沒有線條，意思就不一樣？
但最終魔王是箭頭。它們全都不一樣：
照理說，使用者得變成專家，去分辨圓圈被壓扁的程度、箭頭是從上往右還是從下往右開始，以及箭頭尾端延伸到哪裡。
我在乎嗎？老實說，一點也不。如果 Apple 能一致地套用這些差異，也許我還願意試著去分辨。但 Apple 在某個地方認為 和 
是同一個意思，卻又期望我在另一個地方去注意這種細微差別？
抱歉，我沒辦法信任你。在看過這一切之後，真的沒辦法。
細節過多
圖示本來就應該要能一眼就認出來。每個圖示設計師都知道：細小的細節是大忌。你偶爾可以為了美觀加一點，但絕不能依賴它們來傳達意思。
而 Tahoe 選單裡的圖示超小。大多數都塞在 12×12 像素的方格裡（因為 Retina，實際解析度是 24×24），而且因為很多圖示不是正方形，其中一邊通常還不到 12 像素。
這點空間根本不夠用！就連 Windows 95 都有 16×16 的圖示。如果以當時常見的 72 DPI 來算，實體圖示大小是 0.22 吋（5.6 公釐）。在現在 DPI 高達 254 的 MacBook Pro 上，Tahoe 的 24×24 圖示實體大小只有 0.09 吋（2.4 公釐）。沒錯，24 比 16 大，但在實際上，這些圖示的面積足足小了四倍！
所以當我看到這個：
我就很吃力。我看得出來它們不一樣，但我真的很難看出畫的到底是什麼。
就算放大 20 倍，還是一團亂：
或是這裡。這是三個不同的圖示：
在這裡，我應該要分得出加號和星芒的差別嗎？
有些線條只比其他線條粗了半個像素，而這竟然就是重點所在：
這應該是個箭頭嗎？
一支畫筆？
看，一台小小的相機。
它甚至還有一個更小的觀景窗，如果你放大 20 倍，勉強看得到：
或是這裡。有一個方框，方框裡有個圓圈，圓圈裡還有個小小的字母 i，總高度只有 2 像素：
看不到嗎？
我也看不到。但它就在那裡……
而這是一個視窗！它甚至還有紅綠燈！多可愛啊：
別忘了：這些是 Retina 像素，是真實像素的四分之一。Steve Jobs 自己都說過，這些像素是看不見的。
事實證明，有個神奇的數字大約是每吋 300 像素，當你把東西拿在距離眼睛 10 到 12 吋的地方，那就是人類視網膜能分辨像素的極限。
然而，Tahoe 的圖示卻仰賴你能看見這些像素。
像素網格
當可用空間這麼小時，每個像素都很重要。你可以做出好看的圖示，但你得非常謹慎地選擇每個像素。
對於 Tahoe 的圖示，Apple 決定使用向量字型，而不是老派的點陣圖。這樣可以幫 Apple 省資源——畫一次，到處都能用。任何尺寸、任何螢幕解析度、任何字寬都適用。
但也有缺點：字型很難做垂直定位，大小無法直接對應到像素，筆畫粗細也無法一對一對齊像素網格，等等。所以，它們到處都能用，但在每個地方看起來都有點模糊、平庸：
一旦給它們更多像素，效果當然就會好得多。
或是把圖形做得更簡潔。但細小細節加上超小圖示尺寸的組合是致命的。所以，在 Apple 推出 380+ DPI 的 MacBook 之前，很不幸地，我們還是得在意像素網格。
令人困惑的隱喻
圖示可能還有另一個功能：幫助使用者理解指令的意思。
舉例來說，一旦你知道脈絡（移動視窗），這些圖示比文字更快解釋發生了什麼事：
但要讓這招奏效，使用者必須看得懂圖示上畫的是什麼。它必須是個熟悉的物件，能清楚對應到電腦操作（像是垃圾桶 → 刪除）、一個廣為使用的符號，或是一個容易理解的圖解。HIG 是這麼說的：
新手常犯的錯誤就是把物件畫錯。舉例來說，選取範圍看起來是這樣：
但它的圖示卻長這樣：
老實說，我寫這篇文章寫了一個禮拜，到現在還是完全想不通它為什麼長這樣。是有個物件長得像這樣沒錯，但那是 Freeform／預覽程式裡的文字區塊：
它在 SF Symbols 裡叫做 character.textbox：
它為什麼會變成「全選」的隱喻？我能想到最好的解釋就是：這是個錯誤。
另一個地方則把 iOS 上的文字選取當成隱喻。用在 Mac 上！
有些概念有顯而易見、或已經廣為建立的隱喻。在這種情況下，不用它們就是個錯誤。舉例來說，書籤：
。但 Apple 不知為何，卻選了一本書：
有時候你已經有現成的介面元素，可以直接拿來當圖示。但請盡量別搞混使用者。矩形裡的點點看起來像密碼輸入，而不是權限：
這裡的圖示寫著「勾選」，但動作卻是「取消勾選」。
非常糟糕的錯誤：圖示沒有幫上忙，反而主動混淆了使用者。
人們也很喜歡建構雙層圖示：一個物件加上某種指示符號。像是，一個核取方塊加上一個叉叉，代表「刪除核取方塊」：
或是一個人像加上一個勾勾，像是「勾選使用者」：
不幸的是，這類組合很少能奏效。使用者不會用你提供的積木去組出一個句子；他們根本不想解這種謎題。
要找到合適的隱喻很難。名詞比動詞容易，而選單項目大多是動詞。「開啟」該長什麼樣子？像一個指向右上角的箭頭？為什麼？
我不是說 Apple 錯過了某個顯而易見的「開啟」隱喻。根本沒有。但這正是重點：如果你找不到好的隱喻，不用圖示也比用一個糟糕、令人困惑或不知所云的圖示來得好。
我喜歡玩一個小遊戲來測試隱喻的好壞。把標籤拿掉，試著猜猜看意思。來試試看：
以為只要夠努力，每個動作都能找到一個好圖示，根本是痴心妄想。根本沒有。這從一開始就是一場必輸的仗。再多的錢或「管理階層的決策」都改變不了這個事實。這些問題百分之百是自找的。
話雖如此，該稱讚 Apple 的時候還是得稱讚。當他們選對隱喻時，確實選得很好：
對稱的操作
令人困惑的隱喻有一個特例，就是對彼此完全相反的動作使用不同的隱喻。像是復原／重做、開啟／關閉、靠左／靠右。
當它們的圖示使用同樣的隱喻時，效果就很好：
因為這能幫你節省時間和認知資源。學會一個，另一個就免費奉送。
正因如此，對相關的操作不使用共通的隱喻，就是個錯誤：
或是這裡：
另一個錯誤則是在根本沒有對稱的地方硬製造對稱。「返回」和「查看全部」？
Tahoe 裡有些選單兩種錯誤都犯了。例如，「顯示／隱藏」之間缺乏對稱，卻在「已完成／子任務」之間製造了虛假的對稱：
「輸入」不是由「輸出」來對應，而是由「分享」來對應：
圖示中的文字
再來看看 HIG 怎麼說：
HIG 的作者反對在圖示中加入文字。所以像這樣的東西：
或是這樣的：
在 1992 年是過不了關的。
我很同意，但 Tahoe 有更嚴重的問題：有些圖示完全只由文字組成。像是這樣：
很難分清楚「隱喻性的、抽象的、不該照字面閱讀的圖示文字」在哪裡結束，而真正的文字又從哪裡開始。它們用了同樣的字型、同樣的顏色，我到底該怎麼分辨？圖示反而礙事：A...Complete？AaFont？這到底是什麼意思？
我或許還能理解 
和 
。點點應該是要代表什麼。我可以想像有人是這樣一路想到 
的。但 
呢？沒有任何裝飾，沒有任何效果，就只是 plain 的 Abc。真的嗎？
文字變形
有人可能會覺得，用圖示來說明文字變形是個更好的主意。
像是，你看到這個：
或是這個：
或是這個：
光看圖示就知道文字會發生什麼變化。圖示直接演示了這個動作。
而且，粗體、斜體、底線（BIU）在文書處理中已經是大家熟悉的標示，所以全是好處？
不完全是。問題還是一樣——文字圖示看起來像文字，不像圖示。而且，這些圖示還很多餘。把第一個字母再重複一次有什麼意義？「Bold」這個字本身就已經以字母「B」開頭了，本來就很容易閱讀，為什麼還要再重複一次？再看一次：
它甚至還在快捷鍵裡又重複了一次……
其實有更好的方式來設計這個選單：
而且 Apple 至少在 33 年前就已經知道了。
圖示中的系統元素
作業系統當然會為了自己的用途使用一些視覺元素。像是視窗控制項、調整大小的把手、游標、快捷鍵等等。把這些東西用在圖示裡會是個錯誤。
不幸的是，Apple 也掉進了這個陷阱。他們重複使用了箭頭。
按鍵快捷鍵：
HIG 甚至有一整節專門講省略號，以及在選單其他地方使用它是多麼危險。
而 Tahoe 也恰恰有這個問題。
圖示破壞了掃視
沒有圖示時，你只要從上到下掃視選單，只讀每項的第一個字母就好。因為它們都對齊了：
但在 Tahoe 裡，有些選單項目有圖示，有些沒有，而且對齊方式也不一樣：
有些項目可能同時有勾選記號和圖示，有些只有其中一個，有些則兩者都沒有，於是就出現了這樣的情況：
唉。
特別點名
這個選單值得單獨拉出來講：
同一個圖示用在不同動作上。錯過了最顯而易見的隱喻。還莫名其妙地把第一個做得比第二、第三個稍微小一點。恭喜！全都包了。
HIG 到現在還有用嗎？
我提了這麼多次 HIG，你可能會想：一本 1992 年的介面手冊，到今天還適用嗎？電腦不是已經改變這麼多，應該要有全新的原則、設計和慣用語了嗎？
是，也不是。當然，像是怎麼讓圖示適配黑白螢幕這類建議已經過時了。但那些原則——只要是好的原則——就依然適用，因為它們是基於人類的運作方式，而不是電腦的運作方式。
人類可不會每年推出新版本。我們的記憶體不會加倍。視力也不會變得更銳利。注意力運作的方式跟以前一模一樣。視覺辨識、動作技能——這一切都跟 1992 年時完全相同。
所以，對，在我們擁有晶片直連大腦的介面之前，HIG 都會一直有用。
結論
在我看來，Apple 接下了一個不可能的任務：為每個選單項目都加上圖示。根本沒有那麼多好的隱喻可以這樣用。
但就算有，這個前提本身就值得懷疑：如果每個東西都有圖示，並不代表使用者就能更快找到想找的東西。
而且就算前提站得住腳，我還是希望能說：在這個目標下，他們已經盡力做到最好了。但事實並非如此：他們在一致地套用隱喻、以及圖示本身的設計上，都做得很差。
希望這篇文章能幫助大家避免圖示設計中常見的錯誤——而 Apple 竟然在一次 OS 更新中就把這些錯誤全都集齊了。我熱愛電腦、熱愛介面、熱愛視覺傳達。看到 30 年前就已經唾手可得的寶貴知識，如今被完全無視或丟棄，真的讓人難過。
好消息是：現在要設計得比 Apple 好，已經沒那麼難了！為此乾一杯吧。新年快樂！
備註
在審閱這篇文章期間，我看到了 Jim Nielsen 的文章，他談到了許多跟我相同的觀點。我認為這代表我們的推論背後確實有些共通的真理。
另外補充：Safari →「檔案」選單自 26.0 以來變得更糟了。以前只有 4 個圖示，現在變成 18 個！
感謝 Kevin、Ryan 和 Nicki 幫我審閱本文的草稿。
留言
登入後參與討論