本文列舉了如何設計出更好的按鈕的七個要點，希望能給你帶來思考與啟發。

按鈕是觸發它所描述功能的可交互元素。如果一個按鈕上寫著“保存”，點它十有八九會有類似保存操作。按鈕也是所有電子產品上最重要的交互元素之一。

按鈕能夠觸發購買、下載、發送和很多其他重要操作。數字按鈕也沿襲自真實世界中比如電視遙控、錄像機或者游戲手柄上的實體按鈕。

最重要的須知：按鈕得看起來像按鈕

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

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

熟悉的=好的

我們習慣于和行為有自然關聯的特定形狀和形式。按鈕看起來和我們認為有關聯的行為越相似，設計越成功。這就是為什么選擇一個矩形（或者一個圓角矩形）作為按鈕是最安全的。

這個元素會被立即識別為一個按鈕

其他形狀和形式對用戶就未必有這樣的可識別性。需謹慎使用他們，盡量在你產品的常規風格需要與眾不同時才使用。

其他形狀和形式（三角形、圓形、自由形態）對用戶就未必有這樣的可識別性。需謹慎使用他們，盡量在你產品的常規風格需要與眾不同時才使用。

需要花費更多時間才能被識別的可點擊元素

按鈕分解

按鈕設計需熟記每個元素并妥善選擇。使用品牌手冊作為基準，思考哪種按鈕能夠匹配品牌并和界面很好相容。

你應該使用網格基本數值用來設置內外邊距。以上圖為例，左側內邊距為兩倍上下內邊距，這是種增加可讀性的安全做法。

間距和對齊

不規則間距按鈕是所有界面都會遇到最普遍的問題之一。務必再三確認按鈕標簽是否水平和豎直居中。如果要十分確定，請建立規范。

除了基于網格的方法，使用大寫字母W確定邊距也是一個穩妥的辦法。如果按鈕標簽4個邊距都至少1 x W，那就沒問題。為了提高可讀性，水平邊距留出2 x W更好。

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

合理的尺寸

桌面和移動端的按鈕都應該有它們的最小尺寸。如果按鈕太小，就會導致按鈕難以用手指或鼠標點擊。這會導致給用戶帶來困擾，用戶甚至會直接卸載你的APP。在移動端，最好把44 x 44 pt作為所有可交互元素的最小尺寸。

移動端上的按鈕尺寸在50左右最佳。如果是基于光標的設備，32 x 32也是可行的。牢記即使在桌面端，更大按鈕也依然代表它使用起來更容易。

良好的實踐

重要的按鈕也會搭配有圖標。一個“結賬”可以通過一個購物籃或購物車圖標快速識別，但是只在與文字“結賬”同時出現時有效。

一個合適的箭頭或“>”放在按鈕標簽后，能更強地傳達信息。更強制地去引導用戶點擊并“繼續”。如果你要強化CTA，這個辦法就很有效。

相較扁平的按鈕，有陰影的按鈕會更有可點擊性、更快被識別。加個微妙的陰影可以使按鈕在背景中更為突出。

圓角

圓角按鈕會看起來比尖角按鈕更友好和積極。同時，圓角按鈕周圍的內容設計難度劇增。如果文本標簽在按鈕上方與按鈕保持左對齊，那么按鈕的圓角越大，文本標簽和按鈕視覺上越不協調。這讓按鈕感覺看起來同時有兩個左邊距。

圖標對齊

合適的圖標對齊是按鈕設計中最難的事之一。大多數情況下，字重和圖標尺寸是直接相關，它們的關系也是特有的。但是依然有個簡單有效的法則適用于大多數情況。

根據按鈕圓角半徑畫個圓，或者根據按鈕高度畫個方塊。在它內部，再畫個小的來放置圖標。大的形狀和小的之間的內邊距應該有和標簽文字高度相同。然后就可以把圖標放到小的形狀里。

在有圖標的情況下，最好保持圖標高度和文字高度一致，可以對比文本線寬和單字寬，然后使它們匹配度越高效果越好

邊緣平衡

在使用圓角矩形按鈕時，需要注意去調整圓角和其他界面元素的比例來確定使用多大的圓角。都使用相同的圓角半徑會使得外邊距不平衡。

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

對話框按鈕和背景之間的左邊距和底邊距過大（左）、過?。ㄓ遥?。這讓對話框邊緣太過突出，奪取了按鈕本身的關注度。

總結

當你創建一級、二級、三級按鈕時，謹記每次去檢查一系列因素。甚至小的不統一或者不對齊會降低交互質量。按鈕交互和點擊都影響重大。

謹記：

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

作者：Michal Malewicz

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

譯者：Matrix，公眾號：交譯所

本文由 @交譯所 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議