起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何設計出更好的按鈕？
本文列舉了如何設計出更好的按鈕的七個要點，希望能給你帶來思考與啟發。
按鈕是觸發它所描述功能的可交互元素。如果一個按鈕上寫著“保存”，點它十有八九會有類似保存操作。按鈕也是所有電子產品上最重要的交互元素之一。
按鈕能夠觸發購買、下載、發送和很多其他重要操作。數字按鈕也沿襲自真實世界中比如電視遙控、錄像機或者游戲手柄上的實體按鈕。
最重要的須知：按鈕得看起來像按鈕
設計按鈕最重要的法則就是要使按鈕足夠突出，以免按鈕和其他元素混淆。
從按鈕中逐步移除元素，按鈕的功能也開始消融丟失。它變成了裝飾或者說文本，失去可操作的特性。
熟悉的=好的
我們習慣于和行為有自然關聯的特定形狀和形式。按鈕看起來和我們認為有關聯的行為越相似，設計越成功。這就是為什么選擇一個矩形（或者一個圓角矩形）作為按鈕是最安全的。
這個元素會被立即識別為一個按鈕
其他形狀和形式對用戶就未必有這樣的可識別性。需謹慎使用他們，盡量在你產品的常規風格需要與眾不同時才使用。
其他形狀和形式（三角形、圓形、自由形態）對用戶就未必有這樣的可識別性。需謹慎使用他們，盡量在你產品的常規風格需要與眾不同時才使用。
需要花費更多時間才能被識別的可點擊元素
按鈕分解
按鈕設計需熟記每個元素并妥善選擇。使用品牌手冊作為基準，思考哪種按鈕能夠匹配品牌并和界面很好相容。
你應該使用網格基本數值用來設置內外邊距。以上圖為例，左側內邊距為兩倍上下內邊距，這是種增加可讀性的安全做法。
間距和對齊
不規則間距按鈕是所有界面都會遇到最普遍的問題之一。務必再三確認按鈕標簽是否水平和豎直居中。如果要十分確定，請建立規范。
除了基于網格的方法，使用大寫字母W確定邊距也是一個穩妥的辦法。如果按鈕標簽4個邊距都至少1 x W，那就沒問題。為了提高可讀性，水平邊距留出2 x W更好。
別忘了按鈕之間安全間距。如果界面上有很多按鈕，保證各個按鈕外邊距不重疊比較穩妥。
合理的尺寸
桌面和移動端的按鈕都應該有它們的最小尺寸。如果按鈕太小，就會導致按鈕難以用手指或鼠標點擊。這會導致給用戶帶來困擾，用戶甚至會直接卸載你的APP。在移動端，最好把44 x 44 pt作為所有可交互元素的最小尺寸。
移動端上的按鈕尺寸在50左右最佳。如果是基于光標的設備，32 x 32也是可行的。牢記即使在桌面端，更大按鈕也依然代表它使用起來更容易。
良好的實踐
重要的按鈕也會搭配有圖標。一個“結賬”可以通過一個購物籃或購物車圖標快速識別，但是只在與文字“結賬”同時出現時有效。
一個合適的箭頭或“>”放在按鈕標簽后，能更強地傳達信息。更強制地去引導用戶點擊并“繼續”。如果你要強化CTA，這個辦法就很有效。
相較扁平的按鈕，有陰影的按鈕會更有可點擊性、更快被識別。加個微妙的陰影可以使按鈕在背景中更為突出。
圓角
圓角按鈕會看起來比尖角按鈕更友好和積極。同時，圓角按鈕周圍的內容設計難度劇增。如果文本標簽在按鈕上方與按鈕保持左對齊，那么按鈕的圓角越大，文本標簽和按鈕視覺上越不協調。這讓按鈕感覺看起來同時有兩個左邊距。
圖標對齊
合適的圖標對齊是按鈕設計中最難的事之一。大多數情況下，字重和圖標尺寸是直接相關，它們的關系也是特有的。但是依然有個簡單有效的法則適用于大多數情況。
根據按鈕圓角半徑畫個圓，或者根據按鈕高度畫個方塊。在它內部，再畫個小的來放置圖標。大的形狀和小的之間的內邊距應該有和標簽文字高度相同。然后就可以把圖標放到小的形狀里。
在有圖標的情況下，最好保持圖標高度和文字高度一致，可以對比文本線寬和單字寬，然后使它們匹配度越高效果越好
邊緣平衡
在使用圓角矩形按鈕時，需要注意去調整圓角和其他界面元素的比例來確定使用多大的圓角。都使用相同的圓角半徑會使得外邊距不平衡。
對話框邊距也是一樣，就像左邊距和底邊距。因此，處理起外邊緣會更舒服和快速。
對話框按鈕和背景之間的左邊距和底邊距過大（左）、過?。ㄓ遥?。這讓對話框邊緣太過突出，奪取了按鈕本身的關注度。
總結
當你創建一級、二級、三級按鈕時，謹記每次去檢查一系列因素。甚至小的不統一或者不對齊會降低交互質量。按鈕交互和點擊都影響重大。
謹記：
- 把按鈕設計的像按鈕
- 保證標簽和按鈕水平、豎直居中
- 保證按鈕有充足內邊距
- 為圖標選擇正確的大小和對齊關系
- 根據按鈕的使用環境設置合適的圓角半徑
- 檢查按鈕圓角半徑是否與其他元素契合
- 選擇合適尺寸。按鈕越大，用起來越簡單。桌面端同理。
作者：Michal Malewicz
原文鏈接：https://uxdesign.cc/design-better-buttons-a5c90a113280
譯者：Matrix，公眾號：交譯所
本文由 @交譯所 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
