B端交互模式干货集（一）：APP列表编辑模式

本文将结合贝壳平台B端产品特点，针对当前使用频率高的列表编辑模式进行归纳和抽象，重组典型可复用的交互行为与功能流程，促进提升平台产品体验一致性。

本文转自「贝壳KEDC」

简介

列表是移动端产品中常见的信息展现形式，尤其在B端产品设计中占比很高，B端数据信息量庞大，使用列表这种格式化的表达形式，是最清晰、高效的方式之一。贝壳B端产品主要为企业级服务产品，即SaaS，常用列表来展示数据、管理数据、作为详情入口等。

除展示信息外，在列表这种结构形式上进行编辑操作，包括对元素的增删改等一系列操作，应如何处理？这里结合贝壳平台B端业务场景，选取列表设计中多次出现的编辑类型，根据列表和编辑操作的耦合，进行划分不同模式的设计方案，沉淀了几套具备复用性的交互模式。

模式类型

列表编辑模式的类型，根据不同的编辑属性，分为了以下4种常见的可复用的模式：单条编辑模式、排序模式、拓展操作模式、批量操作模式。

1. 列表编辑-单条编辑

使用场景

管理列表项，当列表项的数量相对较少，且每项的操作动作互相独立。在B端产品中，常用于项目类的新增、删除、编辑或重命名等简单操作。

交互流程说明

操作按钮一般使用具有明确象征意义的icon来表示，或使用简洁的文案。点击按钮进入对应操作流程。操作完成后通过toast提示等给予反馈，并且支持再次操作。

△ 图1 单条编辑

需注意的问题

因移动端空间有限，操作的数量应控制在3个以内，操作数量≥3个时需收起操作按钮，使用一个入口聚合多个操作。

编辑页面与添加页面可共用同一套表单页面，以保持一致性。

2. 列表编辑-排序

使用场景

当列表项支持自定义排列顺序时，或一套流程步骤支持自定义环节顺序时，可提供排序功能。

交互流程说明

从列表页或流程的设置入口处进入设置顺序页面，点击按住列表项右侧的拖动按钮（建议使用icon），将其向上/下拖拽到预期位置时，可上移/下移该项所处位置。点击「完成设置」按钮，保存编辑的顺序并退出设置页面。点击「恢复默认」按钮，可恢复至列表初始状态。

△ 图2 排序

需注意的问题

除排序功能外，若设置页面同时支持其他编辑操作时，可通过其他交互方式唤起动作。一般来讲，iOS和安卓系统的操作方式有差异：iOS端为左滑列表项出现操作按钮，安卓端为长按列表项出现小浮层，浮层内展示操作按钮。

由于操作方式较隐晦，首次使用不易被发现，所以应考虑适当加入新手引导。

△ 图3 排序-其他操作

3. 列表编辑-拓展操作

使用场景

B端列表中常见的一种类型：展示列表，常由图文标签等多种元素构成，信息内容和形式很丰富。这种展示列表页面的承载能力受到一定限制，若需拓展操作时，比如对当前列表项进行关注、分享、收藏等较轻量化的功能，可使用拓展的空间承载操作动作，并可以直接在当前页完成交互流程。

交互流程说明

以iOS为例，左滑列表项，展示功能操作按钮。点击操作，进入操作流程。

△ 图4 拓展操作

需注意的问题

由于操作方式较为隐晦，首次出现时可考虑加入新手引导。

由于移动端空间受限，尤其是iOS端左滑后的空间也有限，即使是拓展操作也不建议过多，承载1-3个操作功能为宜。

4. 列表编辑-批量操作

使用场景

管理列表项，当列表项数量较多时，对列表项逐个操作的成本就很高了，这就需要进行批量管理以提高工作效率。常用于删除、或其他根据场景诉求的自定义操作（比如分享、投票、关注等）。

管理文件等强编辑性的操作，一般也需要进入另外的编辑状态页面进行批量操作。

交互流程说明

点击右上角按钮进入批量编辑状态，初始状态未选择时，底部操作按钮置灰。勾选列表项后，底部操作按钮点亮，展示已选项的数量，即对当前勾选操作的反馈。点击操作按钮，进入对应操作流程；点击「完成」按钮，保存编辑结果，退出批量编辑模式。勾选后不操作点击「完成」按钮，不保存编辑结果。

△ 图5 批量操作

需注意的问题

底部操作区可容纳1-n个操作按钮，根据具体场景使用，上图以2个按钮为例，超过5个按钮时，需将更多按钮收起至一个入口，点击展开菜单选择操作。

置入多选框时，列表项内容整体右移，横向展示的空间被压缩，超出限制的字段可截断展示，其他元素按照制定的展示策略进行适配。

若有全部选中操作的场景时，可加入全选功能。

总结

提供处理和管理数据的功能，对数据进行便捷操作体验，就是为了能提升用户使用系统的效率。沉淀列表编辑模式不仅可以提升设计师工作效率，避免重复劳动；同样保证了B端平台在多产品多业务线的背景下，能够拥有一致的使用体验，归根结底也可以提升用户使用系统效率。

实际应用中可依照业务、场景、数据、操作等层面，使用适当的设计模式，且不局限于以上几种，可基于以上模型进行扩展，以提供更多关于SaaS平台列表编辑设计的创新解决方案。

更多B端设计干货：

欢迎关注作者微信公众号：「贝壳KEDC」