非模态|B端产品设计细节分析：编辑功能
编辑导语：数据更新是B端产品的常见功能之一，而数据更新功能可以通过编辑功能实现。具体而言，B端产品中的编辑功能有哪些常见形式？本篇文章里，作者就编辑形式的种类、设计注意事项、如何应用等方面做了总结，一起来看一下。
文章插图
一、三种编辑形式一个B端产品的功能无外乎是新增（Create）、读取（Retrieve）、更新（Update）、删除（Delete）。数据更新可以通过编辑功能实现，常用于更新表单或列表数据，主要有以下三种形式：
1. 内联式编辑指在原页面编辑并保存的一种编辑形式。整个过程不会涉及到对话框的弹出和页面的跳转，用户清楚地知道编辑的内容会显示在哪里。
这有助于在不离开当前视图的情况下立即更改内容，防止用户丢失当前视图上下文的信息，常用于小范围内容更新。
内联多字段编辑一般有明显的编辑按钮，单一字段编辑时可以隐藏编辑按钮在鼠标悬浮时才出现，甚至没有编辑按钮，需要通过鼠标单击或双击进入编辑状态。
- 优点：简单、直接，可方便用户联系上下文内容。
- 缺点：防错性较弱。
- 适用场景：常用于单一字段、重要性较弱的编辑。
用户触发某一栏时，该栏即变为可编辑状态。这时用户可以任意修改。并且当鼠标点击到其他栏或者表格以外的地方时，该可编辑栏失焦之后自动保存修改后的内容，并变回不可编辑状态。
文章插图
触发编辑的条件可以是单击或双击，但是为了使用户容易发现，大多数产品会添加编辑图标按钮。
文章插图
2）带按钮样式
当鼠标悬浮到某一栏上时，出现编辑图标，点击图标出现「保存」 和 「取消」 按钮。编辑完成后点击「保存」即完成编辑，否则编辑内容不会被保存。
这种形式给用户适当的考虑时间，可以防止用户反悔或错误输入。
文章插图
3）行编辑/多个字段编辑
与带按钮的编辑相似，点击编辑按钮时进入编辑状态，编辑完毕后可进行「保存」 或者 「取消」操作。
这种方式适合对列表同一行或表单的多个字段进行修改，且编辑字段内容较简单时使用。
文章插图
2. 弹出式编辑指需要以弹框为载体进行编辑的形式。如果要编辑的字段较多，可使用这种方法。通常隐藏编辑按钮在鼠标悬浮时才出现。
弹窗编辑也包括三种形式：模态弹框形式、非模态弹框形式、以及模态抽屉形式。
- 优点：可承载较多信息，防错性较强。
- 缺点：打破了用户的上下文连贯性，在保存后返回到之前的视图时，必须再次重新聚焦。
- 适用场景：用于复杂、较重要信息的编辑。
此类型的编辑仍停留在原页面，但是会有弹出框。弹出框不会遮盖需要更新的字段信息，并且弹出框悬停在编辑位置处。当用户点击弹出框以外的区域时，弹出框可消失。与模态弹框不同，这种弹出框不会阻断原页面和编辑内容的关联性。
这种方式适合修改较重要但又不复杂的信息。
文章插图
2）模态弹框
这是常用的交互方式了。当鼠标悬浮要修改的字段时，出现编辑图标，点击图标会弹出可更新的字段内容弹框，并且原页面上会覆盖灰色透明蒙层，弱化原页面信息。操作结束后点击保存更新信息，否则信息不保存。
推荐阅读
- 向海龙加入“非洲第一”传音，并不能让它挣钱更容易|最前线 | 功能机
- 多模态|人脸也能被“偷走”?这些漏洞要当心了
- 邹非序|大吉大利，今晚吃啥？供应链危机持续，澳肯德基“无鸡可炸”
- c端|2022年B端产品发展的8个趋势
- 留学生|全球连线｜你好非洲卢旺达留学生的电商梦
- 电子商务|非洲部分发达国家喜欢使用电商网购物降低购物成本
- 个人信息|国家网信办:不得强制要求用户提供非必要个人信息
- 普及率|2021 年非洲多个国家的电商发展异常迅猛
- 互联网|非洲前十的发达国家被列为非洲电商发展的首要市场
- outlook|微软 Outlook 将支持手机端扫码登录