幾乎每個UI設計師都有這樣的日常……
因為一個按鈕的設計
反覆修改幾遍甚至幾十遍
有時候想要拿起桌旁的咖啡喝一口
才發現不知何時杯中已經見底了
在網際網路產品日趨成熟的今天，App 的同質化越來越明顯，一個 App 設計是否精緻有設計感，關鍵在於它的細節。今天給大家分享的這
10個UI按鈕設計小細節
，你可能從未關注，但作為合格的UI設計師的你必須要知道！！！
●
間距，對齊
●
按鈕間距不均勻是所有介面中最常見的問題之一。仔細檢查按鈕標籤是否水平和垂直居中。如果需要確定的話，可以建立指南。
web和移動按鈕都應該有合適的最小尺寸。如果你的按鈕太小，就很難點選它們。這可能會導致使用者解除安裝你的應用程式。
切記，不要忘記按鈕的安全空間，如果你有一組按鈕，那麼每一個按鈕的安全空間應該是不重疊的。
●
合適的大小
●
web和移動按鈕都應該有合適的最小尺寸。如果你的按鈕太小，就很難點選它們。這可能會導致使用者解除安裝你的應用程式。
最好的方法是在移動裝置上以44 * 44的點數開始所有的互動元素。移動按鈕的最佳位置在50左右。
對於基於游標的裝置32×32也可以。切記按鈕越大，操作的便利性越高。
●
邊緣平衡
●
如果你使用的是圓角按鈕，請記住將正確的圓角比率與螢幕上的其他元素對齊。切記對所有內容使用相同的值會在邊界上造成不平衡感。
●
行動呼籲
●
CTA是網站或應用程式中最重要的可操作元素。它通常與銷售流程緊密相關。
在設計CTA按鈕時，請記住它必須突出。它所處的螢幕上不應該有任何其他按鈕與它在視覺上競爭或吸引注意力。實現這一點的最佳方法是使它成為螢幕上唯一具有獨特顏色或樣式的元素。
別忘了考慮對比度，這樣你的按鈕就不會和背景混在一起了。
大小也很重要。如果太小，容易在瀏覽頁面時跳過。如果它太大，就會遭遇“圖片sh式瀏覽”，即忽略類似廣告的視覺元素。
●
圓角平衡
●
按鈕也可以透過它們的邊框圓角改變。記住，每個專案都是獨一無二的——如果你的品牌形象只有直角，強行加入圓角按鈕則會使整個UI風格不一致。
●
對齊圖示
●
在按鈕上進行較好的圖示對齊是最困難的事情。在許多情況下，字型粗細和圖示的粗細之間的關係直接影響它們。
但是，有一條簡單而有用的規則在大多數情況下都適用。
根據我們的圓角半徑，我們建立一個圓或是正方形，其大小等於按鈕的高度。在其中，我們建立另一個形狀來容納icon。
它與我們的文字高度相同。然後，將圖示放置在較小的形狀內。
如果是人字形，最好使高度與字高相同，並且你還可以根據字型高度檢查線寬。匹配越緊密，最終的按鈕效果越好。
●
保持按鈕可讀性
●
設計一個好按鈕，要確保讓它們在不同的環境下都能適應得很好。許多應用程式和網站現在都添加了“暗模式”，這導致了至少兩個完全不同版本的產品。
按鈕的顏色應該與大多數背景很好地配合。可以建立一個像下面這樣的簡單測試器，並實現高對比度和可讀性。
●
良好的實踐
●
重要的按鈕也可以很好地與圖示配合使用。比如結帳可以透過購物籃或購物車圖示快速識別，但前提是也要出現“結帳”這個詞。
在按鈕標籤後放置右箭頭或向右標誌會使識別性更強，按鈕的引導性更強。
與平面按鈕相比，有陰影的按鈕更容易點選，也更容易被注意到。在按鈕中新增一個微妙的陰影，使它從背景中更加突出。
●
搭配文字
●
圓角按鈕被認為比矩形的按鈕更加友好和積極。但與此同時，它們也使圍繞設計內容變得更加困難。
如果將左對齊的文字放在按鈕上方，則圓角越大，該文字在視覺上適合的範圍就越小。它讓你感覺好像左邊空白處在同一直線上。
●
下拉按鈕
●
在設計按鈕/下拉組合時，圓角也是需要注意的。當展開按鈕時，它會下拉展現另一區域，使左側空白邊緣扭曲，在視覺上處理文字更加困難（觀察第二張圖）
●
層次結構
●
按鈕應該放在使用者希望它們在的地方。這通常是指在描述性元素下面，並且通常與一邊對齊。
這與我們瀏覽頁面的方式相匹配——從上到下沿著左邊緣（也稱為f型模式）。如果你想在不違反常規的情況下保持安全，選擇第一張圖片。
你可曾聽說過二八法則？簡而言之，80%的使用者通常只會使用你網站內容和功能的20%，絕大多數的使用者只是在掃視網站內容，並且只會挑選真正感興趣的瀏覽。
同時這也意味著，剩餘的20%就相當重要了。大多數的點選將源自於這一區域，它也是近乎完美的內容和互動區域。這就要求UI設計師在做按鈕時要：
使你的按鈕
看起來
像是一個按鈕
使標籤垂直和水平居中，按鈕內部有
足夠的間距
如果你使用圖示，請正確使用尺寸和保持對齊
根據使用按鈕的位置設定
邊框的圓角
檢查
圓角半徑
是否與其他介面設計相匹配
否與其他介面設計相匹配
