UI 設計在做什麼？按鈕要多大、文字對比要多少都有標準

門把是人和房子之間最小的一塊介面。手一握上去就知道該推還是該拉，沒有人會特地欣賞它，可是只要它的設計讓人遲疑一秒，整個進門的過程就變得彆扭。網站和 App 上的 UI，扮演的正是門把的角色。

多數人談到 UI，第一個想到的是畫面好不好看。但使用者打開一個網站，是為了查資料、下訂單或填表單，畫面再漂亮，只要按鈕看不出能不能按、選單找不到路，他的注意力就全被介面本身消耗掉了。UI（User Interface，使用者介面）指的，就是使用者與產品直接接觸的那一層，包括按鈕、欄位、選單、圖示、文字、色彩與版面。

有趣的是，一個 UI 做得越好，使用者就越不會注意到它。這個看似矛盾的結論，正是理解 UI 設計要做什麼的起點。

UI 是什麼？

根據 Interaction Design Foundation（IxDF）的說明，UI 設計是設計者在軟體或電腦化裝置上打造介面的過程，重心放在外觀與樣式，目標是讓介面好用，又讓人覺得舒服。而介面本身，就是使用者與設計互動的入口。網站、App、軟體、裝置螢幕上的每一顆按鈕、每一個欄位，都屬於這個範圍。

換句話說，UI 設計處理的是色彩、字體排版、版面配置與互動方式。這幾件事決定了使用者第一眼看到什麼、手指或游標該往哪裡去，以及操作之後會發生什麼。

不過，把 UI 設計當成「把畫面美化」，其實只做對了一半。IxDF 指出，使用者並不在乎你的設計，在乎的是能不能輕鬆、不費力地把事情做完，所以介面應該是「隱形」的。IxDF 也引用了 Don Norman 的看法，大意是介面會擋路，他不想把精力花在介面上，而是想專注在工作本身。介面做得好的樣子，就是幾乎沒被注意到。

圖形、語音和手勢 3 種介面形式

很多人把 UI 等同於「螢幕上的畫面」，這只是介面最常見的一種。IxDF 把介面分成 3 種形式，第一種是圖形使用者介面（GUI），使用者操作螢幕上視覺化的控制元件，電腦桌面就是一個 GUI。網站和 App 的畫面都屬於這一類，也是多數設計師每天面對的對象。

第二種是語音介面（VUI），使用者用說話來操作，像 iPhone 上的 Siri 與 Amazon 裝置上的 Alexa。第三種是手勢介面，使用者靠身體動作與 3D 空間互動，虛擬實境（VR）遊戲就是典型的例子。

對網站經營者和設計師來說，按鈕、表單、選單這些元素，全部落在圖形介面的範圍內。

AI 對話讓使用者只說出結果，圖形介面依然保留

AI 助手把介面推向另一種互動方式，這是現在談 UI 繞不開的新情境。Nielsen Norman Group 共同創辦人 Jakob Nielsen 在 2023 年的文章裡，把電腦的 UI 歸納成 3 種模式，AI 帶來的轉變放進這個脈絡裡看，會更清楚。第一種是批次處理，約從 1945 年開始，使用者一次交出完整的指令，隔了很久才拿到結果，中間無法調整。第二種是指令式互動，約從 1964 年開始，使用者與電腦輪流往來，一次一個指令，涵蓋命令列、文字終端，也包括 Macintosh、Windows 與智慧型手機平台上的 GUI。按他的說法，GUI 自 1984 年 Macintosh 推出後，已主導了約 40 年。

第三種是以「意圖」為基礎的結果指定，使用者只說自己想要什麼結果，不說該怎麼做，做法交給電腦決定。生成式 AI 就是這種模式的代表。Nielsen 認為這等於把控制權整個反轉過來。過去是使用者一步一步下指令，現在是使用者描述目標，由系統自己找路。

不過，Nielsen 並不認為對話會取代圖形介面。在他看來，點選或輕觸螢幕上的東西，仍是直覺而且重要的互動方式，指令式的模式會留存下來，只是不再那麼主導。他也預測，未來的 AI 系統大概會是混合式的介面，結合意圖式與指令式，並保留許多 GUI 元素。這也代表按鈕、選單與欄位依然要好好設計，而 AI 的對話框本身，同樣是一種需要清楚回饋與可預期操作的 UI。

UI 只是整體使用者體驗的一部分

UI 常和 UX（User Experience，使用者體驗）被放在一起講，兩者的範圍並不相同。Nielsen Norman Group 對使用者體驗的定義，是終端使用者與公司、服務、產品互動的所有面向。要做出優秀的體驗，需要工程、行銷、平面與工業設計、介面設計等多個領域的服務無縫整合。UI 顯然是其中極重要的一部分，但不等於整體體驗，兩者需要區分開來。

Nielsen Norman Group 舉的反例很清楚。一個電影評論網站，即使尋找影片的介面做到完美，只要背後的資料庫只收大片廠的電影，想查獨立小片的人，整體體驗仍然很差。介面再順手，也補不了內容缺口。

至於 UI 本身怎麼衡量，則要看可用性（usability）。可用性是 UI 的品質屬性，指的是這個介面好不好學、用起來有沒有效率、操作過程舒不舒服。

按鈕、表單、選單、圖示 4 類 UI 元素的設計重點

網站與 App 上的元素，可以依用途歸納成 4 類，分別負責操作（按鈕）、輸入（表單欄位）、導覽（選單）與辨識（圖示）。這是一種依用途做的整理，並不是業界的標準分類。Apple 的設計指南就把系統元件分成內容、版面與組織、選單與操作、導覽與搜尋、呈現、選取與輸入、狀態、系統體驗共 8 組，各家的分法本來就不同。

4 類元素的成敗點各不相同。按鈕的重點在主次分明，表單的重點在不讓人填錯，導覽的重點在不讓人迷路，圖示的重點在讓人看得懂。每一類只要抓住最影響結果的那個設計重點，就能避開多數常見的問題。

按鈕的醒目樣式只留給最可能被選的動作

按鈕是最常見、也最常出問題的元素。重點不在好不好看，而在使用者能不能一眼分辨哪個是主要動作、哪個是次要動作。根據 Apple 的設計指南，一顆按鈕由 3 個屬性組成：

• 樣式：由大小、顏色與形狀構成的外觀。
• 內容：按鈕上顯示的圖示、文字，或兩者並用。
• 角色：按鈕在語意上的身分，包括一般、主要、取消與破壞性。

每個畫面裡最可能被選的那個動作，應該使用醒目的樣式，而且醒目的按鈕保持 1 到 2 顆就好。醒目按鈕太多，使用者得花更多時間比較選項，認知負擔跟著增加。要突顯偏好的選項，用樣式的差異，而不是大小的差異。同一組選項大小一致，看起來才像一組選擇，大小不一的按鈕並排，反而讓畫面顯得混亂。

主要角色還有一條容易忽略的規矩，就是不要把它給會造成資料損毀的按鈕，即使那個動作恰好最可能被選。原因是醒目的主要按鈕常被人沒讀就按下去。按鈕上的文字則建議以動詞開頭、簡短說明動作，例如「加入購物車」。

自訂的按鈕還有一個必做的細節，就是按下去的那一刻要有視覺變化。少了按下狀態，按鈕會讓人覺得沒有反應，懷疑自己的操作有沒有被接收。

表單標籤放在欄位外面，提示文字只當補充

表單是轉換與流失的關鍵位置，也是最常出現取捨的地方。為了版面簡潔，不少設計會把標籤直接塞進欄位當提示文字（placeholder），Nielsen Norman Group 的研究指出，這種做法會讓人填錯或漏填，原因有好幾個：

1. 提示一輸入就消失，使用者得靠短期記憶記住這欄要填什麼。
2. 沒有常駐的標籤，送出前無法回頭對照檢查。
3. 出錯時，使用者不知道這個欄位原本該填什麼，也就不知道怎麼修正。
4. 填了內容的欄位，看起來比空欄位不顯眼，容易被漏掉。
5. 使用者可能把提示字誤認成系統自動帶入的資料，直接跳過。

無障礙的問題也不小。提示字預設的淺灰色，對比通常不足，對認知或動作障礙者的負擔更重，而且並非所有螢幕閱讀器都會朗讀提示文字。

比較好的做法，是把標籤放在欄位外面、一直看得見，提示文字放在欄位內，只當補充說明或範例。浮動標籤（先放在欄位內，聚焦後移到上方）比單純的 placeholder 好，但前面第 4 點與第 5 點的問題仍在，所以 Nielsen Norman Group 的結論是，只要版面有空間，把標籤與提示放在欄位外面仍是最佳做法。

欄位本身還有幾個設計細節。Apple 的設計指南建議，欄位的大小配合預期的輸入量，讓使用者憑欄位長短就能判斷該填多少；多個欄位垂直排列，寬度保持一致，畫面會更有條理。驗證的時機也要分情況。Email 欄位適合在使用者離開欄位時才驗證，帳號與密碼的設定則要在離開欄位之前就先驗證。

導覽選單最常漏掉的目前位置標示

導覽是使用者找東西的路標。Nielsen Norman Group 的選單設計檢查表裡，有 3 件事最基本，分別是選單要看得見、要放在使用者預期的位置、要標出使用者目前在哪裡。

選單要看得見這一點，在大螢幕上尤其重要。漢堡選單在小螢幕上是不得不的折衷，因為空間有限，但放到桌面版就不適合。使用者也預期特定選單出現在特定位置，網站的主選單在頁首，應用程式的主選單則在畫面左側，擺到別處就得多花力氣去找。

標出目前所在位置這一點最常被忽略。Nielsen Norman Group 的觀察是，沒標示目前位置，大概是他們在網站選單上看到最常見的一項錯誤。很多訪客並不是從首頁進入網站，而是直接落在某個內頁，選單若沒標示所在位置，他們就不知道自己身在網站的哪個角落。

選單的細節還有幾項。連結文字與背景要有足夠的對比，連結要夠大才好點，用詞要清楚、具體又熟悉，不要用自創詞或內部術語；在大螢幕上展開的子選單，也不要蓋滿整個畫面，免得使用者以為已經換頁了。

近乎通用的圖示很少，文字標籤要常駐可見

圖示用起來有不少好處，包括容易成為點擊的目標，佔的空間小，辨識速度快，而且在文化中性的前提下不需要翻譯。Nielsen Norman Group 舉的例子是，信封圖案比信箱圖案更國際化，因為信箱的外觀在各國差異很大。

問題在於，真正近乎通用的圖示很少。首頁、列印與放大鏡（搜尋）算是例外；漢堡圖示仍在爭取成為通用符號，有些介面還拿它來代表清單；愛心與星星則在不同網站代表收藏、書籤、精選或評分等不同的動作。同一個圖案在兩個網站，意思可能完全不同。

因此，圖示旁邊需要有常駐可見的文字標籤，不能只靠游標移上去才出現，因為觸控裝置沒有懸停這個動作。設計新圖示時，外形要簡單，並且做辨識度與記憶度的測試。Nielsen Norman Group 還提出一條好用的 5 秒規則，如果想一個概念要用什麼圖示，想超過 5 秒，就代表這個概念不適合單靠圖示傳達。

介面元素的互動狀態、操作回饋與錯誤訊息

元素不是只有一個樣子。游標移上去、用鍵盤選到、按下去，或是暫時不能使用，同一顆按鈕都該有對應的外觀；按下去之後，系統也得讓人看得出事情有沒有成功，出錯時還要把話說清楚。

缺了這一塊，使用者會懷疑網站是不是壞了，於是重複點擊、重新整理，甚至直接離開。

預設、懸停、聚焦、按下與停用各有不同外觀

預設狀態是沒有任何互動時的樣子。懸停（hover）則是游標停在元素上的狀態。W3C 的 WCAG 2.2 說明，原生的 HTML 按鈕、核取方塊、單選與下拉選單，本來就沒有額外的懸停效果，游標所在的位置本身就是指示，設計者另外加上的懸停樣式屬於補充。

聚焦（focus）是鍵盤操作時目前所在的那個元素，必須有清楚的聚焦指示，否則用鍵盤的人完全看不出自己選到了哪裡。聚焦指示要與相鄰的背景有足夠的對比，設計者若自訂聚焦樣式，就得達到 3:1 的對比。按下狀態則是讓使用者確認「系統收到了」，自訂按鈕一定要做。

停用（disabled）代表目前不能操作，例如表單還沒填完時的送出按鈕。WCAG 2.2 規定，辨識元件及其狀態（例如有沒有被選取、有沒有聚焦）所需的視覺資訊，與相鄰顏色至少要有 3:1 的對比，但停用的元件不受這條限制。換句話說，狀態的差異不能只靠一點點色差表示，對比要拉到足以讓元件和鄰近顏色分得開的程度。

操作回饋要及時出現，強度配合資訊的重要性

操作後給回饋，對應的是 Nielsen 十大可用性原則的第一條「系統狀態的可見性」。Nielsen Norman Group 的說法是，系統應該在合理的時間內，透過適當的回饋，讓使用者隨時知道目前發生了什麼事。回饋可以簡單到按鈕點擊後改變顏色，流程需要較久時，則用進度指示來說明。使用者每次操作都想知道「成功了沒」，缺少回饋就會讓人重複點擊。Nielsen Norman Group 還指出，現代 GUI 與舊式命令列最大的差別，不在彩色圖示，而在系統的狀態是否看得見。

回饋的力道要配合資訊的重要性。Apple 的設計指南建議，狀態資訊用不打擾的被動方式呈現，例如郵件 App 在收件匣工具列顯示最近一次更新與未讀數，使用者想看的時候看得到；可能造成資料遺失的警告，則必須打斷使用者，讓他有機會避開問題。警示出現得太頻繁，反而會失去效果。

哪些情況值得跳出警告，也有明確的界線。只有在使用者啟動的操作會造成「非預期而且無法復原」的資料遺失時，才需要警告；刪除檔案是使用者預期的結果，不必每次都跳出警告。完成確認同樣只留給夠重要的活動，例如付款成功，因為一般操作使用者預期會成功，只需要在失敗時被告知。

回饋最好不要只靠單一管道。同時用顏色、文字、聲音與觸覺，使用者不論是把裝置調成靜音、沒盯著螢幕，或是使用螢幕閱讀器，都能收到訊息。操作需要等待時，按鈕本身也能擔任回饋，例如「結帳」在處理期間變成「結帳中…」。

錯誤訊息要說明問題並提供解法

錯誤訊息是 UI 文字裡最容易被忽略的一塊，卻直接決定使用者能不能自己排除問題。Nielsen Norman Group 的錯誤訊息指南，首先要求訊息顯示在出錯處的附近，讓使用者不必到處找。表示錯誤時也不能只靠顏色或動畫，全球約有 3.5 億人有色覺障礙，紅色對他們可能不構成提示，所以要搭配文字與圖示。

訊息的形式要依嚴重程度決定。輕微的問題用欄位標示、提示條或橫幅就夠了，只有真正阻擋流程的嚴重錯誤，才用跳出視窗。顯示的時機也有講究。Nielsen Norman Group 把太早顯示錯誤稱為一種敵意的設計模式。使用者只是移動了焦點、還沒輸入完，就不該被判定為出錯；不過，對容易填錯的欄位，邊填邊給行內提示是可以的。

至於訊息的內容，要用一般人看得懂的語言，精確描述問題，並提供補救的做法，不能只丟一句「發生錯誤」。商品缺貨時，告知何時補貨，或讓使用者登記到貨通知，就是一種具體的解法。語氣上不要責怪使用者，避免「無效」、「非法」、「不正確」這類字眼；使用者已經輸入的內容也要保留，讓他修改，而不是逼他從頭重填。

UI 設計中與畫面最相關的 5 條原則

前面各個元素背後，其實共用同一套判斷。這些原則大多出自 Nielsen 整理的十大可用性原則。這份清單最早是他在 1990 年與 Rolf Molich 一起提出，1994 年分析 249 個可用性問題後修訂，Nielsen Norman Group 在 2020 年更新了文章，原則本身自 1994 年起沒有改變。

與畫面最直接相關的原則有 5 條，其中一致性、辨認優於回想、簡潔與預防錯誤直接取自這十大原則，視覺層級則出自 Nielsen Norman Group 另一份談視覺層級的研究。

對比、大小和分組決定視覺層級

畫面上的每樣東西都在搶注意力，視覺層級決定誰先被看到。Nielsen Norman Group 對視覺層級的定義，是把設計元素安排成引導視線，依預期的重要性順序閱讀。能自己操作的槓桿有 3 個：對比、大小與分組。

先看對比。產生層級的是元素與周圍環境在明度與飽和度上的差異，並不是顏色本身。一般不複雜的設計，色彩控制在 2 個主色加 2 個輔色；比較複雜的設計，對比的變化也不要超過 3 種。層級也不能只靠顏色傳遞，否則色覺障礙的使用者會讀不出來。

再看大小。最重要的元素最大，字級用 3 級（內文、副標、標題）就夠，大尺寸的元素最多 2 個。Nielsen Norman Group 給的網頁字級參考如下：

最後是分組。靠鄰近與留白，或用容器（邊框、底色）暗示哪些東西屬於同一組，容器要少用，用太多畫面會變得雜亂。Apple 的版面指南則建議把重要內容放在上方與起始側，因為人習慣由上而下閱讀；對齊讓畫面更容易掃描，縮排用來表示從屬關係；相關的項目用留白或分隔線歸成一組；內容太多時，再用漸進揭露（折疊、選單）減少一次顯示的量。

要驗證層級是否如預期，可以用瞇眼測試，也就是把畫面模糊之後，看哪個地方最突出。最突出的若不是你想讓使用者先看到的東西，層級就需要調整。

一致性讓使用者把經驗帶到新畫面

Nielsen 的第 4 項原則，一致性與標準，要求使用者不必猜測不同的字詞、情境或動作是不是同一件事。同樣的事情，在介面裡就該長得一樣、叫得一樣。

一致性分成 2 層。內部一致，是在同一個產品或產品家族裡保持相同的做法；外部一致，則是遵循業界與平台的慣例。後者背後有個常被引用的觀念，叫 Jakob 定律，意思是使用者大部分的時間花在別的產品上，那些經驗塑造了他們對你的期待，你的介面和他們的經驗不一致，就會增加他們的認知負擔。

落到元素上，就是同樣的動作用同樣的按鈕樣式、放在同樣的位置、使用同樣的詞彙。「儲存」這個動作如果在這一頁叫「儲存」，在另一頁變成「送出」，再換一頁叫「完成」，使用者每次都得重新確認這是不是同一回事。當產品大到有多人一起維護時，把顏色、字體、元件的規則整理成共用規格，是讓一致性不被時間磨掉的做法。

選項直接可見，比要求使用者記憶更省力

人的短期記憶有限，對使用者來說，從一排選項裡「辨認」出要的那個，比憑空「回想」輕鬆得多。Nielsen 的第 6 項原則因此要求，讓元素、動作與選項都看得見，把使用者的記憶負擔降到最低。

使用者不該需要把資訊從介面的某個部分，記到另一個部分。需要用到的資訊，像欄位標籤與選單項目，應該直接看得見，或在需要時容易取得。說明也是同樣的邏輯，要在需要的當下給，不要先塞一大段教學要人背下來。

回頭看前面的元素，表單標籤放在欄位外面、選單項目直接攤開，都是這個原則的應用。用詞也得貼近使用者的語言，不要用內部術語，這是 Nielsen 第 2 項原則，系統與真實世界的相符。

多餘的資訊會稀釋真正重要的內容

Nielsen 的第 8 項原則，美學與簡約設計，說的是介面裡每多一個資訊單位，就會與相關的資訊競爭，並降低它們的能見度。多放一樣東西，不是白放，而是在分走其他東西的注意力。

簡潔並不等於把一切砍光，也不代表非要用扁平風格。Nielsen 明確說過，這條原則不表示一定要採用扁平設計。它的意思是讓內容與視覺設計聚焦在必要之處，讓視覺元素支援使用者的主要目標。所以要先決定使用者的主要目標與功能的優先順序，再決定畫面上放什麼。

畫面內容確實很多的時候，可以用漸進揭露，也就是折疊、選單、巢狀畫面，把次要的內容先收起來，需要時再展開。這樣畫面保持清爽，該有的功能也還找得到。

好的 UI 先防止出錯，也留下復原的出口

好的 UI 先防止出錯，出錯了也讓人退得回去。錯誤訊息處理的是出錯之後怎麼說，預防處理的，則是怎麼讓錯誤不容易發生。

使用者經常誤操作，所以介面需要一個清楚標示的「緊急出口」，讓他不必走完冗長的流程，就能離開不想要的動作，取消、復原與返回都屬於這一類。這是 Nielsen 的第 3 項原則，使用者控制與自由。

預防錯誤是第 5 項原則，它把錯誤分成 2 類。失誤（slip）是分心造成的無意識錯誤，像手滑點到旁邊的按鈕；錯認（mistake）是使用者的心智模型與設計不符所造成的有意識錯誤，例如以為「儲存」會連同發佈一起完成。2 類的處理方式不同。防失誤，要提供有幫助的限制與合理的預設值；防錯認，要減少記憶負擔、支援復原，並在關鍵處給警告。

做法上要排優先順序，先防範代價高的錯誤，再處理小困擾。高代價的操作，先確認再執行，但確認視窗不能濫用，否則使用者會習慣性地按掉，就失去了把關的作用。

對比度和點擊範圍都有可量測的下限

原則談完，UI 還有一部分是可以量的。文字與元件的對比度、可點擊範圍的最小尺寸，是設計師最常查、也最容易驗證的 2 組數字。

這些數字並不是「好看」的標準，而是讓更多人也能順利使用的下限，包括低視力的人、手比較不穩的人、單手操作的人，以及在戶外強光下看螢幕的人。每個數字也有各自適用的情境，不同平台的建議值不同，不能混著用。

文字與元件的對比度下限

W3C 的 WCAG 2.2 對文字訂了 2 個門檻，一般文字與背景的對比至少 4.5:1，大字則可以放寬到 3:1。這裡的大字，指的是 18 pt 或 14 pt 粗體，換算起來約為 24 px 與 18.5 px。這個標準也適用於 placeholder 文字，以及游標移上去、或鍵盤聚焦時才出現的文字。

不只文字，用來辨識元件的非文字資訊也有門檻。表單欄位的邊框、按鈕的輪廓、圖示這類資訊，與相鄰顏色至少要有 3:1 的對比。

有幾個例外：停用狀態元件上的文字、純裝飾用的文字、標誌上的文字，都沒有對比要求。另一方面，品牌指南的配色若造成對比不足，除了標誌之外，不能拿品牌規範當理由豁免，這一點常被忽略。

WCAG、Apple、Google 對點擊範圍的最低要求不同

同樣是問「按鈕要多大」，WCAG、Apple 與 Google 給的數字不同，單位也不同。這 3 個數字可以並排看，視為規範的最低值與平台的建議值，並不是在比較誰對。

WCAG 2.2 的準則 2.5.8（AA 等級）要求，指標輸入的目標至少 24×24 CSS px。如果目標比這小，就需要有足夠的間距，判斷方式是在每個目標的中央放一個直徑 24 px 的圓圈，圓圈不能碰到其他目標，也不能和其他過小目標的圓圈相交。段落中的連結、瀏覽器原生控制等情況，另有例外規定。

Apple 的設計指南說，按鈕的可點擊區域至少 44×44 pt，在 visionOS 是 60×60 pt。Google 的無障礙說明頁則建議，元素的寬高至少 48 dp，相鄰目標之間隔開 8 dp 以上；48×48 dp 換算成實體大小，約為 9 mm，不論螢幕尺寸如何。

可點擊的範圍可以比看得見的圖示更大。Google 的說明頁舉的例子是，24 dp 的圖示看起來很小，但靠周圍的內距，可以撐成 48 dp 的點擊範圍。畫面上維持精緻的小圖示，手指碰到的卻是夠大的區域。

使用這些數字時要留意單位。CSS px、pt 與 dp 雖然都是與螢幕像素密度無關的單位，但三者的大小並不相同，數字不能直接互換。

UI 做得好的時候，使用者通常說不出哪裡好，就像沒有人會稱讚一支門把。他只是順利地推開了門、填完了表單、找到了想看的頁面。

所以檢查自己的 UI，不必先問好不好看，可以先挑出使用者最常走的那個畫面，看看他要完成的事情裡，有沒有哪一個地方，讓他停下來猜了一下。