企业级中后台产品通常大量使用表格来展示结构化的数据,对表格数据进行检索,是一个常用功能。在日常设计工作中,我们经常不加思考便产出一个个带有表格数据检索功能的页面。然而,体验良好的表格数据检索功能,需要充分考虑用户的需求和具体的场景,选择合适的数据检索方式及数据检索模式。
关于表格数据检索,我将分两个维度进行探讨,一个是较细粒度的方面,围绕搜索、筛选、排序这三种「数据检索方式」展开,在另一个维度,将围绕表格数据检索这个功能进行,来探讨一些常见的「数据检索模式」。
整体的大纲概览如下:

本节将从一些常用的数据检索模式出发,来聊一聊各模式适合的使用场景,以及在设计时需要注意的问题点,并在此基础上,总结一个较为通用的企业级中后台产品的数据检索模式。


一、单搜索框模式

单搜框的数据检索模式,多适用于可简单通过一个属性就能定位到目标数据的场景。如果对页面空间要求比较高,也可通过单搜索框来完成复杂场景的搜索需求。

1、单属性搜索

  • 通过某个特定属性就可以快速定位到目标数据。
  • 此特定属性通常是具有唯一识别性的,高使用频率的,对用户决策有意义的。

2、切换属性搜索

  • 切换属性搜索,本质上是属于单属性搜索的一种。
  • 如果有多个常用的搜索属性,且希望每次都有比较高的搜索精确度,但页面空间比较局限,可使用切换属性搜索。
  • 初始的默认属性应选择使用频率最高的那一个,如果几个属性的使用频率差不多,且追求便捷性,可将多属性模糊搜索作为默认设置。

3、多属性模糊搜索

如果有多个常用的搜索属性,对搜索的便捷性要求高于搜索结果的精确性,则可选用多属性模糊搜索。

4、多属性组合搜索

  • 对页面空间要求比较高,无多余空间用于搜索模块,但需要进行多属性组合搜索,得到精确的搜索结果。
  • 使用单搜索框来实现多属性组合搜索,将会使搜索交互复杂化,增加用户的操作难度,如非必要,应避免作为常用的搜索方式。

二、多属性组合检索模式

多属性组合检索模式适于属性比较多,缺乏具有唯一性的属性,用户通过简单的检索方式难以精确定位到目标数据。从用户的角度来说,用户通常具有更强的目的性,期望更精确的搜索结果。多属性组合检索模式通常更适合于专家用户,即那些对于目标数据有明确的定位,知道可以通过哪些属性精确定位到自己想要的数据。多属性组合检索模式的用户任务流为:输入关键字+选择筛选条件 > 得到搜索结果 > 找到目标数据,一次性输入就得到想要的数据。

在在多属性组合检索模式下,本文将针对以下两点进行探讨:

1、检索项的设置

在多属性组合检索模式中,理想的状态下,大多属性之间应是交叉关系,目的是通过这些交叉关系,缩小目标范围,精确定位出目标数据。但在实际使用时,为了方便快捷,常会将大量非交叉关系的属性进行罗列,形成多属性组合检索。

在设置组合检索项时,应考虑每一项的必要性,甚至是使用多属性组合检索模式的必要性。大而全能最大限度避免疏漏的可用性问题,但在易用性角度,大而全可能为用户带来繁杂的第一印象,增加决策的时间。总之在组合检索项的设置方面,要从实际场景中用户对各属性的使用频度来考虑,并为各检索项安排合理的展示方式。

2、检索项的展示

可根据组合检索项的数量,以及各个检索项的使用频率,来决定组合检索项是直接展示还是折叠展示,以及哪些属性直接展示,哪些属性折叠展示。

  • 直接展示:选用高识别度、高使用频率的、对用户决策有意义的属性作为直接展示的组合检索条件,不建议过于广泛,数量最好不超过5个(7±2法则)。
  • 折叠展示:如果多属性组合检索中的一部分检索条件不是高频率使用的,但又是必须存在的,则可通过折叠的方式将这部分检索条件隐藏起来,将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。

三、模糊搜索+精确筛选模式

模糊搜索+精确筛选,其实也是多属性组合检索的一种,但使用场景有所不同:用户对于要找的数据没有明确的定位,仅有一些模糊的信息,且数据可用于搜索的属性比较多,无法确定使用什么属性进行搜索,则可以通过模糊搜索捞出一堆可能相关的数据,再通过精确筛选逐步缩小范围,找到目标数据。对应的用户任务流为:输入关键字 > 得到搜索结果 > 选择筛选条件 > 找到目标数据。

在模糊搜索+精确筛选模式中,由于此场景下的用户目标通常不那么清晰,因此精确筛选通常使用平铺的方式。如果精确筛选的使用频率不高,则可以使用折叠方式将精确筛选部分隐藏起来。如果精确筛选项有2个及以上,则应当设置一次性清除所有检索条件的功能。


四、表头检索模式

表头检索,即直接在表格的表头中找到对应的属性,在此属性下对属性值进行检索。表头搜索会受到表头内容的限制,对当前列的检索,十分直观,但局限性在于检索的内容仅限于当前表格中的内容。表头搜索每次只能对一列属性进行操作,在进行多属性的交叉搜索时,操作步骤可能会比较多,表格刷新也更频繁。

标题检索有表头搜索、表头筛选、表头排序三种类型,其中表头搜索使用并不广泛,对于强搜索场景而言,表头搜索过于隐蔽与简单,表头搜索更适于弱搜索场景。表头筛选和表头排序,在表格数据检索中使用广泛,如果用户没有强烈的组合检索需求,表头筛选与排序是十分直观与便捷的。

对于表头检索,当触发某个表头检索项时,应当有所标识。每个表头筛选项,都应有便捷的清除检索条件的功能,如果表头检索项有2个以上,则应当设置一次性清除所有检索条件的功能。


五、自定义检索模式

如果可用于搜索的属性特别多,搜索场景十分复杂,用户会因场景或习惯的不同而使用不同的检索属性,难以统一确定,则可使用自定义检索项,来定制因人而异的常用属性。

如果用户用户有常用的搜索关键字或组合搜索条件,则可增加“搜索历史”功能,但如果是强需求,则应增加定制关键词/搜索条件的功能。


六、总结

以上是一些常见的表格数据检索模式,但对于企业级中后台产品而言,什么样的检索模式是高效且通用的呢?首先,企业级中后台产品的用户通常是目标明确,效率至上的,这基本上就将C端产品常见的平铺式逐步筛选方式排除了。对于大多数产品而言,有复杂检索需求的场景是少数的,多属性组合的单搜索框,以及平铺的多属性组合检索方式将是不通用的。

综上所述,一个适合于企业级中后台产品的表格数据检索模式,可总结为:单/切换属性搜索 + 表头筛选/排序 + 折叠的多属性组合检索(可选)。

1、常规场景

在常规场景下,使用单/切换属性搜索 + 表头筛选/排序 的模式,至于是单属性搜索还是切换属性搜索,则看需求中需要被检索的属性个数。对于切换属性搜索,建议将自动识别属性作为默认设置,也就是默认为多属性模糊搜索,这将进一步减少操作复杂度,适合于多数简单搜索需求的用户。另外,搜索的触发方式同时使用回车与按钮触发,满足不同操作习惯的用户。

如果有筛选非当前表格中内容的需求,则增加单独的筛选项,筛选使用即时触发方式。

应为搜索/筛选配置快捷的输入清除方式,以提升易用性。

2、复杂场景

在有复杂检索需求的场景下,增加折叠的多属性组合检索功能,以满足专家用户的需求。


本次探讨在此告一段落,以上这套通用的企业级中后台产品的表格数据检索模式,还需在日常设计工作中多实践、多验证。

easyui datagrid 多表头数据错位_表格数据检索(二)相关推荐

  1. exce中让两列数据一一对应_表格数据对比眼花缭乱、痛苦不堪,找对方法,1秒搞定...

    [温馨提示]亲爱的朋友,阅读之前请您点击[关注],您的支持将是我最大的动力!#学问分享官# 在我们日常工作中,经常碰到两列数据或者两个表格对比,找出差异数据,如果表格的数据太多,靠肉眼一行行对比,即使 ...

  2. EasyUI DataGrid DetailView(数据表格详细展示带子表格)

    Mark一下EASY UI 的数据表格详细展示使用记录. 第一步:创建页面布局 这一步主要是引用Easy UI的JS,除了easyui.min.js还有datagrid-detailview.js & ...

  3. easyui表单网格列错位_《HTML5从入门到精通》——第3章 HTML表格与表单

    <HTML5从入门到精通> ◎千锋教育高教产品研发部/编著 (清华大学出版社出版) 目 录 第3章 HTML表格与表单................................... ...

  4. JQ 导出easyui中datagrid中的数据到excel表格中

    ///前端 <a href="#" class="easyui-linkbutton" id="id_exportTableToEcxel&qu ...

  5. easyui datagrid 每行数据添加 按钮

    今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一 ...

  6. EasyUI DataGrid 多级表头设置

    使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true,fitCo ...

  7. easyui datagrid加载数据的三种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  8. easyUI datagrid 单元格数据的修改,保存,json 数据的转化

    参考网址:http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html 参考资料:easyui demo,json.js $( ...

  9. JQuery EasyUI datagrid 复杂表头处理

    $('#day_health').datagrid({url: "sqb_bweb_day_health.aspx?mode=day_health",pagination: tru ...

最新文章

  1. 懒人神器 !一个创意十足的 Python 命令行工具
  2. CVPR 2021|一个绝妙的想法:在类别不平衡的数据上施展半监督学习
  3. PcGAN:一种用于一次学习的噪声鲁棒条件生成对抗网络∗
  4. Gevent异步服务类实现多姿势WEB实时展示
  5. sublime linux下无法输入中文
  6. hash table(开放寻址法-双重散列实现的哈希表)
  7. matlab 编译 java_MATLAB编译器运行时(MCR)编译器
  8. 如何将一棵LSM-Tree塞进NVM
  9. 禅道的基本使用(创建项目、维护部门、用户、产品、提出需求、创建测试用例等)
  10. Redhat 设置cntlm代理步骤
  11. 微型计算机基本原理与应用pdf,微型计算机原理和应用.PDF
  12. Meta Learning | 加了元学习之后,少样本学习竟然可以变得这么简单!
  13. ios uiswitch 开关_IOS开发(四):开关控件UISwitch
  14. 地坛——我的最爱 (2006-11-12 09:33:18)
  15. 漂亮女人美丽秘诀------猕猴桃(奇异果)
  16. 【Windows 11】终端美化配置(优化)
  17. 数据结构,关于链表的问题,为何直接free()不会造成断链。引用的好处
  18. matlab的三维矩阵含义
  19. threeJS导入FBX模型
  20. c语言字符串去重用指针,用几条shell命令快速去重10G数据

热门文章

  1. Docker 的基本原理及快速入门
  2. Python-爬取中国天气网天气并通过邮箱定时发送
  3. java xml 节点换行_Winform中对xml文件进行保存时空白节点自动换行问题的解决
  4. python自动测试u_自动化测试——Selenium+Python之下拉菜单的定位
  5. redis pub/sub 聊天
  6. ElasticSearch日志删除命令
  7. STL标准库-容器-set与map
  8. solidity智能合约[17]-动态长度数组
  9. Spring Cloud 微服务入门(二)--Spring Cloud 架构
  10. 错误:android.util.SuperNotCalledException