本文列舉了如何設(shè)計(jì)出更好的按鈕的七個(gè)要點(diǎn)，希望能給你帶來(lái)思考與啟發(fā)。

按鈕是觸發(fā)它所描述功能的可交互元素。如果一個(gè)按鈕上寫(xiě)著“保存”，點(diǎn)它十有八九會(huì)有類(lèi)似保存操作。按鈕也是所有電子產(chǎn)品上最重要的交互元素之一。

按鈕能夠觸發(fā)購(gòu)買(mǎi)、下載、發(fā)送和很多其他重要操作。數(shù)字按鈕也沿襲自真實(shí)世界中比如電視遙控、錄像機(jī)或者游戲手柄上的實(shí)體按鈕。

最重要的須知：按鈕得看起來(lái)像按鈕

設(shè)計(jì)按鈕最重要的法則就是要使按鈕足夠突出，以免按鈕和其他元素混淆。

從按鈕中逐步移除元素，按鈕的功能也開(kāi)始消融丟失。它變成了裝飾或者說(shuō)文本，失去可操作的特性。

熟悉的=好的

我們習(xí)慣于和行為有自然關(guān)聯(lián)的特定形狀和形式。按鈕看起來(lái)和我們認(rèn)為有關(guān)聯(lián)的行為越相似，設(shè)計(jì)越成功。這就是為什么選擇一個(gè)矩形（或者一個(gè)圓角矩形）作為按鈕是最安全的。

這個(gè)元素會(huì)被立即識(shí)別為一個(gè)按鈕

其他形狀和形式對(duì)用戶(hù)就未必有這樣的可識(shí)別性。需謹(jǐn)慎使用他們，盡量在你產(chǎn)品的常規(guī)風(fēng)格需要與眾不同時(shí)才使用。

其他形狀和形式（三角形、圓形、自由形態(tài)）對(duì)用戶(hù)就未必有這樣的可識(shí)別性。需謹(jǐn)慎使用他們，盡量在你產(chǎn)品的常規(guī)風(fēng)格需要與眾不同時(shí)才使用。

需要花費(fèi)更多時(shí)間才能被識(shí)別的可點(diǎn)擊元素

按鈕分解

按鈕設(shè)計(jì)需熟記每個(gè)元素并妥善選擇。使用品牌手冊(cè)作為基準(zhǔn)，思考哪種按鈕能夠匹配品牌并和界面很好相容。

你應(yīng)該使用網(wǎng)格基本數(shù)值用來(lái)設(shè)置內(nèi)外邊距。以上圖為例，左側(cè)內(nèi)邊距為兩倍上下內(nèi)邊距，這是種增加可讀性的安全做法。

間距和對(duì)齊

不規(guī)則間距按鈕是所有界面都會(huì)遇到最普遍的問(wèn)題之一。務(wù)必再三確認(rèn)按鈕標(biāo)簽是否水平和豎直居中。如果要十分確定，請(qǐng)建立規(guī)范。

除了基于網(wǎng)格的方法，使用大寫(xiě)字母W確定邊距也是一個(gè)穩(wěn)妥的辦法。如果按鈕標(biāo)簽4個(gè)邊距都至少1 x W，那就沒(méi)問(wèn)題。為了提高可讀性，水平邊距留出2 x W更好。

別忘了按鈕之間安全間距。如果界面上有很多按鈕，保證各個(gè)按鈕外邊距不重疊比較穩(wěn)妥。

合理的尺寸

桌面和移動(dòng)端的按鈕都應(yīng)該有它們的最小尺寸。如果按鈕太小，就會(huì)導(dǎo)致按鈕難以用手指或鼠標(biāo)點(diǎn)擊。這會(huì)導(dǎo)致給用戶(hù)帶來(lái)困擾，用戶(hù)甚至?xí)苯有遁d你的APP。在移動(dòng)端，最好把44 x 44 pt作為所有可交互元素的最小尺寸。

移動(dòng)端上的按鈕尺寸在50左右最佳。如果是基于光標(biāo)的設(shè)備，32 x 32也是可行的。牢記即使在桌面端，更大按鈕也依然代表它使用起來(lái)更容易。

良好的實(shí)踐

重要的按鈕也會(huì)搭配有圖標(biāo)。一個(gè)“結(jié)賬”可以通過(guò)一個(gè)購(gòu)物籃或購(gòu)物車(chē)圖標(biāo)快速識(shí)別，但是只在與文字“結(jié)賬”同時(shí)出現(xiàn)時(shí)有效。

一個(gè)合適的箭頭或“>”放在按鈕標(biāo)簽后，能更強(qiáng)地傳達(dá)信息。更強(qiáng)制地去引導(dǎo)用戶(hù)點(diǎn)擊并“繼續(xù)”。如果你要強(qiáng)化CTA，這個(gè)辦法就很有效。

相較扁平的按鈕，有陰影的按鈕會(huì)更有可點(diǎn)擊性、更快被識(shí)別。加個(gè)微妙的陰影可以使按鈕在背景中更為突出。

圓角

圓角按鈕會(huì)看起來(lái)比尖角按鈕更友好和積極。同時(shí)，圓角按鈕周?chē)膬?nèi)容設(shè)計(jì)難度劇增。如果文本標(biāo)簽在按鈕上方與按鈕保持左對(duì)齊，那么按鈕的圓角越大，文本標(biāo)簽和按鈕視覺(jué)上越不協(xié)調(diào)。這讓按鈕感覺(jué)看起來(lái)同時(shí)有兩個(gè)左邊距。

圖標(biāo)對(duì)齊

合適的圖標(biāo)對(duì)齊是按鈕設(shè)計(jì)中最難的事之一。大多數(shù)情況下，字重和圖標(biāo)尺寸是直接相關(guān)，它們的關(guān)系也是特有的。但是依然有個(gè)簡(jiǎn)單有效的法則適用于大多數(shù)情況。

根據(jù)按鈕圓角半徑畫(huà)個(gè)圓，或者根據(jù)按鈕高度畫(huà)個(gè)方塊。在它內(nèi)部，再畫(huà)個(gè)小的來(lái)放置圖標(biāo)。大的形狀和小的之間的內(nèi)邊距應(yīng)該有和標(biāo)簽文字高度相同。然后就可以把圖標(biāo)放到小的形狀里。

在有圖標(biāo)的情況下，最好保持圖標(biāo)高度和文字高度一致，可以對(duì)比文本線(xiàn)寬和單字寬，然后使它們匹配度越高效果越好

邊緣平衡

在使用圓角矩形按鈕時(shí)，需要注意去調(diào)整圓角和其他界面元素的比例來(lái)確定使用多大的圓角。都使用相同的圓角半徑會(huì)使得外邊距不平衡。

對(duì)話(huà)框邊距也是一樣，就像左邊距和底邊距。因此，處理起外邊緣會(huì)更舒服和快速。

對(duì)話(huà)框按鈕和背景之間的左邊距和底邊距過(guò)大（左）、過(guò)小（右）。這讓對(duì)話(huà)框邊緣太過(guò)突出，奪取了按鈕本身的關(guān)注度。

總結(jié)

當(dāng)你創(chuàng)建一級(jí)、二級(jí)、三級(jí)按鈕時(shí)，謹(jǐn)記每次去檢查一系列因素。甚至小的不統(tǒng)一或者不對(duì)齊會(huì)降低交互質(zhì)量。按鈕交互和點(diǎn)擊都影響重大。

謹(jǐn)記：

1. 把按鈕設(shè)計(jì)的像按鈕
2. 保證標(biāo)簽和按鈕水平、豎直居中
3. 保證按鈕有充足內(nèi)邊距
4. 為圖標(biāo)選擇正確的大小和對(duì)齊關(guān)系
5. 根據(jù)按鈕的使用環(huán)境設(shè)置合適的圓角半徑
6. 檢查按鈕圓角半徑是否與其他元素契合
7. 選擇合適尺寸。按鈕越大，用起來(lái)越簡(jiǎn)單。桌面端同理。

作者：Michal Malewicz

原文鏈接：https://uxdesign.cc/design-better-buttons-a5c90a113280

譯者：Matrix，公眾號(hào)：交譯所

本文由 @交譯所 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議