UI設計中的按鈕設計規(guī)范

　　已經(jīng)有很多朋友催我更新設計規(guī)范的文章了，今天AAA教育郭老師就先來一篇，關(guān)于按鈕設計規(guī)范的，后面會陸續(xù)更新其他控件內(nèi)容。嚴格來說，按鈕包括很多種，比如普通按鈕、圖標按鈕、文字按鈕、開關(guān)按鈕等等。

 

　　但我覺得根據(jù)這樣的分類來制定規(guī)范，多少會有些重合的地方，比如“圖標按鈕”到底是算圖標還是算按鈕?是不是并沒有很徹底的將二者區(qū)分開?
 

　　所以如果我來制定規(guī)范，按鈕就是上圖中的普通按鈕，其余的分別歸類到文字、圖標、開關(guān)當中，這樣可以很清晰的區(qū)分開每個控件。
 

　　(這里必須要和大家強調(diào)一下，每個平臺都有自己的規(guī)定原則和名稱叫法，我們制定規(guī)范是為了讓自己團隊更好的協(xié)同辦公，而不是為了規(guī)范而規(guī)范，所以在一些分類和名稱的叫法上，不必過于糾結(jié)和較真，只要團隊成員之間達成共識，提升了團隊效率，適合團隊成員使用，那就是最好的規(guī)范。)
 

　　接下來我們就來聊聊制定按鈕規(guī)范時會遇到的一些問題，雖然只有普通按鈕，但還是有很多細節(jié)值得我們思考學習。
 

　　大綱如下：1.按鈕高度2.按鈕寬度3.按鈕顏色4.按鈕圓角5.按鈕狀態(tài)6.按鈕文字7.按鈕搭配8.按鈕圖標
 

　　1 按鈕高度每個平臺都會有多種型號的按鈕，我見過最多的可以分為5種：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個可以根據(jù)自己平臺的需要來制定多少種。
 

　　每一種按鈕都需要有一個特定高度，那么這個高度如何制定才比較科學呢?這里可以推薦一種方式，就是按鈕的高度是文字的三倍左右，這樣看起來會比較舒服：

 

　　當然，這種方式只是對比分析多個產(chǎn)品之后得到的一個大致規(guī)律，僅供參考!
 

　　2.按鈕寬度
 

　　每一種規(guī)格的按鈕高度是固定的，但寬度就不一定了。比如大按鈕會根據(jù)頁面內(nèi)容來制定按鈕的寬度：

 

　　當然，我們還是需要給出大按鈕的最大和最小寬度，最大寬度就是頁面寬度減去安全邊距(下圖兩個紅線間距就是安全邊距，每個平臺都會有，常見的安全邊距有10pt、12pt、16pt等)：

 

　　最小寬度根據(jù)各平臺屬性來制定即可。
 

　　再比如小按鈕，我們需要給一個臨界值，比如四個字是臨界值，按鈕字數(shù)小于4時，寬度都按4個字的寬度來實現(xiàn)：

 

　　按鈕字數(shù)大于等于四個字時，我們需要給出字體與按鈕的左右間距：

 

　　寬度的規(guī)則相對比較麻煩，必須要考慮清楚種類、最大、最小、臨界值等因素，否則在后續(xù)使用中就容易亂作一團。
 

　　3.按鈕顏色
 

　　顏色部分比較簡單，一般會選用規(guī)范體系的顏色即可，這里講一個注意點，如果你的按鈕是有漸變色的，漸變最好水平橫向拉伸，這樣開發(fā)寫起來成本小一點：

 

　　如果有角度的漸變，當然也可以寫，只是最好先和開發(fā)溝通一下，免得造成不必要的麻煩。
 

　　4.圓角大小
 

　　如果平臺的按鈕是圓角矩形，就需要制定按鈕圓角的大小，但是并不是所有按鈕的圓角大小都是一樣的，需要按鈕大小比例來制定:

 

　　這樣看起來會和諧一些，否則如果不論按鈕多大，都用一樣的圓角，看起來就會不像一套的：

 

　　這樣兩個按鈕雖然圓角一樣大，但感覺下面的按鈕會就圓潤很多，二者調(diào)性嚴重不符。
 

　　5.按鈕狀態(tài)
 

　　一般移動端的按鈕有這三種狀態(tài)就夠用了:正常,按壓和不可點擊。
 

　　正常狀態(tài)就不必多講了。
 

　　按壓狀態(tài)：推薦兩種實現(xiàn)方式一種是增加15%的黑色，一種是增加15%的白色:

 

　　不可點擊狀態(tài)，也推薦兩種實現(xiàn)方式，一種是降低為30%的透明度，另一種是直接置灰:

 

　　灰色色值可按照自己平臺的色彩規(guī)范來制定，還是那個原則，要保持一種按壓和置灰方式，確保統(tǒng)一性。
 

　　6.按鈕搭配
 

　　我們經(jīng)常會遇到兩個按鈕同時出現(xiàn)的情況，有時候兩個按鈕需要有主有次，比如：

 

　　所以我們要規(guī)定好輕重按鈕配合使用的樣式規(guī)則，防止一個平臺同時出現(xiàn)多種配合方式，比如下面這就是兩種樣式搭配：

 

　　具體使用哪種方式搭配，可根據(jù)平臺屬性來進行規(guī)范。
 

　　7.按鈕文字
 

　　按鈕文字需要規(guī)定好文字的大小，顏色以及容易被忽略的文字極限值，一般來說按鈕文字不會超過6個字，供大家參考。
 

　　8.按鈕圖標
 

　　有些普通按鈕上會有一些圖標，我們需要把圖標的大小、圖標與文字的間距規(guī)定好：

 

　　其余的符合普通按鈕規(guī)范即可!
 

　　好了，以上就是關(guān)于按鈕規(guī)范的分享，希望能幫助大家提供一些思路和靈感。因此，您現(xiàn)在已經(jīng)了解了與UI設計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。