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