大家在日常生活會經(jīng)常出現(xiàn)按鈕，但是也不會太過于關(guān)注，對吧？下面這篇文是筆者整理分享的關(guān)于按鈕的相關(guān)內(nèi)容，大家一起來看看吧！

小小的按鈕，原來還有這么多學(xué)問。

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

一、按鈕的尺寸和顏色

1. 按鈕的尺寸

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

大多數(shù)用戶可以舒適可靠地擊中 10 毫米 x 10 毫米的觸摸目標。然而，不同的移動平臺以不同的方式表達此尺寸僅供建議。

例如，年齡較大的用戶可能無法輕松點擊 UI 中較小的按鈕。小目標很難準確點擊，當我們針對這些老齡化用戶設(shè)計時應(yīng)當占放大按鈕在屏幕的占比，按鈕將能夠更頻繁地成功完成操作。

這也是為什么在做適老化時會將按鈕放大（小按鈕這需要用戶付出更多的認知努力，并且可能會讓老齡化人群在犯錯后感到沮喪和不滿，這樣他們使用該流程的欲望就沒有了）。

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

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

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

2. 按鈕的顏色

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

這些顏色的使用都是為了讓我們的按鈕能夠引導(dǎo)用戶采取有意義的操作。對于一些重要按鈕的顏色，很多 APP 都用的品牌色來作為很多重要按鈕的顏色，比如在登錄頁面“抖音、淘寶、美團、微信”都用了品牌主題色，而一些重要按鈕例如“淘寶的支付、飛書的漂浮、美團、餓了么的點單”等這些同樣使用了品牌色。

但是切忌一定不要過度使用品牌色當按鈕，這樣會起到反效果，明智使用顏色作為和用戶之間可以增強溝通，同樣可以加深品牌記憶。

確認等正向反饋的按鈕都是用品牌色來使用，那么相反，有一種按鈕也經(jīng)常出現(xiàn)在我們的產(chǎn)品中，那就是“取消按鈕”，取消按鈕也是一個很重要的存在，它往往伴隨著確認來出現(xiàn)。

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

我們見過名氣最大的取消按鈕可能就是退出時的挽留彈窗（它會關(guān)閉用戶當前的屏幕并將他們返回到上一個屏幕。這個取消的按鈕是一種保護措施，他的好處是可以防止對當前操作步驟進行不必要的更改）。

對于取消按鈕這里來說，它的展示則盡可能使他弱化下去，取消按鈕有很多軟件會把他們做成主題色的幽靈按鈕（幽靈按鈕是那些具有基本形狀（例如矩形）的透明鏤空按鈕。它們通常有很細的線邊框，而內(nèi)部部分由純文本組成。

對于取消按鈕的顏色一直是一個很有爭議的事情，那就是在于它該不該被賦予顏色，換句話說，他是否應(yīng)該只是作為中性色存在。帶領(lǐng)這個疑問我經(jīng)過查閱資料，似乎找到了一點苗頭，贊成他不該有顏色的人說“取消按鈕應(yīng)表示退回安全狀態(tài)，而不是號召采取行動。

”簡單來說：我們不應(yīng)該用顏色來裝飾它，否則這樣會給用戶留下強調(diào)的印象。相反，我們需要讓他們知道該按鈕不會進行任何更改，而是返回上一步的操作；還有一種解釋是“當屏幕上的每個按鈕都有顏色時，它們就會爭奪注意力。兩個按鈕都存在顏色會使用戶對每個動作思考的時間更長。使用中性色可以快速讓他們做出選擇”。

贊成取消按鈕應(yīng)該有顏色的人他們則是這樣說：“通過按鈕間樣式的區(qū)分，就足以給出用戶判斷，沒有必要過分強調(diào)他不該有顏色，這樣即使達到了它的作用，但是整體視覺的色彩平衡會消失”。

現(xiàn)目前帶顏色的幽靈按鈕則廣泛的出現(xiàn)在我們的 app 中，我們對于這件事情似乎并沒有太在意。我們在使用主按鈕（實心按鈕）和輔助按鈕（幽靈按鈕），沒有必要使用不同的顏色，能明確告知用戶它們的區(qū)別就可以了。

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

所以不管是那種做法，目的就是通過對比度讓用戶更容易區(qū)分。

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

1. 按鈕的樣式

①填充按鈕

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

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

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

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

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

③圓角按鈕

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

④漂浮按鈕

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

⑤文字按鈕

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

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

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

①可點擊與不可點擊

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

②五種狀態(tài)

在懸停狀態(tài)中，我們最常用的就是在網(wǎng)頁端，特別是在瀏覽官網(wǎng)時會經(jīng)常使用?？梢愿嬖V用戶讓用戶知道他是可以點擊的，在鼠標懸停在上面時他會改變顏色或者文案，這里會存在和用戶之間很有意思的互動。

不過我們在移動端時沒有遇到過這種懸停按鈕，當然懸停狀態(tài)永遠不會在平板電腦和移動設(shè)備上看到，因為我們的手指無法“懸?！薄?/p>

正常狀態(tài)、懸停狀態(tài)、點擊狀態(tài)是我們在設(shè)計時 PC 端時經(jīng)常要為開發(fā)同學(xué)單獨列出來的三件套。點擊狀態(tài)就是在點擊時按鈕發(fā)生的改變，這個狀態(tài)我們在移動端也很常見。

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

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

三、按鈕的文案

其實文案應(yīng)該是 UI/UX 設(shè)計師的基本功，因為一個好的文案能夠更清晰直觀的引導(dǎo)用戶，但是我們實際工作中似乎直接把他們忽略掉了，直接拿著產(chǎn)品經(jīng)理發(fā)來的需求文檔復(fù)制粘貼。

對于按鈕上的文案我們也應(yīng)該重視起來，一個好的按鈕文案可以讓用戶輕松的執(zhí)行操作，流暢完成當前流程；當然一個充滿問題的按鈕文案會增加用戶的使用困惑，徒增一些沒必要的時間。

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

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

1. 具體性

具體性就是按鈕對于動詞的使用，是按鈕最為常見的方法，他會激發(fā)用戶進行操作，當用戶閱讀時他們會知道按下按鈕會做什么。正如“一個好的按鈕用戶無需閱讀任何支持文本就可以進行操作?！?/p>

為什么對于“確認”不適合展示，是因為向用戶展示“確定”按鈕來確認他們想要執(zhí)行的操作相比，向用戶提供一個標有特定操作的按鈕會更高效、更有效。

這樣我們可以自己讀一遍兩個句子“退出前是否保存更改？”“是的”“退出前是否保存更改？”“保存”，這樣對比是不是發(fā)現(xiàn)“是的”會存在很多弊端。去試試因為“是的”是感嘆詞，并不是具體動作。

這樣我們根據(jù)一個實驗來印證這點，我們可以先把上面的標題和內(nèi)容遮擋，只露出按鈕。看一下那個更容易懂。

這個實驗的可以很直觀的應(yīng)證了前面的那句話“一個好的按鈕用戶無需閱讀任何支持文本就可以進行操作”。

像這樣的案例我們在工作中可以在修改信息時可以進行使用，相比較 C 端來說，B 端更應(yīng)該注重兩者文案的區(qū)分，否則用戶的邏輯思緒很容易混亂。

特定按鈕文案將使用戶能夠更快、更準確地完成任務(wù)。并不是所有用戶都會閱讀彈窗中的問題或消息。大多數(shù)人會在沒有仔細或完整地閱讀它的情況下做出決定。我們?nèi)绻梢詼蚀_的描述用戶將能夠看到他們將要執(zhí)行的操作，而無需閱讀彈窗中的文本信息。

2. 準確性

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

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

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

模糊且通用的按鈕標簽會給用戶帶來不確定性。所以我們要貼心的為用戶準備好每一個環(huán)節(jié)，這樣用戶在使用時會更加便捷。

文案是解釋按鈕含義的主要元素。

它應(yīng)該是清晰的、可預(yù)測的和簡單的，出于我們這些界面元素做為我們和用戶之間的溝通橋梁，希望我們能在今后的工作中更加注重文案，讓我們與用戶間有一個愉快的對話，讓用戶感受到我們的產(chǎn)品是有溫度的，能在使用時發(fā)現(xiàn)我們是有認真的在為用戶考慮。

四、總結(jié)

對于簡單講解按鈕，我們意識到，UI 界面中任何一個小元素都不是憑空出現(xiàn)的，他是由若干個問題組成，再由我們?nèi)ミM行尋找解決辦法。

正如設(shè)計是將問題轉(zhuǎn)化為可能性的藝術(shù)。 這是一個本質(zhì)上旨在解決問題的過程，也是一種以人為本的創(chuàng)新方法，整合人的需求、技術(shù)的可能性和商業(yè)成功的要求。

作為 UI/UX 設(shè)計師我們應(yīng)該理解到我們不是為了我們自己去設(shè)計，我們是在為我們的用戶為中心去設(shè)計，只有當用戶真正使用起來覺得開心的產(chǎn)品那這個設(shè)計就是有意義的。希望看完你的用戶在閱讀您的按鈕時將不再感到不確定或困惑。