龙空技术网

B端表格设计指南

人人都是产品经理 3184

前言:

现在小伙伴们对“element修改表格数据”都比较关切,我们都需要知道一些“element修改表格数据”的相关文章。那么小编在网络上汇集了一些有关“element修改表格数据””的相关知识,希望咱们能喜欢,兄弟们快快来了解一下吧!

编辑导读:表格是展现数据最为清晰、高效的形式之一,它也是B端产品和设计师每天接触最多的组件,常和排序、搜索、筛选、分页等其他界面元素一起协同。本文作者总结了一套B端表格设计指南,一起来看看吧。

大家好,我是小鹿,今天为大家分享的是「表格设计指南下篇」

在之前的文章中小编已经分享过上篇,里面介绍了表格的概念和数据查看的知识点,没有看过的小伙伴可以快速回看➡️➡️《B端表格设计指南(上篇)》

本篇文章就来聊聊数据筛选和数据操作。

一、数据筛选-查

数据筛选区可以看作表格的导航,按预定目标过滤出某种具有特定性质的数据,将操作者所关注的数据展示到前面,便于快速查看、对比、分析信息的操作过程。

从用户角度出发,按不同粒度的数据检索方式分为3种方式,分别对应不同程度的用户。

搜索:当用户有相对明确的选择目标时,需定点查看,数据多且杂乱无规律;筛选:用户目标相对比较模糊,游离于一个大概的范围时,通常用于一些有清晰分类的数据;标签:查看无交集的数据内容,通常伴随时间、状态的流转。

1. 搜索

搜索可以帮助用户在巨大的信息池中缩小目标范围,快速而准确的定位到目标数据,并速获取需要的信息。由于考虑到用户需要手动输入,很难保证精准搜索,原则上所有搜索均为模糊搜索,必要精准搜索的地方使用筛选功能,给用户提供筛选选项。通常上端搜索栏不被限定搜索范围,可以全部搜索。

1.1 模糊搜索

优点:减少精准搜索带来的记忆负担

缺点:容易把不相关的信息带出来,如搜索手机号131,把ID含131数字的信息也带出来了

1.2 带标签的搜索

优点:搜索匹配精准度高

缺点:不方便,每次只能对单一条件进行搜索

2. 筛选

筛选可以帮助用户缩小数据范围,逐步找到想要的内容。或者当用户的目标就是查看某一范围的数据时,筛选将是一种十分快捷的方式。

2.1 下拉筛选

优点:空间利用率高,起到了很好的收纳作用

缺点:无法直观看到所有筛选项

2.2 平铺筛选

优点:操作效率高,筛选项一目了然,支持输入更多筛选条件

缺点:空间利用率低,不适合选项太多的情况

2.3 表头筛选

优点:筛选当前列,更直观,一般情况下表单左侧数据筛选频次越高

缺点:筛选的内容仅限于特定、单次列的筛选,对于首次使用者来说陌生,交互形式需要学习

2.4 tab标签

使用场景:标签切换一般用于和时间、状态的流转有关,且没有交集的数据内容(可以是同性质,也可以是不同性质)。主要样式有基础、卡片、胶囊等。

优点:根据标签,可以很清楚知道划分,切换tab就可以筛选内容。

缺点:分类需覆盖选项,并且保证每一项没有交集,分类不能过多,超过7±2个选项可选择下拉筛选。

提升用户体验的一个小细节:默认用户最关注的选项,而非全部,这样可以缩短查询路径,同时给出条目,让用户清晰明了每个选项的数量,便于操作。

3. 组合筛选

在企业级中后台中,用户查看的数据往往属性较多且不唯一,通过简单的检索方式很难精确定位到目标数据,所以,在实际使用时,常会将大量非交叉关系的属性进行罗列,搜索、筛选、标签切换组合出现,形成多属性组合检索。

而筛选项互相组合,其展示方式分为平铺和折叠两种。

3.1 平铺显示

选用对用户决策有意义、操作频次高的属性作为直接展示的组合检索条件,建议数量最好不超过5个(7±2法则)。

优点:大而全能最大限度避免检索条件疏漏的可用性问题

缺点:易用性不高。大而全可能为用户带来繁杂的第一印象,都是重点等于没有重点,增加用户的决策时间。

3.2 折叠展示

如果多属性组合检索中的一部分检索条件不是高频率使用的,但又是必须存在的,

可通过折叠的方式将这部分检索条件隐藏起来,将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。

总结思考

在设置组合检索项时,应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发,根据用户对各个检索项的使用频率及组合检索项的数量,来决定组合检索项是直接展示还是折叠展示;以及哪些属性直接展示,哪些属性折叠展示,为各检索项安排合理的展示方式。

案例一:不同筛选数据位置的摆放

案例讲解前先开动大家聪明的小脑瓜思考

标签: #element修改表格数据