之前在一個(gè)web系統(tǒng)的設(shè)計(jì)中，和另一個(gè)設(shè)計(jì)師討論，“保存”和“取消”按鈕該怎么設(shè)計(jì)。我的觀點(diǎn)是，保存是比取消更常用的按鈕，也是用戶的主要目的（用戶不會(huì)為了取消來使用表單），所以在視覺上，保存按鈕應(yīng)該比取消按鈕更醒目，這樣更容易被用戶先看到，從而提高用戶的效率。

下圖：Google analytics系統(tǒng)中，Apply以按鈕的形式表現(xiàn)，cancel以鏈接形式表現(xiàn)

后來碰巧看到Luke Wroblewski寫的“Primary & Secondary Actions in Web Forms”這篇文章。作者把“提交”、“保存”，“繼續(xù)”這樣的按鈕定義為主要?jiǎng)幼鳌Ｒ驗(yàn)樗鼈兪怯脩舨僮鞅韱蔚闹饕康?，而“取消”、“重置”、“撤銷”這樣的按鈕定義為次要?jiǎng)幼?，因?yàn)檫@些動(dòng)作不是操作表單的主要目的，并且它們的點(diǎn)擊效果是負(fù)面的。

作者一共設(shè)計(jì)了6種視覺形式，并通過眼動(dòng)儀來測試哪種表現(xiàn)最好。結(jié)果有點(diǎn)出乎我的意料，視覺上不區(qū)分主要?jiǎng)幼骱痛我獎(jiǎng)幼鞯脑O(shè)計(jì)方案，用戶完成表單的速度最快。但即便如此，作者仍然建議采用視覺提示更明顯的方案：“按鈕+鏈接”。

想更進(jìn)一步討論下，為什么會(huì)有這個(gè)問題。按照don’t make me think的說法，在沒有選擇的情況下，用戶更容易快速地做出決定?；蛘卟粦?yīng)該說是決定，因?yàn)楸緛砭筒恍枰脩羧ヅ袛?。沒有多余的按鈕吸引注意力，也沒有多余的按鈕可以點(diǎn)，用戶不假思索地就完成了操作。比如當(dāng)“下一步”按鈕獨(dú)立出現(xiàn)時(shí)，用戶往往點(diǎn)得很愉悅。

下圖：獨(dú)立出現(xiàn)的“下一步”

但是當(dāng)按鈕成對(duì)或者多個(gè)出現(xiàn)時(shí)，問題就來了，用戶必須看完所有的按鈕文字，才能做出判斷，這無疑是設(shè)計(jì)師不愿意看到的。所以會(huì)在按鈕上做一些引導(dǎo)，客戶端比較常見的做法就是把最常用的按鈕或者主要操作的按鈕設(shè)為焦點(diǎn)狀態(tài)。

下圖：opera瀏覽器退出時(shí)的彈出對(duì)話框，Exit被設(shè)為焦點(diǎn)按鈕

而網(wǎng)頁端因?yàn)椴淮嬖诎粹o焦點(diǎn)狀態(tài)，所以需要通過別的方法來實(shí)現(xiàn)同樣的效果。常見的拉開視覺層次的幾個(gè)手段有：

1.按鈕的排序

Windows系統(tǒng)上主要操作都是放在左側(cè)，用戶的瀏覽順序也是從左側(cè)開始，所以左側(cè)的按鈕最容易先被用戶看到。

2.按鈕的大小

一般是指按鈕的長短。可以通過加長文字，或者直接加長按鈕的手段來拉開視覺層次。這樣的按鈕更容易先被用戶的視線捕捉到。

下圖：“上一頁”按鈕只有一個(gè)箭頭，而“下一頁”按鈕為文字加箭頭

下圖：“確定”按鈕比“取消”按鈕更長

3.按鈕的顏色質(zhì)感

通過給按鈕添加顏色或質(zhì)感，以模仿客戶端焦點(diǎn)按鈕的表現(xiàn)。

下圖：wordpress將“publish”按鈕人為地設(shè)為高亮

在Google analytics這樣的web系統(tǒng)中，由于采用的是系統(tǒng)默認(rèn)樣式的按鈕，所以它選擇把次要操作以鏈接的形式展現(xiàn)，從而拉開視覺層次。這樣的設(shè)計(jì)在“登錄”，“注冊”中也很常見。

下圖：google帳號(hào)的登錄

最后再多說一句，表揚(yáng)下opera的設(shè)計(jì)。Opera的彈出框，讓像我這樣的用戶，只看按鈕就能快速做出判斷，而不用瀏覽對(duì)話框主體文字。如果我需要更快做出判斷，只看焦點(diǎn)按鈕就可以了。

相比之下，大多數(shù)軟件的按鈕上僅僅寫著“確定”，“取消”；我必須閱讀按鈕之上的大段文字，才敢按下其中一個(gè)。不僅強(qiáng)迫我選擇，還強(qiáng)迫我閱讀…

下圖：三個(gè)按鈕上很清楚的寫明了動(dòng)作

總結(jié)一下剛才所說：

1.如果可能，盡量只給用戶一個(gè)按鈕。
2.當(dāng)需要呈現(xiàn)多個(gè)按鈕，并且它們之間存在主要?jiǎng)幼骱痛我獎(jiǎng)幼鞯年P(guān)系時(shí)，通過拉開視覺層次的方法給用戶更好的引導(dǎo)。
3.按鈕的文字應(yīng)該引起設(shè)計(jì)師足夠的重視，承擔(dān)更重要的角色，幫助用戶快速做出判斷。

該文章在 2012/8/21 10:06:09 編輯過