首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端列表编辑模式

本文将结合贝壳平台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端平台在多产品多业务线的背景下,能够拥有一致的使用体验,归根结底也可以提升用户使用系统效率。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200903A0Q3ZB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券