面向用户查询的数据表格设计
来源:互联网 发布:包你说 小程序 源码 编辑:程序博客网 时间:2024/06/08 16:41
面向用户查询的数据表格设计
- 原文:Refining Data Tables :: UXmatters
- 作者:Luke Wroblewski
- 译者:JunChen Wu
表单可能是当今 Web应用里面最常见的界面元素了,有很多这方面的文章。表单受到如此的重视,是因为它们对从用户那里取得信息起着关键的作用。如:用户注册(表单)是加入社区的第一步;确认订单(表单)是买卖成交的关键。但是,用户输入伴随而来的是系统的输出,且用户提交的信息常会以列表数据(tabulardata,列表状的数据)的形式反馈给用户。
数据表格可能是继表单后第二常见的界面元素了,数据表格也常被用来构建 Web 应用。用户通常需要增加、修改、删除、搜索和浏览比如人名列表、地名列表或者其他类似的列表。所以在这里,表格的设计对应用的有效性、可用性起着关键作用。和表单的设计一样,也有很多方式设计列表数据。
在之前的专栏中,我写过一篇文章 So the Necessary May Speak,讨论了怎样减少表格的内容元素和视觉设计,实现用最少的“设计”进行高效的沟通。我不会再复述之前的观点,本文主要集中在如何通过界面设计来帮助用户面对大量数据单元时找到所需要的信息。
过滤器
当表格呈现的数据量很大时,用户很需要一些筛选条件来过滤信息。在这种情况下,准备一个完整的数据筛选条件列表是十分有效的,可以很快地告诉用户有哪些细化的选项。
图一是 Shopping.com使用的数据筛选条件设计。在这个例子里,一份完整且可用的筛选条件列表通常显示在每组产品搜索结果的上方。并且也有分组——如价格、品牌、尺寸、类别、附注,这样也可以让用户迅速知道选择其中一项过滤结果后,还有哪些条件剩余。这种位于表格上方的设计,垂直空间就显得非常珍贵,因为你也不会想弱化表格的数据。所以,一般针对这种方案,不会显示每组所有的条件,而是固定显示多少个,然后在后面增加“查看所有”的链接。(可以看淘宝网的例子,译者注)
图一 表格上部的数据筛选条件
当然,你也可以把筛选条件列表放置在表格的右侧或左侧,如图二所示。虽然这给每组条件提供了更多的空间,但也因此部分筛选条件可能需要滚动页面才能看到。
图二 表格左侧的数据筛选条件
在一些情况下,很可能是有限个数或常用的筛选条件,那么只显示那么几个条件就可以了。如图三所示,一组 Tab、链接或者下拉菜单,提供了少量的但高权重的筛选条件。
图三 选项式的筛选条件
触发器
当有筛选条件太多不能一次显示或者数据的筛选在产品设计中只是次要的——比如,仅仅为了获得所有数据的一览而不是要挑选出某条记录,那么不错的方法就是既让选项可以操作,又不是一直出现在界面上。(即需要用户触发)
举个例子,一个用户可能可以通过点击类似于搜索选项之类的链接,来展开一组筛选条件,就是说仅当用户需要精确搜索的时候才显示那些筛选条件。如图四种的例子,当用户点击搜索选项的时候,一组筛选条件即会动态的出现在表格的上方。默认情况下,三个最常用的搜索决定了三个筛选条件。当然用户也可以选择另外一组或者增加一个筛选条件。
图四 需要用户触发的筛选条件
有时候,最快的从表格中找到想要的记录是查询特定的字段值。在这种情况下,可以给表格的每一列(即字段)增加值搜索,如图五所示。这样设计的缺点就是会增大表格的宽度,特别当一些字段由短小的数字或字母组成时。
图五 给每一列增加搜索(筛选)
当筛选条件之间存在明显的关系时,最好能够在操作上也体现出来。比如图六所示,从界面上明显的表现出了筛选条件及交互操作的层级关系。
图六 筛选条件间的层级关系
图四至图六的例子中,都是关于触发式的筛选条件,小结如下:
- 显示和隐藏筛选条件,如图四;
- 提供用户搜索每一列特定值的输入框,如图五;
- 根据用户操作,设计具有层级关系的筛选条件,如图六;
当然,这些方法也不是任何情况都通用的,还是得视情况而定。
排序
提供对数据的排序也是非常有效的。排序可以通过用户单击表头或者单击预设的排序链接,如图七所示:
图七 两种常见的排序设计
虽然上文讨论了那么多例子,但肯定不是全部。如果你有好的方案,请不吝告知 :)
延伸阅读
- Faceted browsing
英文原文的评论也值得一看。
查看或发表评论
- 面向用户查询的数据表格设计
- JAVA项目后台查询的数据生成Excel表格并提供给用户下载
- 查询数据库中表格的数据
- .NET应用架构设计—面向查询服务的参数化查询设计(分解业务点,单独配置各自的数据查询契约)
- 面向垂直搜索引擎基于表格特征的数据抽取方法
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- ORACLE用户常用数据字典的查询
- sql 不同表格不同数据的前几行查询
- jsp 用表格显示出jdbc查询出的数据
- 表格全选/添加/查询用户/修改密码
- 用户表格模板_查询_排序
- 面向对象的用户体验设计(持续更新10.29)
- 面向对象的用户体验设计(持续更新10.29)
- 面向移动互联网的用户行为分析和数据挖掘
- 用excel进行设计(103):控制数据表格的尺寸
- android设计相关的一些表格与数据
- 使用设计模式和UI的dataGrid(数据表格)进行表格的增、删、改、查
- 面向对象的NHibernate数据查询语言-HQL
- WebService与.NET Remoting的区别
- C#编码规范
- Javascript的Event对象详解
- IIS5、IIS6、IIS7的ASP.net 请求处理过程比较
- 原来都是我
- 面向用户查询的数据表格设计
- 生活的忠告
- 真不知道从何入手
- 上传了一个基于gdi的ui开发引擎,请各位朋友试用~
- San Francisco
- flash.utils.ByteArray compressing 4.1MB to 20K
- 工厂方法模式(Factory Method)
- WHAT'S PYTHON
- Washington D C