編輯導(dǎo)語(yǔ)：我們?cè)诟鞣N界面都可以用到和看到各種按鈕，圓角、方角、立體、平面、陰影等等；頁(yè)面上顯示出的每一個(gè)按鈕都是很重要的，根據(jù)不同的場(chǎng)景對(duì)應(yīng)的風(fēng)格也大不相同；本文作者分享了一些設(shè)計(jì)按鈕時(shí)要考慮到的因素，我們一起來(lái)看一下。

按鈕在界面設(shè)計(jì)中，屬于最基礎(chǔ)的元素部分組成，按鈕設(shè)計(jì)的精致，整個(gè)頁(yè)面的品質(zhì)也會(huì)上升不少的檔次。

今天給大家分享這篇文章，主要講解在設(shè)計(jì)按鈕時(shí)我們應(yīng)該考慮哪些因素；包括視覺(jué)上，有哪些萬(wàn)能的方法及公式，能夠正確的制定按鈕的設(shè)計(jì)標(biāo)準(zhǔn)，來(lái)提升整個(gè)設(shè)計(jì)的系統(tǒng)性。

一、按鈕有哪些作用？

在設(shè)計(jì)按鈕之前，需要先理解按鈕起到的代表含義——什么地方該加按鈕，什么地方不加按鈕，在系統(tǒng)化設(shè)計(jì)思路中需要非常有講究。

通常按鈕在頁(yè)面，主要起到以下三點(diǎn)作用：

1. 某一類(lèi)型的功能操作

這種比較常見(jiàn)，如一些控件形態(tài)的按鈕，比如加減、折疊、展開(kāi)、下拉等；這類(lèi)按鈕會(huì)起到一些功能形態(tài)的作用，常用于交互場(chǎng)景；所以在這類(lèi)按鈕設(shè)計(jì)中，應(yīng)當(dāng)弱化按鈕形式，重點(diǎn)強(qiáng)調(diào)功能，突出主體信息。

2. 下一步的明確指引

當(dāng)頁(yè)面內(nèi)容信息過(guò)多后，用戶(hù)容易失去信息焦點(diǎn)，從而忘記下一步操作。

信息種類(lèi)越多，用戶(hù)權(quán)衡的時(shí)間就會(huì)越久，用戶(hù)選擇罷手及跳出的幾率也會(huì)越大；所以這個(gè)時(shí)候，在合適的地方增添按鈕，能夠很好的引導(dǎo)用戶(hù)進(jìn)行下一步操作，提升整體操作的成功率。

其次從體驗(yàn)層面，也一定程度能起到頁(yè)面動(dòng)線(xiàn)的引導(dǎo)作用，比如下方的一組卡片，在增添了按鈕后行動(dòng)點(diǎn)很明確，非常有點(diǎn)擊欲望。

3. 固定習(xí)慣，明確心理預(yù)期

當(dāng)用戶(hù)知悉某個(gè)按鈕能指向某個(gè)操作，或者獲取某類(lèi)信息后，長(zhǎng)期以往用戶(hù)就會(huì)形成使用這個(gè)按鈕的習(xí)慣，這樣對(duì)提升復(fù)訪及固定心智是非常有效果。

所以如果你認(rèn)為你負(fù)責(zé)的產(chǎn)品或者是內(nèi)容，能持續(xù)為用戶(hù)帶來(lái)價(jià)值，那么在頁(yè)面的關(guān)鍵節(jié)點(diǎn)，不如將按鈕設(shè)計(jì)的更醒目；這樣用戶(hù)下次再看到這個(gè)按鈕時(shí)，固定習(xí)慣會(huì)引導(dǎo)他持續(xù)的點(diǎn)擊。

二、按鈕有哪些類(lèi)型？

這里我不以按鈕的長(zhǎng)相來(lái)區(qū)分按鈕的類(lèi)型，如漢堡按鈕或者別的什么的，意義不大。

我主要還是想通過(guò)以按鈕的功能區(qū)分，來(lái)劃分類(lèi)型，這樣大家理解起來(lái)更為清晰。

1. 功能性質(zhì)按鈕

這類(lèi)按鈕見(jiàn)到的最多，我們常用的APP里，大量都充斥了這類(lèi)按鈕，這類(lèi)按鈕會(huì)起到重點(diǎn)的功能交互，幫助用戶(hù)得到TA想要的信息；其次樣式上面，其實(shí)圓形的點(diǎn)擊欲，會(huì)更強(qiáng)一些，肉眼看起來(lái)也更利于點(diǎn)擊；而方型的按鈕，則顯得更為正式、嚴(yán)謹(jǐn)。

公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適；而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個(gè)人喜好用10%。

2. 聚焦大按鈕

這類(lèi)按鈕通常見(jiàn)于一些核心頁(yè)面的強(qiáng)指引，比如登錄、注冊(cè)、提交表單、或者是保存等，對(duì)頁(yè)面全局進(jìn)行操作的一些按鈕。

需要注意的是，這類(lèi)按鈕只適合對(duì)頁(yè)面全局進(jìn)行操作，而且頁(yè)面中大按鈕的數(shù)量不宜超過(guò)2個(gè)，信息盡量需要保持聚焦。

公式：基于@2x，這類(lèi)大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據(jù)產(chǎn)品面向的人群來(lái)定高度。

如果頁(yè)面面向的人群較為廣泛，我建議采用 88px 或者是 96px 的這種大號(hào)版本，畢竟操作起來(lái)更為方便。

3. 吸底按鈕

這類(lèi)按鈕的優(yōu)先級(jí)，在整個(gè)頁(yè)面屬于最高，頁(yè)面的所有信息，都將聚焦在這個(gè)按鈕中；由于按鈕是吸底的，所以會(huì)一直浮在頁(yè)面上，不受頁(yè)面篇幅影響控制。

需要注意的是，吸底按鈕一定是頁(yè)面最重要的功能，或者是整個(gè)頁(yè)面的下一步指引，比如淘寶的立即購(gòu)買(mǎi)，或者是餓了么、美團(tuán)的立即下單，又或者是常見(jiàn)的充值界面。

公式：基于@2x，吸底的高度≥80px是比較合適，常見(jiàn)的尺寸有88px、100px、112px ，按鈕的大小可以根據(jù)內(nèi)容來(lái)定，建議高度保持在72px以上比較合適。

這里需要注意的是，吸底的按鈕，需要產(chǎn)出兩套設(shè)計(jì)稿，一套為常規(guī)稿，一套為iPhoneX的適配稿。

iPhoneX底部控件的區(qū)域高度為68px，所以iPhoneX設(shè)計(jì)稿的吸底高度=常規(guī)設(shè)計(jì)稿吸底高度+68px。

三、按鈕有哪些狀態(tài)？

另外在設(shè)計(jì)按鈕的時(shí)候，也別忘了補(bǔ)充按鈕的多個(gè)狀態(tài)的設(shè)計(jì)稿。

常見(jiàn)的狀態(tài)，有以下四種：

1. Normal-正常態(tài)

這個(gè)為按鈕的正常顯示態(tài)，就是正常頁(yè)面中的顯示效果。

2. Hover-懸浮態(tài)

這個(gè)為按鈕的懸浮態(tài)，一般只會(huì)出現(xiàn)在使用鼠標(biāo)的時(shí)候；當(dāng)鼠標(biāo)指針停留在按鈕時(shí)，按鈕發(fā)出的特殊反饋，則為懸浮態(tài)；這類(lèi)形式在移動(dòng)端交互中無(wú)作用，所以移動(dòng)界面設(shè)計(jì)中不需要考慮這個(gè)狀態(tài)。

公式：正常情況 Hover 態(tài)增加 10% 黑色就可以，原理如下：

3. Pressed-點(diǎn)擊態(tài)

這個(gè)為按鈕的按壓態(tài)，就是按鈕在被點(diǎn)擊或者是按壓后的效果。

公式：在APP設(shè)計(jì)中，點(diǎn)擊后的效果我們?cè)O(shè)一個(gè)標(biāo)準(zhǔn)值讓開(kāi)發(fā)實(shí)現(xiàn)就好了。

常用的值有 按鈕減少20%的透明度，或者增添20%的暗度，這兩個(gè)都可以。

通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實(shí)現(xiàn)效果原理參考Hover 態(tài)那張配圖。

4. Disable-禁用態(tài)

當(dāng)信息未填充完整，或者是某類(lèi)條件未到，按鈕會(huì)出現(xiàn)不可點(diǎn)擊的狀態(tài)，處于禁用形式；這個(gè)時(shí)候，按鈕就會(huì)呈現(xiàn)禁用態(tài)。

這個(gè)禁用態(tài)無(wú)論是web還是app，很多場(chǎng)景都會(huì)用到，所以建議設(shè)定一套標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范，避免重復(fù)定義這個(gè)效果。

公式：禁用態(tài)尺寸及大小不變，僅使用色值做區(qū)分；建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要盡可能把樣式做弱，避免用戶(hù)做無(wú)效的點(diǎn)擊。

四、按鈕的風(fēng)格及尺寸

在目前移動(dòng)互聯(lián)網(wǎng)設(shè)計(jì)中，雖然按鈕的種類(lèi)很多，但風(fēng)格變的逐漸統(tǒng)一，更多都是色值及細(xì)節(jié)上的差異。

從大的風(fēng)格來(lái)看，按鈕還是分為這這幾種類(lèi)型：扁平化、輕擬物、重?cái)M物及游戲按鈕。

1. 扁平化按鈕

這類(lèi)按鈕我們?cè)O(shè)計(jì)用的最多，信息簡(jiǎn)潔、操作方便、形式追隨功能。

這里也給大家分享一下我在設(shè)計(jì)扁平化按鈕的一些經(jīng)驗(yàn)，比如高度、寬度，以及陰影的色值。

公式：按鈕高度，這個(gè)通常是文字字號(hào)的2.4倍然后取4的倍數(shù)整數(shù)，比如字號(hào)是24，那么按鈕的高度=57.6，離4倍數(shù)最近的是56；所以高度=56，圓角=10%的高度，取整后是6px。

另外如果覺(jué)得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88px。

按鈕寬度：如果不是那種全局按鈕，通常按鈕的寬度=最多容納字?jǐn)?shù)的寬度+按鈕高度，就好啦；還是以上面那個(gè)例子為例，按鈕高度=56，文字寬度=96，那么按鈕的寬度=56+96=152。

2. 輕擬物按鈕

這類(lèi)按鈕近幾年變的非常流行，甚至QQ、淘寶，都開(kāi)始大面積使用；因?yàn)檫@類(lèi)按鈕在保持信息簡(jiǎn)潔的同時(shí)，仍然有較強(qiáng)的點(diǎn)擊欲，視覺(jué)上面也能夠增添頁(yè)面的品質(zhì)感。

公式：漸變方向，建議采用水平漸變，重色在右側(cè)，輕色在左側(cè)更為合適。

陰影色值我之前就寫(xiě)過(guò)，不知道大家還記得么，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴(kuò)展=按鈕高度的 -15%，高級(jí)又簡(jiǎn)單，完美！

如果覺(jué)得這個(gè)彌散陰影太大的同學(xué)，也可以自己手動(dòng)簡(jiǎn)單調(diào)整下，不礙事。（這個(gè)公式僅適用于Sketch，用PS的同學(xué)，也可以按照這個(gè)邏輯自行研究一下。）

另外說(shuō)一句，實(shí)際上這個(gè)陰影公式并沒(méi)有什么很多的依據(jù)，大多數(shù)都是我個(gè)人原創(chuàng)總結(jié)出來(lái)的，簡(jiǎn)單好用。

比如下面的這些按鈕的樣式，用了公式后的效果大家可以自行感受：

3. 重?cái)M物及游戲按鈕

在一些營(yíng)銷(xiāo)頁(yè)面中，按鈕的樣式通常需要做的比較游戲化。

游戲化的按鈕，大部分會(huì)采取游戲場(chǎng)景中的元素，再采用擬物的手法，來(lái)進(jìn)行打造。

通常游戲化的按鈕，需要重點(diǎn)幾個(gè)部分組成，學(xué)過(guò)素描的同學(xué)應(yīng)該會(huì)知道，立體的物體，通常會(huì)有幾大特征，分別為高光、亮部、暗部、投影及反光。

那么如果我們需要繪制一個(gè)在營(yíng)銷(xiāo)或者游戲場(chǎng)景中使用的按鈕，只需要保證這個(gè)按鈕有高光、亮部、暗部、投影及反光的這些特征；然后飽滿(mǎn)一點(diǎn)就，立馬就可以出效果啦。

當(dāng)然，我舉的這幾個(gè)例子都是最基礎(chǔ)版本，如果你想做的更豐富一些，那也是沒(méi)問(wèn)題的，這個(gè)可以case by case 來(lái)定。

這個(gè)沒(méi)有太多的公式可以總結(jié)，更多的是看設(shè)計(jì)師的基礎(chǔ)美術(shù)水平啦~~

5. 新擬態(tài)按鈕

在寫(xiě)這篇文章的時(shí)候，突然刷到了一套新擬態(tài)的控件設(shè)計(jì)風(fēng)格，有種眼前一亮的感覺(jué)。

雖然這套設(shè)計(jì)視覺(jué)上很有層次很好看，不過(guò)感覺(jué)短時(shí)間之內(nèi)，比較難大面積推廣，因?yàn)殚_(kāi)發(fā)實(shí)現(xiàn)起來(lái)還是會(huì)比較耗費(fèi)成本。

作者：小學(xué)鴨，公眾號(hào)：UX小學(xué)

本文由 @UX小學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 unsplash ，基于 CC0 協(xié)議