91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

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

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

后來碰巧看到Luke Wroblewski寫的“Primary & Secondary Actions in Web Forms”這篇文章。作者把“提交”、“保存”，“繼續(xù)”這樣的按鈕定義為主要動作。因為它們是用戶操作表單的主要目的，而“取消”、“重置”、“撤銷”這樣的按鈕定義為次要動作，因為這些動作不是操作表單的主要目的，并且它們的點擊效果是負(fù)面的。

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

想更進(jìn)一步討論下，為什么會有這個問題。按照don’t make me think的說法，在沒有選擇的情況下，用戶更容易快速地做出決定。或者不應(yīng)該說是決定，因為本來就不需要用戶去判斷。沒有多余的按鈕吸引注意力，也沒有多余的按鈕可以點，用戶不假思索地就完成了操作。比如當(dāng)“下一步”按鈕獨立出現(xiàn)時，用戶往往點得很愉悅。

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

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

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

而網(wǎng)頁端因為不存在按鈕焦點狀態(tài)，所以需要通過別的方法來實現(xiàn)同樣的效果。常見的拉開視覺層次的幾個手段有：

1.按鈕的排序

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

2.按鈕的大小

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

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

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

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

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

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

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

下圖：google帳號的登錄

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

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

下圖：三個按鈕上很清楚的寫明了動作

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

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

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