:關于「撤銷」有很多設計細節可以講,所以我花了兩周時間,將其濃縮成 3000 字,贊助各位產品設計師更好理解撤銷的設計細節。

云南体彩网撤銷的目的是贊助用戶取消當前的操作行為。

撤銷可以對用戶使用產品起到一種平安保障作用,讓用戶在界面中自由地探索而無需擔心操作所可能導致的嚴重后果。

云南体彩网或者用戶刪除了一個視頻,撤銷可以贊助用戶恢復他所刪除的內容;以及用戶進行了一步操作,覺得不太好,就通過撤銷來回退到上一步操作。

云南体彩网與之對應的叫「重做」,就是當用戶撤銷了當前的操作,但是想了想,還是行進到剛才已經操作的步調好了。既給了用戶平安感,還給了用戶反悔的余地。

類似于下象棋的時候,你覺得這一步走得欠好,所以悔棋了,雖然對家沒說什么,但是你心里又覺得過意不去,究竟落子無悔真君子,所以你又把棋子放回去了(真是不怎么恰當的比方呢)。

云南体彩网這樣做的目的是提升用戶使用產品的信心,增強對產品的控制感;鼓勵用戶放心地探索,快速建立起自己熟悉的操作路徑。

所以關于撤銷,我們可以從下面幾點來聊聊:

  • 依順序撤銷
  • 選擇性撤銷
  • 撤銷在界面中的運用
  • 與撤銷沖突的元素

依順序撤銷

云南体彩网它的意思是,依次撤銷之前的操作。

云南体彩网在尼爾森可用性原則里,就有一條類似的原則存在,即 User control and freedom(允許用戶自由操控)。

很多人把這條原則解讀為「撤銷原則」,實質上是沒什么問題的,因為撤銷確實需要讓用戶自由操控。但是早期的撤銷,并不「自由」,而僅僅只是讓用戶在一定范圍內「可操控」。

云南体彩网好比早期在一些產品里,執行多步操作,但往往只能撤銷一次,要想繼續撤銷是不被允許的,所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」,顯然是不合理的。

云南体彩网于是,后來逐漸延伸出多次撤銷的功能。

云南体彩网我記得最早使用 PS 的時候,在 PS 里面就有關于撤銷次數的范圍設定,但是我忘了具體范圍的上限與下限是多少了。

使用的方式是,好比我設置參數為 10,那么之后我的撤銷也只能操作 10 次,要想繼續撤銷,就會告知無法繼續了。

現在的很多工具產品應該是沒有這些限制了,好比 Sketch,Word 都是可以無限次撤銷直至最初始狀態或剛打開文件的狀態。

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

云南体彩网它就是在「單次撤銷」的基礎上,給了用戶「多次撤銷」的機會,并讓用戶回到自己滿意的位置。

但是這里的撤銷,它還不足自由,因為它是「依次撤銷」—— 每一步撤銷用戶都得經歷。

選擇性撤銷

云南体彩网當撤銷隨著用戶場景的變更而進化之后,才真正具備了比較自由的操控方式。

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

繼續拿 PS 舉例。

人人看到上面這張圖,當你在 PS 的畫板里完成了一系列操作之后,發現后面有一些器械做得不是很好,想回去重做,但是依次撤銷又覺得欠好把控,于是就通過操作歷史,來選擇具體回退到哪一步。

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

或者再通俗一點的例子,瀏覽器。

云南体彩网假設這時候你打開了 5 個網頁,關掉了其中 3 個,但是突然想起第 1 個關掉的網頁還有值得收藏的內容,于是依次撤銷 3 次,才打開第 1 個關掉的頁面。

云南体彩网而現在有網頁歷史記錄,就可以直接幫你打開之前關閉掉的所有網頁中的其中一個。

解決了用戶每一步都要經歷的問題。

云南体彩网當「撤銷」與「歷史記錄」結合之后,「選擇性撤銷」的涌現還能解決掉「依順序撤銷」的一個關鍵問題:撤銷重做之后,無法復原。

通俗點講,就是當用戶撤銷到之前的操作,進行了新的操作行為,那么原來舊的那條線路就被廢棄了。看圖:

當用戶操作到第 5 步,然后撤銷至第 3 步,再執行一次新的操作,那么步調 4 與步調 5 就會被廢棄。

云南体彩网人人知道很多設計師都邑做版本記錄,因為 PS 的歷史記錄雖然在撤銷操作上方便了很多,但無法復原之前的操作邏輯依舊不克不及滿足一些設計師的訴求。

究竟不廢棄的話,撤銷操作的邏輯就會很復雜;且通常「選擇性撤銷」隨同解釋,說明用戶清楚知道自己當前行為會造成何種后果。但它并不克不及解決用戶操作過程中實際存在的這類問題。

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

結合歷史/版本記錄,好比用 Notion 或石墨寫了一篇文章,它們都邑有版本記錄,過程中會根據時間維度與內容變革維度來判斷是否進行保存,那么當用戶想回滾到之前的那段內容,只要對這些版本進行點擊查看,然后選擇具體撤回到哪一步即可。

云南体彩网好比我今天(2019.11.05)早上花了半小時最后對文章做了一次整理,添加了圖片,它就會記錄其中的操作變更,且可進行選擇。這里無論如何撤至哪一步,其它內容都邑有留存,不會消失。

也許這已經不是通常意義上的撤銷,但它確實是撤銷的升級版。

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

到這里,我只是講了「撤銷」的特性,下面來聊下它在界面設計中是如何應用的。

撤銷在界面中的運用

我們現在在很多產品里都能看到撤銷,在網頁里與移動 App 中,它的使用形式雖然多樣,但實質上并沒什么區別。

云南体彩网大多就是單次撤銷,因為用不到多次撤銷,多次撤銷更多是在工具里被使用。

好比油管的撤銷使用:

云南体彩网當用戶對一個視頻進行「不感興趣」的操作時,視頻內容會釀成右邊這樣,可撤銷。這個內容會一直存在直到用戶刷新頁面時才會消失。

類似的還有淘寶網頁端的購物車,當刪除添加的任一商品后,其也會在附近位置涌現可撤銷的操作。

在網頁產品中,撤銷的運用大多是這樣的。

云南体彩网我們再來看移動端產品對于撤銷的應用。

在 iOS 中比較常見的是微信的搖一搖手機撤銷正在鍵入的內容:

這類撤銷較為被動,經常是在無意間觸發,所以不是我們主要要聊的。

云南体彩网而有一類產品,撤銷會以 Snackbars 的形式涌現,如圖:

云南体彩网當這類郵箱產品,刪除了某封郵件后,在底部就會涌現這樣的提示,告知用戶可撤銷上一步行為。

云南体彩网更多的還是工具類產品,好比修圖類產品 Snapseed:

云南体彩网它有單次撤銷,也可以重做,還能多次撤銷,多次撤銷就是點擊「查看修改內容」之后,右圖涌現的樣子,它會把所有步調都涌現出來,給予用戶選擇具體撤銷至哪一步。

云南体彩网其實更多的也就是這樣了,但是,為什么呢?為什么在非工具類產品里撤銷很少見呢?難道用戶從來不會誤操作或操作之后反悔?

云南体彩网下面一節來解答。

與撤銷沖突的元素

云南体彩网先放結論:當某個功能具備撤銷屬性時,切勿再使用二次確認對話框,反之同樣成立。

撤銷與二次確認,是兩種器械,雖然有時候解決的是同一個問題,但是它們的屬性是完全分歧的。

舉個例子:

上面這張圖,左邊是在執行操作前彈出切實其實認框,右邊是執行操作后彈出的提示框。

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

所以它們不該該同時涌現,且它們雖然是解決同一個問題,但是是完全分歧的情況。

于是,在大多數產品中我們很少看到撤銷的使用,因為大部分需嚴謹的操作都邑有二次確認,并不嚴重的操作也就不需要任何提示。即使是上述提到的郵箱刪除,沒有二次確認也是因為它有撤銷作為提示且還有回收站允許用戶檢查確認。

云南体彩网所以,除非是場景與之密切相關的,好比社交產品內容發送后的撤回功能。

微信早期的撤回,只是撤銷,它并不具備「重做」屬性,現在撤回,內容會重新涌現在輸入框讓用戶重新編輯。

它們之間的差別是:它并不會發生嚴重后果,但確實會發生小問題。好比誤操作發出信息,或發出后發現話術并不嚴謹。

所以這一段內容只是想告訴各位:二次確認操作與撤銷操作是兩種分歧的器械,雖然看起來是解決同一個問題,但它們的差別也是非常明顯的。必須謹記。

云南体彩网另外還有個提示:心細的同學會注意到文章里或其他產品里涌現的「撤銷」通常也會寫成「取消」。在別的領域里這是兩種分歧的內容,但在產品設計領域里,目前并沒有對這兩者做明確的區分,所以暫時不消過于糾結。

總結

這篇文章講了很多內容,我在這里梳理下:

  • 撤銷分為依順序撤銷與選擇性撤銷;
  • 依順序撤銷有單次撤銷與多次撤銷,以 PS 為例;
  • 選擇性撤銷大多在工具類產品里被使用,它與歷史記錄結合,解決了依順序多次撤銷部分內容被覆蓋的問題;
  • 在非工具類產品里,被使用更多的是單次撤銷,是因為場景限制;
  • 撤銷與二次確認弗成同時涌現,它們看起來是解決同個問題,但之間存在較大差別。

所以當你設計的產品要用到撤銷時,也要注意這些細節問題。

云南体彩网這就是本篇文章的所有內容了。其實這篇文章里包含的內容有很多,而且有很多爭議點我都沒放出來,直接一筆帶過給出正確結論了。寫這種大部頭文章太累,要思考的點很多,需要贊助讀者從多視角排雷,很可能導致初學者在讀文章過程中涌現閱讀吃力的問題。所以之后還是會挑一個點來寫吧。

云南体彩网歡迎關注作者的微信公眾號:「呆呆U理」

點贊 6
收藏 13

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
相關推薦
2 收藏