關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。

按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認(rèn)識(shí)這個(gè)組件，今天我把關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。

一  按鈕的作用

在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時(shí)候該用按鈕。

1）什么是按鈕

按鈕用于觸發(fā)一個(gè)及時(shí)操作。

2）有什么作用

2.1 功能操作

比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當(dāng)弱化，重點(diǎn)強(qiáng)調(diào)功能，突出主體信息。

2.2 指引用戶下一步操作

這個(gè)是最常見的使用場景，每個(gè)可交互頁面上都有這類按鈕的出現(xiàn)，用來指引用戶下一步該怎么做。比如：創(chuàng)建、保存...

2.3 培養(yǎng)用戶習(xí)慣

當(dāng)用戶知悉某個(gè)按鈕能指向某個(gè)操作，或者獲取某類信息后，長此以往用戶就會(huì)形成使用習(xí)慣。如果某操作能夠?yàn)橛脩舫掷m(xù)帶來價(jià)值，那就可以在按鈕的位置讓它更醒目，持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣。

二  按鈕有哪些類型

    ·  主按鈕：用于主動(dòng)行動(dòng)點(diǎn)，一個(gè)操作區(qū)域內(nèi)只有且只能有一個(gè)主按鈕；

    ·  默認(rèn)按鈕：用戶內(nèi)有主次之分的一組行動(dòng)點(diǎn)；

    ·  虛線按鈕：常用于【添加】操作；

    ·  文本按鈕：用于次級(jí)的行動(dòng)點(diǎn)；

    ·  鏈接按鈕：用于作為外鏈的行動(dòng)點(diǎn)。

三  按鈕的狀態(tài)

1）交互狀態(tài)

1.1 Normal 正常狀態(tài)

此狀態(tài)為按鈕的正常顯示狀態(tài)，就是按鈕在也頁面中的常規(guī)狀態(tài)。

1.2 Hover 懸浮狀態(tài)

此狀態(tài)為按鈕的懸浮狀態(tài)，當(dāng)鼠標(biāo)滑過時(shí)候的狀態(tài)會(huì)給用戶一個(gè)交互反饋，因?yàn)樗皇且粋€(gè)視覺上的反饋并無實(shí)際作用，所以在移動(dòng)端就把此狀態(tài)去掉了。

此狀態(tài)的效果并沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。

1.3 Click 點(diǎn)擊狀態(tài)

此狀態(tài)為按鈕的鼠標(biāo) / 手指按鈕狀態(tài)，操作完此狀態(tài)后，就會(huì)引發(fā)此按鈕的真實(shí)作用。

同時(shí)，此狀態(tài)的效果也沒有具體的規(guī)則，具體按產(chǎn)品風(fēng)格來定。這里我給一個(gè)參考效果，但并不是唯一效果，如果不合適，可以酌情更改。

1.4 Disable 禁用狀態(tài)

此狀態(tài)為按鈕的不可操作狀態(tài)。

當(dāng)頁面中有未完成的任務(wù)或頁面中有錯(cuò)誤導(dǎo)致不可提交頁面時(shí)，按鈕會(huì)處于 Disable 狀態(tài)。這個(gè)狀態(tài)在產(chǎn)品中也是很常用的，而且這種情況下應(yīng)該引導(dǎo)用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個(gè)通用的展示方案。

一般方案有兩種：

    ·  無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；

    ·  Disable 狀態(tài)為 Normal 狀態(tài)的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。

2）狀態(tài)屬性

    ·  常規(guī)：常規(guī)樣式的按鈕，主操作按鈕；

    ·  危險(xiǎn)按鈕：刪除/移動(dòng)/修改權(quán)限等危險(xiǎn)操作，一般需要二次確認(rèn)；

    ·  幽靈按鈕：用于背景色比較復(fù)雜的地方，常用在首頁/產(chǎn)品頁等展示場景；

    ·  加載：用于異步操作等待反饋的時(shí)候，可以避免多次提交。

四  按鈕的使用方法 / 禁忌

1）一個(gè)操作區(qū)有且只有一個(gè)主按鈕

一個(gè)操作區(qū)有且只有一個(gè)主按鈕去引導(dǎo)用戶操作，如有有多個(gè)或沒有則會(huì)影響用戶的判斷。盡可能少的讓用戶去做選擇，產(chǎn)品的終極目標(biāo)應(yīng)該是“傻瓜式”產(chǎn)品，不要讓用戶有學(xué)習(xí)成本。

2）圓角值

根據(jù)產(chǎn)品風(fēng)格，三種圓角值的設(shè)定：

2.1 圓角值為 0

這種適合用在比較嚴(yán)謹(jǐn) / 企業(yè)級(jí)產(chǎn)品中，比如：阿里云；

2.2 小圓角值

這種是最常用的形式，在不失嚴(yán)謹(jǐn)?shù)耐瑫r(shí)還有一些細(xì)節(jié)，如果可以的話，盡量選這種的；

2.3 超大圓角值

這種一般需要有獨(dú)特的產(chǎn)品風(fēng)格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。

較大圓角值，此類千萬不要用，不要問，問就是太丑。

3）精簡文字

按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。

4）文字與按鈕比例要適中

文字與按鈕的比例要適中，文字不要太大或太小，都會(huì)影響視覺展示。

5）彌散陰影

如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會(huì)讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級(jí)別的不要用，不然識(shí)別度會(huì)變差，并且會(huì)讓按鈕的體驗(yàn)變得很差。

6）主次操作按鈕樣式統(tǒng)一

主次操作按鈕樣式要統(tǒng)一，不要濫用樣式。

7）按鈕樣式與其他組件要有區(qū)別

實(shí)際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產(chǎn)生誤解，做一些不必要的操作和思考。

8）不同場景適配

現(xiàn)在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識(shí)別度的問題。

9）主次按鈕的位置

主次按鈕左右的問題，也常常出現(xiàn)在設(shè)計(jì)討論會(huì)中，這次我直接放個(gè)結(jié)論吧，以后不要再為這件事吵架了。

在提交頁面、彈窗中，主按鈕在右；在其他常規(guī)頁面上，酌情考慮。

五  按鈕尺寸

按鈕尺寸具體用多大的，這里我總結(jié)了一個(gè)規(guī)范（僅代表個(gè)人意見）。

· 高 = 文字行高 + Xn，X=自然數(shù)，n=4

· 寬 = 文字寬度 +  Xn，X=自然數(shù)，n=4

在其他地方也可以用類似的公式去做規(guī)范，比如卡片的間距，你可以設(shè)置 n 為基礎(chǔ)值，在此基礎(chǔ)上用 Xn 去選取合適的值。

注意：常用的字號(hào)為 12px、14px，盡量不要用太大的字號(hào)在按鈕上。

小結(jié)

按鈕只是眾多組件中的其中一個(gè)，也是最常用的組件之一。對于設(shè)計(jì)師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個(gè)細(xì)節(jié)做好了，才能做好產(chǎn)品。日積月累的把每一個(gè)知識(shí)點(diǎn)掌握了，我們也就成長了。

文章來源：優(yōu)設(shè)網(wǎng)     作者：友設(shè)青年

藍(lán)藍(lán)設(shè)計(jì)( www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)