2021-2-3 周周
關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
按鈕是最常用的組件之一,有很多小伙伴并沒(méi)有很全面的認(rèn)識(shí)這個(gè)組件,今天我把關(guān)于按鈕的一些知識(shí)和我的一些觀點(diǎn)分享給大家。
一 按鈕的作用
在使用按鈕之前,你要了解什么是按鈕,按鈕的作用是什么,什么時(shí)候該用按鈕。
1)什么是按鈕
按鈕用于觸發(fā)一個(gè)及時(shí)操作。
2)有什么作用
2.1 功能操作
比較常見(jiàn)的是:展開(kāi)收起、加減、下拉等。這種情況下以功能性為主,按鈕的形式適當(dāng)弱化,重點(diǎn)強(qiáng)調(diào)功能,突出主體信息。
2.2 指引用戶下一步操作
這個(gè)是最常見(jiàn)的使用場(chǎng)景,每個(gè)可交互頁(yè)面上都有這類(lèi)按鈕的出現(xiàn),用來(lái)指引用戶下一步該怎么做。比如:創(chuàng)建、保存...
2.3 培養(yǎng)用戶習(xí)慣
當(dāng)用戶知悉某個(gè)按鈕能指向某個(gè)操作,或者獲取某類(lèi)信息后,長(zhǎng)此以往用戶就會(huì)形成使用習(xí)慣。如果某操作能夠?yàn)橛脩舫掷m(xù)帶來(lái)價(jià)值,那就可以在按鈕的位置讓它更醒目,持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣。
二 按鈕有哪些類(lèi)型
· 主按鈕:用于主動(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),就是按鈕在也頁(yè)面中的常規(guī)狀態(tài)。
1.2 Hover 懸浮狀態(tài)
此狀態(tài)為按鈕的懸浮狀態(tài),當(dāng)鼠標(biāo)滑過(guò)時(shí)候的狀態(tài)會(huì)給用戶一個(gè)交互反饋,因?yàn)樗皇且粋€(gè)視覺(jué)上的反饋并無(wú)實(shí)際作用,所以在移動(dòng)端就把此狀態(tài)去掉了。
此狀態(tài)的效果并沒(méi)有具體的規(guī)則,具體按產(chǎn)品風(fēng)格來(lái)定。這里我給一個(gè)參考效果,但并不是唯一效果,如果不合適,可以酌情更改。
1.3 Click 點(diǎn)擊狀態(tài)
此狀態(tài)為按鈕的鼠標(biāo) / 手指按鈕狀態(tài),操作完此狀態(tài)后,就會(huì)引發(fā)此按鈕的真實(shí)作用。
同時(shí),此狀態(tài)的效果也沒(méi)有具體的規(guī)則,具體按產(chǎn)品風(fēng)格來(lái)定。這里我給一個(gè)參考效果,但并不是唯一效果,如果不合適,可以酌情更改。
1.4 Disable 禁用狀態(tài)
此狀態(tài)為按鈕的不可操作狀態(tài)。
當(dāng)頁(yè)面中有未完成的任務(wù)或頁(yè)面中有錯(cuò)誤導(dǎo)致不可提交頁(yè)面時(shí),按鈕會(huì)處于 Disable 狀態(tài)。這個(gè)狀態(tài)在產(chǎn)品中也是很常用的,而且這種情況下應(yīng)該引導(dǎo)用戶去做其他操作,所以此按鈕在視覺(jué)上一定要弱于其他。所以要制定一個(gè)通用的展示方案。
一般方案有兩種:
· 無(wú)論按鈕本身顏色是什么,它的背景色均為純灰色,常用的色值有:#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ù)雜的地方,常用在首頁(yè)/產(chǎn)品頁(yè)等展示場(chǎng)景;
· 加載:用于異步操作等待反饋的時(shí)候,可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1)一個(gè)操作區(qū)有且只有一個(gè)主按鈕
一個(gè)操作區(qū)有且只有一個(gè)主按鈕去引導(dǎo)用戶操作,如有有多個(gè)或沒(méi)有則會(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)格才可使用。樣式不好把控全局效果,所以使用頻率較低,慎重使用。
較大圓角值,此類(lèi)千萬(wàn)不要用,不要問(wèn),問(wèn)就是太丑。
3)精簡(jiǎn)文字
按鈕里面的文字一定是精簡(jiǎn)的,不要展示過(guò)多文字,更不要折行。
4)文字與按鈕比例要適中
文字與按鈕的比例要適中,文字不要太大或太小,都會(huì)影響視覺(jué)展示。
5)彌散陰影
如果你想要用彌散陰影,陰影的顏色盡量用帶按鈕本身顏色傾向的,這樣會(huì)讓按鈕更有呼吸感。需要注意的是:只有主按鈕才能用陰影,其他級(jí)別的不要用,不然識(shí)別度會(huì)變差,并且會(huì)讓按鈕的體驗(yàn)變得很差。
6)主次操作按鈕樣式統(tǒng)一
主次操作按鈕樣式要統(tǒng)一,不要濫用樣式。
7)按鈕樣式與其他組件要有區(qū)別
實(shí)際使用中,按鈕樣式不要與其他組件樣式混用,避免讓用戶產(chǎn)生誤解,做一些不必要的操作和思考。
8)不同場(chǎng)景適配
現(xiàn)在暗黑模式也是常用的場(chǎng)景了,所以黑/白場(chǎng)景下都要考慮到識(shí)別度的問(wèn)題。
9)主次按鈕的位置
主次按鈕左右的問(wèn)題,也常常出現(xiàn)在設(shè)計(jì)討論會(huì)中,這次我直接放個(gè)結(jié)論吧,以后不要再為這件事吵架了。
在提交頁(yè)面、彈窗中,主按鈕在右;在其他常規(guī)頁(yè)面上,酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的,這里我總結(jié)了一個(gè)規(guī)范(僅代表個(gè)人意見(jiàn))。
· 高 = 文字行高 + Xn,X=自然數(shù),n=4
· 寬 = 文字寬度 + Xn,X=自然數(shù),n=4
在其他地方也可以用類(lèi)似的公式去做規(guī)范,比如卡片的間距,你可以設(shè)置 n 為基礎(chǔ)值,在此基礎(chǔ)上用 Xn 去選取合適的值。
注意:常用的字號(hào)為 12px、14px,盡量不要用太大的字號(hào)在按鈕上。
小結(jié)
按鈕只是眾多組件中的其中一個(gè),也是最常用的組件之一。對(duì)于設(shè)計(jì)師來(lái)說(shuō),無(wú)論大小組件,我們都要精益求精的去思考,只有把每一個(gè)細(xì)節(jié)做好了,才能做好產(chǎn)品。日積月累的把每一個(gè)知識(shí)點(diǎn)掌握了,我們也就成長(zhǎng)了。
文章來(lái)源:優(yōu)設(shè)網(wǎng) 作者:友設(shè)青年
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com