页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑

1 评论 7843 浏览 45 收藏 12 分钟

编辑导语:设计师在面对页面编辑的一些设计时,会更注重用户体验方面的细节,因为用户在编辑页面时会遇到很多问题,这时怎么让用户能顺利的完成编辑是非常重要的;本文作者分享了关于页面编辑的细节,我们一起来了解一下。

Ant Design的致谢中提到了《Web界面设计》,最近刚好读了一下,发现AntD给出的设计原则正是来自于这本书。

这本书是08年出版的,里面的许多设计案例还来自于雅虎时期,距离今天已经有点遥远了,但是它的设计原则依然具有参考价值。

01 直截了当

咱们今天主要来说,书中的第一条原则「直截了当」,文中给出的解释是,让界面能够直接响应用户的操作。

直白一点儿讲就是,用户需要在哪里操作,就直接让他在原页面操作;比如说,用户需要编辑页面名称,就在当前位置编辑,不要单独打开一个新页面编辑。

直截了当有两个优势:

  • 用户操作更加流畅:如果一个页面编辑,一个页面展示,这种体验对于用户来说是割裂的。
  • 不脱离用户原有情境:比如说,用户在编辑页面的同时,依然可以参考页面中的其他信息,在很多时候对用户来讲是有必要的。

02 编辑功能

网页通常主要用于浏览,如果想要编辑的话,就要借助表单,主要包含输入字段和提交等按钮。

下面主要从以下四种情况分析,看看如何利用「直截了当」的原则,让页面编辑变得更加丝滑。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

1. 单字段行内编辑

单字段行内编辑,是最基础的行内编辑样式,就是在页面内编辑一个文本字段,编辑操作能够直接在原地进行。

设计单字段行内编辑时,通常有两种方式,针对这两种方式,AntD中给出了更加符合目前设计样式的示例。

第一种是隐藏编辑链接。

在普通浏览模式中,隐藏编辑链接,不区分字段是否可编辑。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

在鼠标悬停在当前字段时,出现编辑提示,需要注意以下三点:

  • 「指针」变为「手型」;
  • 编辑区域底色变黄;
  • 出现「Tooltips」提示单击编辑;

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

鼠标点击后,出现输入框、确定、取消表单元素,同时光标定位在输入框中。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

第二种是显示编辑链接。

在浏览的时候便在可编辑行附近出现文字链/图标。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

鼠标点击后,和第一种编辑模式一样。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

两者的主要区别在于,编辑功能是否容易发现。所以,这时候需要评估易读性和易编辑性哪一个更重要。

当页面「易读性」远比「易编辑性」重要时,可以采用隐藏编辑链接的形式;如果当页面以「易读性」为主,同时又要突出操作行的「易编辑性」时,可使用显示编辑链接的形式。当「易读性」远比「易编辑性」重要时,可以使用「单击编辑」。

2. 多字段行内编辑

上面的例子只是在行内编辑了一个值。如果是有多个值,或者被编辑的项是一串更加复杂的数据类型,我们应该怎样编辑。

多字段行内编辑便是解决这个问题的,同时编辑多个值。

腾讯问卷的问题编辑,便是一个很好的多字段行内编辑的例子。问题主要由题目和问题两部分组成。

当鼠标悬停在问题上时,便会出现邀请编辑的按钮。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

鼠标点击问题后,标题和内容便会变成可以编辑的表单,可以直观的编辑内容,而且表单还可以扩展,包含其他项。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

AntD也给出了一个表格中多字段编辑的案例,当点击编辑按钮后,表格内字段都直接变成输入框。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

注意事项:

  • 编辑模式在不破坏整体性的前提下,可扩大空间,以便放下「输入框」等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。
  • 在「多字段行内编辑」的情况下,显示的内容和编辑时所需的字段会存在比较大的差异,所以需要「解释刚刚发生了什么」来消除这种视觉影响。

比如,用户更改了表格中的值,然后点击保存,那么详情所在的网格出现「黄底」,表明该对象发生了更改,底色持续几秒后,恢复正常。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

3. 覆盖层编辑

覆盖层编辑是通过在页面上方添加一层,来放置编辑表单。虽然编辑时也不会离开当前页面,但却不是在页面中直接实现编辑。

选择覆盖层而不是行内编辑的原因有很多,不可能把某个复杂的编辑任务,直接安排在同一个页面完成。如果嵌入页面的编辑区域很大的话,会把过多内容推向下方,损害了页面的整体感。

覆盖层主要有浮层、对话框和抽屉三种。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

如果需要编辑的信息较少,那么可以直接使用浮层承载。

比如,下图中展示态虽然只有短短一行,但是其中需要编辑的信息有5条,如果直接用行内编辑的话,页面变化过大会失去整体感。这时候可以采用浮层的方式展示。

鼠标「点击」图标触发编辑态,鼠标「点击」悬浮层以外的其他区块后,直接保存输入结果并退出。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

当需要编辑的信息过多时,可以采用对话框和抽屉承载,因为咱们上次专门有一篇文章介绍了对话框和抽屉的区别,就不再重复了,没看过的小伙伴可以看一下《对话框vs抽屉,辅助页面如何决策》。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

4. 表格编辑

线上表格编辑现在越来越常见了,但是因为Excel早就成了表格编辑的一种事实标准。所以,线上表格设计的时候,尽量和Excel的操作保持一致。

比如,现在的飞书等云文档,几乎和Excel非常像。

页面编辑竟然包含这么多细节,如何把编辑体验做的顺滑,令人喜欢

03 案例分析

假设有一个这样的页面,它的主要功能是让用户浏览信息,但是,现在又提出了一个新的需求,用户需要编辑页面上的信息。

其中,存在90%的可能性是,用户发现页面1~2处信息错误,存在10%的可能性是,用户发现10+处信息错误,需要修改。

这时候应该如何设计编辑功能?

用户仅需要修改1~2处错误时,最好的方案是只进行局部修改,直接采用单字段行内编辑;但是当错误达到一定数量时,再去一个个点击修改就非常繁琐了,最好采用覆盖层编辑中的抽屉编辑。

因此,这时候我们可以采用单字段行内编辑中的隐藏编辑链接,与抽屉编辑相结合的方式,满足不同的使用场景。

因为这个页面还是以易读性为主,并且如果过多编辑链接同时显示的话,非常干扰用户查看信息,因此采用隐藏超级链接的形式。如果需要修改的信息很多的话,用户可以直接点击右上角「编辑」按钮,批量修改信息。

04 总结一下

针对直截了当选择,我们可以总结出四种不同的编辑形态,主要是单字段行内编辑、多字段行内编辑、覆盖层编辑和表格编辑。并且在实际设计中,多种形式可以同时使用。

 

本文由@栗子设计喵 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 厉害了

    来自浙江 回复