本文将结合贝壳平台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端平台在多产品多业务线的背景下,能够拥有一致的使用体验,归根结底也可以提升用户使用系统效率。
领取专属 10元无门槛券
私享最新 技术干货