關(guān)于「撤銷」有很多設(shè)計(jì)細(xì)節(jié)可以講，所以我花了兩周時間，將其濃縮成 3000 字，幫助各位產(chǎn)品設(shè)計(jì)師更好理解撤銷的設(shè)計(jì)細(xì)節(jié)。

撤銷的目的是幫助用戶取消當(dāng)前的操作行為。

撤銷可以對用戶使用產(chǎn)品起到一種安全保障作用，讓用戶在界面中自由地探索而無需擔(dān)心操作所可能導(dǎo)致的嚴(yán)重后果。

或者用戶刪除了一個視頻，撤銷可以幫助用戶恢復(fù)他所刪除的內(nèi)容；以及用戶進(jìn)行了一步操作，覺得不太好，就通過撤銷來回退到上一步操作。

與之對應(yīng)的叫「重做」，就是當(dāng)用戶撤銷了當(dāng)前的操作，但是想了想，還是行進(jìn)到剛才已經(jīng)操作的步驟好了。既給了用戶安全感，還給了用戶反悔的余地。

類似于下象棋的時候，你覺得這一步走得不好，所以悔棋了，雖然對家沒說什么，但是你心里又覺得過意不去，畢竟落子無悔真君子，所以你又把棋子放回去了（真是不怎么恰當(dāng)?shù)谋扔髂兀?

這樣做的目的是提升用戶使用產(chǎn)品的信心，增強(qiáng)對產(chǎn)品的控制感；鼓勵用戶放心地探索，快速建立起自己熟悉的操作路徑。

所以關(guān)于撤銷，我們可以從下面幾點(diǎn)來聊聊：

• 依次序撤銷
• 選擇性撤銷
• 撤銷在界面中的運(yùn)用
• 與撤銷沖突的元素

依次序撤銷

它的意思是，依次撤銷之前的操作。

在尼爾森可用性原則里，就有一條類似的原則存在，即 User control and freedom（允許用戶自由操控）。

很多人把這條原則解讀為「撤銷原則」，本質(zhì)上是沒什么問題的，因?yàn)槌蜂N確實(shí)需要讓用戶自由操控。但是早期的撤銷，并不「自由」，而僅僅只是讓用戶在一定范圍內(nèi)「可操控」。

比如早期在一些產(chǎn)品里，執(zhí)行多步操作，但往往只能撤銷一次，要想繼續(xù)撤銷是不被允許的，所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」，顯然是不合理的。

于是，后來逐漸延伸出多次撤銷的功能。

我記得最早使用 PS 的時候，在 PS 里面就有關(guān)于撤銷次數(shù)的范圍設(shè)定，但是我忘了具體范圍的上限與下限是多少了。

使用的方式是，比如我設(shè)置參數(shù)為 10，那么之后我的撤銷也只能操作 10 次，要想繼續(xù)撤銷，就會告知無法繼續(xù)了。

現(xiàn)在的很多工具產(chǎn)品應(yīng)該是沒有這些限制了，比如 Sketch，Word 都是可以無限次撤銷直至最初始狀態(tài)或剛打開文件的狀態(tài)。

相對早期撤銷的使用邏輯，后來可多次撤銷的操作在自由度上，確實(shí)是好了那么一些。

它就是在「單次撤銷」的基礎(chǔ)上，給了用戶「多次撤銷」的機(jī)會，并讓用戶回到自己滿意的位置。

但是這里的撤銷，它還不夠自由，因?yàn)樗恰敢来纬蜂N」—— 每一步撤銷用戶都得經(jīng)歷。

選擇性撤銷

當(dāng)撤銷隨著用戶場景的變化而進(jìn)化之后，才真正具備了比較自由的操控方式。

讓撤銷具備「選擇屬性」，必須與另一個元素做一個結(jié)合，那就是「歷史記錄」。

繼續(xù)拿 PS 舉例。

大家看到上面這張圖，當(dāng)你在 PS 的畫板里完成了一系列操作之后，發(fā)現(xiàn)后面有一些東西做得不是很好，想回去重做，但是依次撤銷又覺得不好把控，于是就通過操作歷史，來選擇具體回退到哪一步。

相比于依次序撤銷，選擇性撤銷的自由度更高，也更符合其對尼爾森可用性第三條原則的解讀。

或者再通俗一點(diǎn)的例子，瀏覽器。

假設(shè)這時候你打開了 5 個網(wǎng)頁，關(guān)掉了其中 3 個，但是突然想起第 1 個關(guān)掉的網(wǎng)頁還有值得收藏的內(nèi)容，于是依次撤銷 3 次，才打開第 1 個關(guān)掉的頁面。

而現(xiàn)在有網(wǎng)頁歷史記錄，就可以直接幫你打開之前關(guān)閉掉的所有網(wǎng)頁中的其中一個。

解決了用戶每一步都要經(jīng)歷的問題。

當(dāng)「撤銷」與「歷史記錄」結(jié)合之后，「選擇性撤銷」的出現(xiàn)還能解決掉「依次序撤銷」的一個關(guān)鍵問題：撤銷重做之后，無法復(fù)原。

通俗點(diǎn)講，就是當(dāng)用戶撤銷到之前的操作，進(jìn)行了新的操作行為，那么原來舊的那條線路就被廢棄了。看圖：

當(dāng)用戶操作到第 5 步，然后撤銷至第 3 步，再執(zhí)行一次新的操作，那么步驟 4 與步驟 5 就會被廢棄。

大家知道很多設(shè)計(jì)師都會做版本記錄，因?yàn)?PS 的歷史記錄雖然在撤銷操作上方便了很多，但無法復(fù)原之前的操作邏輯依舊不能滿足一些設(shè)計(jì)師的訴求。

畢竟不廢棄的話，撤銷操作的邏輯就會很復(fù)雜；且通?！高x擇性撤銷」伴隨解釋，說明用戶清楚知道自己當(dāng)前行為會造成何種后果。但它并不能解決用戶操作過程中實(shí)際存在的這類問題。

而「選擇性撤銷」的「版本記錄」可以解決這個問題，來看下面這個例子。

結(jié)合歷史/版本記錄，比如用 Notion 或石墨寫了一篇文章，它們都會有版本記錄，過程中會根據(jù)時間維度與內(nèi)容變更維度來判斷是否進(jìn)行保存，那么當(dāng)用戶想回滾到之前的那段內(nèi)容，只要對這些版本進(jìn)行點(diǎn)擊查看，然后選擇具體撤回到哪一步即可。

比如我今天（2019.11.05）早上花了半小時最后對文章做了一次整理，添加了圖片，它就會記錄其中的操作變化，且可進(jìn)行選擇。這里無論如何撤至哪一步，其它內(nèi)容都會有留存，不會消失。

也許這已經(jīng)不是通常意義上的撤銷，但它確實(shí)是撤銷的升級版。

這樣看起來是不是自由操控度要高很多呢？

到這里，我只是講了「撤銷」的特性，下面來聊下它在界面設(shè)計(jì)中是如何應(yīng)用的。

撤銷在界面中的運(yùn)用

我們現(xiàn)在在很多產(chǎn)品里都能看到撤銷，在網(wǎng)頁里與移動 App 中，它的使用形式雖然多樣，但本質(zhì)上并沒什么區(qū)別。

大多就是單次撤銷，因?yàn)橛貌坏蕉啻纬蜂N，多次撤銷更多是在工具里被使用。

比如油管的撤銷使用：

當(dāng)用戶對一個視頻進(jìn)行「不感興趣」的操作時，視頻內(nèi)容會變成右邊這樣，可撤銷。這個內(nèi)容會一直存在直到用戶刷新頁面時才會消失。

類似的還有淘寶網(wǎng)頁端的購物車，當(dāng)刪除添加的任一商品后，其也會在附近位置出現(xiàn)可撤銷的操作。

在網(wǎng)頁產(chǎn)品中，撤銷的運(yùn)用大多是這樣的。

我們再來看移動端產(chǎn)品對于撤銷的應(yīng)用。

在 iOS 中比較常見的是微信的搖一搖手機(jī)撤銷正在鍵入的內(nèi)容：

這類撤銷較為被動，經(jīng)常是在無意間觸發(fā)，所以不是我們主要要聊的。

而有一類產(chǎn)品，撤銷會以 Snackbars 的形式出現(xiàn)，如圖：

當(dāng)這類郵箱產(chǎn)品，刪除了某封郵件后，在底部就會出現(xiàn)這樣的提示，告知用戶可撤銷上一步行為。

更多的還是工具類產(chǎn)品，比如修圖類產(chǎn)品 Snapseed：

它有單次撤銷，也可以重做，還能多次撤銷，多次撤銷就是點(diǎn)擊「查看修改內(nèi)容」之后，右圖出現(xiàn)的樣子，它會把所有步驟都呈現(xiàn)出來，給予用戶選擇具體撤銷至哪一步。

其實(shí)更多的也就是這樣了，但是，為什么呢？為什么在非工具類產(chǎn)品里撤銷很少見呢？難道用戶從來不會誤操作或操作之后反悔？

下面一節(jié)來解答。

與撤銷沖突的元素

先放結(jié)論：當(dāng)某個功能具備撤銷屬性時，切勿再使用二次確認(rèn)對話框，反之同樣成立。

撤銷與二次確認(rèn)，是兩種東西，雖然有時候解決的是同一個問題，但是它們的屬性是完全不同的。

舉個例子：

上面這張圖，左邊是在執(zhí)行操作前彈出的確認(rèn)框，右邊是執(zhí)行操作后彈出的提示框。

二者的區(qū)別很明顯，二次確認(rèn)的刪除提示框更具警示效果，后者作為提示，較為弱化，且通常是在用戶操作完成后彈出。對于用戶來說，在非工具類產(chǎn)品中，前者更好的抑制了用戶的沖動行為或誤操作行為。后者作為提示類控件，不具備警示效果。

所以它們不應(yīng)該同時出現(xiàn)，且它們雖然是解決同一個問題，但是是完全不同的情況。

于是，在大多數(shù)產(chǎn)品中我們很少看到撤銷的使用，因?yàn)榇蟛糠中鑷?yán)謹(jǐn)?shù)牟僮鞫紩卸未_認(rèn)，并不嚴(yán)重的操作也就不需要任何提示。即使是上述提到的郵箱刪除，沒有二次確認(rèn)也是因?yàn)樗谐蜂N作為提示且還有回收站允許用戶檢查確認(rèn)。

所以，除非是場景與之密切相關(guān)的，比如社交產(chǎn)品內(nèi)容發(fā)送后的撤回功能。

微信早期的撤回，只是撤銷，它并不具備「重做」屬性，現(xiàn)在撤回，內(nèi)容會重新出現(xiàn)在輸入框讓用戶重新編輯。

它們之間的差異是：它并不會產(chǎn)生嚴(yán)重后果，但確實(shí)會產(chǎn)生小問題。比如誤操作發(fā)出信息，或發(fā)出后發(fā)現(xiàn)話術(shù)并不嚴(yán)謹(jǐn)。

所以這一段內(nèi)容只是想告訴各位：二次確認(rèn)操作與撤銷操作是兩種不同的東西，雖然看起來是解決同一個問題，但它們的差異也是非常明顯的。必須謹(jǐn)記。

另外還有個提示：心細(xì)的同學(xué)會注意到文章里或其他產(chǎn)品里出現(xiàn)的「撤銷」通常也會寫成「撤消」。在別的領(lǐng)域里這是兩種不同的內(nèi)容，但在產(chǎn)品設(shè)計(jì)領(lǐng)域里，目前并沒有對這兩者做明確的區(qū)分，所以暫時不用過于糾結(jié)。

總結(jié)

這篇文章講了很多內(nèi)容，我在這里梳理下：

• 撤銷分為依次序撤銷與選擇性撤銷；
• 依次序撤銷有單次撤銷與多次撤銷，以 PS 為例；
• 選擇性撤銷大多在工具類產(chǎn)品里被使用，它與歷史記錄結(jié)合，解決了依次序多次撤銷部分內(nèi)容被覆蓋的問題；
• 在非工具類產(chǎn)品里，被使用更多的是單次撤銷，是因?yàn)閳鼍跋拗疲?
• 撤銷與二次確認(rèn)不可同時出現(xiàn)，它們看起來是解決同個問題，但之間存在較大差異。

所以當(dāng)你設(shè)計(jì)的產(chǎn)品要用到撤銷時，也要注意這些細(xì)節(jié)問題。

這就是本篇文章的所有內(nèi)容了。其實(shí)這篇文章里包含的內(nèi)容有很多，而且有很多爭議點(diǎn)我都沒放出來，直接一筆帶過給出正確結(jié)論了。寫這種大部頭文章太累，要思考的點(diǎn)很多，需要幫助讀者從多視角排雷，很可能導(dǎo)致初學(xué)者在讀文章過程中出現(xiàn)閱讀吃力的問題。所以之后還是會挑一個點(diǎn)來寫吧。

文章來源：優(yōu)設(shè)