本文将结合贝壳平台B端产品特点，针对当前使用频率高的列表编辑模式进行归纳和抽象，重组典型可复用的交互行为与功能流程，促进提升平台产品体验一致性。
简介
列表是移动端产品中常见的信息展现形式，尤其在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端交互模式的设计方法持续更新中，不要错过精彩内容哦。
【往期B端交互模式文章】
– E N D –
李琦冉 / 交互设计师
目前支持好赞项目、摄影师平台及房客源中台，
努力追求设计的素与生活的杂。
感觉好看就点个在看?
本篇文章来源于微信公众号:贝壳KEDC
