网页表格的表现形式和易用性设计指南

许多人都认同这样一个现象:表格虽然是用户界面设计中的一个重要部分,但是它们却经常会被忽视。表格应该显示让用户更易读,更易扫视,更易比较的结构化数据,但在很多情况下,表格数据却显得模糊不清。这就是很多人不喜欢表格的原因。

用户的日常工作经常使用表格,但是谁会需要让他们崩溃的东西呢。要改变这样的现状,下面给出一些使表格易用的指南。

行交替样式Alternating rows styling

这是很明显的,但是事实如此吗?看看今天的WEB应用,你就会发现很多并不适用。因此,行交替样式并不明显,这就是把他列为第一个来阐述的原因。

在数据较多的多行多列表格里用不同样式交替显示不同的行,这会提高用户区分数据的能力。可以采用背景色或者背景图片,如果采用背景色,背景颜色应该比页面颜色浅或者深一点。图像背景应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格的header和footer部分应该易于识别,可以采用比表格行深或者浅的颜色。



BlinkCampaign的表格行采用了浅一点的亮绿色,header采用了稍微暗一点的绿色。

 

整行选择Full row selection

如果需要对某一行的局部做操作,让整行都可被单击选中。这种做法增大了点击区域减少了界面的混乱。一个应用的实例是,每一行只有“查看详情”可操作,鼠标悬停到这一行的时候整行样式都应该不同。有好几种方法可以实现这个效果,推荐jQuery插件的RowSelect 。



CrazyEgg应用了整行选择的方法展开当前选中行的详情(稍后我们会谈及该模式),鼠标悬停的行会高亮显示。我很喜欢他们对这块区域以及其他的应用的设计。

表格组节Table sections

当你想把相关的行组合在一起的时候可以考虑使用表格组节,组节把相关数据组合在一起,是表格的一部分。所有组节应用同样的列设置。举个例子,在一个显示国家列表的表格里,地区就是行组合的自然方式。所有的表格组节样式要有差别,并且能够收缩和展开。如果有需要,在每个组节里可以显示数据概要。


PulseApp用表格组节显示一级和二级的收支详情,每一级都可以再展开。

排序Sorting

如果不知道关键字,用户需要从大数据量的表格里查询某行时会很困难。用户在比较相近信息的时候通常会对表格列进行升降序排列。

对表格排序常用的是让表格标题可点击。排序的列应该有标记,通常是在列标题文字边放置一个三角箭头,指明当前列的顺序(升序或降序)。每次单击顺序会相反。

排序的列和不排序的列应该有明显区分。对某个重要列进行默认的排序。

TableSorter是个简单易用的插件。该插件可以对多种类型数据进行分类,你也可以自定义。该插件还支持多列排序,不过我对此不是很感冒。

OneHub应用清晰地标明了排序的列和顺序。我喜欢这个设计的原因是,即使是在如此小的区域,细节部分也做得很具体。

过滤 Filtering

当有大量数据要处理的时候过滤就很有用。使用下拉列表,单选按钮或者复选框进行过滤选择。 在下面的例子里, builditwith.me使用下拉列表来对用户的职业兴趣和当前状态进行过滤。

然而这种过滤只能事先定义好过滤值。例如,你可以对工作类型按全职/兼职,设计/开发分类,你就不能按照姓/名来分类,因为这个值有无限多。在这种情况下可以应用关键字对数据进行过滤。输入任意关键字会得到按照关键字进行过滤的结果。


Builditwith.me提供了好几种过滤方式,每一种过滤方式有对应的列表显示。

时间: 2024-11-01 12:41:50

网页表格的表现形式和易用性设计指南的相关文章

标签之美五——网页表格的设计

标签之美--网页表格的使用 通过表格,可以使网页排版更加清晰,形式更加简洁漂亮. 一.表格布局中三个重要的标签 1.<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内. 2.<tr></tr>行标签的开始和结束 3.<tb></tb>列标签的开始和结束 行标签在列标签的外层,不能单独使用,其中必须至少有一列.示例如下: ? 1 2 3 4 5 6 7 <body> <

网页特效滚动视差设计指南

  什么是滚动视差? 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快.当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过.许多游戏中都使用视差效果来增加场景的立体感.说的简单点就是网页内的元素 在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网

WINDOWS PHONE 8 UI 设计指南

  @TerryFan (思科云协作部门用户体验设计师):最近在准备Windows Phone 8的设计工作,寻找资料时看到这篇文章,感觉有点像是MSDN里design guide的总结,是快速入门WP设计的绝佳文献,由于本人对WP的理解还不够深,而文章中有很多WP的专有词汇和描述,所以翻译难免有误,希望大家指正. 欢迎关注我的微信公众号"开卷有译"获得新文章推送. ========================== 我是设计的分割线 ========================

交互设计指南:信息可及

 可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人.       也就是

用Dreamweaver制作网页表格示例教程

  DreamWeaver是个原本由Macromedia公司所开发的著名网站开发工具.它使用所见即所得的接口,亦有HTML编辑的功能.它现在有Mac和Windows系统的版本.随Macromedia被Adobe收购后,Adobe也开始计划开发Linux版本的Dreamweaver了. Dreamweaver自MX版本开始,使用了Opera的排版引擎 "Presto" 作为网页预览.使用Dreamweaver来制作网页,非常的简单快捷,能够很好的提高网页制作的效率,对网页感兴趣的朋友可以

《怦然心动——情感化交互设计指南(修订版)》一导读

开场白 怦然心动--情感化交互设计指南(修订版)本书的内容首先是关于人类行为的原则:人们做事的动机,对事物的感受以及如何作出特定的选择. 但这并非是本书的全部内容. 如果尝试去理解人类行为是本书唯一的目标,那我早就搁笔不写了,我会向你推荐其他与此课题相关的更多更好的书籍. 过去十年来,我一直致力于网上的用户体验设计.我怀疑每位进入用户体验行业的人都是从某个已有的成形的学科转过来的,比如图书馆学.视觉传达设计.计算机科学或教育学. 在互联网的泡沫时代终结之前,我以一家技术型创业公司的网页设计师和平

FreeMarker设计指南(2)

设计 FreeMarker设计指南(2) 2.数据模型 (1)基础 l         在快速入门中介绍了在模板中使用的三种基本对象类型:scalars.hashes 和sequences,其实还可以有其它更多的能力: Ø         scalars:存储单值 Ø         hashes:充当其它对象的容器,每个都关联一个唯一的查询名字 Ø         sequences:充当其它对象的容器,按次序访问 Ø         方法:通过传递的参数进行计算,以新对象返回结果 Ø    

以用户为中心的设计:网页确认框的用户体验设计

文章描述:以用户为中心的设计:网页确认框的用户体验设计. 确认框,顾名思义,对关键的用户行为进行确认,比如"询问是否删除","告知已删除".根据网上的观察,发现有的网站对确认框的设计缺乏合理性.本文谈谈自己的思考. 类别 根据触发目的,确认框分为两类:询问和告知. 询问 转推的确认框 询问,类似 Javascript 里的 confirm(),即:是否去做? 告知 Flickr 的告知 告知,类似 Javascript 里的 alert(),即:做的状态. 必要性

FreeMarker设计指南(4) (完)

设计 FreeMarker设计指南(4) (完) 4.杂项 (1)用户定义指令 l         宏和变换器变量是两种不同类型的用户定义指令,它们之间的区别是宏是在模板中使用macro指令定义,而变换器是在模板外由程序定义,这里只介绍宏 l         基本用法 Ø         宏是和某个变量关联的模板片断,以便在模板中通过用户定义指令使用该变量,下面是一个例子: <#macro greet>   <font size="+2">Hello Joe!&