按鈕是一種可以讓用戶產(chǎn)生對其描述作用的交互式元素。咱們打個賭，如果一個按鈕上顯示“保存”，那么單擊它很可能會“保存”某些內(nèi)容。按鈕也是任何數(shù)字產(chǎn)品中最重要的交互元素之一。

按鈕也可以觸發(fā)諸如購買，下載，發(fā)送或者其它很多重要的操作。數(shù)字按鈕是現(xiàn)實世界中按鈕的下一代表現(xiàn)形式，比如電視遙控器，音樂播放機(jī)或者游戲控制器中的按鈕。

你最應(yīng)該知道的一件事

一個按鈕應(yīng)該看起來就像是“按鈕”

設(shè)計按鈕時最重要的原則是讓其足夠的突出，不會與其它任何東西混淆在一起。

從左到右，將按鈕中的元素逐漸刪除，它的功能性開始消失，

以至于變成了裝飾或者文字，失去了其可操作的特性。

熟悉的就是好的

我們習(xí)慣了通常與動作關(guān)聯(lián)的某些形狀或者形式。按鈕看起來越類似于與按鈕相關(guān)聯(lián)的按鈕則越好。這就是為什么矩形（或者圓角矩形）始終是按鈕最安全也最常見的選擇的原因。

看到這個我們就會認(rèn)為它是按鈕

用戶無法識別其他形狀的按鈕，比如三角形，原型，或者不規(guī)則形狀。所以，在使用這些形狀作為按鈕的時候請務(wù)必小心，僅僅在產(chǎn)品整體風(fēng)格需要時再去使用它們。

用戶需要更多的學(xué)習(xí)才可以將上面的圖形識別為按鈕

按鈕元素詳解

在設(shè)計按鈕時，請記住按鈕中的每一個設(shè)計要點(diǎn)，明智的選擇它們。以品牌手冊為基準(zhǔn)，考慮哪種按鈕與品牌相匹配并能更好的適合于整個界面。

你應(yīng)該使用設(shè)定好的網(wǎng)格基數(shù)來設(shè)置填充和安全外間距。在上圖的范例里邊，左側(cè)內(nèi)部間距是垂直間距的二倍，這是提高可讀性的安全選擇。

間距和對齊

按鈕間距不均勻是所有界面中最常見的問題之一。仔細(xì)檢查按鈕表情是否在水平和垂直方向上居中。如果確實需要，可以在設(shè)計規(guī)范中設(shè)定此類的規(guī)則。

除了用基于網(wǎng)格的方式外，我們還可以使用大寫字母W來選擇按鈕安全距離的方法。如下圖，如果按鈕的上下兩側(cè)可以放下一個W的話，在側(cè)面，最合適的情況是放下兩個W，以此來提高可讀性。

另外不要忘記保持按鈕之間的安全空間。如果你有一組按鈕，那么它們之間的安全空間如下圖表示，務(wù)必不要重疊。

合適的按鈕大小

網(wǎng)頁或者移動端設(shè)計中的按鈕都應(yīng)具有正確的最小尺寸。如果你的按鈕太小，用戶會很難點(diǎn)擊或者使用它們。這樣的另一個后果就是，用戶一怒之下卸載您的應(yīng)用。所以最小的按鈕尺寸為44X44pt，請務(wù)必注意。

移動端按鈕的尺寸最好在50X50以上。在基于光標(biāo)的設(shè)備中，32X32也應(yīng)該可以用。但請記住，即使是在臺式機(jī)上，按鈕越大，用戶使用起來就越容易。

按鈕設(shè)計最佳實踐

重要的按鈕也可以與圖標(biāo)配合使用。如結(jié)賬按鈕可以通過購物籃或者購物車圖標(biāo)促使用戶快速識別，但前提依然是要將“結(jié)賬”一詞顯示出來。

在按鈕標(biāo)簽之后放置向右箭頭，可以讓按鈕的導(dǎo)向性進(jìn)一步加強(qiáng)。用戶更加迫切的點(diǎn)擊并繼續(xù)操作。如果你想提升頁面轉(zhuǎn)化效果，可以考慮采取這種設(shè)計方式。

與平面化的按鈕相比，帶有陰影的按鈕也可以讓用戶有更強(qiáng)的點(diǎn)擊欲望，并且更快的注意到這個按鈕。在按鈕中添加一個微妙的陰影，可以讓它從背景中脫穎而出。關(guān)于按鈕陰影的最佳實踐將在本章稍后討論。

圓角按鈕

圓角按鈕被認(rèn)為比鋒利邊緣的按鈕更為友好和正面。但是，與此同時，這種做法使圍繞它們的內(nèi)容設(shè)計變得更加困難。如果你在按鈕上方保留了對齊文本，則圓角越圓，在該文本在視覺上將會越小。太會讓你感覺左邊距和上方文本不在同一個位置上（也就是說沒有對齊）。

對齊圖標(biāo)

在按鈕上進(jìn)行良好的圖標(biāo)對齊是一件很困難的事情。在很多情況下，字體粗細(xì)，圖標(biāo)粗細(xì)之間的關(guān)系都會影響到對齊。但是，有一條簡單而有用的規(guī)則，在大多數(shù)情況下都適用。

根據(jù)按鈕的圓角半徑，我們來創(chuàng)建一個圓或者正方形，其大小等于按鈕的高度。在這個圖形中，我們創(chuàng)建另一個形狀來容納圖標(biāo)。這個圖形應(yīng)該在一個視覺形狀中有填充，以便與我們的文本高度相同。然后，將圖標(biāo)放置在較小的形狀中。

如果是人字形圖標(biāo)，那么最高使其與文本高度相同，并且您還可以根據(jù)字體的寬度檢查線寬。匹配越緊密，最終結(jié)果越好。

邊緣平衡

如果你使用的是圓角按鈕，請記住將正確的圓角比率與屏幕上的其它元素對齊。在所有的情況下使用一種設(shè)置會造成視覺邊際的不平衡。

對角線間距與左側(cè)和底部的對角線間距相同。這樣可以更好更快的處理外部邊緣。

對角線間距大于（左側(cè)）間距，小于（右側(cè)）間距。這會使邊緣突出太多，使注意力從按鈕本身上移開。如上圖兩種都是錯誤的例子。

最后的總結(jié)

當(dāng)你開始設(shè)計主按鈕，輔助按鈕和三級按鈕時，請記住每次都要針對上面這些因素進(jìn)行檢查。即使是很小的不一致或者對齊不良也會導(dǎo)致用戶轉(zhuǎn)化率降低。

請記住以下要點(diǎn)：

·?使你的按鈕看起來像一個按鈕

· 使標(biāo)簽垂直和水平居中

· 按鈕內(nèi)部有足夠的空間（或填充）

· 如果你使用的是圖標(biāo)，請選擇正確的尺寸和對齊方式

· 根據(jù)按鈕的位置設(shè)置合適的邊框半徑

· 檢查該半徑是否與你的其它屏幕元素匹配

· 確保有合適的尺寸。按鈕越大越容易使用，包括臺式電腦。

原文地址：https://uxdesign.cc/design-better-buttons-a5c90a113280

翻譯：靜電 / 作者：Michal Malewicz

//////?END?//////

? ? ? ? ?

本文內(nèi)容為轉(zhuǎn)載 僅供個人學(xué)習(xí)使用