起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Don’t make me think—多按鈕共存設(shè)計
之前在一個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ù)”這樣的按鈕定義為主要動作。因為它們是用戶操作表單的主要目的，而“取消”、“重置”、“撤銷”這樣的按鈕定義為次要動作，因為這些動作不是操作表單的主要目的，并且它們的點擊效果是負面的。
作者一共設(shè)計了6種視覺形式，并通過眼動儀來測試哪種表現(xiàn)最好。結(jié)果有點出乎我的意料，視覺上不區(qū)分主要動作和次要動作的設(shè)計方案，用戶完成表單的速度最快。但即便如此，作者仍然建議采用視覺提示更明顯的方案：“按鈕+鏈接”。
想更進一步討論下，為什么會有這個問題。按照don’t make me think的說法，在沒有選擇的情況下，用戶更容易快速地做出決定?；蛘卟粦?yīng)該說是決定，因為本來就不需要用戶去判斷。沒有多余的按鈕吸引注意力，也沒有多余的按鈕可以點，用戶不假思索地就完成了操作。比如當“下一步”按鈕獨立出現(xiàn)時，用戶往往點得很愉悅。
下圖：獨立出現(xiàn)的“下一步”
但是當按鈕成對或者多個出現(xiàn)時，問題就來了，用戶必須看完所有的按鈕文字，才能做出判斷，這無疑是設(shè)計師不愿意看到的。所以會在按鈕上做一些引導，客戶端比較常見的做法就是把最常用的按鈕或者主要操作的按鈕設(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)默認樣式的按鈕，所以它選擇把次要操作以鏈接的形式展現(xiàn)，從而拉開視覺層次。這樣的設(shè)計在“登錄”，“注冊”中也很常見。
下圖：google帳號的登錄
最后再多說一句，表揚下opera的設(shè)計。Opera的彈出框，讓像我這樣的用戶，只看按鈕就能快速做出判斷，而不用瀏覽對話框主體文字。如果我需要更快做出判斷，只看焦點按鈕就可以了。
相比之下，大多數(shù)軟件的按鈕上僅僅寫著“確定”，“取消”；我必須閱讀按鈕之上的大段文字，才敢按下其中一個。不僅強迫我選擇，還強迫我閱讀…
下圖：三個按鈕上很清楚的寫明了動作
總結(jié)一下剛才所說：
1.如果可能，盡量只給用戶一個按鈕。
2.當需要呈現(xiàn)多個按鈕，并且它們之間存在主要動作和次要動作的關(guān)系時，通過拉開視覺層次的方法給用戶更好的引導。
3.按鈕的文字應(yīng)該引起設(shè)計師足夠的重視，承擔更重要的角色，幫助用戶快速做出判斷。
來源：http://cdc.tencent.com/?p=2122
流明~