幾何

已經有很多朋友催我更新設計規范的文章了,今天先來一篇,關于按鈕規范的,后面會陸續更新其他控件內容。

嚴格來說,按鈕包括很多種,比如普通按鈕、圖標按鈕、文字按鈕、開關按鈕等等:

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

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

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

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

 

大綱如下:

1.按鈕高度

2.按鈕寬度

3.按鈕顏色

4.按鈕圓角

5.按鈕狀態

6.按鈕文字

7.按鈕搭配

8.按鈕圖標

 

1 按鈕高度

每個平臺都會有多種型號的按鈕,我見過最多的可以分為5種:超大按鈕、大按鈕、中按鈕、小按鈕,超小按鈕,這個可以根據自己平臺的需要來制定多少種。

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

當然,這種方式只是對比分析多個產品之后得到的一個大致規律,僅供參考!

 

2.按鈕寬度

每一種規格的按鈕高度是固定的,但寬度就不一定了。

比如大按鈕會根據頁面內容來制定按鈕的寬度:

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

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

再比如小按鈕,我們需要給一個臨界值,比如四個字是臨界值,按鈕字數小于4時,寬度都按4個字的寬度來實現:

按鈕字數大于等于四個字時,我們需要給出字體與按鈕的左右間距:

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

 

3.按鈕顏色

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

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

 

4.圓角大小

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

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

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

 

5.按鈕狀態

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

正常狀態就不必多講了。

按壓狀態:推薦兩種實現方式

一種是增加15%的黑色,一種是增加15%的白色:

不可點擊狀態,也推薦兩種實現方式,一種是降低為30%的透明度,另一種是直接置灰:

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

 

6.按鈕搭配

我們經常會遇到兩個按鈕同時出現的情況,有時候兩個按鈕需要有主有次,比如:

所以我們要規定好輕重按鈕配合使用的樣式規則,防止一個平臺同時出現多種配合方式,比如下面這就是兩種樣式搭配:

具體使用哪種方式搭配,可根據平臺屬性來進行規范。

 

7.按鈕文字

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

 

8.按鈕圖標

有些普通按鈕上會有一些圖標,我們需要把圖標的大小、圖標與文字的間距規定好:
其余的符合普通按鈕規范即可!

好了,以上就是關于按鈕規范的分享,希望能幫助大家提供一些思路和靈感,歡迎交流!

 

原文地址:菜心設計鋪(公眾號)

作者:菜心設計鋪

轉載請注明:學UI網 » 宅在家無聊,不如學學按鈕規范吧!

登錄收藏
 
你可能喜歡的:
有圖標的設計,體驗就一定好嗎?有圖標的設計,體驗就一定好嗎?
2020春節圖標盤點2020春節圖標盤點
畫圖標已經夠難了,圖標里面還要加表情,我太南了!畫圖標已經夠難了,圖標里面還要加表情,我太南了!
跟著狼哥做練習_iPod練習【視頻教程】跟著狼哥做練習_iPod練習【視頻教程】
設計沉思錄|這一次,我們嘗試設計了儀式感設計沉思錄|這一次,我們嘗試設計了儀式感
ICON設計法則-菱形法則ICON設計法則-菱形法則
實心圖標與空心圖標的區別?實心圖標與空心圖標的區別?
系統圖標 - 圖標分解 Material 規范系統圖標 – 圖標分解 Material 規范
請看IBM設計系統如何定義圖標?請看IBM設計系統如何定義圖標?
系統圖標 - 基礎認知 Material 規范系統圖標 – 基礎認知 Material 規范
?
网球比分雷速