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

本文转自「贝壳KEDC」

简介

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

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

模式类型

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

1. 列表编辑-单条编辑

使用场景

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

交互流程说明

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

B端交互模式干货集(一):APP列表编辑模式

△ 图1 单条编辑

需注意的问题

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

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

2. 列表编辑-排序

使用场景

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

交互流程说明

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

B端交互模式干货集(一):APP列表编辑模式

△ 图2 排序

需注意的问题

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

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

B端交互模式干货集(一):APP列表编辑模式

△ 图3 排序-其他操作

3. 列表编辑-拓展操作

使用场景

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

交互流程说明

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

B端交互模式干货集(一):APP列表编辑模式

△ 图4 拓展操作

需注意的问题

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

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

4. 列表编辑-批量操作

使用场景

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

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

交互流程说明

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

B端交互模式干货集(一):APP列表编辑模式

△ 图5 批量操作

需注意的问题

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

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

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

总结

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

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

更多B端设计干货:

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

B端交互模式干货集(一):APP列表编辑模式

点赞 8
收藏 40
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏