多數人以為,只要把介面上的文字拿掉、只留一顆圖示,畫面看起來就更乾淨,使用者也一樣看得懂,反正圖案本身已經夠直覺了。實際的情況是,除了寥寥幾個圖示,多數圖示的意思只在它出現的那個畫面裡成立,換一個網站或換一支 App,同一個圖案很可能代表完全不同的動作。最常見的例子是愛心:同樣一顆愛心,有的網站拿它做「收藏,方便之後找到」,有的 App 卻只拿它做「按讚,表態喜歡」,兩種用法互相搶同一個符號,使用者根本沒辦法只靠圖案本身分辨這次是哪一種。
這個落差正好點出核心問題。一顆按鈕該只放圖示,還是圖示要搭文字標籤,並不是「看起來夠不夠乾淨」能決定的,而是要看這顆圖示夠不夠公認、使用者是不是第一次用這個介面、按錯的代價有多大。少了這幾個判準,省文字很容易變成設計者自己覺得好看,使用者卻要每次都重新猜一次。
先從「圖示有沒有共通語意」這件事講起,再一路往下拆,哪些情況真的可以省文字,哪些情況省了反而讓使用者更難用。

多數圖示其實沒有共通語意,「乾淨」不代表「看得懂」
只放圖示的介面確實有它吸引人的地方。畫面上少了一整排文字,版面立刻空出來,視覺上顯得俐落;圖示本身通常比一整行文字醒目,使用者掃過去也比讀完一句話快;而且圖示做得夠大,天生就是一個好按的目標,不用另外費心排文字的留白。這幾個理由加在一起,難怪很多團隊在改版時第一個念頭就是把文字拿掉,只留圖示。
問題出在,這幾個理由全部站在設計者這一側,沒有一個是從使用者的理解率出發。Nielsen Norman Group 做圖示可用性研究時也是先列出這些優點,省空間、辨識快、跨語言不用翻譯、視覺看起來一致,但緊接著話鋒一轉,指出除了少數幾個例外,多數圖示因為在不同介面裡代表不同意思而顯得含糊,這種不一致會持續傷害使用者對圖示長期功能的信任。換句話說,一個圖示今天在這個網站代表 A,明天到另一個網站代表 B,使用者累積的經驗根本沒辦法轉移,每換一個介面就得重新猜一次。
Nielsen Norman Group 另一篇談圖示成本的文章,把這個問題講得更直接:圖示從來不是免費的,設計、開發、佔用的螢幕空間、使用者要花的認知處理力氣,全部都是成本;如果最後這顆按鈕一定會搭文字標籤,那圖示除了裝飾好看之外,還有沒有多提供什麼,這篇文章主張,決定要不要放圖示之前,應該先誠實回答這個問題,而不是預設有圖示總是比較好。省空間、看起來俐落,都是真的優點,但這些優點換不到使用者一看就懂,後面幾節會一步步拆,哪些圖示才是真正的例外。
使用者記得住的圖示只是一小把公認符號
上一節說多數圖示的意思會隨介面而變,但這不代表所有圖示都得靠文字才看得懂,確實有一小群圖示,使用者不用想就知道在做什麼。差別在於,這群圖示比多數人以為的還要少,而且範圍很精確,不是「大部分常見圖示都算」這種模糊說法。

放大鏡、垃圾桶、齒輪與返回箭頭是少數的共識圖示
Nielsen Norman Group 的圖示可用性研究明確點名三個近乎普遍被辨識的圖示:首頁圖示、列印圖示,以及代表搜尋的放大鏡。這三個能例外,是因為它們長年重複出現在幾乎每一套作業系統、每一個瀏覽器、每一個 App 裡,使用者不需要在這個特定網站上重新學一次,而是直接調用早就累積好的長期記憶。
垃圾桶代表刪除、齒輪代表設定、返回箭頭代表回上一頁、加號代表新增、X 代表關閉,同樣屬於這個等級。這些圖示有個共同特徵:代表的都是單一、固定、長年沒變過的動作,而且幾乎每個作業系統與網站都用同一套畫法,使用者不用猜,看到就知道要做什麼。
不過就算是這幾個公認圖示,也不能保證每個人都一看就懂。換成不熟悉數位介面的族群,或第一次接觸電腦與智慧型手機的使用者,這幾個圖示的辨識率同樣會往下掉。公認,指的是在有一定數位經驗的使用者身上近乎普遍,不是對任何人都是天生直覺。
漢堡選單仍在爭取公認,尚未到能省文字的地步
漢堡選單很常被誤會成跟放大鏡一樣通用,理由很簡單,它幾乎出現在每一個 App 與每一個手機版網站上,眼睛看久了自然覺得熟。Nielsen Norman Group 卻把它形容成一個正在努力變得普遍可知的圖示,意思是它還在建立共識的路上,還沒真正到位。
同一份研究裡舉了一個例子:某個清單管理 App 把同樣的三線圖示,拿來代表常用項目清單,而不是一般認知的主選單,使用者點下去才發現跟預期完全不一樣。這正好點出漢堡選單的問題出在哪裡——同一個圖案,不同產品可以塞進不同意思,而且視覺上完全看不出差異。
桌面版網站還有另一個變數,把漢堡圖示縮到角落當導覽入口時,畫面上其他元素通常也變多了,圖示的顯著度自然被稀釋,比起手機版那種畫面單純、幾乎沒有競爭元素的情境,更容易被使用者直接忽略。漢堡選單看起來眼熟,不代表它的語意已經穩定,這是判斷要不要單靠它省文字時最容易誤判的地方。
愛心與星星在不同介面代表不同動作
愛心和星星是另一組看起來眼熟、意思卻對不上的圖示。差別在於,漢堡選單至少大家用途相近,都指向某種選單,愛心和星星卻真的被拿去做兩件不同的事:一種是收藏,方便之後找到,另一種是按讚,表態自己喜歡這個,兩種用途彼此競爭同一個符號,使用者光看圖案完全分不出這次是哪一種。
Nielsen Norman Group 在圖示可用性研究裡舉了具體案例:某個旅遊網站讓使用者用愛心圖示標記喜歡這個行程,但按下去之後,這個行程並不會被存進收藏清單、方便之後查找,使用者測試時對這個落差明顯感到不滿;相對地,另一個居家設計購物網站則是把愛心圖示用在完全相反的意思上,收藏商品,方便稍後回來找。
這個對照點出一個容易被忽略的重點:圖案本身好不好認,跟它的功能有沒有隨網站而變,是兩件不同的事。就算愛心這個圖案人人都認得出來,只要它代表的動作隨產品而變,使用者就沒辦法建立一個可靠的期待,每次都得重新確認,這次按下去會發生什麼事。
初次到訪的訪客,不該被套用熟練老手的省略邏輯
同一個純圖示設計,套在不同使用者身上,結果可能天差地遠。每天登入、已經用習慣的老手身上,拿掉文字幾乎不會造成困擾,因為他已經靠重複操作記住這顆圖示在做什麼;換成第一次到訪的訪客,同一顆圖示卻可能完全看不懂,因為他手上根本沒有累積過任何「這個圖示在這裡代表什麼」的經驗可以調用。
這個差異把判準從這個圖示好不好認往前推了一步,變成這個使用情境是誰在用、用了幾次。文書編輯器工具列上的粗體、斜體、復原、重做,是使用者每天操作幾十次的熟悉動作,圖示本身也早就固定不變,適合省文字;換成公開網站的主導覽,或 App 剛安裝、使用者第一眼看到的第一層分頁,同一套省略邏輯就不成立,因為使用者手上完全沒有累積過任何經驗。
官方設計規範也分別替這兩種情境訂了不同規則。Apple 的人機介面指南對分頁列的規定很明確,每個分頁都要搭配一個簡短的文字標籤,不要只靠圖示,理由是分頁列決定使用者能不能找到自己現在在哪個功能區,使用者隨時可能重新確認自己的位置,不能只靠猜圖示。Google 的 Material Design 對底部導覽則依項目數量分級處理:只有三個目的地時,圖示與文字要隨時同時顯示;四到五個目的地時,沒有被選中的分頁才可以只顯示圖示,正在使用中的那個分頁仍然要顯示文字。這兩份規範背後的邏輯一致,使用情境越接近訪客第一次判斷自己在哪裡,文字就越不能省。
動作後果越重就越不該只留圖示
判斷要不要留文字,除了看這個圖示認不認得出來,還要多問一句,猜錯的代價有多大。切換檢視、放大縮小、收合面板,這類動作就算猜錯了,使用者點下去發現不是自己要的,退回來重新點一次,成本很低,幾乎不會造成什麼損失。
刪除、付款、取消訂閱、送出這類動作就完全不同,一旦猜錯,後果可能是資料再也找不回來,或是錢已經花出去收不回來。這種時候,就算用的是垃圾桶這種公認圖示,該有的文字提示或確認步驟也不該省。
Nielsen Norman Group 談圖示成本的那篇文章提出一個判準,圖示帶來的效益必須大於它的成本,才值得放。這個判準放到高風險動作上,效益還多了一項,使用者能不能一眼確認自己按對了東西。動作後果越重,使用者需要的確認感就越強;一旦猜錯的代價高到涉及金錢或資料遺失,光靠圖示提供的那點效益,根本撐不起省略文字帶來的風險。反過來說,低風險、可逆的動作,使用者就算按錯也能隨時重來,這時候把版面留給圖示、換取畫面乾淨,才是真的划算。
畫面省去的文字,程式碼裡仍要留一份給輔助工具讀
這裡有一個常被忽略的認知落差。設計師決定畫面只留圖示的時候,想的通常是用眼睛看畫面的使用者;但螢幕閱讀器的使用者根本看不到那個圖形,他們聽到的只有程式碼裡標記的文字,行話稱作可存取名稱。
換句話說,省文字這個決定只能發生在畫面這一層,不能連程式碼裡有沒有文字都一起省掉。W3C 對這件事有明文規定,每一個按鈕都必須有一個非空白的可存取名稱,不管畫面上有沒有顯示文字。當按鈕內容只有圖形,例如一個 SVG 圖示或圖示字型、完全沒有文字時,開發時就要在按鈕本身標上一段描述動作的文字,例如選單、關閉、儲存,再把圖形本身標成裝飾性,避免螢幕閱讀器重複朗讀兩次。
台灣的數位發展部在無障礙網路空間服務網對圖示字型的無障礙設計,也有相同的提醒,使用圖示字型時,螢幕報讀軟體的使用者沒辦法從圖形本身得到任何可讀的資訊,所以一定要另外提供替代內容。這不是選配的加分項目,而是明文要求;就算前端畫面上一個字都沒有,程式碼裡對應的文字說明也必須存在。
只在游標滑過才浮現的標籤形同沒有標籤
有些團隊想出的折衷方案,是讓畫面平時只留圖示,使用者把游標停在上面才跳出文字提示,以為這樣就能同時兼顧畫面乾淨與使用者理解。這個折衷聽起來很聰明,實際上並不成立。
Nielsen Norman Group 在圖示可用性研究裡講得很直接,圖示的文字標籤應該隨時可見,使用者不需要做任何額外動作就看得到;尤其是用在導覽的圖示,標籤更重要,不要依賴滑鼠停留才顯示,這樣做不只提高了理解一個按鈕在幹嘛的互動成本,在觸控裝置上根本完全行不通,因為手機和平板沒有滑鼠停留這個動作,手指不是點下去就是沒點。
文中舉的例子是某個政府網站:手機版把文字標籤跟圖示一起放在導覽列上,桌面版卻把同樣的文字標籤藏起來,要滑鼠停留才浮現出來。研究直接點出這麼做的矛盾,拿掉文字標籤讓這些圖示完全失去意義,跟原本想讓內容容易被找到的目標互相矛盾。滑鼠停留提示表面上是折衷,實際上只是把理解這個按鈕在做什麼這件事,變成一個使用者原本不需要做的額外步驟。
圖示搭文字的按鈕,點擊目標比純圖示更大
最後還有一個常被忽略的實務面向,搭配文字之後,可點擊或可觸控的範圍通常會變大,因為文字本身也算進可點擊區域裡,不只是視覺上多了一行說明。
Nielsen Norman Group 談圖示成本的文章把這件事講得很明確,同時包含文字與圖示的目標,會比只有文字或只有圖示的目標來得大,而這些比較大的目標,比比較小的目標更容易被點擊與點按。這對觸控裝置尤其關鍵,Apple 的官方設計規範建議可觸控目標至少要有 44×44 點,Google 的 Material Design 則建議大多數平台的觸控目標至少要有 48×48 裝置獨立像素。純圖示如果做得夠小、夠俐落,反而容易讓可點擊範圍縮在建議值以下,使用者要點好幾次才點得中。

搭配文字,等於同時解決了看不懂與點不準兩個問題,文字讓使用者確認這顆按鈕在做什麼,文字佔用的寬度又順便把整個熱區撐大,天然比純圖示更容易達到建議的觸控目標尺寸。這也是為什麼前面幾節反覆強調的判準,公認程度、使用情境、動作後果,最後都指向同一個結論,省文字省下來的是版面上的一點空間,沒省到的卻是使用者理解與操作的成本,這兩者不一定划算。
把這幾節的判準整理出來看,其實只有一條主線,圖示能不能省文字,不是靠看起來夠不夠簡潔決定,而是靠圖示本身夠不夠公認、使用者對這個介面熟不熟、按錯的代價高不高,這三件事一起判斷。真正禁得起省略文字的圖示,只有那一小把長年累積出共識的動作型符號,其餘的多半還是搭文字比較保險。
下次要決定一顆按鈕該不該留文字,公認程度、使用情境、動作後果,這三個判準只要有一個還不確定,文字標籤就該留著,這不是保守,而是把版面的美觀,放在使用者真正能不能用得順手後面。
