Ragic 博客
企业电子化的专家 Ragic 教你如何利用各种软件、
云服务让公司快速升级!
加入 Ragic 企业电子化的行列!
云工作术
各类应用演示
案例故事
逃离恶梦
关于 Ragic
Facebook Twitter YouTube
云数据库
博客
关于Ragic
云工作术
各类应用演示
案例故事
逃离恶梦
关于 Ragic

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

作者:Gina Tsao

你有用过这样的表格吗?

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

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

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

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

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

1.用颜色标记重点

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

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

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

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

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

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

2.统一字样式

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

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

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

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

3.善用留白

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

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

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

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

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

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

博客背后使用 Ragic! : 最强大的 No Code 企业电子化工具
把数据放在Excel上不只是拖累团队的行政效率,他也很容易出错并且无法进行任何内控。
当您的团队成长时,使用Excel管理数据就会越来越痛苦。
创建你们的第一个云数据库!

马上登记
免费试用 Ragic!

用 Google 帐号登记

北京立即科技有限公司
京ICP备2022003680号