導語：按鈕是UI設計中(zhōng)最重要但仍被忽略的UI元素之一(yī)，了解按鈕設計有十分(fēn)必要的意義，本篇文章作者将按鈕解剖并進行解析，通過快速并可操作性極高的五個黃金法則，重點介紹了提升按鈕設計的技巧。讓我(wǒ)(wǒ)們一(yī)起來跟随作者進行學習，并将理論付諸于實踐，讓自己的按鈕煥然一(yī)新！

經過“設計用戶界面”一(yī)章，我(wǒ)(wǒ)們全面了解了UI設計的所需的所有基礎知(zhī)識并啓動了我(wǒ)(wǒ)們的APP項目，是時候深入探讨最重要之一(yī)卻一(yī)直被忽略的UI元素了。之前，我(wǒ)(wǒ)已經在一(yī)些更詳細的文章中(zhōng)介紹了按鈕，但是這次，我(wǒ)(wǒ)想重點介紹快速、可操作的技巧，你可以立即使用它們來提升項目的質量。

一(yī)、什麽是按鈕？

按鈕是一(yī)個具有明确指示動作的交互元件。例如，如果按鈕上顯示“立即支付”，則單擊它可能會要求你提供信用卡詳細信息。

在UI設計中(zhōng)，按鈕是必不可少的，因爲大(dà)多數界面都需要我(wǒ)(wǒ)們采取某種行爲才能繼續。無論是保存，審核還是下(xià)載内容等操作，按鈕無處不在。使用按鈕可以做更多的事情，接下(xià)來我(wǒ)(wǒ)将闡述五個簡單的步驟更好地來設計按鈕，要注意，他們雖簡單，但卻非常重要。

按鈕具有幾個定義特征：

一(yī)個典型的按鈕具有填充，邊框和陰影這幾個屬性。對于距離(lí)而言，它們有一(yī)個内邊距和一(yī)個外(wài)邊距，這是我(wǒ)(wǒ)們按鈕的安全空間。

通過設置圓角值，按鈕的形狀可以變成尖銳的或完全圓潤的角。按鈕上的标簽通常是文本，有時可能會帶有圖标。向按鈕添加一(yī)個向右的V形圖标，将增加頁面轉換率（>）。标簽文本由字重，顔色和字體(tǐ)樣式定義。

現在你已經了解了基礎知(zhī)識，接下(xià)來，我(wǒ)(wǒ)将提出改善按鈕設計的五個黃金法則：

二、五個黃金法則

1.按鈕看起來必須像一(yī)個按鈕

我(wǒ)(wǒ)們習慣于現實世界中(zhōng)的按鈕是矩形（有時是圓形）。如果我(wǒ)(wǒ)們設計中(zhōng)的按鈕形狀既不是矩形也不是圓形（也不是圓形矩形），很可能讓用戶感到迷惑。

這就是爲什麽即使現在的UI按鈕幾乎完全扁平，但拟物(wù)化設計實際上仍然存在于數字化界面中(zhōng)。用戶界面上的按鈕仍然需要看起來像電(diàn)視遙控器上的按鈕。

具有“有機的形狀”，圓點作爲按鈕将不起作用。三角形和六角形也将耗費(fèi)用戶更長的時間來将它們認知(zhī)爲按鈕，甚至有些用戶可能永遠不會發現界面的按鈕。

如果你不想以矩形或圓形作爲主要按鈕形狀，則可以選擇使用帶下(xià)劃線的文本鏈接。如果不确定顔色，則深藍(lán)色通常是最佳選項。

我(wǒ)(wǒ)們已經習慣性認知(zhī)，帶下(xià)劃線的文字是一(yī)個鏈接，Google搜索頁每天都在加強我(wǒ)(wǒ)們的這一(yī)心理模型。

2.尺寸

在現實生(shēng)活中(zhōng)，你是否曾經需要先找到一(yī)根針來确保按下(xià)超小(xiǎo)型複位按鈕來重置電(diàn)子設備？這樣的設計是有目的的，因爲這樣就可以避免在不注意的情況下(xià)重置設備。

但是假設在界面中(zhōng)所有按鈕都這麽小(xiǎo)，這将讓它們難以使用。按鈕應足夠大(dà)以便用戶舒适地使用它們，但是需要有多大(dà)？

在觸屏時代，我(wǒ)(wǒ)們通常通過相對于屏幕密度的典型指尖尺寸來進行測量。按鈕爲44-48px尺寸的正方形會讓我(wǒ)(wǒ)們感到舒适。某些應用程序（例如Tinder）嘗試将其行動按鈕放(fàng)大(dà)50px（高度），也取得了不錯的效果。顯然，按鈕的尺寸不能超出這個範圍太多，但是在50-60px的範圍内還是值得一(yī)試的。

在爲PC端設計時，我(wǒ)(wǒ)們可以将按鈕縮小(xiǎo)一(yī)些，因爲鼠标光标更精确，但一(yī)定不要太小(xiǎo)。我(wǒ)(wǒ)們仍需要保證用戶可以很容易地将鼠标指向按鈕，因此最小(xiǎo)的按鈕應設爲32px左右。

3.對齊就是一(yī)切！

所有UI中(zhōng)最大(dà)的視覺問題是按鈕标簽文本無法對齊。雖然大(dà)多數設計人員(yuán)和開(kāi)發人員(yuán)設法将其水平居中(zhōng)，但很少将每個按鈕都能都垂直居中(zhōng)。

大(dà)寫标簽顯然更容易居中(zhōng)，但是在同時使用大(dà)小(xiǎo)寫字母時，最好堅持使用基線對齊（或僅将其與首個大(dà)寫字母對齊，而忽略降序的y，j和g字母）。

按鈕大(dà)小(xiǎo)和字體(tǐ)大(dà)小(xiǎo)适配性也很重要。如果你有一(yī)個32px的按鈕和17px的文本，則無法将其完美地放(fàng)在中(zhōng)間，需要調整其中(zhōng)一(yī)個使之互相适應。

4.在陰影上下(xià)功夫

陰影可以幫助一(yī)個對象在背景上突出顯示出來，并幫助用戶将其識别爲可單擊或需點擊的對象。因爲陰影會讓按鈕看起來比背景距離(lí)遠，用戶自然就會明白(bái)，可以将其按下(xià)。

爲了使按鈕看起來更友好，可以在陰影顔色中(zhōng)添加背景色。在上面的示例中(zhōng)，陰影是藍(lán)色的一(yī)種混和色。應避免使用深色和對比鮮明的陰影，因爲即便這種陰影吸引到了用戶的注意力，但看起來過于尖銳令人不快，就很容易丢失掉用戶的注意力。

5.易讀的标簽文字

按鈕标簽文字需要居中(zhōng)，但它們還需要足夠的呼吸空間以使其易讀。避免按鈕周圍的文字沒有空格。規則是在标簽上方和下(xià)方空出标簽字體(tǐ)中(zhōng)的“大(dà)寫字母W的間距”。側面空出“兩個大(dà)寫字母W的距離(lí)”。

當然，按鈕可以在上述間距的基礎上更寬，因爲那個标準隻是讓它是看起來既美觀又(yòu)易讀的最小(xiǎo)尺寸。