内页编辑

《About Face：交互设计精髓》一书中有提到一种错误的编辑方式：

“......很多程序一个地方用于输出，另一个地方用于输入，把它们看成是两个独立的过程。用户的认识模型很难理解这种差异。”

同时,《About Face :交互设计精髓》的作者也总结了一条简单的规则：

在哪里输出，就要允许在哪里输入。就是让界面能够直接响应用户的操作一一“直截了当”。

为了说明这条规则，我们将探讨一些产品的交互模式，采用这些模式有助于界面更直接地响应用户操作。

单字段行内编辑

如果你是一次使用“语雀”，你是否知道左上方标题可以“编辑”？如果你知道，问问自己是怎么知道的，是否来自之前的经验（心智模型）。如果使用者没有这方面的心智模型，应该怎么办？

在看看“钉钉”个人信息中“昵称”你是否知道可编辑，如果知道，问问自己是怎么知道的？

以上两个案例，相信看这篇文章的同学应该都知道怎么编辑，这是因为我们心智模型都被培养过。

唐纳德·诺曼在《设计心理学》一书中的解释：心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验，或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。

语雀这样做不知道是不是做过用户调研，因为用语雀的人几乎都是互联网相关行业的人，这些人群的特点就是学习适应能力特别强且用户心智模型有被培养。

钉钉为什么没有这么做，可能是因为钉钉的用户人群并不只是互联网人群，还有很多制造业和传统行业的用户，这些人群的心智模型没有被培养。

结合以上案例，我们在设计单字段编辑功能时，一定要考虑一个问题：用户怎么才能发现这个功能？

通常我们会采用三种交互方式：

其中2、3是需要鼠标停在标题上之后,可编辑提示才会出现。

因此，是否能被发现取决于用户的鼠标是否悬停在了标题上，并且是否会注意到。

为了让功能更容易被发现，可以将提示直接放在页面中。例如图中1，可以在标题旁边放一个图标或文字按钮，单击即可触发编辑。

有了这个随时可见的效果后，编辑功能就更容易被注意到了。

不过，图标或文字按钮在有些场景下会影响页面视觉平衡及干扰问题，如果功能及其提示在页面中的数量过多，可能会影响操作效率。

这个时候就需要我们设计师去寻找平衡点，我们可以与产品探讨一下这个地方“易读性”和“易编辑性”那个更重要。例如：“易读性”重要，则应该在用户与内容交互时再给出可以编辑的提示；

Quick BI 采用的就是“易读性”优先。鼠标没触发前没任何提示，当鼠标放到标题上时，就会出现一个输入框同时指针标为编辑状态。单击输入框就可以进行编辑，单击编辑字段外部或按Tab切换至其他标题，就会自动保存修改。这种方式减少了视觉干扰，确保了标题编辑区域视觉上的整洁美观。

多字段行内编辑

多字段行内编辑顾名思义就是在行内编辑多个值。

例如：问卷产品，为了便于阅读，会将标题与内容放到一起。编辑时，这两个值分别对应表单中的多个输入字段。

但这种编辑模式要注意两者之间的高度变化，因为编辑时需要不同大小的页面空间和布局，也会使用不同数量和类型的组件。所以，显示与编辑模式的切换很可能造成用户视觉上的割裂，采用这种交互时要考虑当前场景是否合适。

同样的方式也会出现在表格字段编辑中，当点击编辑按钮后，表格内字段变成输入框（可编辑状态），不过这种形式现在很少用了，基本上都是采用抽屉和弹窗了。

覆盖层编辑

前面两个模式都是在页面的文本中实现行内编辑。

覆盖层编辑是通过在页面上方添加一层来放置编辑表单。虽然编辑期间也不会离开当前页面，但不是在内容中直接实现编辑。而是采用弹出式覆盖层(例如对话框、抽屉)作为编辑窗。

有时候，不可能把某个复杂的编辑任务安排在同一个区域内完成。如果嵌入的编辑区域太大，会把内容过多的推向下方而损害页面的整体感。

而覆盖层能够为用户提供明确的编辑空间，只要一个轻量级的覆盖层就足以胜任。

用一句话总结何时使用覆盖层：

如果有必要占用独立空间放置编辑项，且页面的上下文对编辑项不重要（覆盖层可能会遮挡下面内容），就可以考虑使用覆盖层编辑。

群组编辑

如前面所述，我们应该保持显示模式与编辑模式之间的差异最小化。

如果想尽量保持页面项整齐有序的前提下支持编辑功能，可以考虑使用群组编辑模式。

例如：飞书管理后台--关联组织--安全设置，我们可以对关联组织需要展示的字段进行设置，点击编辑就会高亮所有字段进入编辑状态，可以对字段新增与去除，此时的编辑已被保存替代，点击保存就会退出群组编辑模式。

进入与退出编辑模式通常应该采用同样的交互风格。这样才有助于发现相反的操作。而这就是所谓的对称性交互原则 。

总结

页内编辑是实现直接交互的重要手段。以下是在选择具体编辑模式时应该考虑的一些指导原则:

1、如果页面中有一个字段须要编辑，应该优先使用单字段行内编辑。

2、如果只考虑易读性，可通过鼠标悬停提示用户编辑。

3、对于多个字段的编辑,可以使用多字段行内编辑。

4、使用多字段行内编辑时，尽可能保证显示和编辑区域大小相同，这样可以避免页面抖动。

5、如果编辑时的上下文无关紧要，或者用户在编辑时应该全神贯注，则可使用覆盖层编辑。

6、在处理页面中的多个项时，群组编辑是平衡视觉干扰与易发现性的有效方案。

7、尽量不要让用户通过双击切换至编辑模式，除非你的产品与桌面端非常相似。