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

首先我們要先來(lái)了解一下取消的概念。

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

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

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

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

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

(a)

(b)

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

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

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

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

 

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

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

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

圖c,不要為錯(cuò)誤或警告信息使用過(guò)重的警示圖標(biāo)，容易讓用戶(hù)感覺(jué)鴨梨很大。在設(shè)計(jì)錯(cuò)誤類(lèi)或是警示類(lèi)的提示可采用黃色“！” ；按鈕可采用“確定”或者“輔助推薦動(dòng)作”+“我知道了”

標(biāo)簽： 取消按鈕 按鈕設(shè)計(jì) 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。