国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本文就來(lái)聊聊制定按鈕規(guī)范時(shí)會(huì)遇到的一些問題，雖然只有普通按鈕，但還是有很多細(xì)節(jié)值得我們思考學(xué)習(xí)。

嚴(yán)格來(lái)說(shuō)，按鈕包括很多種，比如普通按鈕、圖標(biāo)按鈕、文字按鈕、開關(guān)按鈕等等：

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

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

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

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

大綱如下：

1. 按鈕高度
2. 按鈕寬度
3. 按鈕顏色
4. 按鈕圓角
5. 按鈕狀態(tài)
6. 按鈕文字
7. 按鈕搭配
8. 按鈕圖標(biāo)

1. 按鈕高度

每個(gè)平臺(tái)都會(huì)有多種型號(hào)的按鈕，我見過(guò)最多的可以分為5種：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個(gè)可以根據(jù)自己平臺(tái)的需要來(lái)制定多少種。

每一種按鈕都需要有一個(gè)特定高度，那么這個(gè)高度如何制定才比較科學(xué)呢？這里可以推薦一種方式，就是按鈕的高度是文字的三倍左右，這樣看起來(lái)會(huì)比較舒服：

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

2. 按鈕寬度

每一種規(guī)格的按鈕高度是固定的，但寬度就不一定了。

比如大按鈕會(huì)根據(jù)頁(yè)面內(nèi)容來(lái)制定按鈕的寬度：

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

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

再比如小按鈕，我們需要給一個(gè)臨界值，比如四個(gè)字是臨界值，按鈕字?jǐn)?shù)小于4時(shí)，寬度都按4個(gè)字的寬度來(lái)實(shí)現(xiàn)：

按鈕字?jǐn)?shù)大于等于四個(gè)字時(shí)，我們需要給出字體與按鈕的左右間距：

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

3. 按鈕顏色

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

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

4. 圓角大小

如果平臺(tái)的按鈕是圓角矩形，就需要制定按鈕圓角的大小，但是并不是所有按鈕的圓角大小都是一樣的，需要按鈕大小比例來(lái)制定：

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

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

5. 按鈕狀態(tài)

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

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

按壓狀態(tài)：推薦兩種實(shí)現(xiàn)方式

一種是增加15%的黑色，一種是增加15%的白色：

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

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

6. 按鈕搭配

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

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

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

7. 按鈕文字

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

8. 按鈕圖標(biāo)

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

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

好了，以上就是關(guān)于按鈕規(guī)范的分享，希望能幫助大家提供一些思路和靈感，歡迎交流！

#專欄作家#

菜心，微信公眾號(hào)：菜心設(shè)計(jì)鋪，人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級(jí)視覺設(shè)計(jì)師，5年工作經(jīng)驗(yàn)，負(fù)責(zé)騰訊動(dòng)漫移動(dòng)端相關(guān)設(shè)計(jì)。歡迎大家互相交流關(guān)注。

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

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