UI交互設(shè)計(jì)按鈕的規(guī)范：
1. 按鈕看起來(lái)必須像一個(gè)按鈕
我們習(xí)慣于現(xiàn)實(shí)世界中的按鈕是矩形（有時(shí)是圓形）。如果我們?cè)O(shè)計(jì)中的按鈕形狀既不是矩形也不是圓形（也不是圓形矩形），很可能讓用戶感到迷惑。這就是為什么即使現(xiàn)在的 UI 按鈕幾乎完全扁平，但擬物化設(shè)計(jì)實(shí)際上仍然存在于數(shù)字化界面中。用戶界面上的按鈕仍然需要看起來(lái)像電視遙控器上的按鈕 。
2. 尺寸
在觸屏?xí)r代，我們通常通過(guò)相對(duì)于屏幕密度的典型指尖尺寸來(lái)進(jìn)行測(cè)量 。按鈕為 44-48px 尺寸的正方形會(huì)讓我們感到舒適。顯然，按鈕的尺寸不能超出這個(gè)范圍太多，但是在 50-60px 的范圍內(nèi)還是值得一試的。
在為 PC 端設(shè)計(jì)時(shí)，我們可以將按鈕縮小一些，因?yàn)槭髽?biāo)光標(biāo)更精確，但一定不要太小。我們?nèi)孕枰ＷC用戶可以很容易地將鼠標(biāo)指向按鈕，因此最小的按鈕應(yīng)設(shè)為 32px 左右 。
3. 對(duì)齊就是一切！
所有 UI 中最大的視覺(jué)問(wèn)題是按鈕標(biāo)簽文本無(wú)法對(duì)齊 。雖然大多數(shù)設(shè)計(jì)人員和開(kāi)發(fā)人員設(shè)法將其水平居中，但很少將每個(gè)按鈕都能垂直居中 。大寫(xiě)標(biāo)簽顯然更容易居中，但是在同時(shí)使用大小寫(xiě)字母時(shí)，最好堅(jiān)持使用基線對(duì)齊（或僅將其與首個(gè)大寫(xiě)字母對(duì)齊，而忽略降序的 y，j 和 g 字母）。
按鈕大小和字體大小適配性也很重要 。如果你有一個(gè) 32px 的按鈕和 17px 的文本，則無(wú)法將其完美地放在中間，需要調(diào)整其中一個(gè)使之互相適應(yīng)。
4. 在陰影上下功夫
陰影可以幫助一個(gè)對(duì)象在背景上突出顯示出來(lái) ，并幫助用戶將其識(shí)別為可單擊或需點(diǎn)擊的對(duì)象 。因?yàn)殛幱皶?huì)讓按鈕看起來(lái)比背景距離遠(yuǎn) ，用戶自然就會(huì)明白，可以將其按下。為了使按鈕看起來(lái)更友好，可以在陰影顏色中添加背景色。
5. 易讀的標(biāo)簽文字
按鈕標(biāo)簽文字需要居中，但它們還需要足夠的呼吸空間以使其易讀 。 避免按鈕周?chē)奈淖譀](méi)有空格。規(guī)則是在標(biāo)簽上方和下方空出標(biāo)簽字體中的 “大寫(xiě)字母 W 的間距”。側(cè)面空出 “兩個(gè)大寫(xiě)字母 W 的距離”。
當(dāng)然，按鈕可以在上述間距的基礎(chǔ)上更寬，因?yàn)槟莻�(gè)標(biāo)準(zhǔn)只是讓它是看起來(lái)既美觀又易讀的最小尺寸。
更多培訓(xùn)資訊請(qǐng)持續(xù)關(guān)注天琥教育官網(wǎng)。
