1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

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

时间:2020-09-12   分类:交互设计    作者:网络   来源:网络整理   点击:136

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

本文转自「贝壳KEDC」

本文来自九分网络

简介

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

九分网络

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

模式类型

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

1. 列表编辑-单条编辑

使用场景 本文来自九分网络

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

copyright 9fen.net

交互流程说明 copyright 9fen.net

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

www.9fen.net

B端交互模式干货集(一):APP列表编辑模式 copyright 9fen.net

九分网络

△ 图1 单条编辑

内容采集来自9fen.net

需注意的问题

九分网络

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

www.9fen.net

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

内容采集来自9fen.net

2. 列表编辑-排序

使用场景 copyright 9fen.net

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

www.9fen.net

交互流程说明 www.9fen.net

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

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

九分网络

△ 图2 排序 www.9fen.net

需注意的问题

内容采集来自9fen.net

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

本文来自九分网络

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

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

九分网络

本文来自九分网络

△ 图3 排序-其他操作

九分网络

3. 列表编辑-拓展操作

使用场景

内容采集来自9fen.net

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

交互流程说明

本文来自九分网络

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

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

九分网络

www.9fen.net

△ 图4 拓展操作 九分网络

需注意的问题 内容采集来自9fen.net

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

www.9fen.net

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

4. 列表编辑-批量操作

使用场景 九分网络

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

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

交互流程说明

九分网络

标签: 优设 优设网 B端设计 交互模式 App列表

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----