非一般的“取消”按鈕關(guān)于取消按鈕的雜談

2024-08-30 08:34:47

字體：大中小

供稿：網(wǎng)友

　　“取消”這個按鈕不屬于操作的必要流程，在設(shè)計上也不作為主要元素出現(xiàn)。但在實際的彈框或一些操作應(yīng)用中經(jīng)常出現(xiàn)，那么這個小小的取消按鈕又有哪些玄機呢?
　　首先我們要先來了解一下取消的概念。
　　取消：我們在提交問題、選擇、進(jìn)度、信息時需要要求執(zhí)行一個確認(rèn)動作，這時候往往給出兩個按鈕，“確定”和“取消”。“取消”按鈕一般不會單獨出現(xiàn)，通常是與“確定”，“保存”之類的操作同時出現(xiàn)。

　　(在操作系統(tǒng)中常見這樣的對話框，包含兩個鍵，確認(rèn)和取消)
　　第二，設(shè)計和使用“取消”鍵
　　“取消”在頁面中的位置
　　設(shè)計“取消”鍵(或操作確認(rèn)頁面)時，常會將“確認(rèn)”，“保存”按鈕放在左邊，并使用醒目的格式標(biāo)識出來，或者默認(rèn)選中該項。“取消”按鈕則往往放在右邊。“確認(rèn)”和“取消”不宜離得太遠(yuǎn)。圖a中兩個按鈕距離太遠(yuǎn)增加了視覺移動的距離，給閱讀造成負(fù)擔(dān)。而圖b的閱讀效率要比a高得多。

　　(a)

　　(b)
　　“取消”與其他按鈕的區(qū)分及弱化方式
　　出于產(chǎn)品運營的考慮，會一些鼓勵用戶去進(jìn)行的操作，淡化“取消”的操作。比如下圖的幾個方案，確定和取消按鈕做了不同程度的區(qū)分。

　　這樣做的好處是，減少次要操作在視覺表現(xiàn)上的突出性，最大限度的減少誤操作引導(dǎo)用戶完成目標(biāo)。使兩個按鈕能夠較清晰的區(qū)分開來，突出表現(xiàn)確認(rèn)一方。讓用戶更容易做出判斷。
　　按鈕在設(shè)計時可根據(jù)實際表達(dá)的內(nèi)容，突出主次關(guān)系。適當(dāng)?shù)囊龑?dǎo)用戶，盡量規(guī)避誤操作，讓操作更加便捷清晰。也可使用人性化的描述性的詞語強調(diào)按鈕，弱化“取消”“取消”的作用是能允許用戶回到前面的操作。但不能過度的影響界面要表達(dá)的主要意圖。人性化的描述性詞語能夠引起用戶足夠的關(guān)注度，讓其感覺貼心親切。下圖豆瓣上這個發(fā)表電影評論的頁面，使用藍(lán)灰色和小字，在格式上也與其他的按鈕不一樣，整個頁面只突出一個“好了，添加評論”按鈕。

　　這個頁面是需要用戶填寫內(nèi)容的，“取消”操作會產(chǎn)生消極結(jié)果。特別是用戶在不經(jīng)意的情況下點了取消，將會導(dǎo)致填寫的內(nèi)容不復(fù)存在。在這個頁面的設(shè)計上，弱化了“取消”采用鏈接的形式代替按鈕，突出了確認(rèn)操作按鈕“好了，添加評論”。起到了很好的視覺突出作用。但切記，文字要簡潔精煉，立意明確。
　　“確定”加“取消”在對話框中的使用。
　　對于主標(biāo)題文本內(nèi)容為“您確定要……嗎”的句式的問題對話框，可使用“確定”“取消”組合。但不要使用“確定”和“取消”來回答是否判斷問題。如圖a為錯誤例子。除了上述情況外，“確定”“取消”組合時，“確定”的含義等同于“提交”，如圖b,中的選項實際上“確定”為提交的意思。
圖c,不要為錯誤或警告信息使用過重的警示圖標(biāo)，容易讓用戶感覺鴨梨很大。在設(shè)計錯誤類或是警示類的提示可采用黃色“!”

;按鈕可采用“確定”或者“輔助推薦動作”+“我知道了”
　　當(dāng)提問“是否…?”可直接使用“是”“否”組合。如圖d

　　“取消”是否作為按鈕默認(rèn)項
　　通常的對話框當(dāng)有多個按鈕的時候，會設(shè)定其中一個按鈕為默認(rèn)項。“取消”鍵總是在動作執(zhí)行后立即出現(xiàn)，這時候滿腦子都是前一個動作，自然毫不思考地選了“確定”(通常還都是默認(rèn)項)，然后才后悔莫及。所以，往往由于彈框出現(xiàn)地太快，用戶甚至沒有意識到“自己操作可能失誤了”。因此，默認(rèn)項應(yīng)該在對用戶有益無損的按鈕上。
　　比如下圖當(dāng)關(guān)閉未保存的文檔時，該提示的默認(rèn)項在“保存”按鈕上。因為保存相對其他兩個按鈕來說更無損。

　　下圖為提示玩家升級游戲版本的提示框，在這里我們是需要推薦玩家去更新游戲版本的，因此默認(rèn)項應(yīng)該在“確定”按鈕上。

　　我們在設(shè)置提示框按鈕的默認(rèn)項時，應(yīng)考慮到設(shè)為默認(rèn)后，當(dāng)用戶誤操作時是否對其有益無損。還有要考慮到推薦和鼓勵用戶的操作，給用戶適當(dāng)?shù)囊龑?dǎo)。
　　三、案例分析
　　原有的設(shè)計玩家點擊游戲道具欄的道具彈出對話框，提供“購買”和“取消”兩個按鈕。

　　(英雄殺的道具購買對話框)
　　問題點：
　　按鈕看起來沒有主次
　　從運營的角度來說不能突出我們需要鼓勵玩家的購買的意圖
　　玩家也無法區(qū)分已購買與未購買道具的差別
　　根據(jù)需求我們要建立按鈕的主次在表現(xiàn)上有所區(qū)分，這個時候應(yīng)當(dāng)弱化“取消”按鈕，提高購買按鈕的關(guān)注度，鼓勵玩家進(jìn)行購買。
　　優(yōu)化后的效果，去掉了“取消”按鈕，并做了購買和未購買按鈕的效果上做了區(qū)分，進(jìn)行差異化設(shè)計。下圖為修改后的設(shè)計，是不是比之前的內(nèi)容看起來更清晰明了呢?

　　總結(jié)，使用“取消”鍵的方案
　　在PC“取消”按鈕則往往放在右邊。但在ios上會把強調(diào)的按鈕放在右邊。
　　區(qū)分按鈕主次要表達(dá)明確，突出主題，根據(jù)表達(dá)的內(nèi)容可適當(dāng)?shù)娜趸∠粹o。
　　使用一些描述操作結(jié)果的詞語，強迫用戶去閱讀一下。
　　不要使用“確定”和“取消”來回答是否判斷問題。
　　可將“取消”作為默認(rèn)項，有時也選擇有益無損的按鈕上。
　　綜上所述，雖然“取消”并不是一個主要的按鈕元素，但也不是放上去就是對的，還是要根據(jù)實際情況將其設(shè)計得合理規(guī)范。不要因為這個按鈕不起眼而不在意，交互設(shè)計往往是細(xì)節(jié)決定成敗!
　　文章來源：騰訊GDC

上一篇：互聯(lián)網(wǎng)網(wǎng)頁設(shè)計中的仿生設(shè)計的簡要介紹

下一篇：不是所有彈窗都是流氓關(guān)于網(wǎng)站彈窗的設(shè)計技巧