15个优秀表格设计技巧.docVIP

15个优秀表格设计技巧 格信息通常是很乏味的8A73lian素材 从某种意义上来说，的确如此。一个好的表格应该以易于理解，简单明了的方式传递大量的信息。真正的重点应该放在信息上， 对表格的过度设计会抵消这种作用。从另一方面来说，巧妙的设计不仅可以使一个表格更具吸引力， 而且可以增加可读性。8A73lian素材 今天我们来看看提升表格功能和美观的几种方式。我们经常会在网上的价格页上看到表格的应用，因此主要以该种表单为例。请记住这些原则可以应用到任意类型的信息列表上（不仅限于 《table》）。8A73lian素材 垂直，水平或矩阵？Vertical， Horizontal or Matrix？8A73lian素材 一如以往，我们从最明显的地方开始。第一步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择垂直的列还是水平行，通常取决于个人偏好。大致规划下表单的内容，然后决定采取哪种方法能更好地传递信息。很显然，如果信息包含多变量，那么选择矩阵来表示。下面分别以几个简单案例来开始。8A73lian素材 垂直8A73lian素材 8A73lian素材 水平8A73lian素材 8A73lian素材 矩阵8A73lian素材 8A73lian素材 从Excel中开始Start in Excel8A73lian素材 希望这是我第一次也是最后一次建议用Microsoft Office来进行相关设计。事实上，表格确实很容易用Excel来完成，这正是Excel的强项。用HTML来组织结构需要写复杂代码，通常会比Excel耗时。8A73lian素材 我偶然发现了一个小的web应用程序：Tableizer ，它可以把Excel里的表格粘贴进来转换成HTML。利用这种方式你仍然需要自己写一些样式，但是会节省前期的表格构建时间。 8A73lian素材 Tableizer 使用表格生成器Use a Table Generator8A73lian素材 痛恨Excel吗？别急，我也是。如果你想节省自己生成简单结构的HTML表格时间，网上有成千上万的表格生成器可以选用。请注意我说的是“简单结构”。不要以为用了这些生成器你就什么都不需要做了。8A73lian素材 这里有几款简单的免费表格生成器：8A73lian素材 QuackIt8A73lian素材 Table Generator8A73lian素材 Kotatsu8A73lian素材 Spectrum Research8A73lian素材 一个小样式走了好长一段路A Little Styling Goes a Long Way8A73lian素材 现在你已经有了一个简单的表格，下面需要加一些CSS.当然你可以花大量时间选用各种样式。只需要记住，即使一 点点的颜色和字体样式都可以大幅度提高表格的可读性和吸引力。8A73lian素材 这里有一些如何正确给表格添加样式的指南。8A73lian素材 CSS的技巧：利用基本的CSS样式表格8A73lian素材 8A73lian素材 Veerle： 一个CSS样式表格8A73lian素材 8A73lian素材 增加特征组Add a Featured Section8A73lian素材 这种做法在价格列表里很常见，也适用于其他的表格。看看表格的信息是否有必要让浏览者的注意力集中到某个特 定区域。用于显示属性的最佳值或者某个常用要素，用不同的颜色和/或不同的大小来区分。8A73lian素材 有多种方法可以实现这种方式。下面举例说明几则：8A73lian素材 不同颜色8A73lian素材 8A73lian素材 不同大小8A73lian素材 8A73lian素材 不同颜色和大小8A73lian素材 8A73lian素材 对信息进行排序Make the Information Sortable8A73lian素材 8A73lian素材 如果表格信息很多，分成几列，可以对列进行排序，用户可以选择按他们希望的方式浏览。 M 对交易列表进行了排序，用户可以很容易地从按日期浏览切换到按种类浏览，从而能比较出哪一块你愿意花很多钱。如上截图所示，显然我更喜欢吃油腻的快餐。8A73lian素材 下面是两种对表格排序的不同方法：8A73lian素材 用Ajax （WoorkUp）对表格行排序8A73lian素材 表格排序 JavaScript （Yoast）8A73lian素材 使用图标Use Icons8A73lian素材 8A73lian素材 我在上面提到，表格的信息设计要点是让用户第一眼就能看明白。通过减少必要的阅读，精心设计的图标能够提高浏览速度，增加用户对表格信息的理解。8A73lian素材 小心这也是个双刃剑。复杂的图标也会让用户迷惑，不知道你究竟要表达什么。8A73l