網頁和APP設計都適用的按鈕設計細節

Sponsor

按鈕在UI設計中無處不在，它的功能又很普通但又重要，比如上期我們分享的《提高轉化率的界面，終極觸發設計指南》就提及了按鈕對觸發用戶購買的重要性，所以今天繼續分享8個按鈕設計細節，特別適用于網頁和APP設計上使用，如果是新手設計師更需要閱讀本文，來一起學習。

學習本文，你將獲得以下收獲。

最重要的要知道，

一個按鈕應該看起來“像按鈕一樣”

設計按鈕時最重要的規則是使其足夠明顯突出，因此不會與其他任何東西混淆。

我們通常習慣了某種樣式的按鈕，他們一般涉及到一些操作。這些按鈕與類似的按鈕看起來越像越好。這就是為什么對于按鈕來說，矩形（或圓角矩形）始終是最適合的選擇。

其他的樣式(比如三角形、圓形、無規則圖形)對用戶來說是無法識別的，所以要小心使用。只有當你的產品的一般風格需要偏離規范時才使用它們。

設計按鈕時，請記住每一個元素，并合理地選擇它們。以品牌手冊為基準，考慮哪種按鈕將與品牌相匹配并很好地適應界面。

應該使用網格基數來設置填充和安全邊距。在上面的示例中，橫向間距是縱向間距的兩倍，這是提高可讀性的安全選擇。

按鈕間距不均勻是所有界面中最常見的問題之一。仔細檢查按鈕標簽是否在水平和垂直方向上居中。如果需要確定的話可以創建一個新的規范。

除了基于網格的方法外，還可以使用大寫W來選擇合適的按鈕間距。如果按鈕標簽的每一側至少適合1W，那么就是合適的。文字到按鈕邊框的間距最好使用2W來提高可讀性。

不要忘記按鈕的安全空間。這兩個按鈕之間要有一定的空隙，否則會導致點擊錯誤。

網頁和移動按鈕都應具有正確的最小尺寸。如果按鈕太小的話，將很難點擊或單擊它們。用戶會沮喪，并可能導致用戶卸載您的應用程序。最好的方法是從移動設備上的所有交互式元素的44 x 44點(需要查詢）開始。

最好的地方是 50左右 用于移動按鈕。在基于光標的設備中，32 x 32也應該起作用。請記住，即使在網頁上，也遵循“按鈕越大，使用起來就越容易”的原則。

重要按鈕其實也可以與圖標配合去使用。比如說在顯示“結帳”一詞的前提下，可以加入的購物車圖標更快速地讓用戶進行識別。

在按鈕標簽之后放置向右箭頭或>形符號，可以更清晰的去引導用戶。用戶如果“繼續”操作的話，可增加一個CTA的按鈕，方便用戶點擊。

與平面按鈕相比，帶有陰影的按鈕也會更增加用戶的點擊欲望，并且能更快地引起用戶的注意。在按鈕中添加一個彌散式投影，讓它在背景中清晰地展示出來。關于按鈕陰影的實際操作將在文章后面闡述。

圓形按鈕被認為比鋒利的邊緣更具有親和力。但是，與此同時，這使得它們的內容設計變得更加復雜。如果你在按鈕上方保留了對齊的文本，則圓角越圓，則該文本在視覺上將越小。它會讓你感覺好像左邊距同時在兩個位置中。

在按鈕上進行良好的圖標對齊是最困難的事情。在多數情況下，字體粗細和圖標粗細之間的關系和對齊圖標直接相關且有特定的聯系。但是，有一條簡單而有用的規則在大多數情況下都適用。

根據我們的圓角半徑，我們創建了一個圓或正方形，其大小等于按鈕的高度。在它里面我們創建另外一個形狀來放置圖標。它應該有一個填充在這個較大的形狀里。與我們的文字高度相同，然后我們將圖標放在較小的形狀里。如果是向右箭頭“>”，最好使箭頭高度與文本高度相同，并且你還可以根據字體寬度去衡量圖標的線性寬度。兩者的統一性越緊密，最終展示出來的效果會越好。

如果你使用的是圓角按鈕，請記住將正確的圓角比率與屏幕上的其他元素對齊平衡。對所有事物使用相同的圓角數值會在邊際上造成不平衡。

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

對角線間距大于（左側）間距，小于（右側）間距。這會使邊緣突出太多，使注意力從按鈕本身上移開。

總結

當你開始構建主按鈕，輔助按鈕和三級按鈕時，請記住每次都要針對幾個因素進行檢查。即使是很小的不一致或對齊不統一也會導致轉換率降低。有了轉換按鈕和點擊按鈕在這里就顯得極其重要。

最后這個定律也是設計師應該了解的，推薦閱讀《一文讀懂交互設計7大定律》，扎實設計理論知識，今天就分享到這里，希望對你有所幫助~

作者：燦燦&阿Ben（id:Aa設計專題）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。