原文：
https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

作者：Tess Gadd

翻譯：水手哥（公眾號ID:shuishouge_design）

按鈕在UI界面設(shè)計中是不可或缺的元素之一，這篇文章我們將介紹不同類型的按鈕包括按鈕的狀態(tài)和交互。我們介紹的都是日常界面中使用的普通按鈕，并不包括單選按鈕、選項(xiàng)卡、復(fù)選框等其他類型的按鈕。

按鈕的不同分類如下：

• 動作按鈕
• 常用按鈕樣式
• 按鈕的顏色和形狀
• 按鈕狀態(tài)和反饋
• 標(biāo)簽按鈕
• 觸摸屏按鈕
• 按鈕的位置
• 系統(tǒng)按鈕
• 總結(jié)

動作按鈕

我們將分析按鈕的層次結(jié)構(gòu)和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。

1_1.行為召喚（CTA / C2A）

在設(shè)計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產(chǎn)品設(shè)計中如果強(qiáng)烈建議用戶應(yīng)該做的事情應(yīng)該使用CTA按鈕。

行為召喚按鈕

對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。

1_2.主要操作按鈕

雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應(yīng)該是一個強(qiáng)大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應(yīng)該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。

主要操作按鈕

對于主要操作，我喜歡使用實(shí)心按鈕。

1_3.次要操作按鈕

從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們?yōu)橛脩籼峁┑闹饕僮鞯膫溥x方案。

主按鈕旁邊的輔助按鈕的兩種設(shè)計

我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。

1_4.三級按鈕

三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內(nèi)容，前提是它們不是主要操作。

不同形式的三級按鈕

一般來說，人們會使用較小或較不突出的按鈕樣式。

常用按鈕樣式

下面我們將介紹常見的按鈕樣式，不同風(fēng)格的按鈕樣式和他們的使用技巧。

2_1.實(shí)心按鈕

實(shí)心按鈕是帶有實(shí)心填充的按鈕。

一個實(shí)心按鈕

2_2.線性和幽靈按鈕

線性按鈕和實(shí)心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經(jīng)?；Q使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點(diǎn)更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點(diǎn)更明顯）。

線性按鈕（左）和幽靈按鈕（右）

2_3.圓形按鈕

圓形按鈕其邊緣設(shè)置為最大圓角半徑。

圓形按鈕

2_4.FAB（懸浮按鈕）

懸浮按鈕是一種巧妙的設(shè)計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標(biāo)按鈕，但實(shí)際上它們用在屏幕上的主要操作按鈕。

一個懸浮按鈕

如果您想了解有關(guān)FAB的更多信息，我建議您在Material Design的網(wǎng)站上查看(
https://material.io/design/components/buttons-floating-action-button.html )

2_5.文字鏈接

文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。

文本鏈接的不同樣式

在顏色方面，大多數(shù)網(wǎng)站使用藍(lán)色，因?yàn)樗亲钊菀鬃R別的。為什么文本鏈接的顏色會使用藍(lán)色？它一直追溯到是萬維網(wǎng)的發(fā)明者，在他選擇顏色時發(fā)現(xiàn)藍(lán)色很酷的一種顏色，即使是色盲的人通常也能看到它。

2_6.帶圖標(biāo)的標(biāo)簽按鈕

圖標(biāo)按鈕越來越受歡迎，一些按鈕仍然需要一個標(biāo)簽來確保按鈕的語意明了。

帶圖標(biāo)的標(biāo)簽按鈕

處理圖標(biāo)和標(biāo)簽時最棘手的事情是弄清楚字體組合的圖標(biāo)有多大。

方法1：讓圖標(biāo)的大小對齊字體的頂線。

方法2：讓圖標(biāo)的大小對齊字體的行高。需要注意的是確保圖標(biāo)和字體的組合視覺均衡。

2_7.圖標(biāo)按鈕

圖標(biāo)按鈕沒有標(biāo)簽，只是一個圖標(biāo)。因?yàn)樗鼈儧]有標(biāo)簽，所以它們在界面中節(jié)省了大量空間。圖標(biāo)按鈕還可以將其他圖標(biāo)按鈕一起排列在它們的小空間中。

圖標(biāo)按鈕具有不同的風(fēng)格

如果你在為計算機(jī)認(rèn)知度較低的人群設(shè)計產(chǎn)品時，我建議使用帶標(biāo)簽的按鈕 – 尤其是那些很抽象的語意。

2_8.帶圖標(biāo)的文本鏈接

某些文本鏈接可能帶有圖標(biāo)。這些通常不會在正文中使用。

各種帶圖標(biāo)的文本鏈接

按鈕的顏色和形狀

在設(shè)計按鈕時，需要考慮以下幾個不同的元素。

3_1.顏色

在設(shè)計產(chǎn)品時，你應(yīng)該要考慮有視覺障礙的人。為確保每個人都可以訪問你的顏色，你可以使用在線對比度檢查器。我使用的是那個。(
https://accessible-colors.com/ )

不同顏色的按鈕

另外，在選擇顏色時應(yīng)該考慮色彩心理學(xué)。紅色按鈕多用于刪除，黃色按鈕多用于警示等。

“刪除”、“警告”、“保存”和“更多”按鈕

3_2.邊界半徑

邊界半徑為按鈕提供了很多個性化設(shè)計。具有更圓半徑的按鈕看起來更有趣。

不同邊界半徑設(shè)置的按鈕

3_3.投影

按鈕上的投影使按鈕更加自然引人注意。陰影也可用于指示不同的狀態(tài)。 (
https://material.io/design/environment/elevation.html#depicting-elevation )

Material Design通過使按鈕在懸停狀態(tài)下來達(dá)到這個效果。

不同陰影設(shè)置的按鈕

3_4.標(biāo)簽樣式

標(biāo)簽樣式歸結(jié)為字體以及閱讀的容易程度。選擇字體時，請確保它清晰可辨。

不同標(biāo)簽樣式的按鈕

以下是一些簡單的方法可以讓字體清晰易讀：

* 選擇大寫的標(biāo)簽或大標(biāo)題。（Material Design使用過帶有大寫標(biāo)簽的按鈕。）

* 確保標(biāo)簽顏色與按鈕填充對比較為突出。您可以使用(
http://accessible-colors.com/ ) 查看。始終確保您的顏色符合AAA要求。

* 選擇字體時，請確保字體清晰。

3_5.垂直內(nèi)間距

按鈕的大小對界面的可訪問性起著很大的作用。大多數(shù)沒有經(jīng)驗(yàn)的設(shè)計師會說“按鈕的高度應(yīng)該是36像素”。如果你是為產(chǎn)品系統(tǒng)的設(shè)計按鈕。你應(yīng)該采用所用字體的行高，并在其中添加一定單位的內(nèi)間距。例如：“我的按鈕標(biāo)簽的行高為20px，垂直內(nèi)間距為8px”。

不同垂直內(nèi)間距的按鈕

為什么會這樣設(shè)定呢？這里有兩個原因：

1）有視覺障礙的人可能會增大瀏覽器中的字體，因此他們需要更改字體大小而不會將按鈕高度定死。

2）這也是開發(fā)人員創(chuàng)建按鈕的方式-他們在DIV容器中添加內(nèi)間距，而不是固定高度。

3_6.水平內(nèi)間距

有兩種方法可以接近水平內(nèi)間距。

第一個方法：

使按鈕寬度與網(wǎng)格對齊。這是保持所有按鈕長度一致的好方法。但是它限制了你可以使用的字體數(shù)量。

寬度由網(wǎng)格決定的按鈕

第二個方法：

兩側(cè)有固定內(nèi)間距。我通常還會定按鈕最小寬度，雖然避免了很窄的按鈕，但是最小寬度按鈕可容納的不同字段會讓按鈕看上去不是很均勻。

寬度由內(nèi)間距和標(biāo)簽長度決定的按鈕

按鈕狀態(tài)和反饋

按鈕狀態(tài)讓用戶知道他們是否可以點(diǎn)擊、已經(jīng)點(diǎn)擊或已成功點(diǎn)擊。按鈕還可以有重疊的狀態(tài)。例如可以同時是“點(diǎn)擊”和“懸?！睜顟B(tài)。

4_1.點(diǎn)擊和禁用狀態(tài)

點(diǎn)擊狀態(tài)就是鼠標(biāo)可以點(diǎn)擊按下按鈕的狀態(tài)，當(dāng)然如果用戶沒有完成必要的步驟，按鈕可以被禁用。例如用戶沒有輸入他們的姓名和電子郵件地址，他們就不能提交他們的詳細(xì)信息。

點(diǎn)擊和禁用按鈕

4_2.懸停和懸停離開（鼠標(biāo)懸停和鼠標(biāo)懸停離開）

在PC端按鈕應(yīng)具有不同的狀態(tài)，讓用戶知道它是可點(diǎn)擊的。通常“懸?！睜顟B(tài)和“懸停離開”狀態(tài)相反，但也不一定。你應(yīng)該有效的區(qū)分讓用戶感知鼠標(biāo)懸停在某個按鈕上。

懸停演示按鈕

平板電腦和移動設(shè)備上永遠(yuǎn)不會出現(xiàn)懸停狀態(tài)，因?yàn)槟愕氖种笩o法“懸?！?。如果您正在為應(yīng)用程序進(jìn)行設(shè)計，請不要擔(dān)心此狀態(tài)。

4_3.焦點(diǎn)

焦點(diǎn)狀態(tài)可能會讓用戶困惑。如果你的用戶專注度較差，他們可能需要使用選項(xiàng)卡式導(dǎo)航。用戶將點(diǎn)擊“選項(xiàng)卡”在網(wǎng)站上移動，從一個導(dǎo)航鏈接移動到下一個。這意味著按鈕需要有一個“焦點(diǎn)”狀態(tài)才能顯示它是“可點(diǎn)擊的或尚未點(diǎn)擊”。

默認(rèn)的焦點(diǎn)狀態(tài)是藍(lán)色“發(fā)光”，幸運(yùn)的是，我們生活在一個可以自定義按鈕狀態(tài)的時代。大多數(shù)設(shè)計師對懸停和焦點(diǎn)狀態(tài)使用相同的視覺提示。

兩個不同“焦點(diǎn)”狀態(tài)的例子

4_4.按下

按下狀態(tài)是當(dāng)用戶的光標(biāo)或手指“按住”按鈕時的狀態(tài)。當(dāng)用戶將手指或光標(biāo)“釋放”在按鈕上時，該按鈕會指示為“已點(diǎn)擊”。

“按下”狀態(tài)的按鈕

4_5.點(diǎn)擊

按鈕需要“點(diǎn)擊”狀態(tài)以向用戶指示它已被點(diǎn)擊。

“點(diǎn)擊”狀態(tài)的按鈕

按鈕標(biāo)簽

按鈕標(biāo)簽的訣竅是一致性。我們在產(chǎn)品設(shè)計前期需要制定按鈕標(biāo)簽的規(guī)范，以避免以后花更多時間去改變你所有的按鈕標(biāo)簽。

5_1.動詞的用法

大多數(shù)按鈕都包含指示按鈕將執(zhí)行什么操作，例如“保存”、“發(fā)布”、“編輯”。雖然“back”和“next”不是動詞，但在接口上下文中，它們的工作方式似乎相同。我喜歡在編寫按鈕標(biāo)簽時使用“動詞” “名詞”結(jié)構(gòu)，這會讓操作更具規(guī)定性，例如“保存文章”等，而不是“保存”。

5_2.案例

你還應(yīng)該決定使用哪種字體大小寫。以下是我使用的一些規(guī)范：

所有大寫字母，例如“NEXT SECTION”，我把它們用于更專業(yè)的平臺。Material Design使用所有大寫字母的按鈕。

標(biāo)題框，例如“Next Section”，我傾向于避免使用標(biāo)題大小寫，因?yàn)樗幌窬渥哟笮懩菢尤菀组喿x。就語調(diào)而言，我認(rèn)為它介于“專業(yè)”和“會話”之間。

句子大小寫，例如“Next section”，我把它們用于更“友好”或“對話”的平臺。它更像是一句話，正常我們一句話結(jié)束會加一個句號，但是為了設(shè)計的美感，請不要加一個句號。

小寫，例如“next section”，小寫按鈕標(biāo)簽使用頻率較低。

5_3.一致性

為按鈕編寫標(biāo)簽時，請確保一致性。以下是一些我在項(xiàng)目使用的指導(dǎo)原則：

選擇字?jǐn)?shù)：每個按鈕一個、兩個或多個字

選擇大小寫：句子大小寫，或大寫，或標(biāo)題大小寫，或小寫

標(biāo)簽結(jié)構(gòu)：如“動詞” “名詞”，或“動詞”等。

觸摸屏按鈕

桌面按鈕大小調(diào)整（單擊）

因?yàn)樽烂嫔系墓鈽?biāo)比觸摸屏上的手指小，所以您可以將按鈕縮小很多。

觸摸屏按鈕尺寸（點(diǎn)擊）

麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究表明，人在使用觸摸屏?xí)r手指部分是8-10毫米，如果你想避免用戶手指觸摸錯誤，最小目標(biāo)尺寸需要10毫米或更大。如上所述-我需要較大的按鈕。

那么，你應(yīng)該做多大尺寸的按鈕呢？專家們說的是：

Material Design建議接觸目標(biāo)應(yīng)為48dp x 48dp，不同接觸點(diǎn)之間距為8dp。

雖然我找不到關(guān)于iOS設(shè)計系統(tǒng)目標(biāo)尺寸的任何文檔，但一般的理解是，它的最小目標(biāo)尺寸是44 x 44磅。

如果您在設(shè)計大小尺寸方面遇到困難，我強(qiáng)烈推薦Zac Dickerson關(guān)于易用性的故事。

按鈕位置

如果你非要放置2個按鈕，主按鈕應(yīng)放在哪一側(cè)？

主要和次要按鈕的兩種不同立場

選項(xiàng)A顯示左側(cè)為主按鈕。它可能是用戶首先想要看到的，所以先顯示它。

選項(xiàng)B顯示右側(cè)為主按鈕。我們希望用戶首先看到輔助按鈕，方便他們繼續(xù)完成他們的旅程。右側(cè)的按鈕也表示繼續(xù)。

系統(tǒng)按鈕

這里會介紹一些很酷的設(shè)計原則和系統(tǒng)。我喜歡Material Design System的按鈕，因?yàn)樗麄兊脑硎墙?jīng)過深思熟慮的。

Material Design System的按鈕

Material Design 按鈕圖片

Material Design中介紹了按鈕的操作，以及按鈕如何與系統(tǒng)中的其他組件交互。我喜歡用戶在觸摸屏上使用按鈕的交互方式。

查看按鈕部分：

https://material.io/design/components/buttons.html

懸浮按鈕在這里查看：

https://material.io/design/components/buttons-floating-action-button.html

總結(jié)

如果沒有按鈕，你就不能真正構(gòu)建界面；我們應(yīng)該更多的關(guān)注它們。了解按鈕在界面中是如何設(shè)計的？怎樣正確的使用按鈕并為你的用戶提供最佳的體驗(yàn)？