小小的按鈕，原來還有這么多學(xué)問。按鈕（Button），按鈕在 UI 中用于即時(shí)操作，響應(yīng)用戶點(diǎn)擊的行為，從而可以觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。按鈕幾乎存在于每個(gè)界面元素中，也是交互中重要的元素。本篇文章我們將從以下四個(gè)方面（按鈕的尺寸、按鈕的顏色、常用的按鈕樣式、按鈕上的文案）介紹關(guān)于按鈕的一些細(xì)節(jié)，希望看完文章可以對(duì)你有幫助。

一、按鈕的尺寸和顏色

1. 按鈕的尺寸

一個(gè)好的按鈕設(shè)計(jì)遵循 3 個(gè)原則。它必須是可識(shí)別的、可找到的和清晰的。對(duì)于這 3 個(gè)原則來說按鈕的尺寸似乎占據(jù)相當(dāng)重要的位置，那么觸摸 UI 上的觸摸目標(biāo)應(yīng)該設(shè)置多大呢？根據(jù)麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究"人類指尖調(diào)查觸覺力學(xué)"發(fā)現(xiàn)，人類指墊平均為 10-14 毫米，指尖平均為 8-10 毫米，這意味著神奇的數(shù)字是 10 毫米。

大多數(shù)用戶可以舒適可靠地?fù)糁?10 毫米 x 10 毫米的觸摸目標(biāo)。然而，不同的移動(dòng)平臺(tái)以不同的方式表達(dá)此尺寸僅供建議。例如，年齡較大的用戶可能無法輕松點(diǎn)擊 UI 中較小的按鈕。小目標(biāo)很難準(zhǔn)確點(diǎn)擊，當(dāng)我們針對(duì)這些老齡化用戶設(shè)計(jì)時(shí)應(yīng)當(dāng)占放大按鈕在屏幕的占比，按鈕將能夠更頻繁地成功完成操作。這也是為什么在做適老化時(shí)會(huì)將按鈕放大（小按鈕這需要用戶付出更多的認(rèn)知努力，并且可能會(huì)讓老齡化人群在犯錯(cuò)后感到沮喪和不滿，這樣他們使用該流程的欲望就沒有了。）

在 iOS 發(fā)布的人機(jī)界面操作指南中：iPhone 建議最小目標(biāo)尺寸為 44px（像素）、寬 44px（像素）AndROId 的 Material Design 中，建議至少為長 48dp、寬 48dp，不同觸點(diǎn)間的距離為 8dp。這樣做是為了確保信息密度以及可用性。

當(dāng)然這些就像是標(biāo)注中說的一樣這些僅是為了提供參考，如果設(shè)計(jì)都按著這樣的指南來那我們的設(shè)計(jì)將毫無溫度可言。

對(duì)于 UI 設(shè)計(jì)師來說我們要更符合貼切我們產(chǎn)品的目標(biāo)人群去進(jìn)行設(shè)計(jì)，這也是為什么會(huì)有眼動(dòng)測(cè)試、用戶調(diào)研、用戶可用性測(cè)試、屏幕熱點(diǎn)操作區(qū)域等存在的意義，他不應(yīng)該只是出現(xiàn)在我們的作品集的前幾頁，好的產(chǎn)品是要以人為本的設(shè)計(jì)。

2. 按鈕的顏色

顏色對(duì)于按鈕的作用似乎更為重要，按鈕的顏色可以提供視覺連續(xù)性，傳達(dá)狀態(tài)和反饋，并幫助人們理解信息。比如我們熟知的"紅色-刪除"、"黃色-警告"、"綠色-通過"、"藍(lán)色-更多"。

這些顏色的使用都是為了讓我們的按鈕能夠引導(dǎo)用戶采取有意義的操作。對(duì)于一些重要按鈕的顏色，很多 APP 都用的品牌色來作為很多重要按鈕的顏色，比如在登錄頁面"抖音、淘寶、美團(tuán)、微信"都用了品牌主題色，而一些重要按鈕例如"淘寶的支付、飛書的漂浮、美團(tuán)、餓了么的點(diǎn)單"等這些同樣使用了品牌色。但是切忌一定不要過度使用品牌色當(dāng)按鈕，這樣會(huì)起到反效果，明智使用顏色作為和用戶之間可以增強(qiáng)溝通，同樣可以加深品牌記憶。

確認(rèn)等正向反饋的按鈕都是用品牌色來使用，那么相反，有一種按鈕也經(jīng)常出現(xiàn)在我們的產(chǎn)品中，那就是"取消按鈕"，取消按鈕也是一個(gè)很重要的存在，它往往伴隨著確認(rèn)來出現(xiàn)。我們見過名氣最大的取消按鈕可能就是退出時(shí)的挽留彈窗（它會(huì)關(guān)閉用戶當(dāng)前的屏幕并將他們返回到上一個(gè)屏幕。這個(gè)取消的按鈕是一種保護(hù)措施，他的好處是可以防止對(duì)當(dāng)前操作步驟進(jìn)行不必要的更改。）

對(duì)于取消按鈕這里來說，它的展示則盡可能使他弱化下去，取消按鈕有很多軟件會(huì)把他們做成主題色的幽靈按鈕（幽靈按鈕是那些具有基本形狀（例如矩形）的透明鏤空按鈕。它們通常有很細(xì)的線邊框，而內(nèi)部部分由純文本組成。對(duì)于取消按鈕的顏色一直是一個(gè)很有爭議的事情，那就是在于它該不該被賦予顏色，換句話說，他是否應(yīng)該只是作為中性色存在。帶領(lǐng)這個(gè)疑問我經(jīng)過查閱資料，似乎找到了一點(diǎn)苗頭，贊成他不該有顏色的人說"取消按鈕應(yīng)表示退回安全狀態(tài)，而不是號(hào)召采取行動(dòng)。"簡單來說：我們不應(yīng)該用顏色來裝飾它，否則這樣會(huì)給用戶留下強(qiáng)調(diào)的印象。相反，我們需要讓他們知道該按鈕不會(huì)進(jìn)行任何更改，而是返回上一步的操作；還有一種解釋是"當(dāng)屏幕上的每個(gè)按鈕都有顏色時(shí)，它們就會(huì)爭奪注意力。兩個(gè)按鈕都存在顏色會(huì)使用戶對(duì)每個(gè)動(dòng)作思考的時(shí)間更長。使用中性色可以快速讓他們做出選擇。"

贊成取消按鈕應(yīng)該有顏色的人他們則是這樣說："通過按鈕間樣式的區(qū)分，就足以給出用戶判斷，沒有必要過分強(qiáng)調(diào)他不該有顏色，這樣即使達(dá)到了它的作用，但是整體視覺的色彩平衡會(huì)消失。"現(xiàn)目前帶顏色的幽靈按鈕則廣泛的出現(xiàn)在我們的 app 中，我們對(duì)于這件事情似乎并沒有太在意。我們?cè)谑褂弥靼粹o（實(shí)心按鈕）和輔助按鈕（幽靈按鈕），沒有必要使用不同的顏色，能明確告知用戶它們的區(qū)別就可以了。

其實(shí)無論是哪一種，我們可以得出的結(jié)論是，兩種說法都有一種共同點(diǎn)，就是我們是基于讓用戶更容易瀏覽以及操作才進(jìn)行這樣的做法，用戶渴望可預(yù)測(cè)性和熟悉性，因此使用顏色來幫助他們識(shí)別和解釋應(yīng)用程序的內(nèi)容并與正確的模塊之間進(jìn)行交互。所以不管是那種做法，目的就是通過對(duì)比度讓用戶更容易區(qū)分。

二、常用的按鈕樣式與狀態(tài)

1. 按鈕的樣式

①填充按鈕

填充按鈕， 填充按鈕就如它的名字一樣是一個(gè)充滿顏色填充的按鈕，他也是我們最常見的按鈕，在"按鈕的顏色"中講過填充按鈕填充按鈕一般都是采用的 APP 主色調(diào)。填充按鈕一般是采用重要的操作步驟、作為主按鈕的時(shí)候才會(huì)使用。

②邊框按鈕（次按鈕）與幽靈按鈕

邊框按鈕和幽靈按鈕很相似，幾乎沒有什么不同，但是還是有明顯的區(qū)別，"幽靈按鈕"就行他的名字一樣飄來飄去，游離于組件外但是又在大框架中，幽靈按鈕是那些具有基本形狀的透明空按鈕，例如矩形或正方形。與其相反邊框按鈕就是與組件一起存在組件庫規(guī)范中。

從資料中找到，第一次提到"Ghost Buttons（幽靈按鈕）"這個(gè)概念時(shí)是一個(gè)博客網(wǎng)站，幽靈按鈕的起源源于扁平化設(shè)計(jì)革命，流行于蘋果發(fā)布 iOS 7?，F(xiàn)在 iOS 也經(jīng)常使用"幽靈按鈕"

幽靈按鈕的作用在于，它可以飄在任何的設(shè)計(jì)環(huán)境，擁有很好的適應(yīng)性；它還可以提升 UI 界面的同時(shí)不會(huì)分散我們的注意力，不會(huì)阻擋背景圖像的使用（存在背景圖時(shí)，我們大多數(shù)都會(huì)采用幽靈按鈕）。

③圓角按鈕

圓角按鈕就是圓角尺度，現(xiàn)在圓角按鈕似乎廣泛使用起來了，圓角會(huì)比常規(guī)的按鈕更能讓用戶感受到親切，就相當(dāng)于一個(gè)飽經(jīng)風(fēng)霜圓滑的老 OG 和一個(gè)愣頭青和你相處你會(huì)覺得和哪個(gè)相處起來會(huì)更順暢？

④漂浮按鈕

漂浮按鈕和幽靈按鈕聽起來貌似是一種東西，但是漂浮按鈕一般存在于網(wǎng)頁的邊緣用于附加功能。浮動(dòng)操作按鈕在屏幕上執(zhí)行主要或最常見的操作。它出現(xiàn)在所有屏幕內(nèi)容的前面，通常呈圓形，中心有一個(gè)圖標(biāo)。漂浮按鈕分為三種類型：常規(guī)、迷你和擴(kuò)展。

⑤文字按鈕

顧名思義文字按鈕就是將文字變?yōu)榘粹o鏈接，這里說一個(gè)很有意思的點(diǎn)，對(duì)于很多網(wǎng)站都會(huì)把主題色設(shè)置為藍(lán)色，最知名的是 Google 藍(lán)，是在測(cè)試時(shí)篩選了一大批藍(lán)色最終選擇了點(diǎn)擊最高的藍(lán)色。藍(lán)色的酷之處在于，即使是色盲的人通常也能看到它。

2. 按鈕的狀態(tài)

按鈕的狀態(tài)是為了能讓用戶了解當(dāng)前對(duì)于按鈕的操作（點(diǎn)擊或者未點(diǎn)擊），下面我們就來說明幾種最常見的按鈕狀態(tài)。

①可點(diǎn)擊與不可點(diǎn)擊

狀態(tài)的命名也是從名字就能看到他們的作用方式，就是一個(gè)可以點(diǎn)擊的按鈕和不可點(diǎn)擊的按鈕，那么這里我們需要注意的點(diǎn)就是：在用戶還未填寫完當(dāng)前信息時(shí)我們應(yīng)該采用禁用按鈕，這樣會(huì)告訴他在沒有完成信息輸入時(shí)不可以點(diǎn)擊進(jìn)行下一步的操作。

②五種狀態(tài)

在懸停狀態(tài)中，我們最常用的就是在網(wǎng)頁端，特別是在瀏覽官網(wǎng)時(shí)會(huì)經(jīng)常使用。可以告訴用戶讓用戶知道他是可以點(diǎn)擊的，在鼠標(biāo)懸停在上面時(shí)他會(huì)改變顏色或者文案，這里會(huì)存在和用戶之間很有意思的互動(dòng)。不過我們?cè)谝苿?dòng)端時(shí)沒有遇到過這種懸停按鈕，當(dāng)然懸停狀態(tài)永遠(yuǎn)不會(huì)在平板電腦和移動(dòng)設(shè)備上看到，因?yàn)槲覀兊氖种笩o法"懸停"。

正常狀態(tài)、懸停狀態(tài)、點(diǎn)擊狀態(tài)是我們?cè)谠O(shè)計(jì)時(shí) PC 端時(shí)經(jīng)常要為開發(fā)同學(xué)單獨(dú)列出來的三件套。點(diǎn)擊狀態(tài)就是在點(diǎn)擊時(shí)按鈕發(fā)生的改變，這個(gè)狀態(tài)我們?cè)谝苿?dòng)端也很常見。

禁用狀態(tài)表示這個(gè)按鈕不能點(diǎn)擊，表現(xiàn)樣式上一般是置灰，或者在正常狀態(tài)的基礎(chǔ)上降低不透明度。

加載中就是在點(diǎn)擊時(shí)會(huì)出現(xiàn)一個(gè)簡單的停頓，緩沖下一步驟即將出現(xiàn)的狀態(tài)。

三、按鈕的文案

其實(shí)文案應(yīng)該是 UI/UX 設(shè)計(jì)師的基本功，因?yàn)橐粋€(gè)好的文案能夠更清晰直觀的引導(dǎo)用戶，但是我們實(shí)際工作中似乎直接把他們忽略掉了，直接拿著產(chǎn)品經(jīng)理發(fā)來的需求文檔復(fù)制粘貼。對(duì)于按鈕上的文案我們也應(yīng)該重視起來，一個(gè)好的按鈕文案可以讓用戶輕松的執(zhí)行操作，流暢完成當(dāng)前流程；當(dāng)然一個(gè)充滿問題的按鈕文案會(huì)增加用戶的使用困惑，徒增一些沒必要的時(shí)間。

正確的按鈕文本是解釋按鈕意圖的主要元素。它應(yīng)該是清晰的、可預(yù)測(cè)的和簡單的。以動(dòng)詞開頭來鼓勵(lì)用戶進(jìn)行下一步的行動(dòng)。動(dòng)詞必須告訴用戶單擊按鈕后會(huì)發(fā)生什么，以便他們可以預(yù)測(cè)下一步。使用任何年齡段都能識(shí)別的簡單語言。

經(jīng)過查閱資料，我找到了幾篇文章講述了一些方法，我把他們總結(jié)為兩點(diǎn)，希望能夠幫助大家快速的選擇正確的按鈕文案。

1. 具體性

具體性就是按鈕對(duì)于動(dòng)詞的使用，是按鈕最為常見的方法，他會(huì)激發(fā)用戶進(jìn)行操作，當(dāng)用戶閱讀時(shí)他們會(huì)知道按下按鈕會(huì)做什么。正如"一個(gè)好的按鈕用戶無需閱讀任何支持文本就可以進(jìn)行操作。"

為什么對(duì)于"確認(rèn)"不適合展示，是因?yàn)橄蛴脩粽故?quot;確定"按鈕來確認(rèn)他們想要執(zhí)行的操作相比，向用戶提供一個(gè)標(biāo)有特定操作的按鈕會(huì)更高效、更有效。

這樣我們可以自己讀一遍兩個(gè)句子"退出前是否保存更改？""是的""退出前是否保存更改？""保存"，這樣對(duì)比是不是發(fā)現(xiàn)"是的"會(huì)存在很多弊端。去試試因?yàn)?quot;是的"是感嘆詞，并不是具體動(dòng)作。

這樣我們根據(jù)一個(gè)實(shí)驗(yàn)來印證這點(diǎn)，我們可以先把上面的標(biāo)題和內(nèi)容遮擋，只露出按鈕?？匆幌履莻€(gè)更容易懂。

這個(gè)實(shí)驗(yàn)的可以很直觀的應(yīng)證了前面的那句話"一個(gè)好的按鈕用戶無需閱讀任何支持文本就可以進(jìn)行操作。"像這樣的案例我們?cè)诠ぷ髦锌梢栽谛薷男畔r(shí)可以進(jìn)行使用，相比較 C 端來說，B 端更應(yīng)該注重兩者文案的區(qū)分，否則用戶的邏輯思緒很容易混亂。特定按鈕文案將使用戶能夠更快、更準(zhǔn)確地完成任務(wù)。并不是所有用戶都會(huì)閱讀彈窗中的問題或消息。大多數(shù)人會(huì)在沒有仔細(xì)或完整地閱讀它的情況下做出決定。我們?nèi)绻梢詼?zhǔn)確的描述用戶將能夠看到他們將要執(zhí)行的操作，而無需閱讀彈窗中的文本信息。

2. 準(zhǔn)確性

我們還應(yīng)該注意按鈕的準(zhǔn)確性，這樣不會(huì)讓用戶誤解這個(gè)步驟本身的含義，關(guān)于這個(gè)問題在網(wǎng)易云和 QQ 音樂中都會(huì)出現(xiàn)，網(wǎng)易云音樂在歌單中移除歌曲時(shí)，提示"確定要將歌曲從歌單中刪除嗎？"會(huì)出現(xiàn)刪除按鈕，而 qq 音樂則提示都沒有直接刪除了。

這兩種模式很容易使我理解錯(cuò)誤或者誤操作，我們就拿網(wǎng)易云來說雖然在提示文案里說明了這個(gè)是從歌單中"刪除"，"刪除"意味著該按鈕將從系統(tǒng)中刪除該項(xiàng)目，"刪除"這個(gè)文案放在刪除歌曲時(shí)會(huì)更加合適；我們將"刪除"改為"移除"效果就完全不一樣，這兩個(gè)文案意思雖然相近，但是"移除"更能準(zhǔn)確的表示我把歌曲從歌單中除去了。

關(guān)于"刪除"和"移除"，我找到了詳細(xì)的解答，希望可以幫助你快速的理解兩者之間的區(qū)別。

模糊且通用的按鈕標(biāo)簽會(huì)給用戶帶來不確定性。所以我們要貼心的為用戶準(zhǔn)備好每一個(gè)環(huán)節(jié)，這樣用戶在使用時(shí)會(huì)更加便捷。文案是解釋按鈕含義的主要元素。它應(yīng)該是清晰的、可預(yù)測(cè)的和簡單的，出于我們這些界面元素做為我們和用戶之間的溝通橋梁，希望我們能在今后的工作中更加注重文案，讓我們與用戶間有一個(gè)愉快的對(duì)話，讓用戶感受到我們的產(chǎn)品是有溫度的，能在使用時(shí)發(fā)現(xiàn)我們是有認(rèn)真的在為用戶考慮。

四、總結(jié)

對(duì)于簡單講解按鈕，我們意識(shí)到，UI 界面中任何一個(gè)小元素都不是憑空出現(xiàn)的，他是由若干個(gè)問題組成，再由我們?nèi)ミM(jìn)行尋找解決辦法。正如設(shè)計(jì)是將問題轉(zhuǎn)化為可能性的藝術(shù)。 這是一個(gè)本質(zhì)上旨在解決問題的過程，也是一種以人為本的創(chuàng)新方法，整合人的需求、技術(shù)的可能性和商業(yè)成功的要求。作為 UI/UX 設(shè)計(jì)師我們應(yīng)該理解到我們不是為了我們自己去設(shè)計(jì)，我們是在為我們的用戶為中心去設(shè)計(jì)，只有當(dāng)用戶真正使用起來覺得開心的產(chǎn)品那這個(gè)設(shè)計(jì)就是有意義的。希望看完你的用戶在閱讀您的按鈕時(shí)將不再感到不確定或困惑。