一個小小的按鈕，也隱藏很多設計哲學。雖然看起來不太起眼，然而使用頻率幾乎挺高的。作為體驗設計師，更要把一個與用戶常打交道的按鈕設計美觀易用。
在工作中，設計按鈕組件時，大部分設計師有以下情況：
1、按鈕容器內文字兩邊間距不是做大了就是做小了；
2、主要按鈕、次要按鈕、幽靈按鈕傻傻分不清；
3、加了很多效果的按鈕，實現難度加大；
4、按鈕內文字上下高度不知道如何確定，全憑感覺；
以上幾種情況，我早期剛入門的時候也是會經常遇到，但其實我發現工作多年的設計師也會犯錯，到底如何做？
下面開始今天的分享。
01
文字的左右間距
一個按鈕的組成里面除了容器本身色彩、質感、圓角等等，那么按鈕內部有文字、圖標等元素。
一個完美的按鈕，通常情況下，左右邊距的大小是文字大小的2倍。
來看個例子，當文字大小是40px時候，那么文字距離按鈕兩側邊距就是80px，如下圖所示。
如上圖，當文字大小一致時候，右側的按鈕是最完美的狀態。
02
文字的上下間距
一個按鈕的組成里面除了容器本身色彩、質感、圓角等等，那么按鈕內部有文字、圖標等元素。
完美按鈕組件文字上下間距計算公式,**當文字行高等于文字本身大小時：文字大小的一半+8px。
比如文字大小40px，它的一半就是20px，最終結果20px+8px=28px按鈕上下高度。
上圖中，當一個按鈕內文字40px時候的上下間距示例。
下面再來看2個案例。
當文字大小變化時，這個公式同樣的適用。
03
分清按鈕主次
一個完整的設計體系中，按鈕一定分多種類型，比如主要按鈕，二級按鈕，幽靈按鈕，文字按鈕等，以滿足不同功能使用場景。
如上圖，左側按鈕一級和二級按鈕顏色都很重，分不清楚主次，右側的主要按鈕和二級按鈕視覺重量不同，主次分明。
來看個案例。
上圖，主要按鈕和次要按鈕區分較為明顯。
最后再補充一下，按鈕定義方法很多，沒有絕對的，每一個方法出來后，都值得驗證和嘗試，值得被挑戰，沒有完美的方法，只有合適的方法策略。
內容轉載自“功夫體驗設計”
精選文章：
非特殊說明，本文版權歸原作者所有，轉載請注明出處:大作網