2019-11-8 資深UI設計者
關于「撤銷」有很多設計細節(jié)可以講，所以我花了兩周時間，將其濃縮成 3000 字，幫助各位產品設計師更好理解撤銷的設計細節(jié)。
撤銷的目的是幫助用戶取消當前的操作行為。
撤銷可以對用戶使用產品起到一種安全保障作用，讓用戶在界面中自由地探索而無需擔心操作所可能導致的嚴重后果。
或者用戶刪除了一個視頻，撤銷可以幫助用戶恢復他所刪除的內容；以及用戶進行了一步操作，覺得不太好，就通過撤銷來回退到上一步操作。
與之對應的叫「重做」，就是當用戶撤銷了當前的操作，但是想了想，還是行進到剛才已經(jīng)操作的步驟好了。既給了用戶安全感，還給了用戶反悔的余地。
類似于下象棋的時候，你覺得這一步走得不好，所以悔棋了，雖然對家沒說什么，但是你心里又覺得過意不去，畢竟落子無悔真君子，所以你又把棋子放回去了（真是不怎么恰當?shù)谋扔髂兀?
這樣做的目的是提升用戶使用產品的信心，增強對產品的控制感；鼓勵用戶放心地探索，快速建立起自己熟悉的操作路徑。
所以關于撤銷，我們可以從下面幾點來聊聊：
它的意思是，依次撤銷之前的操作。
在尼爾森可用性原則里，就有一條類似的原則存在，即 User control and freedom（允許用戶自由操控）。
很多人把這條原則解讀為「撤銷原則」，本質上是沒什么問題的，因為撤銷確實需要讓用戶自由操控。但是早期的撤銷，并不「自由」，而僅僅只是讓用戶在一定范圍內「可操控」。
比如早期在一些產品里，執(zhí)行多步操作，但往往只能撤銷一次，要想繼續(xù)撤銷是不被允許的，所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」，顯然是不合理的。
于是，后來逐漸延伸出多次撤銷的功能。
我記得最早使用 PS 的時候，在 PS 里面就有關于撤銷次數(shù)的范圍設定，但是我忘了具體范圍的上限與下限是多少了。
使用的方式是，比如我設置參數(shù)為 10，那么之后我的撤銷也只能操作 10 次，要想繼續(xù)撤銷，就會告知無法繼續(xù)了。
現(xiàn)在的很多工具產品應該是沒有這些限制了，比如 Sketch，Word 都是可以無限次撤銷直至最初始狀態(tài)或剛打開文件的狀態(tài)。
相對早期撤銷的使用邏輯，后來可多次撤銷的操作在自由度上，確實是好了那么一些。
它就是在「單次撤銷」的基礎上，給了用戶「多次撤銷」的機會，并讓用戶回到自己滿意的位置。
但是這里的撤銷，它還不夠自由，因為它是「依次撤銷」—— 每一步撤銷用戶都得經(jīng)歷。
當撤銷隨著用戶場景的變化而進化之后，才真正具備了比較自由的操控方式。
讓撤銷具備「選擇屬性」，必須與另一個元素做一個結合，那就是「歷史記錄」。
繼續(xù)拿 PS 舉例。
大家看到上面這張圖，當你在 PS 的畫板里完成了一系列操作之后，發(fā)現(xiàn)后面有一些東西做得不是很好，想回去重做，但是依次撤銷又覺得不好把控，于是就通過操作歷史，來選擇具體回退到哪一步。
相比于依次序撤銷，選擇性撤銷的自由度更高，也更符合其對尼爾森可用性第三條原則的解讀。
或者再通俗一點的例子，瀏覽器。
假設這時候你打開了 5 個網(wǎng)頁，關掉了其中 3 個，但是突然想起第 1 個關掉的網(wǎng)頁還有值得收藏的內容，于是依次撤銷 3 次，才打開第 1 個關掉的頁面。
而現(xiàn)在有網(wǎng)頁歷史記錄，就可以直接幫你打開之前關閉掉的所有網(wǎng)頁中的其中一個。
解決了用戶每一步都要經(jīng)歷的問題。
當「撤銷」與「歷史記錄」結合之后，「選擇性撤銷」的出現(xiàn)還能解決掉「依次序撤銷」的一個關鍵問題：撤銷重做之后，無法復原。
通俗點講，就是當用戶撤銷到之前的操作，進行了新的操作行為，那么原來舊的那條線路就被廢棄了。看圖：
當用戶操作到第 5 步，然后撤銷至第 3 步，再執(zhí)行一次新的操作，那么步驟 4 與步驟 5 就會被廢棄。
大家知道很多設計師都會做版本記錄，因為 PS 的歷史記錄雖然在撤銷操作上方便了很多，但無法復原之前的操作邏輯依舊不能滿足一些設計師的訴求。
畢竟不廢棄的話，撤銷操作的邏輯就會很復雜；且通?！高x擇性撤銷」伴隨解釋，說明用戶清楚知道自己當前行為會造成何種后果。但它并不能解決用戶操作過程中實際存在的這類問題。
而「選擇性撤銷」的「版本記錄」可以解決這個問題，來看下面這個例子。
結合歷史/版本記錄，比如用 Notion 或石墨寫了一篇文章，它們都會有版本記錄，過程中會根據(jù)時間維度與內容變更維度來判斷是否進行保存，那么當用戶想回滾到之前的那段內容，只要對這些版本進行點擊查看，然后選擇具體撤回到哪一步即可。
比如我今天（2019.11.05）早上花了半小時最后對文章做了一次整理，添加了圖片，它就會記錄其中的操作變化，且可進行選擇。這里無論如何撤至哪一步，其它內容都會有留存，不會消失。
也許這已經(jīng)不是通常意義上的撤銷，但它確實是撤銷的升級版。
這樣看起來是不是自由操控度要高很多呢？
到這里，我只是講了「撤銷」的特性，下面來聊下它在界面設計中是如何應用的。
我們現(xiàn)在在很多產品里都能看到撤銷，在網(wǎng)頁里與移動 App 中，它的使用形式雖然多樣，但本質上并沒什么區(qū)別。
大多就是單次撤銷，因為用不到多次撤銷，多次撤銷更多是在工具里被使用。
比如油管的撤銷使用：
當用戶對一個視頻進行「不感興趣」的操作時，視頻內容會變成右邊這樣，可撤銷。這個內容會一直存在直到用戶刷新頁面時才會消失。
類似的還有淘寶網(wǎng)頁端的購物車，當刪除添加的任一商品后，其也會在附近位置出現(xiàn)可撤銷的操作。
在網(wǎng)頁產品中，撤銷的運用大多是這樣的。
我們再來看移動端產品對于撤銷的應用。
在 iOS 中比較常見的是微信的搖一搖手機撤銷正在鍵入的內容：
這類撤銷較為被動，經(jīng)常是在無意間觸發(fā)，所以不是我們主要要聊的。
而有一類產品，撤銷會以 Snackbars 的形式出現(xiàn)，如圖：
當這類郵箱產品，刪除了某封郵件后，在底部就會出現(xiàn)這樣的提示，告知用戶可撤銷上一步行為。
更多的還是工具類產品，比如修圖類產品 Snapseed：
它有單次撤銷，也可以重做，還能多次撤銷，多次撤銷就是點擊「查看修改內容」之后，右圖出現(xiàn)的樣子，它會把所有步驟都呈現(xiàn)出來，給予用戶選擇具體撤銷至哪一步。
其實更多的也就是這樣了，但是，為什么呢？為什么在非工具類產品里撤銷很少見呢？難道用戶從來不會誤操作或操作之后反悔？
下面一節(jié)來解答。
先放結論：當某個功能具備撤銷屬性時，切勿再使用二次確認對話框，反之同樣成立。
撤銷與二次確認，是兩種東西，雖然有時候解決的是同一個問題，但是它們的屬性是完全不同的。
舉個例子：
上面這張圖，左邊是在執(zhí)行操作前彈出的確認框，右邊是執(zhí)行操作后彈出的提示框。
二者的區(qū)別很明顯，二次確認的刪除提示框更具警示效果，后者作為提示，較為弱化，且通常是在用戶操作完成后彈出。對于用戶來說，在非工具類產品中，前者更好的抑制了用戶的沖動行為或誤操作行為。后者作為提示類控件，不具備警示效果。
所以它們不應該同時出現(xiàn)，且它們雖然是解決同一個問題，但是是完全不同的情況。
于是，在大多數(shù)產品中我們很少看到撤銷的使用，因為大部分需嚴謹?shù)牟僮鞫紩卸未_認，并不嚴重的操作也就不需要任何提示。即使是上述提到的郵箱刪除，沒有二次確認也是因為它有撤銷作為提示且還有回收站允許用戶檢查確認。
所以，除非是場景與之密切相關的，比如社交產品內容發(fā)送后的撤回功能。
微信早期的撤回，只是撤銷，它并不具備「重做」屬性，現(xiàn)在撤回，內容會重新出現(xiàn)在輸入框讓用戶重新編輯。
它們之間的差異是：它并不會產生嚴重后果，但確實會產生小問題。比如誤操作發(fā)出信息，或發(fā)出后發(fā)現(xiàn)話術并不嚴謹。
所以這一段內容只是想告訴各位：二次確認操作與撤銷操作是兩種不同的東西，雖然看起來是解決同一個問題，但它們的差異也是非常明顯的。必須謹記。
另外還有個提示：心細的同學會注意到文章里或其他產品里出現(xiàn)的「撤銷」通常也會寫成「撤消」。在別的領域里這是兩種不同的內容，但在產品設計領域里，目前并沒有對這兩者做明確的區(qū)分，所以暫時不用過于糾結。
這篇文章講了很多內容，我在這里梳理下：
所以當你設計的產品要用到撤銷時，也要注意這些細節(jié)問題。
這就是本篇文章的所有內容了。其實這篇文章里包含的內容有很多，而且有很多爭議點我都沒放出來，直接一筆帶過給出正確結論了。寫這種大部頭文章太累，要思考的點很多，需要幫助讀者從多視角排雷，很可能導致初學者在讀文章過程中出現(xiàn)閱讀吃力的問題。所以之后還是會挑一個點來寫吧。
文章來源：優(yōu)設