设计笔记〡可视化大屏普适化设计指南

原创 UED团队电子云体验设计中心CXDC

当前，可视化大屏在政务、交通、物流、工业等领域被广泛应用，成为监测预警、分析决策、应急指挥和展示汇报的重要平台。然而，在可视化大屏的设计过程中，设计师通常侧重于视觉表现效果的丰富性与美观性，并未较好考虑人的因素。实际项目中，可视化大屏的决策者和观看者多为政府和企业的领导层，且大多属于40岁以上的年龄组，有着客观存在且不容忽视的生理特点和心理诉求。因此，探索可视化大屏设计中的普适化设计是十分必要的。本文将从色彩、文字、图标、图表和动效设计方面展开相关说明。

PART 1

色彩设计

从大约40岁开始，我们的瞳孔会逐渐变小，意味着进入人眼中的光会变少；我们的晶状体会逐渐浑浊，导致物体不能很好地在视网膜上成像。研究表明，60岁的视网膜只接受20岁的视网膜接受的光的40%，而80岁的视网膜只接受15%左右。种种原因导致中老年人对色彩的敏感度、明暗感知、空间感觉和认知能力均有所下降。在设计可视化大屏时，这些都是重要的考虑因素。

1.避免使用蓝色

由于晶状体变黄，会选择性地吸收蓝色光，导致同时分辨蓝色和黄色具有一定的困难。因此，界面设计时应避免使用蓝色和黄色的用色搭配，且界面上的重要元素要避免使用蓝色或不同深浅的紫色。对中老年人来说，蓝色可能会出现模糊褪色的视觉效果，蓝色元素也会大大降低界面中的对比度。

2.合适的对比度

中老年人的眼睛在分辨低对比度的图案时存在一定困难。根据美国国家眼科研究所的数据，从40岁开始，对比敏感度开始下降，到80岁时可能下降多达83%。如下图所示，某些文本颜色和背景颜色组合对于视觉敏感度较低的中老年人来说非常难以阅读。因此，高饱和度、中明度的颜色更有利于中老年人的感知。

正常视觉（左）和低视觉敏感度（右）（图源网络）

东京大学的研究人员创建了一个适用于所有人群的色彩指南——Color Universal Design，推荐使用对比鲜明且可区分的颜色。

Color Universal Design（图源网络）

3.避免过度依赖颜色

如果过度依赖颜色来提供信息，颜色混淆会引发一系列问题。根据国家眼科研究所的数据显示，全世界大约8%的男性和0.5%的女性为红绿色盲。这些百分比随着年龄的增长而增加，严重程度也随着年龄的增长而增加。在可视化设计中，应避免只使用颜色作为信息的区别手段。

正常视觉（左）和红绿色盲（右）（图源网络）

PART 2

文字设计

可视化大屏中不可避免地需要使用文字传达信息，文字的易读性直接影响着用户的观看体验。那么，我们在文字设计方面应该如何提高可视化大屏的易读性呢？

1.选用无衬线字体

在同等字号下，无衬线字体比衬线字体结构清晰，轮廓醒目，可有效避免视觉疲劳。一项研究还表明，使用无衬线字体有助于中老年人更有效地“扫描”页面以获取相关信息。常用的无衬线字体包括黑体、Verdana和Arial。

无衬线体和衬线体（图源网络）

如下图所示，在同等模糊的条件下，无衬线的正体字的可识别性是最强的，仍然能够得以辨识。此外，避免使用下划线、斜体以及装饰字体。在字体大小相同的情况下，这些字体对于有视力障碍的中老年人来说更难阅读。

无衬线体更易识别（图源网络）

2.适当的字号

人眼能分辨的最小物体与物体高度、观看距离和视角有关，即。其中，θ为视角度数，d为眼睛离物体的距离，h为物体高度。

物体高度、观看距离和视角的关系（图源网络）

研究表明，人眼视角度数＞0.3°时，才能保证文字投射到视网膜中的分辨率足够大，从而被大脑所识别。然而，由于中老年人的视觉能力下降，最小可接受视角增大至0.75°。在JIS规格的《不同年龄最小可读文字大小》中，对印刷品等反射原稿的最小字号进行了记载，可供参考。

JIS规格的《不同年龄最小可读文字大小》

*JIS规格是日本国家级标准中最权威的标准。JIS规格中对文字大小的标准，主要是针对日文，由于日文和中文有相似之处，因此有借鉴意义。

3.合适的字重和行间距

为了最大限度地提高文本可读性，一般选取1.3～1.5倍行间距。通常情况下，可以使用提高字重的方式提高文本辨识度。然而，可视化大屏通常为深色背景，暗背景上发光发亮的物体形象会引起视觉上的“光渗效应”，从而更易引起视觉疲劳。

光渗效应（图源网络）

4.避免使用移动的文本

对于中老年人而言，引起注意的响应时间和阅读文字的速度等都比较慢，所以应尽量避免使用移动的文本，并提供足够多的阅读时间。

PART 3

图表设计

图表是可视化大屏设计中的重要组成部分，清晰有效地传达信息是图表设计的核心。

1.不要依赖颜色解释数据

虽然颜色是区分不同类型数据的好方法，但仅依靠颜色可能会使图表更难理解，有时甚至无法理解。建议将颜色与以下元素进行组合展示：轮廓（线条粗细、线条类型）、图案（图形或纹理）、形状（圆形、正方形、三角形等）和文本（数据标签）。

正常视觉（左）和蓝黄色盲（右）（图源网络）

2.合理选用颜色

在不滥用颜色的情况下，颜色可以突出焦点区域，达到强调的目的。但是，避免使用过多的颜色或大量使用明亮且饱和的颜色。它们不仅会分散用户的注意力，而且过多的展示面积会过度刺激视网膜，导致眼睛疲劳。

避免滥用颜色（图源网络）

3.轴标签要水平

当轴标签内容过长，无法水平显示的情况，不推荐旋转轴标签来缩短显示宽度。推荐连续轴、时间轴保留头尾进行抽样；推荐柱形图转变为条形图，单行或者两行以保留全部轴标签内容。

不要旋转轴标签（图源网络）

PART 4

图标设计

图标是可视化大屏设计时另一个需要特别注意的模块。对于大多数中老年人来说，推理能力随着年龄的增长而下降，可能无法理解界面中的新概念设计。

1.易于区分

随着年龄的增长，视敏度也会有所下降，导致眼睛难以分辨物体的细节。这会使中老年人难以区分相似的图标和其他界面元素形状，清晰的边缘和线条是帮助用户快速分辨的关键视觉线索。

2.降低认知成本

研究发现，中老年人识别照片的能力比识别剪贴画的能力要好。因此，图标设计应该是具体的，而非抽象的，应尽可能与现实世界保持一致。受年龄与认知程度的影响，中老年人对传统图标有特殊的理解。因此，应选取符合用户知识经验的图标，这样才有利于用户清晰、快速地理解信息。

3.提高视认性

“视认性”是指一定背景中的色彩能够在多远的距离以及多长时间内被识别的程度。一般来说，颜色与背景的明度差越大，色彩的“视认性”越高。在不同底色上配以不同的图标色，视认性高低次序见下图（1表示较高,10 表示较低）

PART 5

动效设计

可视化大屏中的动效不仅能多维度展现数据，而且增加了设计的科技感。与此同时，用户的体验感也不可忽视。

1.适当延长动效时间

在使用动画效果时，可以适当地对动画的效果进行加强，延长动画的显示时间。但是需要注意避免动画元素的滥用，过多的动画效果可能引起中老年人的视觉疲劳，并分散中老年人的注意力。特别对于老年人来说，视觉线索要清晰、易于理解和交互。

2.避免眩光和亮度的迅速变化

强光线会造成老年人“暂时性失明”，即眩光。老年人的眼睛由于视觉调节性变差，眩光表现尤其明显。因此，界面设计应避免眩光和亮度的迅速变化，影响阅读性。

3.避免夸张的视差和运动效果

随着年龄的增长，中老年人对到达速度的估计能力和对三维信息的感知能力均不如年轻人。因此，动效设计应避免过于夸张的视差和运动效果，以免引起眩晕。

写在最后

本文只是对可视化大屏普适化设计的初探，要把理论变为现实，还有很长的路要走。重要的是，设计师在设计中考虑了人的因素，融入了普适化的设计理念，在仔细聆听用户声音的同时，也不忘洞察声音背后真正的诉求。

作者：刘静

往期精彩回顾

设计笔记〡快速设计提升——盒模型间距设计指南

设计笔记〡浅析商业动画电影制作流程

设计笔记〡用户深度访谈指南

雇主品牌IP形象·鲸宝来袭~

、

继续滑动看下一个