网页设计应:提高网页表格可读性设计技巧

文章描述:提高表格可读性的一些技巧.

表格的应用

由于工作原因,经常接触到表格。我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑关系,易于帮助理解横纵信息之间的关系。

在实际的网页设计应用中,表格横纵相互独立又相互关联的模式尤其适用于:

1.组织和展示大量的信息

表格简单的结构不但能包含大量的信息,且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。

2.展示对比性信息

通过合理的布局,表格能清晰的展示出同类对比信息,便于读者分辨不同条目信息之间的关联和区别,从而关注到关键、问题条目。

总的来说,一个构造清晰的表格布局,将大大提升读者对信息的接收速度和理解程度

例如下图中苹果官网对不同型号mac book的信息陈列方式,就采用了表格的结构,清晰的展示了4款不同的macbook,及各自的性能、售价等属性,同时读者第一眼就可以扫描到并理解表格结构,横向是4款macbook的排列,纵向分别列出了各自的属性,然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比,信息完整且便于扫描。

如上所述,表格常用来展示大量的、对比性的信息,因此提高表格的可读性、便于用户快速扫描,是表格设计的关键。本文仅就笔者阅读过的几篇关于表格设计的文章结合工作中的一些拙见,整理成文,分享如下。

表格的要素

研究如何提高表格可读性之前,我们先简要阐述下表格的组成要素,这里我们暂且这么总结:表格 = 标题 + 表头 + 行标签 + 单元格数据(信息),如下图

表格标题是对表格整体的描述,应包含表格数据的来源及属性,使读者对表格内容有所认识,例如数据收集的日期、地区及其表格数据的其他属性。

行标签和列标签(表头) 是对本行/本列数据的描述,可以理解为是表格的骨架,是用户快速扫描并接收表格布局的关键要素。

单元格数据(单元格信息)这里就不在多说,是表格的主体内容。

[1] [2] [3] [4] [5]  下一页

时间: 2024-10-30 22:33:40

网页设计应:提高网页表格可读性设计技巧的相关文章

通过优化网页HTML代码提高网页访问速度

访问|速度|网页|优化 一.不要将整个页面放到到一个table中     一般大家都是用表格来进行布局的,将整个页面的内容都塞进了一个Table(表格)里,然后再由单元格td来划分各个"块"的布局,这种网站的显示速度是绝对慢的.因为Table要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度.在布局时把整个页面分成三部分,头部top.中部middle.版权(尾部)bottom.中部最好再多分几部分,因为,现在大家的首页一般都是分成好几个栏目的内

网页设计用好HTML表格标记及属性

设计|网页|网页设计 表格是HTML的一项非常重要功能,利用其多种属性能够设计出多样化的表格.使用表格可以使你的页面有很多意想不到的效果,使页面更加整齐美观. 常用表格标记 <TABLE>...</TABLE> 表格指令 . 相关属性 : · ALIGN 调整 · BGCOLOR 背景颜色 · BORDER 边框 · HEIGHT 高度 · WIDTH 宽度 <CAPTION>...</CAPTION> 表格标题 . 相关属性 : · ALIGN 调整 &l

网站设计:提高网页打开速度的技巧

http://www.aliyun.com/zixun/aggregation/9872.html">互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃. 其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题.加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化.这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧. 一.优化图片 几乎没有哪个网页上是没有图片的.如果你经历过56K

设计成功的网页

设计|网页 一.网站设计原则1.网页内容要易读2.网站导航要清晰3.网页风格要统一4.页面容量要较小5.页面内容要新颖 二.网站设计事项有了上面的设计原则作为指导,我们在具体建立网站时就应该紧紧围绕它来设计,下面就是笔者依据上述原则罗列出来的一些设计事项:1.注意视觉效果设计Web页面时,一定要用640×480和800×600的分辨率来 分别观察.许多浏览器使用640×480的分辨率,尽管在800×600高分辨率下一 些Web页面看上去很具吸引力,但在640×480的模式下可能会黯然失色.作一点

网页设计技巧:设计优秀的网页背景和设计方法

文章描述:背景真的可以为你的网站定调,在你做决定之前,你可以从图片.颜色.图案方面进行多方面的选择,不要局限你的设计风格,其实你可以做得更好的.选择一个背景主题的时候要结合你的内容,记住最重要的规则:确保你的设计是具有可读性的. 一个好的背景风格,可以为你的网站定下基调.我们将探讨关于网页背景设计以及趋势的一些优秀的例子,包括采用大图片,鲜艳的色彩和大胆的图案. 有时候你的网页设计某一部分引入注目,但大多数情况下是背景起到了决定性作用.背景设计往往可以用图片.图案.颜色色块组合而成,但如何才能设

手机网页设计原则:移动网页中的基础元素

文章描述:移动网页设计应该包含的5个基本元素. 大部分人都认为手机网页设计与电脑网页设计有很大不同,其实不是,手机网页除了小且可以触摸外,很多设计原则与电脑网页设计是共通的.这里有 5 个基本的元素,希望对设计师有所帮助. 1. 有意义的导航 在移动设备上获取信息实际上是有趣的体验,因此,令用户在使用过程中感到愉快很有必要,简单地删除屏幕上的链接(或taps)并不能达到用户友好体验的目的.导航应该包含用户需要的内容,并提供明确的路径.如果用户知道跳转的具体页面,就会进行点击. 首先,确保导航在用

网站设计的思考网页版面布局的原理

设计首页的第一步是设计版面布局.就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局.虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的.它们的基本原理是共通的,你可以领会要点,举一反三. 版面指的是浏览器看到的完整的一个页面(可以包含框架和层).因为每个人的显示器分辨率不同,所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸. 布局,就是以最适合浏览的方式将图片和文字排放在

设计理论:网页版面布局的平衡性原理

几年前网页设计还被平面设计视为不入流的设计,不过随着网络使用的普及,网页设计的整体发展有了很大的提高,越来越多的设计师专做了网页设计师! 目前,网络上有关网页制作的各种教程已经相当多,可以方便地学习到最新的技术和技巧.可是,有关网页的设计,比如设计灵感的实现,风格的确定,发展策略,技术的筛选等文章却比较少.于是针对于此,我们这次分享会就请视觉设计师袁青林来为大家介绍一下网页设计的经验,主要就页面布局的平衡性方面,来和大家交流一下.如果您有好的建议和心得,也可以留言,互相交流探讨,在此先道一声谢谢

网页设计教程(8):网页层次和空间设计

上一篇:网页设计教程(7):提高网页制作效率 一:很有必要的唠叨.有秩序,有规律,有特殊.叫层次!层次的迭代,表达出空间的存在感.点,线,面.点动成线,线动成面,面动成体,多个体的复杂构成.即为空间.当然,这里说的是数学空间或逻辑空间.可不是什么哲学空间. 二:离不开的感觉--透视:之前写过一篇关于透视的文章,这里再配几张图辅助理解.透视并不是最重要的,但它是很必要的!   三:最常用的表现手法--虚实和对比:   这是一张很常见的XP里的一张图片,看它的层次.近大远小--近实远虚--近重远轻.