当前位置:首页 > 经验学习 > 用户体验

15个优秀的表格设计技巧

所属栏目:用户体验 时间:2013-12-26 来源: 作者:不详 点击:

表格信息通常是很乏味的
从某种意义上来说,的确如此。一个好的表格应该以易于理解,简单明了的方式传递大量的信息。真正的重点应该 放在信息上, 对表格的guo(过)度设计会抵消这种作用。从另一方面来说,巧妙的设计不仅可yi(以)使一个表格更具xi(吸)引力, 而且可以增加可读性。
今天我们来看看提升表格功能和美观的几种方式。我们经常会在网上的价格页上看到表格的应用,因此主要以该种表 单为例。请记zhu(住)这些原则可以应用到任意类型的信息lie(列)表上(不仅限于 ).
垂直,水平或矩阵?Vertical, Horizontal or Matrix?
一如以往,我们从最明显的地方开始。第yi(一)步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择 垂直的列还是水平行,通常取决于个人偏好。大致规划下表单的内容,然后决定采取哪种方法能更好地传递信息。很显然,如果信息包含多变量,那么选择矩阵来表示。下面分别以几个简单案例来开始。
垂直

水平

矩阵

从Excel中开始Start in Excel
希望这是我第一次也是最hou(后)一次建议用Microsoft Office来进行相关设计。事实上,表格确实很容易用Excel来完成,这正是Excel的强项。用HTML来组织结构需要写复杂代码,通常会比Excel耗时。
我偶然发现了一个小的web应用程序:Tableizer ,ta(它)可以把Excel里的表格粘贴进来转换成HTML。利用这种方式你仍然需要自己写一些样式,但是会节省前期的表格构建时间。
Tableizer

使用表格生成器Use a Table Generator
痛恨Excel吗?别急,我也是。如guo(果)你想节省自己生成简单结构的HTML表格时间,网上有成千上万的表ge(格)生成器可以选用。请注意我shuo(说)的是“简单结构”。不要以为用了这些生成器你就什么都不需要做了。
这里有几款简单的免费表格sheng(生)成器:
QuackIt
Table Generator
Kotatsu
Spectrum Research
一个小样式走了好长一段路A Little Styling Goes a Long Way
现在你已经有了一个简单的表格,下面需要加一些CSS.当然你可以花大量时间选用各种样式。只需要记住,即使一 点点的颜se(色)和字体样式都可以大幅度提高表格的可读性和吸引力。
这里有一些如何正确给表格添加样式的指南。
CSS的技巧:利用基本的CSS样式表格


Veerle: 一个CSS样式表格

增加特征组Add a Featured Section
这种做法在价格列表li(里)很常见,也适用于其他的表格。看看表格的信息是否有必要让浏览者的注意力集中到某个特 定区域。用于显示属性的最佳值或者某个常用要素,用不同的颜色和/或不同的大小来区分。
有多种方法可以实现这种方式。下面举例说明几则:
不同颜色

不同大小

不同颜色和大小

对信息进行排序Make the Information Sortable

如果表ge(格)信息很多,分成几列,可以对列进行排序,用户可以选择按他们希望的方式浏览。 Mint.com对交易列表进行了pai(排)序,用户可以很容易地从按日期浏览切换到按种类浏览,从而能比较出哪一块你愿意花很多钱。如上截图所示,显然我更喜欢吃油腻的快餐。
下面是两种对表格排序的不tong(同)方法:
用Ajax (WoorkUp)对表格行排序
表格排序 JavaScript (Yoast)
使用图标Use Icons

我在上面提到,表格的信息设计要点是让用户第一眼就能看明白。通过减少必要的阅读,精心设计的图标能够提高浏览速度,增加用户dui(对)表格信息的理解。
小心这也是个双刃剑。复杂的图标也会让用户迷惑,不zhi(知)道ni(你)究竟要表达什么。
增加斑马条纹Add Zebra Stripes

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码:

学习最多的

最近更新的