Web开发中数据表格常见的7类筛选设计

文章转载自:http://www.woshipm.com/pd/653433.html

目录

1、以搜索的形式进行筛选

2、标签加搜索

3、搜索加高级选项

4、tab的形式切换

5、list筛选

6、全部显示筛选

7、带标签多项筛选

结语


1、以搜索的形式进行筛选

输入框可以输入用户关心的内容,下面可以做到实时筛选,也可以触发点击。但是必须支持模糊查询,否则用户必须记住所有内容,才能查出要找的内容项,这样的记忆成本太高了。

好处:只要被打了标签的内容,都可以通过这种方式筛选。可以输入多个条件,同时筛选,取并集或取交集。

坏处:必须告知用户哪些内容可以输入,像实例中这个例子,用户并不知道可以输入什么,造成不能很好的筛选,可能出现很多不相关的内容,像你输的是id号,但是手机号相似的也被列出来了。

2、标签加搜索

先选择要筛选的种类,然后输入内容。

好处:筛选的内容准确性更高。

坏处:每次只能对单一条件进行筛选。

3、搜索加高级选项

点击更多,可以下拉出更多筛选条件,供用户选择。

好处:只是一个搜索框,可以满意大部分用户的需求,如果高级用户有更高的要求,可以在更多里得到满足,减少了更多条件对用户的干扰。

坏处:放在更多里面的条件必须是不常用的,否则就会增加用户的操作成本。

4、Tab的形式切换

将结果进行了分类,放在不同的tab下,通常有一定的时间顺序,并且没有交集的内容,通常用作不同状态的表格筛选。

好处:根据tab,可以很清楚知道划分,切换tab就可以筛选内容。

坏处:tab的分类必须覆盖所有情况,并且保证每一项没有交集,tab分类不能过多,9个已经是最大。

5、List筛选

一项比较重要,作为默认显示,其他内容,相对重要级要低很多。

好处:将重要筛选进行默认,不重要进行隐藏,降低干扰。比tab占的空间小,可以放置更多筛选项。

坏处:用户不可感知哪些可以筛选,需要点击。

6、全部显示筛选

通过对内容点击,就可以进行筛选,输入项相对很少。

好处:用户只需要点击就可以筛选,操作成本低。内容都显示,用户很清楚哪些内容可以筛选。

坏处:占用空间大,如果筛选项过多,会对用户造成干扰。

7、带标签多项筛选

这种方式通常对于复杂的内容进行筛选。鼠标点击,先选择标签,输入内容,然后继续选择标签,输入内容。

好处:使搜索内容更加精确,多项内容同时筛选。

坏处:操作复杂,如果用户只筛选一项或两项,增加了很大的操作成本。

结语

以上是对表格筛选的探讨,每一种形式都有其优缺点,这就要求我们在设计的时候,要根据用户的使用习惯去设计,要符合情景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/21132.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐多款好看的报表图表配色方案(转载)

好看的图表离不开配色,好看的PPT离不开配色,好看的大屏可视化分析更离不开配色。 博主平时也要做一些数据可视化分析的大屏,一般都需要对背景、图表、数据列表等区域进行配色,根据美工那边的配色推荐,博主整理了一下平…

Vue之功能全面的表格(三)筛选表格中的数据

文章目录 学习计划状态过滤学习完成时间过滤搜索框过滤小结 学习计划状态过滤 1、对学习计划状态列进行美化 data () {return {data: [],filterType: ,statuses: [未开始, 进行中, 搁置, 完成], // 修改statusColors: [info, primary, warning, success] // 新…

ChatGPT时代:我们可能站到了自然语言编程的大门口

ChatGPT大火,我现在有种感觉:我们可能站到了自然语言编程的门口,一脚下去,也许能把门踹开。 当然,也可能会踢到一块铁板。 回顾我们的编程之路,基本上就是一个编程门槛不断降低的历史。 最早的一批前辈们…

ChatGPT对我们的影响-ChatGPT能给我们带来什么

ChatGPT日常应用 ChatGPT是一种应用广泛的自然语言处理算法,其可以应用于多种日常场景。以下是一些ChatGPT的日常应用: 聊天机器人:ChatGPT可用于构建聊天机器人,通过与用户进行自然语言交互来提供个性化的服务和支持。 新闻稿和…

申论范文:共同富裕“一定”会考的点

共同富裕是社会主义的本质要求,是中国式现代化的重要特征,当然也是公务员考试的热点,需要我们认真学习掌握。 今天,我们就用一篇申论范文,一起试试。 ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ 这里是公考隔壁班王老师独创的“…

这碗申论鸡汤,干了

如题,大家周末快乐~ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ ⭐️ 这里是公考隔壁班王老师独创的“每天半小时・申论80分”抄写团,欢迎加入我们!

申论小题赏析

第一段 第一段很明显是一个话题引入的段落,所以不用去管它 第二段 是绿色革命的话题引入,点出煤炭在建设绿色革命的过程中并不是包袱,通过煤矿改扩改建的过程中既满足了绿色城市的建设也满足了生产发展的需求,带动了经济的发展…

申论基础知识1

文章目录 前言第一章:审题第二章:单一题一、问题二、影响二、影响三、对策概括对策提出对策 前言 第一章:审题 第二章:单一题 一、问题 二、影响 二、影响 三、对策 概括对策 提出对策

计算机考试怎么考申论,公务员考试申论评分标准,这些你都知道吗?

原标题:公务员考试申论评分标准,这些你都知道吗? 距离2019年多省公务员考试还剩两三天时间,很多考生对公务员考试的阅卷规则和答题格式并不清楚,其实了解阅卷规则和评分标准,对大家答题更有帮助。下面华图教…

粉笔公考——错题集——申论

做题tips 综合 面向考试,多做题、多积累。 提升答题能力。尽量用原文表述。回归材料。针对问题,全面分析材料。反面材料也要概括,反面正说。提炼观点。归纳总结。推导要把握好度,精准、切合材料。 小题 摘抄概括归纳分析推导。…

申论~~~

方法精讲—申论 摘抄: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BbhvGncP-1666248488455)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211004205502958.png)] 归纳概括: 分析推导: [外链图…

计算机考试怎么考申论,申论高分卷是怎么来的?申论阅卷流程大揭秘

申论的阅卷方式与行测的阅卷方式不同,行测全部为客观题,因此可以采用机读阅卷的方式,而申论全部为主观性试题,必须由专业阅卷人员进行阅卷。正因为如此,很多考生就会担心阅卷人的主观喜好会影响其评分标准。对此&#…

人民日报申论万能结构

本周我们又学习了5篇人民日报申论范文,分别为: 1.《更好满足群众多层次健身需求》(3.7日,周一) 2.《让社区成为居民最放心最安心的港湾》(3.8日,周二) 3.《共同呵护文…

申论必考:社区治理

城乡社区是基层治理的基本单元,每一个社区虽小,但全国有65万个城乡社区,其服务内容与水平关乎人民日益增长的美好生活需要,关乎人民群众获得感、幸福感、安全感。 今天,我们就用一篇申论范文搞定社区治理。 ⭐️ ⭐️…

Golang 给视频添加背景音乐 | Golang工具

目录 前言 环境依赖 代码 总结 前言 本文提供给视频添加背景音乐,一如既往的实用主义。 主要也是学习一下golang使用ffmpeg工具的方式。 环境依赖 ffmpeg环境安装,可以参考我的另一篇文章:windows ffmpeg安装部署_阿良的博客-CSDN博客 …

视频剪辑配乐技巧 视频剪辑配音推荐

视频是视觉加听觉的艺术,视频的背景音乐不同,所呈现的效果也不同。接下来为大家带来大家视频剪辑配乐技巧,视频剪辑配音推荐的相关内容。 一、视频剪辑配乐技巧 视频剪辑时选好了配乐,视频就成功了一半。那如何找到合适的配乐呢…

OpenAI刚融资100亿,DeepMind CEO急了?呼吁AI圈减少科研竞赛!

DeepMind一直是谷歌的骄傲。 作为谷歌母公司Alphabet的子公司,DeepMind是世界领先的人工智能实验室之一。成立13年,它交出的成绩单,十分亮眼。 不得不说,DeepMind在算法上是有点东西的。 2022年7月,AlphaFold大爆。202…

公司增资的方式有哪些?

一、公司增资的方式有哪些? 增加资本的方式主要有增加票面价值、增加出资、发行新股或者债转股。 1、增加票面价值 增加票面价值,是指公司在不改变原有股份总数的情况下增加每股金额。通过这种方式可以达到增加资本的目的。譬如,法定公积金&a…

增资扩股对于企业(公司)来说十分重要,你不得不重视

所谓增资扩股,是指公司为扩展消费运营范围,优化股权结构和比例,进步公司资信度和竞争力,依法增加注册资本的一种行为,一家成功的企业,在其展开壮大的过程中,常常要阅历一次又一次的增资扩股。在…

知识管理——知识经济时代的增资利器

工业经济时代,企业管理的重点是如何增加生产、加快流通和销售。知识经济时代,企业处在知识化、信息化的系统环境中,面对急剧增长的知识和信息,面临一种以知识为基础的更高形态的竞争,企业的兴衰成败、实力强弱已不再取…