飞特网

  • 飞特网官方微博
  • 飞特网微信公众号

细说撤销的演变

火枪手发布于:2019-11-7 18:10 |原作者: 呆总
简介: 关于「撤销」有很多设计细节可以讲,所以我花了两周时间,将其浓缩成 3000 字,帮助各位产品设计师更好理解撤销的设计细节。

版权申明:本文出自“呆总丶”原创,感谢“呆总丶”的原创文章分享!

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

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

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

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

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

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 中,它的使用形式虽然多样,但本质上并没什么区别。

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

比如油管的撤销使用:

细说撤销的演变 飞特网 设计理论

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

12下一页
1

好评

差评

刚表态过的朋友 (1 人)

火枪手
广东省 汕头市 网页设计师
+ 关注 私信
  • PS调出干净通透人像风景照片教程
  • 五个超实用的PS磨皮教程
  • 细说撤销的演变

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 飞特网