設計模式 | 多級撤銷 Multilevel Undo:讓用戶更有安全感

2021-12-17    ui設計分享達人

What 是什么

簡介:「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統(tǒng)捕獲記錄,根據(jù)原始執(zhí)行順序,一步步返回歷史操作。


例子:用 Sketch 畫設計稿時,可以多級撤銷,允許用戶返回上一步或更早的歷史操作


undefined


Why 為什么

具備多級撤銷的功能可以讓用戶覺得能夠對界面進行安全探索,不必擔心造成某些不可取消的修改。例如,如果單擊了錯誤的菜單項,不需要進行復雜的恢復,不需要退回到此前保存的文件版本,或者尋求系統(tǒng)管理員的幫助。


多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶可能會在一個圖片上執(zhí)行一系列的濾鏡操作,研究那些結果看是不是他喜歡的,然后再逐一撤銷,回到起點。


When 什么時候使用

需要用戶頻繁在單一頁面上交互的用戶界面,相比普通的網(wǎng)站或者移動端 APP,交互操作要復雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數(shù)據(jù)庫軟件、寫作工具、編程環(huán)境等。該功能能使用戶撤銷一系列操作而非單一個操作。


使用條件:該軟件的單一界面交互比較復雜和頻繁


How 如何使用

軟件首先需要一個強大的模型,這個模型是關于動作是什么樣的——動作的名稱、動作所關聯(lián)的對象,以及如何返回歷史動作。


決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數(shù)據(jù)庫——任何將是永久性存在的對象——都應該是可取消的動作。具體而言,在大部分應用里,人們期望能撤銷下面這些改變:

  • 文檔或表單的文字輸入

  • 數(shù)據(jù)庫

  • 圖片或畫布的修改

  • 布局上的變化位置、大小、順序或分組在圖像應用程序中

  • 文件操作,例如刪除或修改

  • 對象的創(chuàng)建、刪除和重新組織,例如郵件消息或電子表單的列

  • 任何剪切、復制、粘貼操作


下面這些修改基本上是不可撤銷的:

  • 文本或對象選擇

  • 窗口或頁面之間的導航

  • 鼠標光標和文本光標的定位

  • 滾動條的位置

  • 窗口或面板的位置和尺寸

  • 在一個未提交的對話框或模態(tài)對話框上的改動


展現(xiàn)方式

然后,決定以哪種方式把撤銷操作展現(xiàn)給用戶。大部分桌面應用程序會把“撤銷/重復”的菜單項放在“編輯”菜單下。撤銷通常也關聯(lián)到Ctrl+Z 或類似的快捷鍵。


Example 案例

案例一:Microsoft OneNote 筆記編輯器

用戶需求:撤銷文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過程中需要修改可以用快捷鍵 COM + Z 撤銷,或者使用編輯菜單下的按鈕幫助用戶返回上一步。

undefined


案例二:Photoshop 多級撤銷

用戶需求:回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作,由于 PS 的操作修改繁瑣且復雜,所以為用戶提供了歷史記錄面板,用戶也可以點擊歷史操作步驟回到想要的歷史操作記錄。

undefined


案例三:美圖秀秀圖像處理 App

用戶需求: 撤銷回到上幾步圖像處理結果

使用美圖秀秀等圖片處理 App 對圖像進行美化操作時,常常會返回查看對比不同的效果,或者操作錯誤時返回到前幾步,頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

undefined

藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

文章來源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務



分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔