细说撤销的演变

版权申明：本文出自“呆总丶”原创，感谢“呆总丶”的原创文章分享！

撤销的目的是帮助用户取消当前的操作行为。

撤销可以对用户使用产品起到一种安全保障作用，让用户在界面中自由地探索而无需担心操作所可能导致的严重后果。

或者用户删除了一个视频，撤销可以帮助用户恢复他所删除的内容；以及用户进行了一步操作，觉得不太好，就通过撤销来回退到上一步操作。

与之对应的叫「重做」，就是当用户撤销了当前的操作，但是想了想，还是行进到刚才已经操作的步骤好了。既给了用户安全感，还给了用户反悔的余地。

类似于下象棋的时候，你觉得这一步走得不好，所以悔棋了，虽然对家没说什么，但是你心里又觉得过意不去，毕竟落子无悔真君子，所以你又把棋子放回去了（真是不怎么恰当的比喻呢）。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

这样做的目的是提升用户使用产品的信心，增强对产品的控制感；鼓励用户放心地探索，快速建立起自己熟悉的操作路径。

所以关于撤销，我们可以从下面几点来聊聊：

· 依次序撤销

· 选择性撤销

· 撤销在界面中的运用

· 与撤销冲突的元素

依次序撤销

它的意思是，依次撤销之前的操作。

在尼尔森可用性原则里，就有一条类似的原则存在，即 User control and freedom（允许用户自由操控）。

很多人把这条原则解读为「撤销原则」，本质上是没什么问题的，因为撤销确实需要让用户自由操控。但是早期的撤销，并不「自由」，而仅仅只是让用户在一定范围内「可操控」。

比如早期在一些产品里，执行多步操作，但往往只能撤销一次，要想继续撤销是不被允许的，所以它的操控自由度就很低。那时候如果把这条原则解读为「撤销原则」，显然是不合理的。

于是，后来逐渐延伸出多次撤销的功能。

我记得最早使用 PS 的时候，在 PS 里面就有关于撤销次数的范围设定，但是我忘了具体范围的上限与下限是多少了。

使用的方式是，比如我设置参数为 10，那么之后我的撤销也只能操作 10 次，要想继续撤销，就会告知无法继续了。

现在的很多工具产品应该是没有这些限制了，比如 Sketch，Word 都是可以无限次撤销直至最初始状态或刚打开文件的状态。

相对早期撤销的使用逻辑，后来可多次撤销的操作在自由度上，确实是好了那么一些。

它就是在「单次撤销」的基础上，给了用户「多次撤销」的机会，并让用户回到自己满意的位置。

但是这里的撤销，它还不够自由，因为它是「依次撤销」—— 每一步撤销用户都得经历。

选择性撤销

当撤销随着用户场景的变化而进化之后，才真正具备了比较自由的操控方式。

让撤销具备「选择属性」，必须与另一个元素做一个结合，那就是「历史记录」。

继续拿 PS 举例。

大家看到上面这张图，当你在 PS 的画板里完成了一系列操作之后，发现后面有一些东西做得不是很好，想回去重做，但是依次撤销又觉得不好把控，于是就通过操作历史，来选择具体回退到哪一步。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

相比于依次序撤销，选择性撤销的自由度更高，也更符合其对尼尔森可用性第三条原则的解读。

或者再通俗一点的例子，浏览器。

假设这时候你打开了 5 个网页，关掉了其中 3 个，但是突然想起第 1 个关掉的网页还有值得收藏的内容，于是依次撤销 3 次，才打开第 1 个关掉的页面。

而现在有网页历史记录，就可以直接帮你打开之前关闭掉的所有网页中的其中一个。

解决了用户每一步都要经历的问题。

当「撤销」与「历史记录」结合之后，「选择性撤销」的出现还能解决掉「依次序撤销」的一个关键问题：撤销重做之后，无法复原。

通俗点讲，就是当用户撤销到之前的操作，进行了新的操作行为，那么原来旧的那条线路就被废弃了。看图：

当用户操作到第 5 步，然后撤销至第 3 步，再执行一次新的操作，那么步骤 4 与步骤 5 就会被废弃。

大家知道很多设计师都会做版本记录，因为 PS 的历史记录虽然在撤销操作上方便了很多，但无法复原之前的操作逻辑依旧不能满足一些设计师的诉求。

毕竟不废弃的话，撤销操作的逻辑就会很复杂；且通常「选择性撤销」伴随解释，说明用户清楚知道自己当前行为会造成何种后果。但它并不能解决用户操作过程中实际存在的这类问题。

而「选择性撤销」的「版本记录」可以解决这个问题，来看下面这个例子。

结合历史/版本记录，比如用 Notion 或石墨写了一篇文章，它们都会有版本记录，过程中会根据时间维度与内容变更维度来判断是否进行保存，那么当用户想回滚到之前的那段内容，只要对这些版本进行点击查看，然后选择具体撤回到哪一步即可。

比如我今天（2019.11.05）早上花了半小时最后对文章做了一次整理，添加了图片，它就会记录其中的操作变化，且可进行选择。这里无论如何撤至哪一步，其它内容都会有留存，不会消失。

也许这已经不是通常意义上的撤销，但它确实是撤销的升级版。

这样看起来是不是自由操控度要高很多呢？

到这里，我只是讲了「撤销」的特性，下面来聊下它在界面设计中是如何应用的。

撤销在界面中的运用

我们现在在很多产品里都能看到撤销，在网页里与移动 App 中，它的使用形式虽然多样，但本质上并没什么区别。

大多就是单次撤销，因为用不到多次撤销，多次撤销更多是在工具里被使用。

比如油管的撤销使用：

当用户对一个视频进行「不感兴趣」的操作时，视频内容会变成右边这样，可撤销。这个内容会一直存在直到用户刷新页面时才会消失。