7個(gè)按鈕設(shè)計(jì)基本規(guī)則

圖片:Gal Shir

按鈕是交互設(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ò)誤信息鳄橘。

模糊的標(biāo)簽'OK'并沒有太多說明動(dòng)作按鈕的作用声离。

不清楚在這個(gè)對話框中確定和取消代表什么。大多數(shù)用戶會(huì)問自己瘫怜,點(diǎn)擊取消會(huì)發(fā)生什么呢术徊?從來沒有一個(gè)對話框,它只包含兩個(gè)按鈕ok和cancel

不要使用ok標(biāo)簽鲸湃,最好使用刪除赠涮。這將清楚這個(gè)按鈕為用戶做了什么。另外暗挑,如果刪除是一項(xiàng)潛在的危險(xiǎn)操作笋除,你可以使用紅色來表明。

'刪除'清楚了表達(dá)按鈕是做什么炸裆。


在這個(gè)界面中垃它,一個(gè)潛在的危險(xiǎn)行為'禁用卡片'以紅色著色。圖像:??Ramotion

4.正確調(diào)整按鈕的大小

按鈕大小應(yīng)該反應(yīng)該屏幕上的優(yōu)先級(jí)烹看。大按鈕意味著更重要的操作国拇。

優(yōu)先按鈕

讓最重要的按鈕看起來就很重要。保證主要按鈕更加突出惯殊。增加其尺寸(通過增大按鈕使其看起來對用戶更重要)并且使用對比強(qiáng)一些的顏色捕捉用戶的注意力酱吝。

Dropbox使用尺寸和顏色對比將用戶的注意力集中在'Try Dropbox Business free'CTA按鈕上。

更適合移動(dòng)用戶的手指

在許多移動(dòng)應(yīng)用中土思,按鈕太小掉瞳。通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤。

左側(cè):正確尺寸的按鈕浪漠。右:按鈕太小陕习。圖片:蘋果

麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn),手指墊的平均值在10-14毫米之間址愿,之間為8-10毫米该镣。這使10mm*10mm成為一個(gè)良好的最小觸摸尺寸。

圖片來源:uxmag

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è)元素更好呆瞻。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市径玖,隨后出現(xiàn)的幾起案子痴脾,更是在濱河造成了極大的恐慌,老刑警劉巖梳星,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赞赖,死亡現(xiàn)場離奇詭異,居然都是意外死亡冤灾,警方通過查閱死者的電腦和手機(jī)前域,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來韵吨,“玉大人匿垄,你說我怎么就攤上這事。” “怎么了椿疗?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵漏峰,是天一觀的道長。 經(jīng)常有香客問我届榄,道長浅乔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任铝条,我火速辦了婚禮靖苇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘攻晒。我一直安慰自己顾复,他們只是感情好班挖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布鲁捏。 她就那樣靜靜地躺著,像睡著了一般萧芙。 火紅的嫁衣襯著肌膚如雪给梅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天双揪,我揣著相機(jī)與錄音动羽,去河邊找鬼。 笑死渔期,一個(gè)胖子當(dāng)著我的面吹牛运吓,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播疯趟,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拘哨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了信峻?” 一聲冷哼從身側(cè)響起倦青,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盹舞,沒想到半個(gè)月后产镐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡踢步,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年癣亚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片获印。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡述雾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情绰咽,我是刑警寧澤菇肃,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站取募,受9級(jí)特大地震影響琐谤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜玩敏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一斗忌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旺聚,春花似錦织阳、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至碱璃,卻和暖如春弄痹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嵌器。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工肛真, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人爽航。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓蚓让,卻偏偏與公主長得像,于是被迫代替她去往敵國和親讥珍。 傳聞我的和親對象是個(gè)殘疾皇子历极,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,133評(píng)論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,753評(píng)論 1 92
  • iOS 9設(shè)計(jì)規(guī)范 中文版 完整版譯者注:本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface G...
    海寧Hennie閱讀 13,281評(píng)論 2 60
  • 下面的原則對于有效的用戶界面的設(shè)計(jì)和實(shí)現(xiàn)都是最基本的串述,不管是針對傳統(tǒng)的圖形用戶界面還是針對任意的可聯(lián)網(wǎng)的智能電子設(shè)...
    arlene112閱讀 2,301評(píng)論 0 16
  • 我出生在一個(gè)河北省的小城市纲酗,長大后到了廣州念書衰腌。 在兩個(gè)城市都生活了一段時(shí)間,我發(fā)現(xiàn)一個(gè)現(xiàn)象觅赊,北上廣這樣的大城市中...
    閉眼唱歌閱讀 844評(píng)論 0 2