編輯導(dǎo)讀：制定按鈕規(guī)范可能是大家在最初接觸UI組件化時嘗試的第一個項目?？此坪唵蔚陌粹o，在制定規(guī)范的過程中卻有不少細節(jié)值得我們思考學(xué)習(xí)。本文將從按鈕的規(guī)范化展開分析，希望對你幫助。

制定按鈕規(guī)范的流程大概會分成以下三個步驟：

1. 明確規(guī)范適用范圍
2. 收集按鈕使用的場景
3. 制定按鈕規(guī)范

其中制定按鈕規(guī)范又分為以下內(nèi)容：

1. 按鈕的類型
2. 按鈕的尺寸
3. 按鈕的狀態(tài)
4. 圖標與文字的搭配
5. 多語言產(chǎn)品的特殊規(guī)則

一、明確規(guī)范的適用范圍

一個公司，會擁有許多設(shè)計規(guī)范。設(shè)計規(guī)范能夠統(tǒng)一產(chǎn)品的方向與體驗，塑造一致的品牌調(diào)性。但設(shè)計規(guī)范有不同的適用范圍。根據(jù)范圍的不同，規(guī)范內(nèi)容的顆粒度也有所不同。

大致會分為以下幾個范圍：

1. 公司級別的設(shè)計規(guī)范：主要是對公司整體的用戶體驗、品牌等方面的規(guī)范，是公司所有產(chǎn)品的指導(dǎo)基礎(chǔ)；
2. 某一類產(chǎn)品線的設(shè)計規(guī)范：在滿足公司整體設(shè)計原則的基礎(chǔ)上，對該產(chǎn)品線下的若干產(chǎn)品制定統(tǒng)一的用戶體驗、界面語言、品牌形象等方面的規(guī)范；
3. 某個具體產(chǎn)品的設(shè)計規(guī)范：主要是為此產(chǎn)品制定統(tǒng)一的用戶體驗、界面語言等方面的規(guī)范。

因此，在開始規(guī)范制定之前，首先要明確規(guī)范的適用的范圍，這樣才能判斷規(guī)范內(nèi)容的側(cè)重點與顆粒度。

這里分享的按鈕規(guī)范適用于某個具體產(chǎn)品的設(shè)計規(guī)范，因此顆粒度是最細致的，包括按鈕的尺寸/狀態(tài)等等。這一類的設(shè)計規(guī)范主要有以下目標：

1. 設(shè)計側(cè)：能夠統(tǒng)一產(chǎn)品方向與體驗，但同時能有一定的擴展性
2. 用戶層：對產(chǎn)品的體驗一致性得到落地
3. 開發(fā)側(cè)：能夠提高開發(fā)效率，減少重復(fù)工作

二、收集按鈕的使用場景

明確了規(guī)范的適用范圍，確定了規(guī)范內(nèi)容輸出的細致程度（即主體框架）后，我們接下來要做的是收集規(guī)范對象的使用場景。

我們需要盡可能收集產(chǎn)品目前已有的按鈕樣式、類型。這里不需要事先對按鈕進行分類，只需要把我們認為是按鈕的收集起來即可，所謂的“即可錯殺，不可放過”。

三、按鈕的類型

接下來是需要對收集的按鈕進行分類。這是非常關(guān)鍵的一步，按鈕的分類決定了后續(xù)的拓展性。

按鈕分類的緯度和名稱五花八門，如基礎(chǔ)按鈕、文字按鈕、圖標按鈕、幽靈按鈕等等。這是因為不同的平臺都有自己的分類原則和命名習(xí)慣。我們不必糾結(jié)具體的叫法，按鈕分類和命名的關(guān)鍵在于能夠在團隊內(nèi)部達成一致，能夠達到制定規(guī)定的目標，提升協(xié)作效率，就是「最合適」的分類。

以上是筆者所在團隊制定的按鈕分類，僅供參考～

定義類型的過程不要忘記了我們緊密合作的開發(fā)童鞋。和他們一起討論哪些按鈕作為基礎(chǔ)類型，哪些按鈕可以通過提供配置項去實現(xiàn)，將有助于我們的設(shè)計規(guī)范在開發(fā)側(cè)的推進，更好地實現(xiàn)按鈕組件化。

四、按鈕的尺寸

每個的平臺都會有多種不同尺寸的按鈕，具體多少種可以根據(jù)自身平臺的需要來制定，但數(shù)量建議不要超過5種，過多的尺寸不僅在使用過程中容易混淆，維護成本也在提高。同時，在制定過程中還需要同時考慮web端和移動端之間的適配。

一個按鈕的尺寸由按鈕高度、按鈕寬度、按鈕圓角組成，下面我們逐個看看其中的細節(jié)之處。

1. 按鈕高度

每一種尺寸的按鈕對應(yīng)有一個固定的高度。一個按鈕看起來是否舒適精致，有個關(guān)鍵因素在于按鈕高度與文字大小的比例。若文字過大，整個按鈕留白過少，顯得擁擠不透氣；文字過小，整個按鈕過于寬松，甚至可能會影響按鈕的表意。

2. 按鈕寬度

按鈕的寬度是不固定的，根據(jù)按鈕文案的長度會有一定的適配規(guī)則，我們應(yīng)該怎么去規(guī)范按鈕的寬度呢？

首先是按鈕寬度的適配規(guī)則。我們需要定義文字與按鈕左右的邊距，但是并不是所有尺寸的按鈕左右邊距都是一樣的，需要根據(jù)按鈕大小比例來制定。

除此之外，我們還需要定義按鈕的最小寬度，即一些臨界值。如果只有左右邊距適配規(guī)則的話，有些按鈕就會因為文字短，使按鈕的比例變得不協(xié)調(diào)。同理，不同尺寸的按鈕的最小寬度也不一樣，需要根據(jù)按鈕的大小比例來制定。

最后是按鈕的最大寬度。按鈕的最大寬度需要符合所在容器的柵格規(guī)則。

3. 按鈕的圓角

按鈕的高度和寬度決定了按鈕的骨架，而按鈕的圓角大小則可以體現(xiàn)按鈕的氣質(zhì)。圓角越大，按鈕越圓潤，傳達的產(chǎn)品氣質(zhì)會更年輕活波；反之按鈕圓角越小，按鈕越方正，傳達的產(chǎn)品氣質(zhì)越嚴謹冷靜。

因此我們需要根據(jù)自身平臺的品牌屬性去規(guī)范我們的按鈕“看起來”是多圓潤。為什么是看起來呢？因為并不是所有尺寸的圓角大小都是一樣的，也需要根據(jù)按鈕的大小比例也制定。如果大按鈕和小按鈕都使用同樣的圓角，實際上它們“看起來”是不一樣的。

五、按鈕的狀態(tài)

按鈕的狀態(tài)一般分為4個狀態(tài)：正常狀態(tài)（default）、懸停狀態(tài)（hover）、按壓狀態(tài)（click）、失效狀態(tài)（disable），其中懸停狀態(tài)是Web端獨有的。

這里主要講2個點：

按壓狀態(tài)要注重不同客戶端的特性，如iOS和Android。按壓狀態(tài)最終的效果是一樣的，但按壓的過程不同客戶端會有其不同的特性。

按壓/失效狀態(tài)注意需要保持一種實現(xiàn)方式，確保整體的統(tǒng)一性。如不能是一種按鈕不可點擊狀態(tài)是降低透明度，另一個按鈕的不可點擊狀態(tài)是置灰。

六、圖標與文字的搭配

有一些按鈕會用圖標搭配文字，我們還需要去規(guī)范圖標大小以及圖標與文字邊距的。同理，我們依舊需要考慮按鈕的大小比例去制定具體規(guī)范。

七、多語言產(chǎn)品的特殊規(guī)則

對于國內(nèi)大部分的產(chǎn)品而言，一份較完整的按鈕規(guī)范已經(jīng)完成了。如果是多語言的產(chǎn)品（如klook/agoda/booking.com等），還需要補充哪些規(guī)則呢？因為筆者目前所在團隊設(shè)計的正是這樣一類產(chǎn)品，所以也想簡單和大家分享一下：

1. 文字截斷規(guī)則

文字的長度因為多語言的關(guān)系是不固定的，當(dāng)達到按鈕的最大寬度，文字還是超長時則需要截斷省略。

按鈕默認是尾部截斷，可以根據(jù)不同場景選擇中間截斷省略。

2. 文字縮小規(guī)則

在一些場景，按鈕文字非常重要，不能夠被省略，那文字過長時，常用的處理方式是縮小字號。這里要注意不同客戶端的實現(xiàn)方式有所差異，如Web端只能縮小到固定字號；而iOS和安卓則可以根據(jù)文案長度自動縮小到顯示的小為止。

文字縮小規(guī)則相對比較復(fù)雜，實際運用過程中需要注意以下2個問題：

1. Web端因為只能縮小到固定字號，需要留意是否所有的語言縮小到該字號都可以展示完整；
2. iOS和安卓可以縮小字號直到文字展示完整，需要注意某些語言下字號是否會縮得過小，影響用戶閱讀。

八、小結(jié)

以上便是關(guān)于制定按鈕規(guī)范的分享。在開始的部分我們聊了制定規(guī)范前的準備工作，在這個階段最重要的是明確規(guī)范的適用范圍，即服務(wù)的對象是誰，這樣才能幫助我們確定規(guī)范的整體框架及規(guī)范的細致程度。

而在具體的實施階段，需要注意的是多方溝通。如使用場景的收集，需要和不同業(yè)務(wù)的設(shè)計師溝通，確保沒有遺漏場景；再如按鈕的交互規(guī)則，需要和不同端的開發(fā)溝通，確保規(guī)則的合理性及可實現(xiàn)性。

希望能給大家在制作規(guī)范方面帶來一些幫助。謝謝～

本文由 @設(shè)計牛奶盒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。