原文标題：《你真的理解按鈕嘛？》，題圖來自：視覺中國
按鈕在 UI 中用于即時操作，響應用戶點擊的行爲，從而可以觸發相應的業務邏輯。按鈕幾乎存在于每個界面元素中，也是交互中重要的元素。本篇文章我們将從以下四個方面（按鈕的尺寸、按鈕的顔色、常用的按鈕樣式、按鈕上的文案）介紹關于按鈕的一些細節，希望看完文章可以對你有幫助。
一、按鈕的尺寸和顔色
1. 按鈕的尺寸
一個好的按鈕設計遵循 3 個原則。它必須是可識别的、可找到的和清晰的。對于這 3 個原則來說，按鈕的尺寸似乎占據相當重要的位置，那麽觸摸 UI 上的觸摸目标應該設置多大呢？根據麻省理工學院觸摸實驗室的研究 " 人類指尖調查觸覺力學 " 發現，人類指墊平均爲 10~14 毫米，指尖平均爲 8~10 毫米，這意味着神奇的數字是10 毫米。
大多數用戶可以舒适可靠地擊中 10 毫米 x10 毫米的觸摸目标。然而，不同的移動平台以不同的方式表達，此尺寸僅供建議。例如，年齡較大的用戶可能無法輕松點擊 UI 中較小的按鈕。小目标很難準确點擊，當我們針對這些老齡化用戶設計時，應當放大按鈕在屏幕的占比，使按鈕能夠更頻繁地成功完成操作。這也是爲什麽在做适老化時會将按鈕放大。（小按鈕需要用戶付出更多的認知努力，并且可能會讓老齡化人群在犯錯後感到沮喪和不滿，這樣他們使用該流程的欲望就沒有了）
在 iOS 發布的人機界面操作指南中：iPhone 建議最小目标尺寸爲 44px（像素）、寬 44px；Android 的 Material Design 中，建議至少爲長 48dp、寬 48dp，不同觸點間的距離爲 8dp。這樣做是爲了确保信息密度以及可用性。
當然這些就像是标注中說的一樣，僅是爲了提供參考，如果設計都按着這樣的指南來，那我們的設計将毫無溫度可言。
對于 UI 設計師來說，我們要更貼近我們産品的目标人群去進行設計，這也是爲什麽會有眼動測試、用戶調研、用戶可用性測試、屏幕熱點操作區域等。它不應該隻是出現在我們的作品集的前幾頁，好的産品需要以人爲本的設計。
2. 按鈕的顔色
顔色對于按鈕的作用似乎更爲重要，按鈕的顔色可以提供視覺連續性，傳達狀态和反饋，并幫助人們理解信息。比如我們熟知的 " 紅色 - 删除 "" 黃色 - 警告 "" 綠色 - 通過 "" 藍色 - 更多 "。
這些顔色的使用都是爲了讓我們的按鈕能夠引導用戶采取有意義的操作。
很多 APP 都用的品牌色來作爲很多重要按鈕的顔色，比如在登錄頁面 " 站酷、抖音、淘寶、美團、微信 " 都用了品牌主題色，而一些重要按鈕例如 " 淘寶的支付、飛書的漂浮、美團、餓了麽的點單 " 等這些同樣使用了品牌色。但是切記一定不要過度使用品牌色當按鈕，這樣會起到反效果，明智地使用顔色，可以和用戶增強溝通，同樣可以加深品牌記憶。
确認等正向反饋的按鈕都是用品牌色來使用，那麽與這些使用突出顔色的按鈕相反，有一種按鈕也經常出現在我們的産品中，那就是 " 取消按鈕 "。取消按鈕也是一個很重要的存在，它往往伴随着确認來出現。我們見過名氣最大的取消按鈕可能就是退出時的挽留彈窗（它會關閉用戶當前的屏幕并将他們返回到上一個屏幕。這個取消的按鈕是一種保護措施，它的好處是可以防止對當前操作步驟進行不必要的更改。）
對于取消按鈕來說，它的展示則盡可能使它弱化下去，有很多軟件會把它們做成主題色的幽靈按鈕（幽靈按鈕是那些具有基本形狀（例如矩形）的透明镂空按鈕。它們通常由很細的線邊框及内部的純文本組成。）
對于取消按鈕的顔色一直是一個很有争議的事情，那就是它該不該被賦予顔色。換句話說，它是否應該隻是作爲中性色存在。
帶着這個疑問我去查閱資料，似乎找到了一點苗頭。贊成它不該有顔色的人說，" 取消按鈕應表示退回安全狀态，而不是号召采取行動。"簡單來說：我們不應該用顔色來裝飾它，否則這樣會給用戶留下強調的印象。相反，我們需要讓他們知道該按鈕不會進行任何更改，而是返回上一步的操作。還有一種解釋是 " 當屏幕上的每個按鈕都有顔色時，它們就會争奪注意力。兩個按鈕都存在顔色會使用戶對每個動作思考的時間更長。使用中性色可以快速讓他們做出選擇。"
贊成取消按鈕應該有顔色的人則是這樣說：" 通過按鈕間樣式的區分，就足以給出用戶判斷，沒有必要過分強調它不該有顔色，這樣即使達到了它的作用，但是整體視覺的色彩平衡會消失。"
目前帶顔色的幽靈按鈕則廣泛地出現在我們的 App 中，我們對于這件事情似乎并沒有太在意。我們在使用主按鈕（實心按鈕）和輔助按鈕（幽靈按鈕），沒有必要使用不同的顔色，能明确告知用戶它們的區别就可以了。
其實無論是哪一種說法，都有一個共同點，就是我們是基于讓用戶更容易浏覽以及操作才進行這樣的設計，用戶渴望可預測性和熟悉性，因此使用顔色來幫助他們識别和解釋應用程序的内容并與正确的模塊之間進行交互。所以不管是哪種做法，目的就是通過對比度讓用戶更容易區分。我們更應該使用引導用戶采取有意義操作的顔色和對比度。
二、常用的按鈕樣式與狀态
1. 按鈕的樣式
①填充按鈕
填充按鈕就如它的名字一樣，是一個充滿顔色填充的按鈕。這也是我們最常見的按鈕，在 " 按鈕的顔色 " 中講過，填充按鈕一般都采用的是 APP 主色調。填充按鈕一般是在重要的操作步驟、作爲主按鈕的時候才會使用。
②邊框按鈕（次按鈕）與幽靈按鈕
邊框按鈕和幽靈按鈕很相似，但還是有明顯的區别，" 幽靈按鈕 " 就像它的名字一樣飄來飄去，遊離于組件外但是又在大框架中，幽靈按鈕是那些具有基本形狀的透明空按鈕，例如矩形或正方形。與其相反，邊框按鈕就是與組件一起存在組件庫規範中。
從資料中找到，第一次提到 "Ghost Buttons（幽靈按鈕）" 這個概念的是一個叫做 "T***" 的博客網站，幽靈按鈕起源于扁平化設計革命，流行于蘋果發布 iOS 7。現在 iOS 也經常使用 " 幽靈按鈕 "。
幽靈按鈕的作用在于，它可以飄在任何的設計環境，擁有很好的适應性；它還可以提升 UI 界面的同時不會分散我們的注意力，不會阻擋背景圖像的使用（存在背景圖時，我們大多數都會采用幽靈按鈕）。
③圓角按鈕
圓角按鈕就是圓角尺度，現在圓角按鈕似乎廣泛使用起來了，圓角會比常規的按鈕更能讓用戶感受到親切，就相當于一個飽經風霜圓滑的老 OG 和一個愣頭青和你相處，你會覺得和哪個相處起來會更順暢？
④漂浮按鈕
漂浮按鈕和幽靈按鈕聽起來貌似是一種東西，但是漂浮按鈕一般存在于網頁的邊緣用于附加功能。浮動操作按鈕在屏幕上執行主要或最常見的操作。它出現在所有屏幕内容的前面，通常呈圓形，中心有一個圖标。漂浮按鈕分爲三種類型：常規、迷你和擴展。
⑤文字按鈕
顧名思義，文字按鈕就是将文字變爲按鈕鏈接。這裏說一個很有意思的點，很多網站都會把主題色設置爲藍色，最知名的是 Google 藍，是在測試時篩選了一大批藍色最終選擇了點擊最高的藍色。對于大多數的藍色文字按鈕，可以了解下蒂姆 · 伯納斯 · 李爵士，他通常被認爲是萬維網的發明者。藍色酷的地方在于，即使是色盲的人通常也能看到它。
2. 按鈕的狀态
按鈕的狀态是爲了能讓用戶了解當前對于按鈕的操作（點擊或者未點擊）。下面我們就來說明幾種最常見的按鈕狀态。
①可點擊與不可點擊
從狀态的命名也就能看到它們的作用方式。那麽這裏我們需要注意的點就是：在用戶還未填寫完當前信息時，我們應該禁用按鈕，這樣會告訴他在沒有完成信息輸入時不可以點擊進行下一步的操作。
②五種狀态
在懸停狀态中，我們最常用的就是在網頁端，特别是在浏覽官網時會經常使用。可以讓用戶知道它是可以點擊的，鼠标懸停在上面時按鈕會改變顔色或者文案，這裏會存在和用戶之間很有意思的互動。不過我們在移動端時沒有遇到過這種懸停按鈕，當然懸停狀态不會在平闆電腦和移動設備上看到，因爲我們的手指無法 " 懸停 "。
正常狀态、懸停狀态、點擊狀态是我們在設計 PC 端時經常要爲開發同學單獨列出來的三件套。點擊狀态就是在點擊時按鈕發生的改變，這個狀态我們在移動端也很常見。
禁用狀态表示這個按鈕不能點擊，表現樣式上一般是置灰，或者在正常狀态的基礎上降低不透明度；加載中就是在點擊時會出現一個簡單的停頓，緩沖下一步驟即将出現的狀态。
三、按鈕的文案
其實文案應該是 UI/UX 設計師的基本功，因爲一個好的文案能夠更清晰直觀地引導用戶，但是我們實際工作中似乎直接把他們忽略掉了，直接拿着産品經理發來的需求文檔複制粘貼。
對于按鈕上的文案我們也應該重視起來，它并不像是其他文案一樣惹人注意。一個好的按鈕文案可以讓用戶輕松地執行操作，流暢地完成當前流程；當然一個充滿問題的按鈕文案會增加用戶的使用困惑，徒增一些沒必要的時間。
正确的按鈕文本是解釋按鈕意圖的主要元素。它應該是清晰的、可預測的和簡單的。以動詞開頭來鼓勵用戶進行下一步的行動。動詞必須告訴用戶單擊按鈕後會發生什麽，以便他們可以預測下一步。使用任何年齡段都能識别的簡單語言。
經過查閱資料，我找到了幾篇文章講述的一些方法，我把它們總結爲兩點，希望能夠幫助大家快速地選擇正确的按鈕文案。
1. 具體性
具體性就是按鈕對于動詞的使用，是設計按鈕時最爲常見的方法。這會激發用戶進行操作，當用戶閱讀時，他們會知道按下按鈕會做什麽。正如" 一個好的按鈕，用戶無需閱讀任何支持文本就可以進行操作。"
爲什麽對于 " 确認 " 不适合展示，是因爲與向用戶展示 " 确定 " 按鈕來确認他們想要執行的操作相比，向用戶提供一個标有特定操作的按鈕會更高效。
我們可以自己讀一遍上圖中的兩種文案，這樣對比是不是發現 " 是的 " 會存在很多弊端？因爲 " 是的 " 是感歎詞，并不是具體動作。
我們根據一個實驗來印證這點，我們可以先把上面的标題和内容遮擋，隻露出按鈕。看一下哪個更容易懂。
這個實驗可以很直觀地印證前面的那句話：" 一個好的按鈕用戶無需閱讀任何支持文本就可以進行操作。" 像這樣的案例，我們在工作中可以在修改信息時使用，相比較 C 端來說，B 端更應該注重兩者文案的區分，否則用戶的邏輯思緒很容易混亂。
特定按鈕文案将使用戶能夠更快、更準确地完成任務。并不是所有用戶都會閱讀彈窗中的問題或消息。大多數人會在沒有仔細或完整地閱讀它的情況下做出決定。我們如果可以準确地描述，用戶将能夠看到他們将要執行的操作，而無需閱讀彈窗中的文本信息。
2. 準确性
我們還應該注意按鈕的準确性，這樣不會讓用戶誤解這個步驟本身的含義。關于這個問題，在網易雲和 QQ 音樂中都會出現。網易雲音樂在歌單中移除歌曲時，會提示 " 确定要将歌曲從歌單中删除嗎？" 會出現删除按鈕，而 qq 音樂則提示都沒有就直接删除了。
這兩種模式很容易使我理解錯誤或者誤操作。我們就拿網易雲來說，雖然在提示文案裏說明了這個是從歌單中 " 删除 "，" 删除 " 意味着該按鈕将從系統中删除該項目，" 删除 " 這個文案放在删除歌曲時會更加合适；我們将 " 删除 " 改爲 " 移除 " 效果就完全不一樣，這兩個文案意思雖然相近，但是 " 移除 " 更能準确地表示我把歌曲從歌單中除去了。
關于 " 删除 " 和 " 移除 "，我找到了詳細的解答，希望可以幫助你快速理解兩者之間的區别。
模糊且通用的按鈕标簽會給用戶帶來不确定性。所以我們要貼心地爲用戶準備好每一個環節，這樣用戶在使用時會更加便捷。文案是解釋按鈕含義的主要元素。它應該是清晰的、可預測的和簡單的。這些界面元素作爲我們和用戶之間的溝通橋梁，希望我們能在今後的工作中更加注重文案，讓我們與用戶間有一個愉快的對話，讓用戶感受到我們的産品是有溫度的，能在使用時發現我們是有認真地在爲用戶考慮。
四、總結
簡單講解按鈕後，我們意識到，UI 界面中任何一個小元素都不是憑空出現的，它是由若幹個問題組成的，再由我們去進行尋找解決辦法。正如設計是将問題轉化爲可能性的藝術。 這是一個本質上旨在解決問題的過程，也是一種以人爲本的創新方法，整合人的需求、技術的可能性和商業成功的要求。
作爲 UI/UX 設計師，我們應該理解到我們不是爲了我們自己去設計，我們是以我們的用戶爲中心去設計，隻有當用戶真正使用起産品來覺得開心，這個設計才是有意義的。
