如何設計出更好的按鈕?

15天0基礎極速入門數據分析,掌握一套數據分析流程和方法,學完就能寫一份數據報告!了解一下>>

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

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

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

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

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

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

熟悉的=好的

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

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

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

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

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

按鈕分解

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

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

間距和對齊

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

除了基于網格的方法,使用大寫字母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協議

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
马总会三肖中特