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

名称:九分网络科技

联系:13106499520

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


扫一扫添加微信

淘汰了5个方案,梳理出这份后台列表设计避坑指南(下)

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

列表页是构成后台使用界面的重要组成之一,聚合了众多信息并提供操作入口。区别于小而美的C端产品列表,后台系统的用户希望列表的内容又多又全面(表格),但在操作时又能支持快速定位(搜索,包含筛选)、准确处理(操作)。这需求貌似有些矛盾,但在很多场景下,例如客服在接待客户时窗口时间极其短暂,既要全面获取相关信息,又要快速应对解决客户问题。因此这需求不仅合理而且是刚需。

本文来自九分网络

列表页由「搜索」、「表格」和「操作项」三大基本块组成。刚才提到的矛盾点也是由这三个模块之前的互相影响和制约(后面会详细阐述)。我们当初由于在设计时忽视了特定场景细节,以及生搬硬套了一些看起来很美很简约的交互样式,没有处理好这三个模块内部以及之间的关系,被用户抱怨说不好用。这篇文章就将「搜索」、「列表」、「操作」三块问题进行分析和定位,盘点一下那些被淘汰掉的解决方案,给大家提供一份避坑指南。 本文来自九分网络

注意,不存在「最好」的通用方案,只有应对具体需求「最合适」的解决方案。

本文来自九分网络

www.9fen.net

淘汰了5个方案,梳理出这份后台列表设计避坑指南(上)

列表页是构成后台使用界面的重要组成之一,聚合了众多信息并提供操作入口。 内容采集来自9fen.net

阅读文章 >>
www.9fen.net

copyright 9fen.net

九分网络

列表

列表的主要问题依旧是内容太多带来的:

内容采集来自9fen.net

表头字段太多,超出屏幕之外,左右滑动才能完整查看条目内容,导致眼动频繁,增加认知负担。 www.9fen.net

条目太多,批量操作可能要多次翻页。

内容采集来自9fen.net

另外,其他潜在问题也会增加列表展示的复杂性,例如条目之间存在一定相关性——基于某份主合同后续签订几份补充合同(这里不讨论业务逻辑合理性),那么简单按照签订时间点排序,就无法体现合同之间的关联关系。 九分网络

在设计时,应着眼于避免内容太多导致的认知负担和操作成本。我们尝试了一些方法来减少信息噪音,抽象来说方法归为两个字——「藏」和「换」。「藏」,就是隐藏低优先级信息,需要的时候才允许他们出现。「换」就是转换信息呈现的形式。下面我们一一展开。

www.9fen.net

方法一:藏

用户来配置展示哪些表头项 www.9fen.net

和之前提到的搜索区域配置功能类似,允许用户配置表头项,隐藏暂不需要的内容。

copyright 9fen.net

淘汰了5个方案,梳理出这份后台列表设计避坑指南(下)

内容采集来自9fen.net

本文来自九分网络

△ 设计者 Ashmita Bhattacharyya

www.9fen.net

使用展开行

www.9fen.net

适合主次层级对比强烈的列表。将重要度低的内容放入展开行内,这样可以避免横向滑动。 九分网络

但如果同时查看多条展开行,需要多次点击展开。 内容采集来自9fen.net

淘汰了5个方案,梳理出这份后台列表设计避坑指南(下) 内容采集来自9fen.net

copyright 9fen.net

△ 图片来自Element UI

本文来自九分网络

树形数据

九分网络

使用树形数据可以将一组有父子关系的数据聚合呈现,类似文章一开始提到的主合同+补充合同的场景。

www.9fen.net

淘汰了5个方案,梳理出这份后台列表设计避坑指南(下) 内容采集来自9fen.net

本文来自九分网络

△ 图片来自Element UI

www.9fen.net

方法二:换

使用图像代替文字

内容采集来自9fen.net

图像比文字在信息传递上更直观。原因是人们对图像的处理效率远高于阅读和理解。利用清晰易懂的图像可以将信息检索效率提升一个数量级。 内容采集来自9fen.net

淘汰了5个方案,梳理出这份后台列表设计避坑指南(下) 本文来自九分网络

内容采集来自9fen.net

△ 图片来自设计者Dwinawan 九分网络

合理的默认排序规则 九分网络

常见的排序规则包含时间的正、倒序等。合理的排序规则,决定了首屏是否能呈现对用户重要度更高的内容,以及操作反馈是否可见。举个例子,用户新创建完成一个新条目后,列表按照创建时间正序排列,刷新后没有任何变化,需要用户翻到最后才能看见,那么这个反馈体验就不太好。

内容采集来自9fen.net

我们也可以根据信息的状态设置权重参数,综合计算权重值后,重要度高的信息排在前面。举个微信的例子,大家是否发现订阅号消息的排序并不是按照更新时间排序?微信的解释是,订阅号消息排列顺序会根据订阅号的优质程度、用户对订阅号的喜爱程度以及群发文章的内容质量等综合因素动态变化。也就是有多个权重参数值叠加,综合排序。

九分网络

另外还可以允许用户将任意条目置顶等,例如微信可以将某人或某群组的消息置顶。

内容采集来自9fen.net

注意 九分网络

标签: 优设 优设网 B端设计 后台设计 列表设计

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


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

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