取消”（cancel，stop）和“撤消”（undo），看起來很像是同一回事，用起來似乎也差不多。但是兩者在使用上還是有些差別，體驗上也略有不同。

一、 取消鍵與撤消鍵

我們常常在執(zhí)行一個動作時，會被要求確認(rèn)一下，這時候往往給出兩個按鈕，“確定”和“取消”?！叭∠卑粹o往往不會單獨出現(xiàn)，而是與“確定”，“保存”之類的操作同時出現(xiàn)。

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

撤消，其實就是ctrl＋Z，回退最后那個操作，返回到前一個頁面。與“取消”最大的不同在于：“取消”的操作是在動作發(fā)生前，而執(zhí)行“撤消”的操作時動作已經(jīng)完成了。

（在Gmail中刪除郵件后，會在頁面上部出現(xiàn)撤銷提示）

“撤消”往往不會用文字表達(dá)寫出來，而是用符號（向右的箭頭）來代替。取消操作還有一些特殊的形式，比如在瀏覽網(wǎng)頁時停止對頁面內(nèi)容進(jìn)行載入，這是一種對耗費時間的某個操作的中止操作。這么看來，取消也有個特定的符號，用（一個叉，或一個紅色的六角形中間一個橫杠）來表示。

（瀏覽器地址欄中的取消鍵）

（瀏覽器工具欄中的取消鍵）

二、如何設(shè)計

“取消”和“撤消”都不屬于操作的必要流程，在設(shè)計上也不應(yīng)作為主要元素出現(xiàn)。

在設(shè)計“取消”鍵（或操作確認(rèn)頁面）時，常會將“確認(rèn)”，“保存”按鈕放在左邊，并使用醒目的格式標(biāo)識出來，或者默認(rèn)選中該項。“取消”按鈕則往往放在右邊。 Mac系統(tǒng)由于使用習(xí)慣，往往位置顛倒一下。

（delicious中的取消鍵設(shè)計）

（Flickr中的取消鍵設(shè)計）

對于一些鼓勵用戶去進(jìn)行的操作，應(yīng)該淡化“取消”的操作。比如豆瓣上這個發(fā)表電影評論的頁面，使用灰色和小字，在格式上也與其他的按鈕不一樣，整個頁面只突出一個“好了，添加評論”按鈕。

（douban中的取消鍵設(shè)計）

撤消鍵設(shè)計并不多，往往在網(wǎng)頁設(shè)計中被忽視。Gmail是個很好的例子，可是Google Calender就沒有撤銷按鈕。

三、不同的體驗

雖然都是對操作進(jìn)行反悔，但是正是由于出現(xiàn)的時間不同，用戶體驗上的感受自然也不同。

“取消”鍵總是在動作執(zhí)行后立即出現(xiàn)，這時候滿腦子都是前一個動作，自然毫不思考地選了“確定”（通常還都是默認(rèn)項），然后才后悔莫及。所以，雖然是為了防止犯錯，但由于“取消”出現(xiàn)地太快，用戶甚至沒有意識到“自己操作可能失誤了”。

相比之下，“撤消”按鈕顯得慷慨和大度多了，用戶可以放心的在網(wǎng)站上進(jìn)行探索（安全探索，safe exploration），對建立用戶的信心有很大幫助。在MS Office、Photoshop等高度交互界面上還提供了多級撤消的操作。

當(dāng)然，并不是說以后再也不要在網(wǎng)頁中用“取消”按鈕了，都得用“撤消”按鈕。也不是說以后一定要先來一個“取消”按鈕，再弄一個“撤消”按鈕，來個雙保險。在設(shè)計中多考慮用戶的使用習(xí)慣和日常失誤，提高產(chǎn)品的容錯性才是關(guān)鍵。

對于相對危險的操作，整理了幾個使用“取消”鍵的優(yōu)化方案：
1. 不要使用“確定”，“OK”，“Yes”等簡單的常規(guī)詞語： 使用一些描述操作結(jié)果的詞語，強迫用戶去閱讀一下。但在這里要注意文字的長度，如果是一個按鈕，文字要精煉；如果是一個鏈接，那可以稍微長些。
2. 將取消作為默認(rèn)項。
3. 提供第三種選擇： 提供一個比直接刪除更安全一點的第三選項，而不是簡單的是或否的選擇。比如在iTunes里面（下圖）選擇刪除一首歌曲，默認(rèn)選中的是“保留文件”（在曲目庫中刪除，但文件仍保存在磁盤的原位置上，不移入回收站）。

原文：http://june-gao.blogbus.com/logs/68138408.html