web应用中表格的可读性提升分析
在PC端的网页设计中中表格使用比较多,web宽阔的大屏幕上通常会把全部信息铺开,因此混合的大量多类型多维度变量的信息统计和操作,这时使用表格可以将信息进行整理归类,易读易操作。
本文具体对表格可读性的提升做个系统总结,实际上,用户会有各种复杂或简单的多维度大数据量内容展示需求,为了方便整理归类进行对比,因此才用到表格的排列样式应当方便对比、清晰易读。下图展示了表格的可视规则:
知其然,更要知其所已然。
上图只是告诉我们如何处理行列区分以及单元格表头的对齐方式,下面开始碎碎念。
行和列的处理方式:
如果是横向对比为主的话,用间隔换色。表头和文字的背景色颜色需要着重区分出来,让用户清晰有规律的进行比对,避免串行。
如果是竖向比对为主的话,间隔换色或者border分隔都可以,最重要的是给出竖向的分割,让用户清晰有规律的进行比对。
当然横向竖向做出区分后,单元格的对齐方式就是最重要的了,可以让视觉线更清晰规整。
表头和纵向单元格内容的对齐方式
通常表头左对齐还是右对齐通常是由单元格的对齐方式决定的,单元格左对齐则表头左对齐;单元格右对齐则表头右对齐;下边我们具体讲一下,单元格的对齐方式。
单元格居中对齐&表头标题居中对齐:
居中对齐 1.字数较少且字数接近,这种情况其实无论怎样的对齐方式都没问题,比如操作或状态,且纵向无需比对。
单元格左对齐&表头标题左对齐:
单元格左对齐 :一般文字较多都会采用左对齐,比如长短不一的标题或者描述,通过左对齐来统一视觉线,so,表头单元格一同左对齐。
单元格右对齐&表头标题右对齐:
右对齐:一般数字会采用右对齐,特别是金额差距较大,从万元到一元,可以通过右对齐的比对一眼看出来是几位数,判断金额大小。出于视觉线的统一,so,表头单元格一同左对齐。
表头标题居中对齐&单元格任意对齐方式:通常表头标题默认居中对齐,因为标题字数既有2个字也有8个字不等,居中显示更平衡,视觉跨度也较小。这是最常用的表头对齐方式。
这是几种常规的表现方式,希望大家能由浅入深的去去考量,当无可避免的涉及到大量多类型多变量的信息,表格的样式规则也变得复杂多样,不能以偏概全,需要设计者心中有考量、规则。
so,就到这里吧,下期见。