用视觉画重点，让表格清楚好读的3个秘诀

你有用过这样的表格吗？

字段花花绿绿、什么颜色都有，字忽大忽小，粗体斜体各种标注，就和长辈图一样让人看得眼花撩乱！光是想像都觉得好恐怖⋯⋯

数据本身就会随着时间增加，假如再用一张像长辈图般的表单来管理，更会让数据乱上加乱、难以阅读。反过来说，如果你的表格视觉动线清楚、配色样式干净不杂乱，不仅会比较赏心悦目，管理数据时也能更有效率喔。

如何做出干净不杂乱的表单？

以设计的角度来说，“功能”考量是放在“美观”前面的。因为表单是要实际使用的东西，首现它一定要“好用”，等“好用”做到了后再来让它“好看”。所以在动手美化表单之前，第一步要先确立表单的体系结构、或至少有个大概样子：把要放的信息和字段都放到表单上，确定位置、让数据能清楚呈现。

建好一张体系结构明确的表单后，接着就可以进行下一步“美化”了。美化表单的原则是“简单就是美 (Less is more)”，这是因为表单上的信息已经很多了，若是再加上一大堆视觉装饰反而会增加阅读上的负担。把握“少即是多/简单就是美”的大原则，再应用以下三个秘诀，就能做出好看又好用的表格啰。

1.用颜色标记重点

只强调重要信息，不要所有字段都标起来

标重点的目的：让重要信息一眼被看见。

一张表单不需要长得很吸睛，但一定要清楚。很多人喜欢把字段当着色画、一个格子填一种颜色，但这就好比用不同颜色的萤光笔画同一本课本的重点，每一页都画满满只等于“什么也没强调”。

用颜色“画重点”不是要把字段当着色画，而是藉由颜色的辅助、让“重要信息”可以和“次要信息”有所区别。所以在开始选颜色前，先看着你的表单思考一下：哪些是想要马上看见的重要信息、哪些又是次要信息？

以这张管理订单的表单为例，使用这张表单时希望能“立即瞭解每张订单的处理状态”好做后续处理，因此“订单编号”和“状态”是需要先被看见的信息，所以把不同订单状态用不同颜色标记，这样一打开表单马上就能知道每张订单的状态。同样的，如果是专案管理的表单，可以用不同颜色标记运行进度，这样从列表页一眼就能得知专案运行到哪里。

要注意的是：使用多色标记时，避免同时使用强烈的对比色（像黄色和紫色、红色和绿色）。这是因为对比色虽然抢眼，但看久了容易视觉疲劳、用多了看起来也很乱。可改用同色系的不同色，如红色和橘色、蓝色和绿色等等，或使用同一个颜色的深色和浅色来做区别。真的不擅长配色的话，可以参阅这篇〈让表格更顺眼：快速帮表单选色配色的8种实用工具〉，或直接套用 Ragic 的主题喔！

2.统一字样式

制定一套样式规范，尽量使用一样的字体和字级

字的大小和颜色一样有标记重点的效果，而在排版上，字的大小更代表信息的重要程度：

和文章不同，一张表单通常不需要太多字层级和样式，但如果想在表单上使用不同字样式（如大字/小字、粗体字、红字等）又不想要表单看起来一团乱，就需要制定一套字样式规范：使用字体种类、大小字的字级、什么情形下加粗、红字用哪一个红色等等，都规定出来并遵守。

因为字样式愈多、版面看起来愈容易乱，制定一套统一的规范可以维持版面一致，避免多余的样式混淆焦点，导致表单不美观更不好用！

3.善用留白

给字更多空间，降低视觉压迫感

如果表单上有很多字段，可以在不同字段区块间多空个一行或一列。

留白的空间除了能降低密密麻麻的字造成的压迫感外，还能让字段看起来更清楚好读；就像有分段的文章比一大串连续的长信息更好阅读，只要在不同区块中间留一小段间距或空格，大脑自然就会将信息分开阅读，而不会都混在一起。

另外像地址或网址这种需要输入比较多字的字段，则可以透过调整栏宽、增加归并单元格的方式让字不要全都挤在一起，给字更多空间读起来更舒服。是个好用的小技巧喔～

把握以上三个秘诀，在美化表单时记得：Less is more.

你的表单也能脱胎换骨，既美观又实用喔！