按鈕是交互設(shè)計(jì)的基本元素辣卒。它們在用戶和系統(tǒng)之間的對話中起主要作用拧晕。在本文中紊扬,我將回顧7個(gè)基本規(guī)則曲饱,以創(chuàng)建有效的按鈕精置。
1.使按鈕看起來更像是按鈕
當(dāng)涉及到與用戶界面的交互時(shí)婆誓,用戶需要立即知道什么是可點(diǎn)擊,哪些是不可點(diǎn)擊的蔫敲。設(shè)計(jì)中的每個(gè)界面都需要用戶去理解啤挎,一般來說驻谆,用戶對界面進(jìn)行理解的時(shí)間越長,其可用性就越差庆聘。
但用戶如何判斷某個(gè)元素是否具有互動(dòng)性呢胜臊?他們會(huì)使用以前的經(jīng)驗(yàn)和視覺本能來進(jìn)行判斷。這就是為什么使用合適的視覺符號(hào)(如尺寸伙判,形狀象对,顏色,陰影等)使按鈕看起來更像是一個(gè)按鈕宴抚。
不幸的是勒魔,在許多界面中甫煞,可交互的部分做的很弱,大大降低了可可見性冠绢。
如果交互缺少引導(dǎo)性抚吠,用戶就會(huì)苦于可點(diǎn)擊還是不可點(diǎn)擊,設(shè)計(jì)的酷炫程度并不重要弟胀。如果他們覺得很難使用楷力,他們會(huì)覺得很沮喪,最終放棄使用孵户。
交互部分做的弱對于移動(dòng)用戶來說是更重要的問題萧朝。為了了解單個(gè)元素是否可交互,pc用戶可以將鼠標(biāo)移動(dòng)到元素上并檢查鼠標(biāo)是否改變其狀態(tài)夏哭。移動(dòng)用戶沒有這樣的機(jī)會(huì)剪勿,要了解某個(gè)元素是否是可交互的,用戶不得不點(diǎn)擊它方庭,沒有其他方法來檢查可交互性厕吉。
不要以為用戶界面中的某些元素是顯而易見的
在很多情況下,設(shè)計(jì)師不會(huì)故意去強(qiáng)調(diào)按鈕械念,他們認(rèn)為可交互元素對用戶來說是顯而易見的头朱。在界面設(shè)計(jì)中,你應(yīng)該始終牢記以下規(guī)則:由于你知道自己設(shè)計(jì)的每個(gè)元素都是做什么用的龄减,因此你對界面的理解力和用戶是不同的项钮。
為你的按鈕提供熟悉的設(shè)計(jì)
以下是大多數(shù)用戶熟悉的幾個(gè)按鈕示例:
方形填充按鈕
圓角填充按鈕
帶陰影的填充按鈕
邊框按鈕
在所有的這些例子中,帶陰影的填充按鈕設(shè)計(jì)對用戶來說是最清晰的希停。當(dāng)用戶看到按鈕的維度時(shí)烁巫,他們立即知道這是我們可以按下的東西。
不要忘記留白
不僅是按鈕本身的視覺屬性很重要宠能。按鈕附近的留白會(huì)使用戶更容易(或更難)理解它是否是可交互的亚隙。在該示例中,下面的一些用戶可能會(huì)將按鈕與信息框混淆违崇。
2.將按鈕放在用戶希望找到它們的地方
按鈕應(yīng)該放在用戶可以輕松找到或者期望看到的地方羞延。不要讓用戶去尋找按鈕渣淳。
盡可能使用傳統(tǒng)布局和標(biāo)準(zhǔn)的ui界面
按鈕的傳統(tǒng)位置提高了可發(fā)現(xiàn)性。通過標(biāo)準(zhǔn)布局伴箩,用戶可以輕松理解每個(gè)元素的用途-即使是沒有強(qiáng)指示性的按鈕入愧。通過標(biāo)準(zhǔn)布局和干凈的視覺設(shè)計(jì),會(huì)使用戶更加容易理解。
不要與用戶玩按鈕捉迷藏游戲
3.標(biāo)簽按鈕要清楚表明是要做什么
帶有通用標(biāo)簽或者說誤導(dǎo)性標(biāo)簽的按鈕可能會(huì)給用戶帶來巨大的挫折棺蛛。編寫可清楚解釋每個(gè)按鈕功能的按鈕標(biāo)簽怔蚌。理想情況下,按鈕的標(biāo)簽應(yīng)該清楚表明了其操作鞠值。
用戶應(yīng)該清楚的了解當(dāng)他們點(diǎn)下按鈕時(shí)會(huì)發(fā)生什么媚创。讓我給你一個(gè)簡單的例子渗钉。想象一下彤恶,你不小心觸發(fā)了一個(gè)刪除操作,現(xiàn)在你看到下面的錯(cuò)誤信息鳄橘。
不清楚在這個(gè)對話框中確定和取消代表什么。大多數(shù)用戶會(huì)問自己瘫怜,點(diǎn)擊取消會(huì)發(fā)生什么呢术徊?從來沒有一個(gè)對話框,它只包含兩個(gè)按鈕ok和cancel
不要使用ok標(biāo)簽鲸湃,最好使用刪除赠涮。這將清楚這個(gè)按鈕為用戶做了什么。另外暗挑,如果刪除是一項(xiàng)潛在的危險(xiǎn)操作笋除,你可以使用紅色來表明。
4.正確調(diào)整按鈕的大小
按鈕大小應(yīng)該反應(yīng)該屏幕上的優(yōu)先級(jí)烹看。大按鈕意味著更重要的操作国拇。
優(yōu)先按鈕
讓最重要的按鈕看起來就很重要。保證主要按鈕更加突出惯殊。增加其尺寸(通過增大按鈕使其看起來對用戶更重要)并且使用對比強(qiáng)一些的顏色捕捉用戶的注意力酱吝。
更適合移動(dòng)用戶的手指
在許多移動(dòng)應(yīng)用中土思,按鈕太小掉瞳。通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤。
麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn),手指墊的平均值在10-14毫米之間址愿,之間為8-10毫米该镣。這使10mm*10mm成為一個(gè)良好的最小觸摸尺寸。
5.注意順序
按鈕的順序反映用戶和該系統(tǒng)之間對話的性質(zhì)响谓。問問自己损合,用戶期望在屏幕上顯示什么順序省艳,然后進(jìn)行相應(yīng)的設(shè)計(jì)。
用戶界面是與用戶的對話
推動(dòng)你前進(jìn)的按鈕應(yīng)該在右側(cè)嫁审,后退的按鈕應(yīng)該在左側(cè)跋炕。
6.避免使用太多按鈕
這是許多應(yīng)用程序和網(wǎng)站的常見問題。當(dāng)你提供太多的選擇時(shí)律适,你的用戶最終不知道該做什么辐烂。在你的應(yīng)用或者網(wǎng)站中,請考慮好你最希望用戶采取的最重要的操作捂贿。
7.設(shè)計(jì)有關(guān)交互的視覺或音頻反饋
當(dāng)用戶點(diǎn)擊按鈕時(shí)纠修,他們期望用戶界面能做出適當(dāng)?shù)姆答仭8鶕?jù)操作類型厂僧,這可能是視覺或音頻反饋扣草。當(dāng)用戶沒有收到任何反饋時(shí),他們可能會(huì)認(rèn)為系統(tǒng)沒有收到他們的指令并會(huì)重復(fù)該操作颜屠。這種行為通常導(dǎo)致多次不必要的操作辰妙。
作為人類,我們期望在與對象交互之后得到一些反饋甫窟。它可能是視覺密浑,聽覺或者觸覺反饋。
對于某些操作(如下載)蕴坪,不僅要確認(rèn)用戶輸入肴掷,還要顯示進(jìn)程的當(dāng)前狀態(tài)。
結(jié)論
盡管按鈕是交互設(shè)計(jì)的普通元素背传,但我們?nèi)砸M可能的使這個(gè)元素更好呆瞻。