Marc Edwards

Jonathan Levy

HUI-YUN,LIN

John Manhart

Jordan Dravis

 domaso

Darya Grodsk

Huiling Zhou

Rahul Agarwal

annamicon

Voicu Apostol

Vinay Arora

Abhishek Srivastava

Matjaz Valentar

Chris Morrison

Arthur Arapov

Oleg Frolov

Alen Huang

Alisa Maiboroda

Matjaz Valentar

按鈕交互的設(shè)計(jì)由來(lái)

為了設(shè)計(jì)合適的交互方式，我們需要回顧實(shí)體按鈕的發(fā)展歷史，作為UI組件之一的按鈕來(lái)源于實(shí)體按鈕，現(xiàn)在廣泛用于互聯(lián)網(wǎng)產(chǎn)品中。按鈕非常神奇，只需手指觸摸，就可以打開(kāi)一個(gè)APP、啟動(dòng)汽車或者一個(gè)系統(tǒng)，即使用戶不懂背后的原理。在《Power Button》這本書里，Rachel Plotnick研究了今天按鈕操作的文化起源，描述了按鈕成為互聯(lián)網(wǎng)產(chǎn)品的命令方式，可以實(shí)現(xiàn)毫不費(fèi)力控制。

“你只需按快門，其余的我們來(lái)做。”—柯達(dá)相機(jī)用抓人眼球的口號(hào)來(lái)吸引潛在的顧客。

這正是迄今為止，按鈕吸引用戶的地方，只需簡(jiǎn)單的觸摸，就能獲得處理事件的滿足感。即使很多新家電和其他設(shè)備都進(jìn)化為了觸屏操作，實(shí)體按鈕卻并沒(méi)有完全消失，其塑造的行為習(xí)慣仍然影響按鈕設(shè)計(jì)的直觀性和易用性。

按鈕與鏈接的區(qū)別

按鈕傳達(dá)了用戶可以執(zhí)行的操作，它們通常在UI界面中，比如：對(duì)話框、表單、工具欄等。區(qū)分按鈕和鏈接特別重要：

鏈接：用于導(dǎo)航到另一個(gè)位置，比如：“查看全部”頁(yè)面、跳轉(zhuǎn)另一個(gè)位置等。

按鈕：用于實(shí)現(xiàn)一個(gè)操作，比如：提交、合并、新建和上傳等。

按鈕的多種狀態(tài)

設(shè)計(jì)正確的交互和樣式，對(duì)按鈕設(shè)計(jì)十分重要。按鈕每個(gè)狀態(tài)必須可識(shí)別，要顯著區(qū)別于其他狀態(tài)和周圍的布局，但是也不能完全改變組件或者制造視覺(jué)混亂。

普通狀態(tài)：可交互和可用的狀態(tài)。

焦點(diǎn)狀態(tài)：用戶使用鍵盤或其他輸入方法來(lái)突出顯示一個(gè)元素。

懸停狀態(tài)：用戶把光標(biāo)置于可交互元素上的狀態(tài)。

觸發(fā)狀態(tài)：用戶已點(diǎn)擊按鈕后的狀態(tài)。

加載狀態(tài)：當(dāng)操作沒(méi)有立即實(shí)現(xiàn)時(shí)，表示正在進(jìn)行的狀態(tài)。

禁用狀態(tài)：按鈕目前不可交互，但以后可以使用。

按鈕的多種樣式

最常見(jiàn)的是圓角按鈕，可以輕易識(shí)別，并且在輸入字段旁邊看起來(lái)不錯(cuò)。為按鈕選擇正確的樣式，取決于目的、平臺(tái)和規(guī)范。以下是一些最流行的樣式：

不同樣式的優(yōu)先級(jí)

樣式最初是用來(lái)區(qū)分操作的優(yōu)秀級(jí)。明確操作的優(yōu)先級(jí)，可以在眾多的選擇前，引導(dǎo)用戶。通常，要有一個(gè)突出的按鈕（主按鈕），幾個(gè)二級(jí)按鈕，還有三級(jí)按鈕。

有時(shí)不需要默認(rèn)按鈕

通常，把最常用的按鈕設(shè)置為“默認(rèn)”（使用主樣式）和選中的狀態(tài)。這樣可以幫助大多數(shù)用戶，更快完成他們的任務(wù)，引導(dǎo)正確的方向。

此外，當(dāng)選擇同等重要時(shí)，或者操作存在危險(xiǎn)，在這些情況中，需要用戶明確按鈕的選擇而不是意外選擇。

別讓用戶思考

Don’t make me think（別讓用戶思考）是可用性工程師Steve Krug所著的書的名字（中文《點(diǎn)石成金：訪客至上的網(wǎng)頁(yè)設(shè)計(jì)秘笈》）。其中指出，觸屏是為了讓界面更明顯，而不是讓用戶產(chǎn)生困惑?；诙嗄晔褂貌煌脑O(shè)備和其他產(chǎn)品，用戶養(yǎng)成了對(duì)按鈕外觀和功能的特定期待。如果和“標(biāo)準(zhǔn)”按鈕的樣式差別太大，就會(huì)讓用戶遲疑和困惑。

不要對(duì)可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，會(huì)讓用戶不知道點(diǎn)擊哪里。

一致性提高效率和準(zhǔn)確性

“一致性是最有力的可用性原則之一：當(dāng)元素一直都是統(tǒng)一的樣式，用戶就不必?fù)?dān)心突發(fā)事件。” — Jakob Nielsen

一致性提高速度和準(zhǔn)確性，避免錯(cuò)誤。創(chuàng)建可預(yù)測(cè)性可以幫助用戶獲得掌控感，在產(chǎn)品中實(shí)現(xiàn)他們的目標(biāo)。在創(chuàng)建主要、二級(jí)和三級(jí)樣式時(shí)，嘗試找到一些共同的元素，比如：色彩、形狀等。嘗試不僅對(duì)設(shè)計(jì)的系統(tǒng)保持一致性，對(duì)平臺(tái)也要保持一致性。

按鈕的交互熱區(qū)尺寸

按鍵應(yīng)該是一個(gè)簡(jiǎn)單的任務(wù)，如果用戶點(diǎn)擊按鈕失敗，或者誤點(diǎn)到了旁邊的元素，會(huì)導(dǎo)致不好的體驗(yàn)和浪費(fèi)時(shí)間。

對(duì)于大多數(shù)平臺(tái)，觸屏的區(qū)域至少為48x48dp。交互熱區(qū)的尺寸應(yīng)該是至少9mm，不論屏幕的大小。推薦的觸屏元素的尺寸，至少為7-10mm。

對(duì)于icon按鈕，確認(rèn)交互熱區(qū)大于元素的視覺(jué)邊緣。這點(diǎn)不僅適用于手機(jī)或平板，同樣的推薦尺寸也適用于對(duì)于網(wǎng)頁(yè)的點(diǎn)擊設(shè)備，比如鼠標(biāo)。

按鈕的可用性

所有組件都應(yīng)該注意設(shè)計(jì)的可用性。交互熱區(qū)是影響可用性的一個(gè)因素，其他因素還有字體大小、色彩和對(duì)比。許多工具可以幫助你輕松檢查組件設(shè)計(jì)的實(shí)現(xiàn)效果。

設(shè)計(jì)師應(yīng)該和開(kāi)發(fā)團(tuán)隊(duì)緊密合作，以確保按鈕的正常使用。按鈕作為一個(gè)可點(diǎn)擊的元素，在用戶觸發(fā)時(shí)，給予反饋。用戶通過(guò)按鈕這個(gè)元素，可以實(shí)現(xiàn)交互控制。

按鈕的交互手勢(shì)

通過(guò)手勢(shì)操作，用戶可以和APP進(jìn)行交互。觸摸作為實(shí)現(xiàn)操作的另一種方式，可以節(jié)省時(shí)間，獲得觸覺(jué)的掌控感。雖然一些手勢(shì)，比如滑動(dòng)引出相關(guān)的操作、雙擊點(diǎn)贊或長(zhǎng)按，現(xiàn)在越來(lái)越廣泛地使用，但對(duì)于普通用戶，這些手勢(shì)不太明顯。建議使用手勢(shì)作為替代的方案，供高級(jí)用戶使用。

按鈕的文案

按鈕文案和樣式一樣重要。使用錯(cuò)誤的文案，會(huì)讓用戶困惑，浪費(fèi)時(shí)間，也會(huì)誤操作。

一個(gè)好的按鈕文案，可以引導(dǎo)用戶操作。最好使用動(dòng)詞，告訴用戶在做什么。就像這個(gè)按鈕在詢問(wèn)用戶，“你想收藏嗎？”或者“你想確認(rèn)命令嗎？”

避免使用“是”或“不”，或者太通用的，比如提交。

按鈕的位置

確認(rèn)和取消的按鈕，哪個(gè)放在右邊，設(shè)計(jì)師們因此而爭(zhēng)論不休。

• 確認(rèn)按鈕放在左邊，符合正常的閱讀順序。如果我們知道用戶最可能的選擇，可以幫助用戶節(jié)省時(shí)間。Windows系統(tǒng)將確認(rèn)的按鈕放在左邊。
• 確認(rèn)按鈕放在右邊，優(yōu)化流程。將確認(rèn)按鈕放在右邊，可以幫助用戶在操作前，評(píng)估所有的選擇，避免錯(cuò)誤和沖動(dòng)決策。蘋果系統(tǒng)將確認(rèn)按鈕放在右邊。

兩個(gè)選擇都有理由，并且也不會(huì)造成使用困難。我個(gè)人傾向于放在右邊，在活動(dòng)列表或者對(duì)話框，可能因?yàn)槲页Ｓ肕ac系統(tǒng)。

按鈕的禁用設(shè)計(jì)

每個(gè)人都遇到過(guò)禁用按鈕，被困在當(dāng)前頁(yè)面幾秒鐘或幾分鐘，嘗試弄清楚為什么禁用按鈕妨礙了當(dāng)前進(jìn)程，然后要怎樣重新開(kāi)始。禁用狀態(tài)提示組件當(dāng)前不可交互，但是以后可以。為什么使用禁用按鈕呢？因?yàn)槿绻麖脑瓉?lái)的位置上移除按鈕，或者在上層用內(nèi)容覆蓋掉按鈕，會(huì)給用戶帶來(lái)困惑。

我建議，避免使用禁用按鈕。最好讓按鈕永遠(yuǎn)可以使用，如果用戶沒(méi)有提供必要的信息，只需高亮強(qiáng)調(diào)空白的輸入?yún)^(qū)域，或者提醒用戶。

ps：material design中懸浮按鈕、拖拽狀態(tài)，可以了解一下

原文鏈接 | https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

來(lái)源 | 彩云譯設(shè)計(jì) （id:caiyunyisheji）
本文原作者 | Taras Bakusevych
本文譯者 | Bravert

* 動(dòng)作按鈕

* 常用按鈕樣式

* 按鈕的顏色和形狀

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

* 標(biāo)簽按鈕

* 觸摸屏按鈕

* 按鈕的位置

* 系統(tǒng)按鈕

* 總結(jié)

動(dòng)作按鈕 

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

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

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

行為召喚按鈕

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

1_2.主要操作按鈕

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

主要操作按鈕

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

1_3.次要操作按鈕

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

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

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

1_4.三級(jí)按鈕

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

不同形式的三級(jí)按鈕

一般來(lái)說(shuō)，人們會(huì)使用較小或較不突出的按鈕樣式。

常用按鈕樣式 

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

2_1.實(shí)心按鈕

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

一個(gè)實(shí)心按鈕

2_2.線性和幽靈按鈕

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

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

2_3.圓形按鈕

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

圓形按鈕

2_4.FAB（懸浮按鈕）

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

一個(gè)懸浮按鈕

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

2_5.文字鏈接

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

文本鏈接的不同樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

按鈕的顏色和形狀 

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

3_1.顏色

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

不同顏色的按鈕

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

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

3_2.邊界半徑

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

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

3_3.投影

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

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

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

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

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

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

以下是一些簡(jiǎn)單的方法可以讓字體清晰易讀：

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

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

* 選擇字體時(shí)，請(qǐng)確保字體清晰。

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

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

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

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

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

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

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

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

第一個(gè)方法：

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

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

第二個(gè)方法：

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

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

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

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

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

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

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

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

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

懸停演示按鈕

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

4_3.焦點(diǎn)

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

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

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

4_4.按下

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

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

4_5.點(diǎn)擊

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

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

按鈕標(biāo)簽 

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

5_1.動(dòng)詞的用法

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

5_2.案例

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

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

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

句子大小寫，例如“Next section”，我把它們用于更“友好”或“對(duì)話”的平臺(tái)。它更像是一句話，正常我們一句話結(jié)束會(huì)加一個(gè)句號(hào)，但是為了設(shè)計(jì)的美感，請(qǐng)不要加一個(gè)句號(hào)。

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

5_3.一致性

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

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

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

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

觸摸屏按鈕 

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

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

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

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

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

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

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

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

按鈕位置 

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

主要和次要按鈕的兩種不同立場(chǎng)

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

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

系統(tǒng)按鈕 

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

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é)

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

原文地址：UX Collective

譯文地址：水手哥學(xué)設(shè)計(jì)（公眾號(hào)）

作者：Tess Gadd

譯者： 水手哥