域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

“取消”這個(gè)按鈕不屬于操作的必要流程，在設(shè)計(jì)上也不作為主要元素出現(xiàn)。但在實(shí)際的彈框或一些操作應(yīng)用中經(jīng)常出現(xiàn)，那么這個(gè)小小的取消按鈕又有哪些玄機(jī)呢?

首先我們要先來了解一下取消的概念。

取消：我們?cè)谔峤粏栴}、選擇、進(jìn)度、信息時(shí)需要要求執(zhí)行一個(gè)確認(rèn)動(dòng)作，這時(shí)候往往給出兩個(gè)按鈕，“確定”和“取消”。“取消”按鈕一般不會(huì)單獨(dú)出現(xiàn)，通常是與“確定”，“保存”之類的操作同時(shí)出現(xiàn)。

(在操作系統(tǒng)中常見這樣的對(duì)話框，包含兩個(gè)鍵，確認(rèn)和取消)

第二，設(shè)計(jì)和使用“取消”鍵

“取消”在頁(yè)面中的位置

設(shè)計(jì)“取消”鍵(或操作確認(rèn)頁(yè)面)時(shí)，常會(huì)將“確認(rèn)”，“保存”按鈕放在左邊，并使用醒目的格式標(biāo)識(shí)出來，或者默認(rèn)選中該項(xiàng)。“取消”按鈕則往往放在右邊。“確認(rèn)”和“取消”不宜離得太遠(yuǎn)。圖a中兩個(gè)按鈕距離太遠(yuǎn)增加了視覺移動(dòng)的距離，給閱讀造成負(fù)擔(dān)。而圖b的閱讀效率要比a高得多。

(a)

(b)

“取消”與其他按鈕的區(qū)分及弱化方式

出于產(chǎn)品運(yùn)營(yíng)的考慮，會(huì)一些鼓勵(lì)用戶去進(jìn)行的操作，淡化“取消”的操作。比如下圖的幾個(gè)方案，確定和取消按鈕做了不同程度的區(qū)分。

這樣做的好處是，減少次要操作在視覺表現(xiàn)上的突出性，最大限度的減少誤操作引導(dǎo)用戶完成目標(biāo)。使兩個(gè)按鈕能夠較清晰的區(qū)分開來，突出表現(xiàn)確認(rèn)一方。讓用戶更容易做出判斷。

按鈕在設(shè)計(jì)時(shí)可根據(jù)實(shí)際表達(dá)的內(nèi)容，突出主次關(guān)系。適當(dāng)?shù)囊龑?dǎo)用戶，盡量規(guī)避誤操作，讓操作更加便捷清晰。也可使用人性化的描述性的詞語強(qiáng)調(diào)按鈕，弱化“取消”“取消”的作用是能允許用戶回到前面的操作。但不能過度的影響界面要表達(dá)的主要意圖。人性化的描述性詞語能夠引起用戶足夠的關(guān)注度，讓其感覺貼心親切。下圖豆瓣上這個(gè)發(fā)表電影評(píng)論的頁(yè)面，使用藍(lán)灰色和小字，在格式上也與其他的按鈕不一樣，整個(gè)頁(yè)面只突出一個(gè)“好了，添加評(píng)論”按鈕。

這個(gè)頁(yè)面是需要用戶填寫內(nèi)容的，“取消”操作會(huì)產(chǎn)生消極結(jié)果。特別是用戶在不經(jīng)意的情況下點(diǎn)了取消，將會(huì)導(dǎo)致填寫的內(nèi)容不復(fù)存在。在這個(gè)頁(yè)面的設(shè)計(jì)上，弱化了“取消”采用鏈接的形式代替按鈕，突出了確認(rèn)操作按鈕“好了，添加評(píng)論”。起到了很好的視覺突出作用。但切記，文字要簡(jiǎn)潔精煉，立意明確。

“確定”加“取消”在對(duì)話框中的使用。

對(duì)于主標(biāo)題文本內(nèi)容為“您確定要……嗎”的句式的問題對(duì)話框，可使用“確定”“取消”組合。但不要使用“確定”和“取消”來回答是否判斷問題。如圖a為錯(cuò)誤例子。除了上述情況外，“確定”“取消”組合時(shí)，“確定”的含義等同于“提交”，如圖b,中的選項(xiàng)實(shí)際上“確定”為提交的意思。

圖c,不要為錯(cuò)誤或警告信息使用過重的警示圖標(biāo)，容易讓用戶感覺鴨梨很大。在設(shè)計(jì)錯(cuò)誤類或是警示類的提示可采用黃色“!”

當(dāng)提問“是否…?”可直接使用“是”“否”組合。如圖d

“取消”是否作為按鈕默認(rèn)項(xiàng)

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

比如下圖當(dāng)關(guān)閉未保存的文檔時(shí)，該提示的默認(rèn)項(xiàng)在“保存”按鈕上。因?yàn)楸４嫦鄬?duì)其他兩個(gè)按鈕來說更無損。

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

我們?cè)谠O(shè)置提示框按鈕的默認(rèn)項(xiàng)時(shí)，應(yīng)考慮到設(shè)為默認(rèn)后，當(dāng)用戶誤操作時(shí)是否對(duì)其有益無損。還有要考慮到推薦和鼓勵(lì)用戶的操作，給用戶適當(dāng)?shù)囊龑?dǎo)。

三、案例分析

原有的設(shè)計(jì)玩家點(diǎn)擊游戲道具欄的道具彈出對(duì)話框，提供“購(gòu)買”和“取消”兩個(gè)按鈕。

(英雄殺的道具購(gòu)買對(duì)話框)

問題點(diǎn)：

按鈕看起來沒有主次

從運(yùn)營(yíng)的角度來說不能突出我們需要鼓勵(lì)玩家的購(gòu)買的意圖

玩家也無法區(qū)分已購(gòu)買與未購(gòu)買道具的差別

根據(jù)需求我們要建立按鈕的主次在表現(xiàn)上有所區(qū)分，這個(gè)時(shí)候應(yīng)當(dāng)弱化“取消”按鈕，提高購(gòu)買按鈕的關(guān)注度，鼓勵(lì)玩家進(jìn)行購(gòu)買。

優(yōu)化后的效果，去掉了“取消”按鈕，并做了購(gòu)買和未購(gòu)買按鈕的效果上做了區(qū)分，進(jìn)行差異化設(shè)計(jì)。下圖為修改后的設(shè)計(jì)，是不是比之前的內(nèi)容看起來更清晰明了呢?

總結(jié)，使用“取消”鍵的方案

在PC“取消”按鈕則往往放在右邊。但在ios上會(huì)把強(qiáng)調(diào)的按鈕放在右邊。

區(qū)分按鈕主次要表達(dá)明確，突出主題，根據(jù)表達(dá)的內(nèi)容可適當(dāng)?shù)娜趸∠粹o。

使用一些描述操作結(jié)果的詞語，強(qiáng)迫用戶去閱讀一下。

不要使用“確定”和“取消”來回答是否判斷問題。

可將“取消”作為默認(rèn)項(xiàng)，有時(shí)也選擇有益無損的按鈕上。

綜上所述，雖然“取消”并不是一個(gè)主要的按鈕元素，但也不是放上去就是對(duì)的，還是要根據(jù)實(shí)際情況將其設(shè)計(jì)得合理規(guī)范。不要因?yàn)檫@個(gè)按鈕不起眼而不在意，交互設(shè)計(jì)往往是細(xì)節(jié)決定成敗!

(轉(zhuǎn)載請(qǐng)注明出處GDC)，

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！