在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中,按鈕作為頁(yè)面中最為影響用戶體驗(yàn)的視覺元素及核心控件,按鈕設(shè)計(jì)讓不少設(shè)計(jì)師費(fèi)勁腦汁。一個(gè)有品質(zhì)感的網(wǎng)站設(shè)計(jì),一定能很好處理按鈕這個(gè)角色,9種技巧瞬間提升你的網(wǎng)頁(yè)按鈕品質(zhì)感。
還記得我們之前分享過的按鈕設(shè)計(jì)相關(guān)的知識(shí)點(diǎn)嗎?還記得怎么設(shè)計(jì)幽靈按鈕(Ghost Buttons)嗎?對(duì)行為召喚按鈕設(shè)計(jì)技巧了解嗎?
01
-
形狀易識(shí)別
實(shí)際上用戶必須付出很多努力來解碼按鈕,所以按鈕應(yīng)易于識(shí)別,不能與背景合并。這就需要告訴你的用戶:這就是按鈕。而最直接的方式就是按鈕的形狀要易于識(shí)別。
02
-
按鈕設(shè)計(jì)保持一致性
設(shè)計(jì)人員應(yīng)牢記設(shè)計(jì)的一致性,按紐設(shè)計(jì)應(yīng)該遵照用戶界面,與其主題保持一致性。
03
-
添加陰影,增強(qiáng)識(shí)別
陰影是設(shè)計(jì)師為用戶提供的重要提示,可幫助用戶識(shí)別屏幕上的可點(diǎn)擊對(duì)象。如果按鈕投射陰影,用戶更易識(shí)別出它是頁(yè)面上的交互元素。同時(shí)這個(gè)陰影為按鈕提供了凸顯的外觀,使其可區(qū)分。
04
-
告訴用戶圖標(biāo)的功能
用戶需要的是能夠判斷按鈕的功能。這就要求按紐可識(shí)別性高,用戶可以一目了然地發(fā)現(xiàn)它。按鈕上的圖標(biāo)就發(fā)揮這樣的作用,引導(dǎo)用戶執(zhí)行。
05
-
按鈕尺寸要適當(dāng)
按鈕的大小取決于屏幕大小,無論是為移動(dòng)端設(shè)計(jì)還是網(wǎng)頁(yè)按鈕設(shè)計(jì),按鈕應(yīng)該是合適的尺寸,不能過大或過小。
06
-
避免按鈕數(shù)量過多
設(shè)計(jì)師必須優(yōu)先考慮最重要的操作,并制作有限的按鈕。屏幕上的按鈕和操作過多只會(huì)使用戶更加困惑,產(chǎn)生“零操作”。
07
-
使用對(duì)比色引導(dǎo)用戶
不同按鈕之間清晰的顏色對(duì)比,能夠指導(dǎo)用戶正確選擇相應(yīng)按鈕。你需要幫助用戶識(shí)別積極、消極、中性行為,積極的行為需要高對(duì)比度加以引導(dǎo),而當(dāng)頁(yè)面中只有消極和中性行為時(shí),消極行為的按鈕就需要使用高對(duì)比度,幫助用戶識(shí)別。
08
-
避免過度設(shè)計(jì)按鈕
太復(fù)雜的按鈕只會(huì)讓頁(yè)面更加沉重,不要過度設(shè)計(jì)按鈕,越簡(jiǎn)單越好!
09
-
提供交互的視覺或音頻反饋
要響應(yīng)用戶對(duì)按鈕的操作,如果用戶點(diǎn)擊某個(gè)按鈕,具備音頻或視覺響應(yīng),這將能夠確保用戶作出適當(dāng)?shù)姆答佉约巴瓿尚袆?dòng),從而提高用戶體。