快速业务通道

网页设计技巧:网页表格设计技巧总结

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-02

这种做法在价格列表里很常见,也适用于其他的表格。看看表格的信息是否有必要让浏览者的注意力集中到某个特 定区域。用于显示属性的最佳值或者某个常用要素,用不同的颜色和/或不同的大小来区分。

有多种方法可以实现这种方式。下面举例说明几则:

不同颜色

不同大小

不同颜色和大小

对信息进行排序Make the Information Sortable

如果表格信息很多,分成几列,可以对列进行排序,用户可以选择按他们希望的方式浏览。 Mint.com 对交易列表进行了排序,用户可以很容易地从按日期浏览切换到按种类浏览,从而能比较出哪一块你愿意花很多钱。如上截图所示,显然我更喜欢吃油腻的快餐。

下面是两种对表格排序的不同方法:

用Ajax (WoorkUp)对表格行排序
表格排序 JavaScript (Yoast)

使用图标Use Icons

我在上面提到,表格的信息设计要点是让用户第一眼就能看明白。通过减少必要的阅读,精心设计的图标能够提高浏览速度,增加用户对表格信息的理解。

小心这也是个双刃剑。复杂的图标也会让用户迷惑,不知道你究竟要表达什么。

增加斑马条纹Add Zebra Stripes

这是一个非常基本的概念,可以追溯到信息表格的存在。加入交替行颜色可以帮助用户集中视线,把在边上或者底 部设定好的分类信息和表格中心的浮动信息关联在一起。这个简单的技术可以增加大小表格的可读性。这确实是一个好的经验法则,如果你的表格需要用户关联分开的信息,那么始终包含斑马线(或其他视觉辅助)。

下面是一些给表格增加斑马线的免费资源:

Styling Zebra Striped Tables With CSS (CSS Newbie)
MooTools Zebra Table Plugin (David Walsh)
PHP Zebra Striping a Table (CSS-Tricks)
jQuery Zebra Stripe a Table (CSS-Tricks)

为Web 2.0做好准备

闪亮的web 2.0 样式设计可能有点过度使用。但是这确实可以很快抓住眼球。我绝对不建议对已经很复杂的表格增加太多冗余的花哨耀眼的元素,在这种情况下,需要选择简单的方式。然而,如果你需要设计一个只有几项的小表格,那么也不妨让它看起来神奇一点。

极简主义

不喜欢上面的耀眼web 2.0样式?没关系,还有一种很强的观点认为应该减少表格的图形。这种做法可以让用户没有任何干扰的只关注内容。使用干净细微的网格线(或没有线条),简单的字体和颜色,可以很好的和背景形成对比。

增加搜索功能Add a Search Feature

有时候仅仅增加排序功能是不够的。当你有成页的内容要排序的时候,最好的方法是使用搜索。

我找到的下

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号