編者按：一個合格的 UI 按鈕到底需要具備什麼樣的素質？在很多設計師眼裡似乎並不是一個太大的問題的，但是在實際設計的時候，UI 按鈕的細節處理不到位的情況卻比比皆是。來自資深設計師 Taras Bakusevych 的這篇文章《Button Design — UI component series》 ，詳細拆解了一個設計良好的 UI 按鈕，應該有哪些「自我修養」。
為了更好地設計交互界面，有的時候，我們需要重新回顧一下歷史。想要設計好一個按鈕，也許我們不用完整地回溯整個 UI 界面的發展歷史，但是至少要回到數字界面誕生之前看一看。
按鈕很重要。按鈕很棒。
在沒有圖形化界面的年代，使用按鈕來實現複雜的命令，將算法和功能隱藏在一個按鈕背後，讓電器、汽車或者系統發揮作用。在《Power Button》一書中，Rachel Plotnick 回溯瞭如今整個按鈕文化的起源，在書中，他認為是按鈕推動了數字技術，讓複雜的命令得以以輕鬆、便捷且防呆的方式，在我們的生活中普及。
“
「你只需要按一下按鈕，剩下的交給我們。」——柯達相機通過這種醒目的Slogan吸引潛在的消費者。
即使在今天，足夠便捷的按鈕設計，也是吸引用戶的原因。比如 iPhone 的 home 鍵。通過簡單的觸摸、按下來完成任務，讓人享受到強烈的即時滿足感。儘管成千上萬的數字產品和家電開始加上觸摸屏，但是物理按鈕還沒有消失，而虛擬的按鈕更是交互的基礎設施。實體按鈕在過去一個世紀裡所塑造的體驗和認知根深蒂固，它所塑造的習慣、認知和文化影響著設計的直觀性和易用性。
01按鈕和鏈接的差別
按鈕傳達給用戶的是直接的可執行性的操作，它們通常會存在於整個 UI 界面體系當中，從各種對話框、窗口到工具欄。按鈕和鏈接在某些功能體驗上很接近，但是兩者之間的區別是很重要的：
導航到另外一個位置的時候使用鏈接。比如「查看全部」頁面，用戶「Roger Wright」的個人資料，等。
執行特定操作的時候的按鈕。比如「上傳」、「新建」、「合併」等等。
02按鈕會將它的狀態告訴用戶
創建按鈕需要使用正確的樣式，而用來昭示按鈕狀態的不同樣式設計，是按鈕設計過程中繞不過的工作。每種狀態都必須有明確的「可供性」，這樣才能讓它和其他的元素、佈局區分開來。但是，差異化的設計又不能造成喧賓奪主的效果，製造視覺噪音。
正常狀態——表示按鈕是可交互的，並且可用的。
聚焦狀態——通過高亮的形式告訴用戶，它已經被鍵盤或者其他的方式所選中
懸停狀態——當用戶使用光標或者其他的元素，置於其上方的時候，顯示這樣的狀態
激活狀態——表示用戶已經按下按鈕（且還未結束按按鈕的動作）
加載狀態——表示操作正在加載中，組件正在反映，但是操作還未完成
禁用狀態——表示當前組件處於非交互狀態，但是之後可以被啟用
03按鈕有各種不同的色彩、形狀和大小
圓角矩形的按鈕是最常見的按鈕，這些按鈕被置於輸入框旁邊，非常易於識別，特別常見。但是按鈕的樣式、大小變化範疇非常大，使用什麼樣的樣式，取決於你要做什麼，所用的平臺，以及需要遵循的規範。下面是一些最常用的、受歡迎的樣式：
04樣式可以用來呈現按鈕的重要性
樣式優先級是用來區分按鈕和操作重要性的。通過樣式，可以區分出代表背後操作的重要性層級，從而指引用戶進行多方面的選擇。通常，你可以讓最重要的按鈕使用優先級最高的樣式，這種按鈕通常是「主按鈕」，同時搭配幾個次優先級的按鈕，而其他很少使用、優先級不高、不推薦使用的按鈕，則使用第三級的樣式。
05有時按鈕沒有「默認狀態」通常，我們會將用戶最常用到的按鈕使用「默認」狀態，也就是常說的聚焦狀態，或者是主樣式，這樣可以幫助用戶更快完成任務，指引正確的方向。但是也有例外的情況，比如所有選擇都是平級、對等的情況下，或者說所有的操作都是有潛在風險的情況下，這個時候，你可能會使用兩個次優先級的按鈕樣式來呈現所有按鈕。
06「不要讓我思考」
「Don’t Make Me Think」 是可用性大師 Steve Krug 經典的設計入門書中所提到的一種設計精神，它涉及到許多要點，但是核心思想是要讓設計顯而易見，不要讓用戶感到迷惑。這是基於多年橫跨多設備、各種產品設計之後沉澱下來的經驗。我們對於按鈕的功能和體驗是有期望和基礎認知的，與我們通常所見的按鈕差別太大，會讓人感到困惑。
避免對交互式和非交互式的元素使用相同的顏色，否則用戶會很難判斷到底哪裡可以被點擊。
07一致性設計可以提高交互準確度和效率“
「一致性是非常強大的可用性原則：當事物的表現和反饋保持一致的時候，用戶不會擔心會有意外發生。」——Jakob Nielsen
一致性提高了用戶交互的速度和準確性，有助於避免錯誤。這在很大程度上讓設計具備了可預測性，用戶能夠清楚自己能夠做到什麼。當你創建三種不同層級的樣式的時候，請儘量使用相對一致、具有延續性的設計，按鈕在整套體系內部是高度一致的，並且要兼顧到其他可能會用到它的平臺。
08讓按鈕足夠大，確保交互可靠性
按下按鈕應該是一個簡單的任務，如果用戶無法成功地輕點按鈕，或者在操作過程中無從旁邊的元素，這會帶來負面的體驗，並且浪費時間。
對於絕大多數平臺，請儘量讓按鈕的大小在 48×48 dp 以上（最早 iOS 上按鈕的最小尺寸為 44×44 dp）。無論屏幕大小如何，觸摸按鈕控件的物理觸摸尺寸應該至少為 9 mm ，觸摸屏幕上，按鈕控件的可視尺寸應該在 7~10 mm 這個範疇內。
對於圖標按鈕，儘量讓它的觸摸尺寸大於它的可視尺寸，這不僅適用於移動端觸摸屏，對於普通的網頁和桌面端 UI 也是一樣。
09無障礙設計
對於每個組件，都應該保持足夠的可訪問性，嚴格意義上來說，就是遵循 WCAG 的標準，在色彩、佈局等細節上，確保有視覺障礙的用戶可以輕鬆地使用他們。有大量的在線的工具可以幫你測試設計的可訪問性，確保無障礙。
設計師應當和開發者緊密合作，確保按鈕可以和屏幕閱讀器可以配合使用，添加 role = “button” 到代碼當中，確保元素可以調用屏幕閱讀控件，讓視障用戶可以使用這一切。
10記得兼顧手勢操作
手勢交互如今已經是觸摸交互的基礎了。諸如滑動、雙擊、長按這樣的交互已經被用戶廣泛接受，並且每天都在高頻度地使用。但是對於普通用戶而言，它們依然不是很明顯，因為手勢是默認「隱形」的。我建議對於手勢交互提供支持，但是不作為唯一的交互方式，依然以顯性的按鈕交互作為基礎。
11優秀的按鈕標籤能夠促進用戶操作
按鈕上的標籤文本和它的視覺外觀一樣重要。使用錯誤的標籤文本會讓人感到困惑，會浪費時間，會帶來問題。
這也是為什麼微文案的重要性在如今被一再提高。好的按鈕文本同樣是被精心設計出來的。最好使用動詞提供趨勢引導，並且標註出它的實際功能。就像按鈕在問用戶「您要（將商品）添加購物車嗎？」或者「（您要）確認訂單嗎？」
避免使用「是」和「否」這樣可能會存在歧義的、簡單的文本。
12「取消/確認」還是「確認/取消」？都可以
「確認」和「取消」到底哪個在左，哪個在右？有的設計師可能會花費好幾個小時來糾結和確認。
將「確認」置於首位。如果我們知道「確認」可能是多數情況下的選擇，並且這樣的放置能夠節省用戶交互時間，那麼可以這麼放。
將「確認」置於末位。有人認為將「確認」置於末位能夠促進用戶去點擊。更多的時候，置於這樣的位置可能會促進用戶衡量和思考是否要點擊。蘋果的設計當中，「確認」常常被置於末位。
其實哪種使用方式都有良好的論據支撐，並且任何選擇都不會是災難性的。我個人傾向於將「確認」置於末位（這可能是因為我是一個 Mac 用戶）。
13禁用按鈕令人抓狂
每個人都或多或少會碰到這樣的情況，被卡在頁面上好一陣子，想搞清楚到底表單哪裡填錯了導致無法推進。禁用狀態下的按鈕令人抓狂，雖然後續如果正確觸發可以啟用，但是此刻是讓人糟心的。結合信息引導和錯誤說明，讓按鈕保持正常狀態，讓「可點擊」的狀態呈現出來，會讓用戶更舒適。
我建議儘量避免使用按鈕的禁用狀態。
結語
按鈕的使用有很多技巧，但是這裡只是最常用也最容易忽略的一部分。在 UI 控件的設計和使用上，這麼些年已經逐步地完善成為了一套成型的「設計禮儀」，在設計的時候需要多加註意。
文章鏈接：
https://mp.weixin.qq.com/s/nYEzRGlBPKPrvd1U2NJqhg
人與自然如何和諧共生？
從綠色設計、生態設計到社會設計
我們從不同角度去探討可持續的路徑
海內外知名企業高校專家、教授
在地球日之際
和大家一起關注設計的可持續性
探討設計的社會責任，用行動去珍愛地球
#美啊·特別專題#
——可持續的設計
👇識別下方二維碼立即進入
學設計，上美啊！
收藏！58個設計師最佳配色工具網站
“互聯網女皇”疫情趨勢報告：新冠改變了哪些生活方式？
史上最汙的洗手間LOGO設計，真是博大精深啊！
以瑞幸咖啡為例，解析流量分發的設計邏輯
5項設計原則，助你打造最佳用戶體驗
新iPhone SE發佈！吸引我的不是價格，而是神文案！
專題 | 醫療行業的交互設計怎麼做
【投票】恆大十萬人新球場曝光！這創意你給幾分？
86年小哥用雕塑神還原杜甫詩中古風美人，驚豔數萬粉絲！
小米十年，平實設計讓美好的事情發生
閱讀更多 IXDC 的文章
