編輯導語：我們在各種介面都可以用到和看到各種按鈕，圓角、方角、立體、平面、陰影等等；頁面上顯示出的每一個按鈕都是很重要的，根據不同的場景對應的風格也大不相同；本文作者分享了一些設計按鈕時要考慮到的因素，我們一起來看一下。
按鈕在介面設計中，屬於最基礎的元素部分組成，按鈕設計的精緻，整個頁面的品質也會上升不少的檔次。
今天給大家分享這篇文章，主要講解在設計按鈕時我們應該考慮哪些因素；包括視覺上，有哪些萬能的方法及公式，能夠正確的制定按鈕的設計標準，來提升整個設計的系統性。
在設計按鈕之前，需要先理解按鈕起到的代表含義——什麼地方該加按鈕，什麼地方不加按鈕，在系統化設計思路中需要非常有講究。
通常按鈕在頁面，主要起到以下三點作用：
1. 某一型別的功能操作這種比較常見，如一些控制元件形態的按鈕，比如加減、摺疊、展開、下拉等；這類按鈕會起到一些功能形態的作用，常用於互動場景；所以在這類按鈕設計中，應當弱化按鈕形式，重點強調功能，突出主體資訊。
當頁面內容資訊過多後，使用者容易失去資訊焦點，從而忘記下一步操作。
資訊種類越多，使用者權衡的時間就會越久，使用者選擇罷手及跳出的機率也會越大；所以這個時候，在合適的地方增添按鈕，能夠很好的引導使用者進行下一步操作，提升整體操作的成功率。
其次從體驗層面，也一定程度能起到頁面動線的引導作用，比如下方的一組卡片，在增添了按鈕後行動點很明確，非常有點選慾望。
當用戶知悉某個按鈕能指向某個操作，或者獲取某類資訊後，長期以往使用者就會形成使用這個按鈕的習慣，這樣對提升復訪及固定心智是非常有效果。
所以如果你認為你負責的產品或者是內容，能持續為使用者帶來價值，那麼在頁面的關鍵節點，不如將按鈕設計的更醒目；這樣使用者下次再看到這個按鈕時，固定習慣會引導他持續的點選。
這裡我不以按鈕的長相來區分按鈕的型別，如漢堡按鈕或者別的什麼的，意義不大。
我主要還是想透過以按鈕的功能區分，來劃分型別，這樣大家理解起來更為清晰。
1. 功能性質按鈕這類按鈕見到的最多，我們常用的APP裡，大量都充斥了這類按鈕，這類按鈕會起到重點的功能互動，幫助使用者得到TA想要的資訊；其次樣式上面，其實圓形的點選欲，會更強一些，肉眼看起來也更利於點選；而方型的按鈕，則顯得更為正式、嚴謹。
公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適；而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個人喜好用10%。
這類按鈕通常見於一些核心頁面的強指引，比如登入、註冊、提交表單、或者是儲存等，對頁面全域性進行操作的一些按鈕。
需要注意的是，這類按鈕只適合對頁面全域性進行操作，而且頁面中大按鈕的數量不宜超過2個，資訊儘量需要保持聚焦。
公式：基於@2x，這類大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據產品面向的人群來定高度。
如果頁面面向的人群較為廣泛，我建議採用 88px 或者是 96px 的這種大號版本，畢竟操作起來更為方便。
這類按鈕的優先順序，在整個頁面屬於最高，頁面的所有資訊，都將聚焦在這個按鈕中；由於按鈕是吸底的，所以會一直浮在頁面上，不受頁面篇幅影響控制。
需要注意的是，吸底按鈕一定是頁面最重要的功能，或者是整個頁面的下一步指引，比如淘寶的立即購買，或者是餓了麼、美團的立即下單，又或者是常見的充值介面。
公式：基於@2x，吸底的高度≥80px是比較合適，常見的尺寸有88px、100px、112px ，按鈕的大小可以根據內容來定，建議高度保持在72px以上比較合適。
這裡需要注意的是，吸底的按鈕，需要產出兩套設計稿，一套為常規稿，一套為iPhoneX的適配稿。
iPhoneX底部控制元件的區域高度為68px，所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px。
另外在設計按鈕的時候，也別忘了補充按鈕的多個狀態的設計稿。
常見的狀態，有以下四種：
1. Normal-正常態這個為按鈕的正常顯示態，就是正常頁面中的顯示效果。
2. Hover-懸浮態這個為按鈕的懸浮態，一般只會出現在使用滑鼠的時候；當滑鼠指標停留在按鈕時，按鈕發出的特殊反饋，則為懸浮態；這類形式在移動端互動中無作用，所以移動介面設計中不需要考慮這個狀態。
公式：正常情況 Hover 態增加 10% 黑色就可以，原理如下：
這個為按鈕的按壓態，就是按鈕在被點選或者是按壓後的效果。
公式：在APP設計中，點選後的效果我們設一個標準值讓開發實現就好了。
常用的值有 按鈕減少20%的透明度，或者增添20%的暗度，這兩個都可以。
通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實現效果原理參考Hover 態那張配圖。
4. Disable-禁用態當資訊未填充完整，或者是某類條件未到，按鈕會出現不可點選的狀態，處於禁用形式；這個時候，按鈕就會呈現禁用態。
這個禁用態無論是web還是app，很多場景都會用到，所以建議設定一套標準的設計規範，避免重複定義這個效果。
公式：禁用態尺寸及大小不變，僅使用色值做區分；建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要儘可能把樣式做弱，避免使用者做無效的點選。
四、按鈕的風格及尺寸在目前移動網際網路設計中，雖然按鈕的種類很多，但風格變的逐漸統一，更多都是色值及細節上的差異。
從大的風格來看，按鈕還是分為這這幾種型別：扁平化、輕擬物、重擬物及遊戲按鈕。
1. 扁平化按鈕這類按鈕我們設計用的最多，資訊簡潔、操作方便、形式追隨功能。
這裡也給大家分享一下我在設計扁平化按鈕的一些經驗，比如高度、寬度，以及陰影的色值。
公式：按鈕高度，這個通常是文字字號的2.4倍然後取4的倍數整數，比如字號是24，那麼按鈕的高度=57.6，離4倍數最近的是56；所以高度=56，圓角=10%的高度，取整後是6px。
另外如果覺得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88px。
按鈕寬度：如果不是那種全域性按鈕，通常按鈕的寬度=最多容納字數的寬度+按鈕高度，就好啦；還是以上面那個例子為例，按鈕高度=56，文字寬度=96，那麼按鈕的寬度=56+96=152。
這類按鈕近幾年變的非常流行，甚至QQ、淘寶，都開始大面積使用；因為這類按鈕在保持資訊簡潔的同時，仍然有較強的點選欲，視覺上面也能夠增添頁面的品質感。
公式：漸變方向，建議採用水平漸變，重色在右側，輕色在左側更為合適。
陰影色值我之前就寫過，不知道大家還記得麼，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴充套件=按鈕高度的 -15%，高階又簡單，完美！
如果覺得這個彌散陰影太大的同學，也可以自己手動簡單調整下，不礙事。（這個公式僅適用於Sketch，用PS的同學，也可以按照這個邏輯自行研究一下。）
另外說一句，實際上這個陰影公式並沒有什麼很多的依據，大多數都是我個人原創總結出來的，簡單好用。
比如下面的這些按鈕的樣式，用了公式後的效果大家可以自行感受：
在一些營銷頁面中，按鈕的樣式通常需要做的比較遊戲化。
遊戲化的按鈕，大部分會採取遊戲場景中的元素，再採用擬物的手法，來進行打造。
通常遊戲化的按鈕，需要重點幾個部分組成，學過素描的同學應該會知道，立體的物體，通常會有幾大特徵，分別為高光、亮部、暗部、投影及反光。
那麼如果我們需要繪製一個在營銷或者遊戲場景中使用的按鈕，只需要保證這個按鈕有高光、亮部、暗部、投影及反光的這些特徵；然後飽滿一點就，立馬就可以出效果啦。
當然，我舉的這幾個例子都是最基礎版本，如果你想做的更豐富一些，那也是沒問題的，這個可以case by case 來定。
這個沒有太多的公式可以總結，更多的是看設計師的基礎美術水平啦~~
在寫這篇文章的時候，突然刷到了一套新擬態的控制元件設計風格，有種眼前一亮的感覺。
雖然這套設計視覺上很有層次很好看，不過感覺短時間之內，比較難大面積推廣，因為開發實現起來還是會比較耗費成本。
我把原始檔儲存下來了，對這個感興趣或者好奇這種效果如何實現 的同學，可以下載原始檔研究，sketch、psd、Figma 格式都有；關注公眾號傳送“按鈕素材”。
作者：小學鴨，公眾號：UX小學
本文由 @UX小學 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash ，基於 CC0 協議