表格可读性提升分析
作者:一叶千鸟 来源:千鸟志 发布时间:2010-05-19 13:03:00
表格(Table)可读性提升的系统总结,包括“行列组织关系模糊、单元格内容不清晰”两大方面...
前边写了个大框架,好像有点笼统,因为没有各点的图文分析。最近用表格比较多,本文具体对表格可读性的提升做个系统总结,顺便把Readability Framework更新到了v1.1。如下图:
追溯表格(Table)的历史,最早设计师们喜欢用表格来布局,因为可视化简单直观,从而大大降低了web design的技术难度。在错误理解表格的基础上,不仅用错,而且模糊了表格的真正用途。到后来web standards改革,某些不实观点又把表格打入冷宫,认为<table>是罪恶之源。
实际上,用户会有各种复杂或简单的多维度大数据量内容展示需求,为了更好的对比分析因此才用到表格(比如Excel),因为表格可以让内容能更清晰易读。比如,在记事本上用Tab也可以排出具有良好可读性的“序列”效果,但毕竟不是直观且有语义的组织模式,因此我认为表格就是为可读性而生的。
表格是web上最常用的内容表现形式,所以多年来,关于表格的设计和代码一直是考验web designer基础的经典题目。在表现层如何让表格传达更好,考验视觉传达设计的功力;在语义层如何让表格结构更灵活,考验结构表现结合的功力。二者相辅相成,共同影响表格在表现层的可读性。那么哪些因素会影响表格的传达?应该如何做具体的传达提升?看下文例子。
行列组织关系模糊
主要关于单元格之间的关系问题对可读性的影响。通过辅助手段可以让信息呈现更好的差异化,或突出更重要的信息。从需求角度再次印证,HTML结构代码与表现效果紧密相关,语义化表格是我们进一步提升用户体验的核心基础。
表头表尾和表体明显区分,表头是<thead>,表尾是<tfoot>,表体是<tbody>,三个结构性代码组合使用。其目地是为了更好的用样式表控制视觉表现,以起到明显区分的作用(通常表头、表尾的效果一致)。区分了表头和表尾更容易控制,某些浏览器直接支持只滚动表身。如下图,表头表尾与表体的层次区分明显,截图有裁切:
用边框分隔单元格,使用定义{border-collapse}来合并边框,早期CSS不受重视的年代,做1像素细线表格还是挺不容易的事。给单元格加上边框后,可以更清晰的表达数据,并且不易看岔行。但是得注意,表格的边框颜色不能过于抢眼,否则看起来会很糟糕。如下图,1像素灰色边框表格和黑色文字的对比:
间行换色,其实与“用边框分隔单元格”是解决同一类问题,间行换色更适用于表格过宽的需求,一定程度上能加强避免读错。同样,间行换色的两种颜色不能反差过大,否则看来太“跳跃”。另外,间行换色也常与1像素边框同时使用,如果不定义边框颜色,此时的1像素边框是背景色的间隙效果。如下图,1像素表格的表体区域有不太明显的间行换色效果:
间列换色,也叫隔行换色,使用<colgroup> & <col>组合标签对列进行格式化,等于是间行换色的“垂直”版本,可以更强化列与列之间的差异。虽然看起来用处有限,但往往在应对实际需求时,就是这样的简单改动可以避免使用JS再开发。如下图,分别给不同列指定背景色:
重要数据列强调,同样使用<colgroup> & <col>来控制,可以任意指定数据列强调显示,表示当前的操作结果。如下图,表格的Visits字段,表示目前正在降序排列:
猜你喜欢
- 过滤非法的SQL字符的函数代码:'*************************************************
- 我想大多写web的朋友应该和我一样,正则是不可少的,可是每次到用时去百度一下,也麻烦,存在电脑里也得找半天~换了电脑还是得靠google了~
- Css tranistions允许元素的属性在单位时间内发生平滑的过渡,在阅读完《CSS Transitions Module Level
- 在这里我想有必要再较系统说一下ADO的各种对象的方法、属性。毕竟ADO不仅应用在ASP中,VB,VC都可以用到。在这十天中我想主要提到的对象
- 在DreamWeaver中编写CSS,这种编写习惯本站(twocity.cn)并不提倡,不过由于"可视化"和操作简便,使
- mysql数据库没有增量备份的机制,当数据量太大的时候备份是一个很大的问题。还好mysql数据库提供了一种主从备份的机制,其实就是把主数据库
- 通常我们做网站,设计版面布局是第一步,如何做到版面布局具有创意又美观大方呢?这就需要一定的版面处理功底。让我们先来了解一下版面布局的步骤:一
- XML文档对象模型(DOM)是什么?可扩展标记语言XML的基础是 DOM。XML 文档具有一个称为节点的信息单元层次结构;DOM 是描述那些
- 一般情况下,网站的图片代码是这样的。<img src="./images/test.jpg"
- 这是一家游戏公司,他面试通过后 擅长的机试却没答出来,不过还是被录用了。这道题内容大概这样有条蛇它长度不固定,蛇头朝北顺时针盘旋着,请打印出
- 今天在写BLOG的Trackback时,需要用到当前页的URL地址,并且包括?后的所有参数。在网上看到以下的这段ASP代码,它的
- 两组字符串数据,需要比较其中相同的数据,并将其值相加并组成一个新的字符串数据a1="sp2=20;sp1=34;"a2=
- 从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子,感慨良多。手机网站开发,有着
- 第一步:建与mysql同构的oracle数据库实例,并更新数据。 1.期望将my
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 事务日志(Transaction logs)是数据库结构中非常重要但又经常被忽略的部分。由于它并不像数据库中的schema那样活跃,因此很少
- 以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila FF1. document.form.item 问题
- 图片外框特征参数:①dashed:虚线 ②dotted:点虚线 ③solid:实线 ④double:双线 ⑤groove:沟槽状 ⑥ridg
- 对于使用虚拟主机的站长朋友,我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- Oracle数据库作为大型数据库管理系统,近年来一直占有世界上高端数据库的最大份额,其强大而完善的数据库管理功能,以及ORACLE公司推陈出