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