|
因为用户首先会阅读最具视觉重量的内容,因此,对用户判断有决策作用的重要内容可以尽量凸显。例如状态上的异常可以用高亮色标出等。表格中也可以用图形化的形式来帮助用户快速搜索信息,例如在表格中使用进度条来表明用量等信息。
(4) 将关键信息放在最左侧 根据用户F型扫视的习惯,可以尽量将用以识别整个条目的关键信息放在最左侧,例如名称等唯一标识性信息。 (5) 尽量提供排序筛选功能 适时的排序筛选功能也可以帮助用户在大量的信息中按照顺序找到自己想要的信息,或快速筛选出自己想要的信息。 (6) 将异常状况置顶显示 对于有异常的条目,最好可以标红置顶显示,让用户一进入页面就能快速注意到异常状况。
二. 易读性 1. 保证易读性的常见做法 表格的行高影响的另一个方面,就是每行信息的易读性。对于表格易读性的研究我实在没有找到什么资料,但对于文字信息排版的易读性,却是有一些常用习惯的。 在文字排版中,行高的选择一般为字号的1.2~1.8倍,段间距通常使用一个行高的距离。行高的定义如下图所示,开发同学在实现设计稿时,通常也是按照行高来写的,而不是像设计同学一样按照文字的尺寸来计算间距。
在考虑表格的行高时,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑,文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯。 2. 根据常见做法,我这边给出了几个推荐的行高值 表格行高48px,字号12px,文字行高是字号的1.5倍即18px,上下间距是字号的1.2倍即15px,文字与分割线的实际间距为字号的1.5倍18px。使用这种行高整个表格会比较透气,在小屏下整屏可以显示9行,对于扫视效率影响不大。 表格行高42px,字号12px,文字行高是字号的1.5倍即18px,上下间距是字号的1倍即12px,文字与分割线的实际间距是字号的1.2倍即15px。使用这种行高的表格间距较为适中,在小屏下整屏可以显示10行。 表格行高32px,字号12px,文字行高是字号的1.3倍即16px,上下间距是字号的0.6倍即8px,文字与分割线的实际间距是10px。这种表格比较紧凑,可以用与卡片中的小型表格等空间比较小的地方。
3. 关于行高的更多做法 除了将文字行高设定为字号的1.2~1.8倍,将上下间距设定为字号的1~1.5倍这样的做法外,关于表格的行高的设定还有更多的一些做法,来保证各分辨率、各场景下获取信息的效率与易读性。 (1) 不同分辨率使用不同行高 为了给大分辨率和小分辨率用户都提供较好的体验,可以设计两套不同的行高,在大分辨率下显示较高的行高,给数据间提供更多呼吸的空间;在小分辨率下显示较小的行高,使一屏内可以看到更多的行高。Gmail就是这样设计的,如下图所示:
(2) 不同场景下使用不同行高 为了保证不同场景下的体验,也可以在不同场景下使用不同的行高。例如在有多卡片的概览页,某个卡片中有表格,在这种场景下,卡片的尺寸都很小,空间有限,此时就可以使用较小的行高,保证此场景下的体验。例如google analytics的dashboard中的表格,如下图所示:
(3) 用户可自行设置行高 实在没办法判断怎样的行高对用户来说是合适的时候,可以把选择交给用户,让用户自己设置表格行高,虽然说尽量给用户提供少的选择可以减少用户的思考,但在表格不显眼的地方提供这种无伤大雅的小选择,对用户不会造成什么干扰,反而用户发现时会觉得是个小惊喜,会觉得在细节上设计师考虑了很多,所以在开发资源可以满足的时候,也可以尝试这种方式,如下图(来自Andrew Coyle的文章)所示:
|












