icon 意思、類型與格式一次看懂：讓圖示一眼認得出來的設計原則

存檔按鈕畫的常常是一張軟碟，很多使用者從沒用過軟碟，卻照樣看得懂。一個早已淘汰的物件，為什麼還能代表今天的存檔動作？這個問題的答案，正是 icon 這個詞背後最核心的一件事。

icon 不是插圖，也不是裝飾，而是螢幕上用來代表物件、動作或概念的圖形符號，台灣習慣叫它圖示。它替使用者省下閱讀文字的時間，代價是使用者得先知道這個圖案約定的意思。圖案畫得好不好看是一回事，認不認得出來、放進介面後好不好用，是另一回事。

要看懂這套約定怎麼運作，得先弄清楚 icon 這個字在不同場合指的是什麼，因為同一個詞，可能是名人、符號，也可能是螢幕上的一顆按鈕。弄懂這件事，之後選圖示、畫圖示、檢查圖示，都會有同一套判斷依據。

icon 是什麼？

查辭典會發現，icon 至少有 3 種日常用法。Merriam-Webster 先列了在某個領域有重大影響、廣受崇拜的人或事物，例如流行文化裡的偶像；再列了象徵、標誌，也就是用一個形象代表更大的概念；第三種才是電腦螢幕上代表應用程式、檔案這類物件，或存檔這類功能的圖形符號。辭典另外還有東正教聖像的義項，不過那跟介面設計沒有關係。

這個詞放在介面設計的語境裡，指的就是第三種，也就是台灣慣稱的圖示。回頭看 icon 意思的前兩種義項，看似跟介面無關，卻有個共同點，都是拿一個具體的形象，去代表比它更大、更抽象的東西。圖示能成立，靠的也是同一個邏輯。

圖示在介面裡的工作，大致可以拆成 3 種。Nielsen Norman Group 把圖示定義為物件、動作或想法的視覺呈現；Microsoft 的 Fluent 2 說圖示代表概念、物件或動作，並在版面中有語意上的用途；Apple 的 Human Interface Guidelines 則說，App 與遊戲用簡單的圖示幫助人理解可以選擇的項目、動作與模式。三家的說法落到畫面上，就是辨識物件、觸發動作與標示狀態。

檔案圖示讓人一眼認出這是文件還是圖片，存檔圖示告訴使用者按下去會發生什麼事，導覽列與狀態列裡的圖示則說明目前停在哪個位置、處於哪種模式。Fluent 2 就把系統圖示的用途列在命令列、導覽與狀態指示這類位置。使用者不必讀字，掃一眼就能判斷，這正是圖示被拿來取代文字的原因。

這套做法不是一開始就有。電腦科學家 David Canfield Smith 在 1975 年完成博士研究 Pygmalion。他日後回顧時寫道，Pygmalion 正是今天個人電腦圖形介面上圖示概念的源頭；只是當時的圖示是為程式設計而畫，代表的是變數、資料結構與函式。完成研究後，他加入 Xerox 的 Star 專案，第一件事就是把這些程式導向的圖示，改畫成辦公室裡的文件、資料夾、檔案櫃、信箱、電話與垃圾桶。

Star 在 1981 年問世，是最早把這套圖示與桌面隱喻做成商品、賣給一般使用者的系統。IEEE Spectrum 回顧圖形介面的發展時寫道，隨著 Star 推出，今天大家熟悉的圖形使用者介面才真正上市；Computer History Museum 收錄的 Xerox 1981 年 Star 型錄則描述，畫面上的圖示符號標著資料夾、收件籃與發件籃、檔案抽屜等名稱，合起來就是一張「電子桌面」。

Smith 對這套設計背後的想法說得很直接，桌面是對實體辦公室的比喻。既然在實體辦公室裡可以把文件放進資料夾，電腦桌面上就該能把文件圖示放進資料夾圖示。使用者因此可以直接沿用辦公室裡的經驗操作電腦，不必先背一套指令。

圖示與 logo、favicon、emoji 的分界

icon 這個詞常被拿來指好幾種長得很像的東西，最容易搞混的有 3 個鄰居，各自由不同的人定義，也用在不同的位置。

圖示與 logo：功能圖示說的是這個東西能做什麼，logo 說的是這是誰。設計系統把這條線畫得很清楚。Microsoft 的 Fluent 2 指出，產品啟動圖示雖然連結品牌，卻不代表公司，也不可以取代 Microsoft 的 logo；Apple 的 SF Symbols 規範則禁止把符號，或外觀容易混淆的圖像，用在 App 圖示、logo 或任何商標用途。換句話說，圖示可以跨產品通用，logo 則專屬於一個品牌的識別。

圖示與 favicon：favicon 是圖示在瀏覽器分頁、書籤這類位置的特定用途。它最特殊的地方是尺寸極小，所以設計重點在於縮到那麼小還認得出來。格式上，MDN 指出 ICO 用在 favicon 的情況已經減少，改以 PNG 搭配 link 元素。

圖示與 emoji：emoji 是 Unicode 編碼的「圖片字元」。Unicode Consortium 的說明是，emoji 原本跟日本的手機使用有關，現在已經風行全球；Unicode 提供的是代表性字形，並不負責設計 emoji 的圖案，實際看到的樣子由各平台廠商決定，所以同一個 emoji 在不同手機上長得不一樣。圖示正好相反，外觀由設計者自己控制，畫成什麼樣子，使用者就看到什麼樣子。

分清這幾個鄰居之後，圖示本身又可以依用途分成幾種設計取向完全不同的類型。

依用途分成系統、App 與檔案類型 3 類圖示

主要的設計系統分類圖示時，看的是它放在哪裡、做什麼用，而不是怎麼畫。Microsoft 的 Fluent 2 把圖示分成系統圖示、產品啟動圖示與檔案類型圖示三個集合；Apple 的規範則把介面圖示和 App 圖示切成兩條路線，兩者講的其實是同一件事。

同樣叫 icon，放在工具列裡的小圖和放在主畫面上的 App 圖，連設計取向都是兩套邏輯。

介面圖示用精簡形狀標示動作與物件

這類圖示放在工具列、導覽列與狀態指示裡，任務只有一個，讓人一眼認出動作或物件。Fluent 2 的建議是在命令列、導覽與狀態指示這些位置使用系統圖示；Apple 則形容介面圖示通常採用流線的形狀，加上一點顏色，來傳達一個直截了當的想法，這類圖示也稱為 glyph。

這類圖示的命名方式透露了設計取向。Fluent 的系統圖示是字面的隱喻，以畫出來的形狀或物件命名，而不是以功能命名，例如叫 Shield（盾牌），而不是 Security（安全）。這樣命名的好處是，同一個盾牌放在不同位置，可能代表防護、驗證或權限，意思由情境決定，圖示本身只負責提供一個夠清楚的形象。

Apple 還整理了一組跨平台通用的動作圖示，包括剪下、複製、貼上、刪除與復原等，可以直接用在選單、工具列與按鈕上。這麼做的好處是，使用者在別的 App 裡早就學過它們。Material Design 2 對系統圖示的描述也相近，用來象徵常見的動作、檔案、裝置與目錄；Material Design 的標準尺寸則是 24dp x 24dp。

App 圖示是品牌識別的一部分

App 圖示是桌面、主畫面與商店裡代表一個應用程式的圖，邏輯跟介面圖示幾乎相反。Apple 說 app icon 是 App 或遊戲品牌與使用體驗的關鍵環節，除了主畫面，也會出現在搜尋結果、通知、系統設定與分享選單裡。

因為它是品牌識別的一部分，這類圖示可以帶著豐富的細節，像是陰影、質地與高光，用來表現 App 的個性；介面圖示則只用精簡的形狀。iOS、iPadOS、macOS 與 watchOS 的 App 圖示由一個背景層加上一或多個前景層組成，系統再套上高光、折射與半透明這類效果，圖示的層次感就是這樣疊出來的。

尺寸的處理也跟著品牌走。Fluent 2 的產品啟動圖示縮到 48 像素以下時，要減少細節，換取可讀性；放大超過 48 像素，則以 48、64、96 這類 4 的倍數的尺寸縮放。這類圖示的顏色也不能改，Fluent 的原則是永遠不要變更產品啟動圖示的顏色，因為顏色本身就是品牌辨識的一環。

檔案類型圖示以多色與固定尺寸標示格式

檔案類型圖示標示的是檔案格式，例如文件、試算表、圖片，常見於檔案總管、雲端硬碟與附件列表。Fluent 2 對這類圖示的說明，就是用來指出特定檔案或檔案格式。它的功能很單純，讓人在一長串檔名裡不必讀副檔名，就能先分辨格式。

設計取向也跟介面圖示不同。檔案類型圖示多半是多色，並固定在幾個尺寸，Fluent 2 指出多色的檔案類型圖示在 16、48、96 像素的效果最好。既然要靠形狀和顏色一起傳達格式，縮放造成的走樣就會直接削弱辨識度，這也是尺寸要固定的原因。Fluent 對產品啟動圖示也有類似的提醒，要使用指定的尺寸，而不是自行縮放。

相似、關聯與約定，圖示表意的 3 種路徑

為什麼有的圖示一看就懂，有的卻永遠要配文字？符號學對這件事早有答案。Britannica 的符號學條目提到，Charles Sanders Peirce 依符號和所指的關係，把符號分成 3 種：icon 與所指相似，像落石的路標；index 與所指有關聯，像煙是火的徵兆；symbol 與所指只靠約定相連，像文字。Merriam-Webster 也收了這個符號學義項，把它描述為外形暗示意義的符號。這個分類剛好可以對上圖示的 3 種表意方式。

相似：印表機、資料夾這類圖示，直接畫出實物的樣子。使用者通常不需要額外學習，看到外形就聯想到意思。

關聯：放大鏡代表搜尋，剪刀代表剪下，畫的不是動作本身，而是跟動作連在一起的工具。使用者要先有「放大鏡是用來找東西」的經驗，才會接上這層關係。

約定：電源符號、USB 符號完全靠慣例成立，不看說明就看不出意思。最常被拿來舉例的是存檔的軟碟圖案，磁片已經淘汰多年，圖案仍被認得，因為它的意思早已脫離實物，變成使用者共同學會的約定。

約定型的圖示有個麻煩，意思只在被共同學習的範圍內成立。Nielsen Norman Group 指出，只有少數圖示享有近乎通用的辨識，首頁、列印與代表搜尋的放大鏡就是其中的例子，其餘多數圖示在不同介面裡的意思並不一致。愛心與星星都被拿來代表收藏與評分，語意互相競爭；3 條橫線的漢堡選單則被形容為正努力成為通用圖示的例子，還沒有走到那一步。

同一個概念在不同平台的畫法也會分歧。Material Design 2 的系統圖示說明舉了兩個例子：Android 的返回箭頭帶桿、線條較細，iOS 的返回箭頭較粗、沒有桿；「更多」選單在 Android 是 3 個直點，在 iOS 則是 3 個橫點。兩邊各自運作，使用者在自己的平台上學會各自的畫法。

這也是後面所有設計原則的出發點。越貼近使用者已經學會的約定，圖示越容易被讀懂，所以 Apple 等多數規範都建議採用熟悉的視覺隱喻。

圖示風格取決於線框、圓角與用色 3 組取捨

外觀風格是一般人最常拿來區分圖示的方式，但在主流設計系統裡，真正存在的取捨只有幾組：線框與填滿、圓角與直角、單色與多色。每一組都沒有唯一答案，判斷依據是資訊密度、品牌調性，以及是否需要表示狀態。

市面上常見的扁平、3D、等角、手繪、漸層，屬於素材取向的分類，不是設計系統在管的事。

線框用於常態，填滿用於選取與強調

線框適合常態，填滿適合強調與選取。Fluent 2 把圖示分成 Regular 與 Filled 兩種主題，Regular 用來幫助人辨識和選取可用的動作，Filled 則用在標示選取狀態，或需要多一點分量與可讀性的小地方。

Material Design 3 的看法一致。outlined 符號用線條和填色的組合，呈現輕盈乾淨的風格，適合資訊密集的介面；它的 fill 軸從 0 到 1，可以用來表示狀態轉換，例如底部導覽列裡，選取的分頁是填滿、未選取的是線框。不過有些圖示為了辨識度，應該維持填滿，像全身人形與專有圖示。

Apple 補充了一個實務上省事的做法。工具列、分頁列、按鈕這類標準系統元件，選取狀態由系統自動處理，自訂圖示只在必要時才需要另外做選取版本。

圓角或直角跟著品牌的字體與造型決定

圓角還是直角，主要跟著品牌的字體與造型走。Material Design 3 說，圓角符號適合搭配使用較粗字體、曲線 logo 或圓形元素的品牌；直角符號的圓角半徑為 0dp，在小尺寸下依然清晰俐落，適合圓角無法反映風格的品牌。

圓角並非越圓越好。Material 的預設圓角半徑是 2dp，並提醒過度圓潤會降低符號的辨識度；outlined 風格的內側轉角則保持直角，不做圓角。挑選時的重點，是讓圖示和周圍的字體、按鈕外形維持同一種語氣，而不是挑一個看起來可愛的樣子。

單色、階層與多色的上色方式

同樣是加顏色，Apple、Microsoft 與 IBM 的做法落差很大。Apple 的 SF Symbols 提供 4 種渲染模式：

• monochrome：所有圖層套同一個顏色。
• hierarchical：同樣用一個顏色，但依圖層層級改變透明度，做出層次。
• palette：用兩種以上的顏色，一層一色。
• multicolor：內建顏色來強化意義，例如樹葉用綠色、資料遺失用紅色。

使用系統色時，符號會自動適應無障礙設定與深色模式。

Microsoft 與 IBM 則走向另一端。Fluent 2 的系統圖示只用單一純色，並提醒替圖示加顏色可能破壞視覺平衡，要謹慎考慮；IBM Carbon 更直接，規定圖示永遠是單一純色，而且對比要跟文字一樣達到 4.5:1。

這幾種做法沒有高下，取決於產品要什麼。要統一、要穩定，單色最省事；想在單色裡表現層次，hierarchical 這類做法是折衷；符號本身帶有意義，像綠葉或紅色警示時，多色才派得上用場。

SVG、PNG 與 icon font 的格式差異

圖示的格式差異，不只是副檔名的不同，而是 3 種不同的畫法。向量用座標與路徑描述形狀，點陣把畫面切成像素格，圖示字型則把圖示當成字形放進字型檔。畫法不同，放大後的表現、能不能用 CSS 改色、無障礙上要注意的事，也都跟著不同。

另外有一種作業系統專用的容器格式 ICO，常被和網頁圖示混為一談。

SVG 向量格式放大不糊，還能用 CSS 換色

SVG 用座標與路徑描述形狀。W3C 的 SVG 2 規格把它定義為描述二維圖形的語言；MDN 則說明它是以 XML 為基礎的向量格式，把圖像內容寫成一組繪圖指令，由瀏覽器依指令畫出形狀、線條與顏色，因此適合圖表、圖示這類可以在任何尺寸精確繪製的圖像。

放大不糊，是向量最直接的好處。SVG 的內容用 CSS 設定樣式，所以顏色可以透過 CSS 調整，也能做動畫、直接寫進 HTML。MDN 的建議很明確，多數圖示都有向量版本，應盡量優先使用 SVG。Apple 對自訂介面圖示的要求也一致，使用 PDF 或 SVG 這類向量格式，系統會替高解析度螢幕自動縮放，不必另外準備高解析版本。

SVG 也有代價。Font Awesome 的文件指出，同一頁放很多 SVG 可能拖慢瀏覽器，重複使用的圖示可以改用 SVG symbols 共用。換個角度看，SVG 也能做到遮罩、分層與強力變形這類 web font 做不到的進階樣式。

無障礙上要自己處理。直接把 SVG 寫進 HTML 時，裝飾用的圖示要自己加上 aria-hidden="true"，有意義的圖示則要提供文字替代，例如 aria-label。這是 Font Awesome 針對手動內嵌 SVG 的說明。

PNG 點陣格式每個尺寸都要另備一張

PNG 以像素格組成。MDN 提到，PNG 使用無損壓縮，並支援完整的 alpha 透明度；需要透明度的圖像都以 PNG 為後備，因為 JPEG 沒有 alpha 通道。

點陣的限制在於固定尺寸最清楚，放大就糊。Apple 明說 PNG 不支援縮放，每個要用的尺寸都得另備一張。顏色也已經寫進像素，沒辦法像 SVG 一樣用 CSS 換色，要換色就得重新輸出一份。無障礙上，PNG 圖示若傳達意思，要用 alt 提供文字替代；純裝飾的則讓 alt 留空。

只能收點陣圖時，MDN 建議優先選 WebP 或 AVIF。無損 WebP 通常比 PNG 小約 26%；AVIF 則需要提供支援度較廣的後備格式，可以用 picture 元素處理。

icon font 把圖示當成字形排版與上色

圖示字型把圖示做成字型檔裡的字形，用排文字的方式排版與上色。Font Awesome 的 web font 透過 CSS 偽元素呈現圖示，文件稱它是最容易設定和使用的方式，適合 HTML 無法修改、只能用 CSS 加圖示的情境。它的好處是跟文字天然對齊，改顏色、改大小只要改 CSS 就行。

限制也來自「字型」這個本質。一個字形只有一種顏色，多色需要額外技巧；網頁也要多載入一個字型檔。無障礙方面，Font Awesome 預設讓輔助技術略過圖示，若圖示本身傳達意思，才需要加上 aria-label 之類的文字替代。

新一代的做法是可變圖示字型。Google 的 Material Symbols 把許多圖示合併在單一字型檔裡，並提供 4 個可調整的軸：

• FILL：控制填滿，範圍 0 到 1。
• wght：控制筆畫粗細，範圍 100 到 700。
• GRAD：微調粗細感，範圍 -50 到 200。
• opsz：光學尺寸，範圍 20 到 48dp。

同一個圖示因此能用參數切換線框或填滿，不必另外準備好幾份檔案；Google 也同時提供 SVG、Android Vector Drawable 與 Apple Symbols 格式。

Apple 的 SF Symbols 可以視為系統內建的同類思路，與系統字型 San Francisco 整合，自動對齊各種粗細與大小的文字。從 HTML 結構來看，圖示字型以偽元素呈現，SVG 則是頁面裡實際的元素，這是兩者在結構上最大的差別。

ICO 只給作業系統與桌面程式使用

ICO 是 Microsoft 為 Windows 桌面圖示設計的格式。MDN 說明，一個 ICO 檔案可以包含多個圖示，開頭是一份列出各圖示資料的目錄，後面接各個圖示的資料，每一筆可以是不含檔頭的 BMP，或完整的 PNG。這就是它能在單一檔案裡裝多個尺寸的原因。

重點是它給作業系統與桌面程式使用，不是給網頁使用。MDN 直接警告，ICO 檔案不應該用在網頁內容，前面提過的 favicon 也已改用 PNG 加 link 元素。所以在網頁上選 ICO 是走回頭路，只有處理 Windows 桌面程式或檔案類型圖示時才派得上用場。

網頁與 App 優先用 SVG，其餘場景看需求取捨

格式沒有絕對的好壞，只有適不適合場景。

這張表背後的判斷只有一個。自訂介面圖示一律先用向量格式畫，需要點陣版時再從向量匯出，而不是反過來從點陣放大。原因很單純，從向量往點陣輸出，隨時都能重做出任何尺寸的清晰版本；從點陣往向量走，則得整個重畫。

沿用 icon font 的專案不需要急著改，只有在圖示需要多色、分層或遮罩這類 web font 做不到的樣式時，才有轉成 SVG 的理由。

讓圖示一眼認得出來的視覺設計原則

各家設計系統談圖示的視覺規則，措辭不同，核心卻高度重疊：簡化、一致、對齊、隨尺寸調整。共通的是原則，數值只是某個體系的選擇，例如 Material 的 24dp 網格與 2dp 筆畫，換成 Fluent 或 Carbon 就是另一組數字。

把這些數值當成例子看就好，重點是理解它背後在解決什麼問題。

圖示細節要簡化到只剩基本特徵

細節越少越好認。Apple 的建議是設計出可辨識、高度簡化的圖示，因為太多細節會讓介面圖示變得混亂或難以閱讀，並建議使用與動作或內容直接相關的熟悉隱喻。Nielsen Norman Group 同樣建議保持簡單與示意性，把畫面細節減到只剩物件的基本特徵，因為細節在小尺寸下很難分辨。

NN/g 還提供了一個判斷圖示該不該存在的檢查方式，叫 5 秒原則，意思是如果超過 5 秒還想不出合適的圖示，那個意思多半就不適合用圖示傳達。

Material 則把原則說得更具體，圖示要圖形化、粗壯，不要過度寫實或複雜，也不要使用纖細或鬆散的有機形狀；圖示要正面朝前，不要傾斜、旋轉或做成立體。

• 該做：把圖示簡化成物件的基本特徵，用大家熟悉的隱喻。
• 別做：把圖示畫得過度寫實，或加上傾斜、立體這類效果。

同一套圖示共用尺寸、粗細與細節

單張好看不夠，整套要像同一個人畫的。Apple 要求 App 裡所有介面圖示使用一致的尺寸、細節層級、筆畫粗細與透視，筆畫粗細也建議跟相鄰文字一致，除非刻意強調其中一方。

Material 的說法更具體，同一套圖示要維持一致的視覺風格，避免混用風格；建議筆畫為 2dp（或 400 的 regular 權重），涵蓋曲線、轉角與內外筆畫；outlined 風格的內側轉角保持直角，筆畫端點為方形。實務上最容易破壞一致性的情況，是把現成圖示套組和自己畫的圖示混在同一個畫面裡。

• 該做：整套圖示統一筆畫粗細與端點形狀。
• 別做：同一套圖示混用不同粗細、不同風格的筆畫。

用網格、留白與關鍵形狀統一圖示的視覺大小

Material 把圖示放進固定的格子裡，標準尺寸是 24dp x 24dp，其中 20dp x 20dp 是活動區（live area），周圍留 2dp 的留白。圖示內容限制在活動區內；如果需要更多視覺重量，內容可以延伸進留白，但不可以超出裁切區（trim area）。

光有格子還不夠，還要處理不同形狀看起來大小不一的問題。Material 定了 4 種關鍵形狀作為基準：方形 18dp、圓形直徑 20dp、直式長方形高 20dp 寬 16dp、橫式長方形高 16dp 寬 20dp。換算面積會發現，這 4 種形狀都落在 314 到 324 平方 dp 之間，所以雖然外形不同，看起來的大小接近。Material 也要求圖示位置落在整數像素上（on pixel），線條才會銳利。

Apple 補了視覺置中的觀念。有些圖示的重心不在正中間，例如下載箭頭，下方分量較重，幾何置中看起來會偏低。Apple 的做法是必要時為圖示加 padding，把圖示往上微調幾個像素，或者把這個微調做進圖檔的留白；這樣一來，元件只要幾何置中，圖示看起來就會是置中的。

• 該做：把圖示放進活動區，座標對準像素格，必要時做視覺置中。
• 別做：讓內容超出裁切區，或把座標放在沒有對準像素的位置。

縮放時筆畫粗細要跟著調整

把 24 像素的圖示直接放大到 48，筆畫會變得過粗；縮小則會變糊。Material 指出，傳統做法是從 24dp 的來源向量縮放，放大後的圖示會比原版更粗重。光學尺寸軸就是為此而設，讓筆畫粗細在尺寸變大時維持不變；這個軸支援 20、24、40 與 48dp，其中 20dp 用於桌面與密集版面，40 到 48dp 用於需要強調的主要動作。

24dp 的標準尺寸也有粗細的下限。Material 提醒，不要在這個尺寸使用最細的權重，最小應該用 200。

Fluent 用另一種方式處理，不縮放，而是依尺寸使用對應的版本。Fluent 2 在產品啟動圖示上要求使用指定的尺寸，而不是把圖示縮放；系統圖示方面，12 像素的圖示用來提供資訊，通常太小，不適合互動。IBM Carbon 則把圖示尺寸和字級綁在一起，16 與 20 像素的圖示搭配 14 與 16 像素的 IBM Plex 字體時看起來最平衡，需要更大的圖示時用 24 與 32 像素。

• 該做：依尺寸選擇對應的光學尺寸或版本，讓筆畫粗細看起來一致。
• 別做：把同一份圖示直接等比放大，或在 24dp 使用最細的權重。

放進介面後的可用性與無障礙設計

圖示畫得再好，放進介面後還有另一組獨立的問題：看不看得懂、看不看得清楚、點不點得到、螢幕閱讀器念不念得出來。這 4 件事分別對應文字標籤、對比、點擊範圍與替代文字，各有明確的規則可以對照。

整體來說，圖示是輔助而不是替代。它能加快辨識，卻不能保證被讀懂。

圖示通用度有限，需要文字標籤輔助

只有少數圖示通用，其餘多靠文字補意思。Nielsen Norman Group 的結論很直接，為了克服幾乎所有圖示都有的模糊性，圖示旁邊一定要有文字標籤，標籤要一直看得到，不能靠滑過才出現。

滑過才出現的做法有兩個問題，一是增加使用者的互動成本，二是觸控裝置上根本沒有「滑過」這個動作。Material 也提醒，標籤能為較抽象的圖示提供簡短說明，導覽選項必須有標籤；沒有標籤時要小心，圖示的意思必須清楚，而且所有使用者都能理解。

標籤的需求還會隨圖示的複雜度與重要性升高。Material 指出，小於 20dp 的圖示，如果是細節很多的複雜圖示，或是產品中關鍵操作的圖示，都應該搭配文字標籤。越抽象、越是關鍵操作的圖示，越需要文字陪著。

• 該做：導覽圖示固定附上一直看得到的文字標籤。
• 別做：只靠滑過才顯示標籤，或把抽象的圖示單獨放著。

圖示的對比度與點擊範圍要分開檢查

圖示本身的顏色對比要夠。WCAG 2.2 的 1.4.11 要求使用者介面元件，以及理解內容所需的圖形物件，與相鄰顏色的對比至少 3:1。IBM Carbon 的標準更嚴，要求圖示和文字一樣達到 4.5:1。

圖示的可點區域則要比圖形本身大。WCAG 2.2 的 2.5.8 要求指標輸入的目標至少 24 x 24 CSS 像素，但有例外，較小的目標只要和相鄰目標保持足夠的間距就算符合，標準是以 24 像素直徑的圓不互相交疊為準。Material 的預設更大，24dp 的符號預設有 48dp 的點擊目標，以滑鼠與鍵盤為主的密集版面，20dp 的符號可以用 40dp；Carbon 則要求可互動的圖示至少有 44 像素的觸控目標。

這兩件事常被混為一談。對比管的是看不看得見，點擊範圍管的是按不按得到，圖形可以只有 16 像素，可點的區域依然要夠大。Fluent 也提醒，小圖示可以提供資訊，卻不該拿來互動，小螢幕應該使用較大的圖示，方便觸控。

• 該做：圖示與背景的對比至少達到 3:1，可點區域另外撐大到足夠的尺寸。
• 別做：把圖形本身的大小，當成可點區域的大小。

有功能的圖示要給名稱，裝飾圖示讓輔助技術略過

有功能或有意義的圖示要給名稱，純裝飾的要讓輔助技術跳過，寫反了不是多餘就是漏掉。WCAG 2.2 的 1.1.1 規定，非文字內容如果是控制項，要有描述其用途的名稱；如果純屬裝飾，則要讓輔助技術可以忽略。W3C 列出的做法包括用 CSS 載入裝飾圖，以及給圖片空的 alt；內嵌 SVG 與圖示字型則常用 aria-hidden="true" 達到同樣的效果。

以一顆只有信封圖示的按鈕為例，輔助技術看不到圖，所以要加上 aria-label 說明按下去會做什麼。如果按鈕上已經有「寄信給我們」這行字，信封圖示只是裝飾，就該隱藏，否則螢幕閱讀器會把同一件事念兩次。Font Awesome 的文件用的正是這個例子，並說明預設會把裝飾圖示對輔助技術隱藏。

Apple 對自訂介面圖示的要求是提供替代文字標籤。這些標籤在畫面上看不到，卻能讓 VoiceOver 用語音描述螢幕上的內容，幫助視障者操作介面。

• 該做：有功能的圖示給名稱，純裝飾的圖示隱藏起來。
• 別做：該有名稱的按鈕沒有名稱，或讓裝飾圖示被重複念出。

圖示的跨文化差異與閱讀方向

同一個圖案在不同文化，可能是不同的意思。Nielsen Norman Group 指出，圖示通常免翻譯，但要留意文化差異，例如各國的信箱外型差異很大，信封卻一致，所以信封比信箱更適合代表電子郵件。Material 也提醒，白色在西方文化常與純潔連結，在部分東方文化卻象徵哀悼；結帳按鈕該用購物車、購物袋還是購物籃，不同地區的偏好也不同。

Apple 的建議落在更具體的做法上。人物圖示優先採用中性的形象，避免使用跨文化難以辨識的圖案；圖示裡如果含有文字，就要做在地化版本；暗示閱讀方向的圖示，則要另外提供鏡像版，供由右至左的語境使用。

要驗證這些假設，Material 建議在地化時測試不同年齡層、文化與語言的使用者，並且考慮上網經驗的差異，常上網的人和不常上網的人，對同一個圖示的理解可能不同。Fluent 也有類似的建議，用在地情境驗證圖示的意思。

icon 的本質是約定，畫得再精準，也只在使用者學過這套約定的地方運作。

下次要加進一個新的圖示，先想清楚它代表的是物件、動作還是狀態，再看現成的設計系統有沒有已經被廣泛學會的畫法。找不到對應的畫法，才值得自己畫一個，並且讓文字標籤陪著它一起出場。