編者按：一個合格的 UI 按鈕到底需要具備什么樣的素質？在很多設計師眼里似乎并不是一個太大的問題的，但是在實際設計的時候，UI 按鈕的細節處理不到位的情況卻比比皆是。來自資深設計師 Taras Bakusevych 的這篇文章《Button Design — UI component series》 ，詳細拆解了一個設計良好的 UI 按鈕，應該有哪些「自我修養」。

為了更好地設計交互界面，有的時候，我們需要重新回顧一下歷史。想要設計好一個按鈕，也許我們不用完整地回溯整個 UI 界面的發展歷史，但是至少要回到數字界面誕生之前看一看。

按鈕很重要。按鈕很棒。

在沒有圖形化界面的年代，使用按鈕來實現復雜的命令，將算法和功能隱藏在一個按鈕背后，讓電器、汽車或者系統發揮作用。在《Power Button》一書中，Rachel Plotnick 回溯了如今整個按鈕文化的起源，在書中，他認為是按鈕推動了數字技術，讓復雜的命令得以以輕松、便捷且防呆的方式，在我們的生活中普及。

「你只需要按一下按鈕，剩下的交給我們。」——柯達相機通過這種醒目的Slogan吸引潛在的消費者。

即使在今天，足夠便捷的按鈕設計，也是吸引用戶的原因。比如 iPhone 的 home 鍵。通過簡單的觸摸、按下來完成任務，讓人享受到強烈的即時滿足感。盡管成千上萬的數字產品和家電開始加上觸摸屏，但是物理按鈕還沒有消失，而虛擬的按鈕更是交互的基礎設施。實體按鈕在過去一個世紀里所塑造的體驗和認知根深蒂固，它所塑造的習慣、認知和文化影響著設計的直觀性和易用性。

按鈕和鏈接的差別

按鈕傳達給用戶的是直接的可執行性的操作，它們通常會存在于整個 UI 界面體系當中，從各種對話框、窗口到工具欄。按鈕和鏈接在某些功能體驗上很接近，但是兩者之間的區別是很重要的：

• 導航到另外一個位置的時候使用鏈接。比如「查看全部」頁面，用戶「Roger Wright」的個人資料，等。
• 執行特定操作的時候的按鈕。比如「上傳」、「新建」、「合并」等等。

按鈕會將它的狀態告訴用戶

創建按鈕需要使用正確的樣式，而用來昭示按鈕狀態的不同樣式設計，是按鈕設計過程中繞不過的工作。每種狀態都必須有明確的「可供性」，這樣才能讓它和其他的元素、布局區分開來。但是，差異化的設計又不能造成喧賓奪主的效果，制造視覺噪音。

• 正常狀態——表示按鈕是可交互的，并且可用的。
• 聚焦狀態——通過高亮的形式告訴用戶，它已經被鍵盤或者其他的方式所選中
• 懸停狀態——當用戶使用光標或者其他的元素，置于其上方的時候，顯示這樣的狀態
• 激活狀態——表示用戶已經按下按鈕（且還未結束按按鈕的動作）
• 加載狀態——表示操作正在加載中，組件正在反映，但是操作還未完成
• 禁用狀態——表示當前組件處于非交互狀態，但是之后可以被啟用

按鈕有各種不同的色彩、形狀和大小

圓角矩形的按鈕是最常見的按鈕，這些按鈕被置于輸入框旁邊，非常易于識別，特別常見。但是按鈕的樣式、大小變化范疇非常大，使用什么樣的樣式，取決于你要做什么，所用的平臺，以及需要遵循的規范。下面是一些最常用的、受歡迎的樣式：

樣式可以用來呈現按鈕的重要性

樣式優先級是用來區分按鈕和操作重要性的。通過樣式，可以區分出代表背后操作的重要性層級，從而指引用戶進行多方面的選擇。通常，你可以讓最重要的按鈕使用優先級最高的樣式，這種按鈕通常是「主按鈕」，同時搭配幾個次優先級的按鈕，而其他很少使用、優先級不高、不推薦使用的按鈕，則使用第三級的樣式。

有時按鈕沒有「默認狀態」

通常，我們會將用戶最常用到的按鈕使用「默認」狀態，也就是常說的聚焦狀態，或者是主樣式，這樣可以幫助用戶更快完成任務，指引正確的方向。但是也有例外的情況，比如所有選擇都是平級、對等的情況下，或者說所有的操作都是有潛在風險的情況下，這個時候，你可能會使用兩個次優先級的按鈕樣式來呈現所有按鈕。

「不要讓我思考」

「Don’t Make Me Think」 是可用性大師 Steve Krug 經典的設計入門書中所提到的一種設計精神，它涉及到許多要點，但是核心思想是要讓設計顯而易見，不要讓用戶感到迷惑。這是基于多年橫跨多設備、各種產品設計之后沉淀下來的經驗。我們對于按鈕的功能和體驗是有期望和基礎認知的，與我們通常所見的按鈕差別太大，會讓人感到困惑。

避免對交互式和非交互式的元素使用相同的顏色，否則用戶會很難判斷到底哪里可以被點擊。

一致性設計可以提高交互準確度和效率

「一致性是非常強大的可用性原則：當事物的表現和反饋保持一致的時候，用戶不會擔心會有意外發生。」——Jakob Nielsen

一致性提高了用戶交互的速度和準確性，有助于避免錯誤。這在很大程度上讓設計具備了可預測性，用戶能夠清楚自己能夠做到什么。當你創建三種不同層級的樣式的時候，請盡量使用相對一致、具有延續性的設計，按鈕在整套體系內部是高度一致的，并且要兼顧到其他可能會用到它的平臺。

讓按鈕足夠大，確保交互可靠性

按下按鈕應該是一個簡單的任務，如果用戶無法成功地輕點按鈕，或者在操作過程中無從旁邊的元素，這會帶來負面的體驗，并且浪費時間。

對于絕大多數平臺，請盡量讓按鈕的大小在 48x48 dp 以上（最早 iOS 上按鈕的最小尺寸為 44x44 dp）。無論屏幕大小如何，觸摸按鈕控件的物理觸摸尺寸應該至少為 9 mm ，觸摸屏幕上，按鈕控件的可視尺寸應該在 7~10 mm 這個范疇內。

對于圖標按鈕，盡量讓它的觸摸尺寸大于它的可視尺寸，這不僅適用于移動端觸摸屏，對于普通的網頁和桌面端 UI 也是一樣。

無障礙設計

對于每個組件，都應該保持足夠的可訪問性，嚴格意義上來說，就是遵循 WCAG 的標準，在色彩、布局等細節上，確保有視覺障礙的用戶可以輕松地使用他們。有大量的在線的工具可以幫你測試設計的可訪問性，確保無障礙。

設計師應當和開發者緊密合作，確保按鈕可以和屏幕閱讀器可以配合使用，添加 role = “button” 到代碼當中，確保元素可以調用屏幕閱讀控件，讓視障用戶可以使用這一切。

記得兼顧手勢操作

手勢交互如今已經是觸摸交互的基礎了。諸如滑動、雙擊、長按這樣的交互已經被用戶廣泛接受，并且每天都在高頻度地使用。但是對于普通用戶而言，它們依然不是很明顯，因為手勢是默認「隱形」的。我建議對于手勢交互提供支持，但是不作為唯一的交互方式，依然以顯性的按鈕交互作為基礎。

優秀的按鈕標簽能夠促進用戶操作

按鈕上的標簽文本和它的視覺外觀一樣重要。使用錯誤的標簽文本會讓人感到困惑，會浪費時間，會帶來問題。

這也是為什么微文案的重要性在如今被一再提高。好的按鈕文本同樣是被精心設計出來的。最好使用動詞提供趨勢引導，并且標注出它的實際功能。就像按鈕在問用戶「您要（將商品）添加購物車嗎？」或者「（您要）確認訂單嗎？」

避免使用「是」和「否」這樣可能會存在歧義的、簡單的文本。

「取消/確認」還是「確認/取消」？都可以

「確認」和「取消」到底哪個在左，哪個在右？有的設計師可能會花費好幾個小時來糾結和確認。

• 將「確認」置于首位。如果我們知道「確認」可能是多數情況下的選擇，并且這樣的放置能夠節省用戶交互時間，那么可以這么放。
• 將「確認」置于末位。有人認為將「確認」置于末位能夠促進用戶去點擊。更多的時候，置于這樣的位置可能會促進用戶衡量和思考是否要點擊。蘋果的設計當中，「確認」常常被置于末位。

其實哪種使用方式都有良好的論據支撐，并且任何選擇都不會是災難性的。我個人傾向于將「確認」置于末位（這可能是因為我是一個 Mac 用戶）。

禁用按鈕令人抓狂

每個人都或多或少會碰到這樣的情況，被卡在頁面上好一陣子，想搞清楚到底表單哪里填錯了導致無法推進。禁用狀態下的按鈕令人抓狂，雖然后續如果正確觸發可以啟用，但是此刻是讓人糟心的。結合信息引導和錯誤說明，讓按鈕保持正常狀態，讓「可點擊」的狀態呈現出來，會讓用戶更舒適。

我建議盡量避免使用按鈕的禁用狀態。

結語

按鈕的使用有很多技巧，但是這里只是最常用也最容易忽略的一部分。在 UI 控件的設計和使用上，這么些年已經逐步地完善成為了一套成型的「設計禮儀」，在設計的時候需要多加注意。

延伸閱讀：