TCIDADS00011-2022数字大屏可视化设计指南

ICS13.180

CCSA25

CIDADS

中国工业设计协会团体标准

T/CIDADS00011—2022

数字大屏可视化设计指南

DesignGuidelinesForVisualizationsonDigitalWallScreens

全国团体标准信息平台

2022-6-14发布2022-6-20实施

中国工业设计协会发布

T/CIDADS00011—2022

数字大屏可视化设计指南

1范围

本文件提供了数字大屏可视化设计的建议。

本文件适用于数字大屏可视化设计。

2规范性引用文件

下列文件中的内容通过文中的规范性引用而构成本文件必不可少的条款。其中，注日期的引用文件，

仅该日期对应的版本适用于本文件；不注日期的引用文件，其最新版本（包括所有的修改单）适用于本

文件。

GB/T5698-2001颜色术语

GB/T10000中国成人人体尺寸

GB/T16251-2008工作系统设计的人类工效学原则

GB/T18910.11-2012液晶显示器件第1-1部分：术语和符号

GB/T18976-2003以人为中心的交互系统设计过程

GB-T18978.10-2004使用视觉显示终端(VDTs)办公的人类工效学要求第10部分对话原则

GB/T19710地理信息元数据

GB/T21051-2007人-系统交互工效学支持以人为中心设计的可用性方法

GB/T30317-2013地理空间框架基本规定

GB/T32632.2-2016信息无障碍第2部分：通信终端设备无障碍设计原则

GB/T37118-2018地理实体空间数据规范

CJJ/T157-2010城市三维建模技术规范

CH/T4017-2012矢量地图符号制作规范

3术语和定义

下列术语和定义适用于本文件。

数字大屏digitalwallscreen

用于信息展示的大尺寸屏幕（一般指比个人电脑更大的屏幕）物理设备（包括拼接屏）与所承载的

可视化内容的统称。

用户user

与系统交互的个人。

[来源：GB/T18978.10-2004，2.2]

图表chart

可直观展示统计信息属性（时间性、数量性等），对知识挖掘和信息直观生动感受起关键作用，将

对象属性数据直观、形象地可视化的图形结构。

注：图表经常以所用的图像命名，例如柱状图、折线图、饼状图、圆环图等。

全国团体标准信息平台

格式塔原理gestaltprinciples

一个由心理学演变过来的设计原理，强调视觉感知的整体性，即大脑会将复杂的视觉内容转化为相

互关联的，存在一定结构性的整体。

1

T/CIDADS00011—2022

视距sightdistance

数字大屏显示设备所成数字影像平面到瞳孔的水平距离。

视域visualfield

当眼睛位置不动时，被观察物体的立体角范围。

分辨率resolution

有效显示区内水平和垂直方向上的像素数。

[来源：GB/T18910.11-2012，2.3.13]

图像分辨率imageresolution

图像单位英寸中所包含的像素点数。

字号fontsize

字体的大小。

色对比contract

同时或相继出现两部分颜色差异的主观评价。色对比分为色调对比、明度对比和彩度对比等。

[来源：GB/T5698-2001，5.34]

色调hue

表示红、黄、绿、蓝、紫等颜色特性。

颜色的三属性之一。

[来源：GB/T5698-2001，5.7]

渐变gradient

色彩渐变是色彩的一种有规律、有节奏的变化，包括单色渐变、双色渐变、多色渐变。

绝对位置absoluteposition

相对于设计尺寸为参考，展示要素与设计尺寸上、下、左、右间的空间布局关系。

相对位置relativeposition

相对于自身原本应该在的位置为参照点，展示要素与周围展示要素的空间布局关系。

地理要素geographicfeature

现实世界地理现象的抽象。包括表示地球表面自然形态所包含的要素，如地貌、水系、植被和土

壤等自然地理要素与人类在生产活动中改造自然界所形成的要素，如居民地、道路网、通讯设备、工

农业设施、经济文化和行政标志等社会经济要素。

[来源：CJJ/T157-2010，3.2]

地图符号mapsymbols

地图上用来表示地面各要素、质量、数量和分布特征的颜色、形状和大小不同的图形、记号和文字

的各种图形。全国团体标准信息平台

4基本原则

符合大屏观众的基本特征

4.1.1宜充分考虑目标人群的人体尺寸特征。大屏悬挂高度建议根据GB/T10000中的立姿眼高和站

2

T/CIDADS00011—2022

姿眼高来确定。

4.1.2宜充分考虑目标人群的人体视觉特征。根据不同数字大屏的使用背景、硬件尺寸等要求，基于

视觉信息的传达特点，采用与目标用户需求相匹配的视觉感知特性参数。具体包括：

a)根据视距、观察距离和硬件尺寸，确定适当的元素大小（如字号），保证用户在特定距离范围

可以看清大屏上的对象。

b)根据人眼对颜色的感知方式，保证亮度、对比度和颜色属性最为舒适。

4.1.3宜充分考虑目标人群的年龄、心理认知、能力局限、习惯等个体属性，以及知识、经验、常识、

等技能特性，必要时宜确定不同类型的用户群。

符合大屏的使用情景

4.2.1宜充分考虑目标人群在阅读大屏时的用户任务，包括：用户使用数字大屏的总目标，以及可能

影响可用性的任务特性。例如：任务需求类型、任务频次、持续时间、时间限制、安全诉求等。

4.2.2宜充分考虑用户使用数字大屏的环境特征，包括：数字大屏所处的场所空间大小、照明状况、

湿度、温度、周围音量等。

4.2.3宜充分考虑大屏本身的硬件特征，包括：包括屏幕物理尺寸、屏幕硬件类型及规格（LED/DLP/LCD/

其他，以及具体的规格参数）、物理总分辨率、视频信号输出分辨率。

保证大屏呈现内容的可读性

4.3.1有效传递业务含义，与行业的具体情况相匹配。

4.3.2根据大屏展示内容和效果输出要求，选择适合的屏幕边框宽度和拼接方式。注意关键信息、较

小或较精细的元素（如文字、图表等）需绕开边框和拼接处。

4.3.3大屏核心内容与信息结构被用户感知并清晰理解。包括：页面信息展现清晰、页面信息组织合

理、所需要的信息容易找到。

4.3.4大屏呈现内容宜符合用户认知秩序与规律。宜利用视觉元素进行映射，运用格式塔原理对数据

进行分组展示。

4.3.5大屏呈现内容应在最大的程度上被每个人理解使用。不仅考量多数用户的使用情况及需求，同

时考虑身障者和身体不便使用群体的需求；不仅照顾使用者的使用情形，还需兼顾使用时的心理感受。

5设计建议

视距与屏幕放置位置

数字大屏可以使用坐姿或站姿观看，视距宜在150cm以上，固定视野直径250cm以上。为保证观

看者的最佳视野（见附录A），宜将大屏放置于观看者垂直方向视域20°-28°，水平方向视域36°-

48°的位置。

示例1：

图1以垂直视域20°-28°计算，设屏幕高度为h，最小观看距离S1，最大观看距离S2，S1的计

算方法见公式（1），S2的计算方法见公式（2）。

S1=cot14*(h/2)=2.005*h………………（1）

S2=cot10*(h/2)=2.835*h………………（2）

全国团体标准信息平台

3

T/CIDADS00011—2022

图1观看距离计算公式

示例2：

图2中，对于一块高度为2.25米的屏幕，最佳观看距离为4.51米至6.38米之间。

图2获得最佳视距的观看距离举例

设备尺寸与拼接

5.2.1设计尺寸

数字大屏的显示分辨率与渲染器能够支持的最高图像分辨率决定数字大屏设计尺寸。

1)当数字大屏的显示分辨率大于渲染器能够支持的最高图像分辨率，数字大屏设计稿尺寸

需要以渲染器能够支持的最高图像分辨率为准。

2)当数字大屏的显示分辨率小于渲染器能够支持的最高图像分辨率，数字大屏设计稿尺寸

需要以数字大屏的显示分辨率为准。

3)若数字大屏的显示分辨率与渲染器能够支持的最高图像分辨率过大，设计尺寸图像分辨

率可进行减半设计。

5.2.2拼接

数字大屏有整屏无拼缝的，也有由多块小屏幕拼接而成的，如DLP拼接墙、LCD拼接墙。拼接屏

幕的物理拼缝一般在0.5mm到3.5mm之间。设计过程中，建议将较精细的元素绕开边框和接缝处，减

小对内容呈现的影响。拼接屏建议比例为16:9，设计尺寸宜把上下高度设定为1080px，长度按照拼接

屏的数量比例得出长度的设计尺寸。

示例3：

拼接屏幕数量：纵向3块，横向5块；

3块屏幕的高度设为1080px，单块屏幕的高度即为360px；

单块屏幕长度：360*(9/16);屏幕总长：640*5＝3200;

设计稿尺寸即为：全国团体标准信息平台1080px*3200px，见图3。

4

T/CIDADS00011—2022

图3拼接屏设计稿尺寸示例

基础要素

5.3.1字符

5.3.1.1字号

最小字号的物理高度宜为视距的1/200，字号的选用应以一般人眼可视为原则。

计算公式如公式（3）。

最小字号=(S/200)*(R/H)………………（3）

式中，

S——视距；

R——视频信号输出垂直方向的分辨率；

H——屏幕高度。

示例4：

对于一块高2.25米，视频信号输出分辨率为3840px*2160px的屏幕，当观看距离为5米时，

代入上述公式，则建议最小字号的计算方法如下：

最小字号物理高度=500cm/200=2.5cm

屏幕垂直方向的像素密度=2160px/225=9.6px/cm

因此，在此情况下建议的最小字号（基准字号）的像素高度=9.6px/cm*2.5cm=24px

注：像素是图像中最小的现实单位，像素决定图像在屏幕上所呈现的大小。

5.3.1.2字体

标题字体以无衬线字体为主，如黑体，使重点信息更加醒目，信息层级更加清晰。

需要阅读的正文部分宜使用衬线字体，如宋体，以提高易读性。

总体来看，数字大屏以展示、监控与数据分析为主要目的，文字段落较少，所以如无特殊品牌字体

要求，字体宜以无衬线字体为主。

同一大屏上的字体不宜超过2种。同等级的标题、正文字体类型保持一致。

字体使用需注意完成商用授权流程。

5.3.2色彩

5.3.2.1色彩风格

考虑大屏内容的整体风格色彩保持统一，宜根据品牌颜色定义主题色与辅助色。

5.3.2.2全国团体标准信息平台色彩对比

建议背景色和对象前景色有足够的亮度对比、明度对比和色对比，避免用户阅读困难。文字颜色应

符合WebContentAccessibilityGuidelines（WCAG）中关于字体与背景的AA级标准。

5.3.2.3色彩舒适度

5

T/CIDADS00011—2022

宜考虑对人眼的保护与舒适程度，不宜使用鲜艳刺激的颜色或冲突的对比，宜在不同模式下对色彩

进行测试、调整。

可视化大屏建议采用深色作为背景色。若根据业务或客户需要采用浅色主题，建议以纯度较低、色

相偏冷色调的浅灰色为底，数据和地图可放置在白色面板上，但白色面积不宜过大，建议占40%以下。

因浅色大屏对人眼舒适度不佳，一般不建议使用。

5.3.2.4地图色彩的使用

考虑地图数据的色彩使用，宜加强地图的信息传递，避免装饰作用的地图色彩。颜色变量使用要求

如下：

a)定性特征用色建议：用色相区分要素的不同类型或不同定性等级，注意定性场景只表达要素之

间的“不一样”即可，无需带有数量信息。

b)定量特征用色建议：使用渐变色阶表达某种现象或数据在数量分布上的特征，包括单色渐变、

双色渐变与多色渐变，建议适用范围如表1。

表1渐变类型与示例

渐变类型应用示例颜色示例

单色渐变可表示人口密度，人均收入等定量变化

双色渐变用于定量特征在量变过程中产生质变的数据元素，例如温度

分布。分为双色单量与双色双量渐变

多色渐变典型应用包括地势分布图、路况热力图

5.3.3布局

5.3.3.1原则

对数字大屏可视化呈现视觉内容进行布局时，需根据业务指标的内容、作用、受众的目标与体验，

确定信息的优先级、数据关联与可视化表达类型，搭建合理的信息架构及故事线。整体布局宜重点突出、

详略有致的确定各对象排版的绝对位置和相对位置，便于受众快速理解核心要素及其联系。布局可分为

纵横布局、自由布局、格子布局。

5.3.3.2纵横布局

大屏布局的常见形式，大部分场景宜采用于此信息架构，示例见图4。主要信息包括：

内容通常是地图、模型等仿真形式展示场景；

占较大区域，不小于单个次要信息的显示面积；

考虑使用环境、硬件尺寸与目标用户特征，将主要信息呈现在最遵循用户阅读习惯的位置；

把内容强关联的指标位置相邻或靠近，图表类型相近的指标位置相邻或靠近；。

将概览性质或相对重要的指标放置在上方。

次要信息包括：

内容通常是数据图表或图表组，与核心内容互补，展示相关详细信息；

单个图表面积通常不大于主要信息的显示面积；

将概览性质或相对重要的指标放置在上方；

宜根据与主要信息的关联程度，调整次要指标的排放顺序。

全国团体标准信息平台

6

T/CIDADS00011—2022

图4纵横布局示例

5.3.3.3自由布局

可在指标内容或不同维度较多、聚类难度较大时，使用自由布局，示例见图5，宜考虑：

主要信息占较大面积；

次要信息可充分利用主体场景四周的空间，对面板进行充分利用和有效组织；

整体内容宜根据信息之间的关联性梳理展示主线，以引导受众以最高效的方式获得关键信

息，不宜将区块切分得过于细碎或失去有效的逻辑关联。

图5自由布局示例

5.3.3.4全国团体标准信息平台格子布局

各指标维度均衡展示，通过区块形式分割各指标维度。宜考虑根据受众诉求和信息获取习惯，适当

处理各区块的顺序和关联。示例见图6。

7

T/CIDADS00011—2022

图6格子布局示例

地理空间数据可视化

地理空间属性主要包括：位置、轨迹、关系、密度、体量等。建议针对业务场景中必备的业务元素

来分析数据的空间属性，基于业务元素与其空间属性的特点来选择适当的图形表达，示例见表2。

表2业务元素、空间属性与图形表达对应关系示例

业务元素空间属性图形表达

人、物、车、地点、事件位置散点

人、物、路、车、事件轨迹路经

人、物、车、地点、事件关系关系图谱、飞线

人、物、路、事件密度热力（点热力、线热力、区域热力、网格热力）、等值面

人、物、事件体量气泡、三维柱状

以下为几种大屏中常见的地理空间数据可视化表达方式：

散点图（X-Yplot），将所有的数据以点的形式展现在地图上，以展示数据的地理位置；

路径图（lines），用动态的流线反映一段时间内地点、终点以及路径轨迹的数据；

飞线图（Flyline），用动态的飞线反映两地域或多地域间的数据关系；

热力图（HeatMap），是通过密度函数进行可视化用于表示地图中点的密度的热图，它使

人们能够独立于缩放因子感知点的密度；

气泡图（BubbleChart）是一种多变量图表，是散点图的变体，它将所有的数据以点的形

式展现在地图上，通过气泡的大小以及颜色，显示变量之间的相互影响程度。

动效

5.5.1动效的目的：

在时间维度上，结合转场效果清晰串联业务中的重点故事线，帮助受众更好地跟随和理解

可视化数据逻辑；

在空间维度上，直观突出重点数据或对象，强调对象的聚焦和切换，给予业务元素和空间

数据适合的表现；

使不同视角的切换或场景的转化更加流畅自然；

增加动态表达方式、情感化体验与受众参与感，改善大屏精致度和整体沉浸效果。

5.5.2三维空间动效设计原则

三维空间场景在数字大屏全国团体标准信息平台中使用频繁并发挥重要作用，对三维空间场景适当应用动效可以有效串

联不同业务场景，引导受众直观理解大屏展示意图，聚焦重点信息：

控制动效松紧快慢的节奏，不宜切换过快造成眩晕感；

动效的运用宜目的明确、突出重点；在以数据监测分析为主要目的的场景中，宜保持动效

的相对稳定与简洁，尽量避免过度镜头运动喧宾夺主；

8

T/CIDADS00011—2022

运动开始前与结束后时的静态画面宜保证构图合理，可考虑配合一定的视觉元素增强引

导，在运动即将开始时辅助受众提前定位应关注的重点对象、运动结束后快速理解其结果；

宜使用推、拉、摇、移、跟等镜头运动方式传达不同的信息。

5.5.3微动效

5.5.3.1原则

在大屏局部根据业务和受众需要适当添加微动效，可以引导受众注意力、提供交互反馈、辅助转场、

减少手动操作、增加大屏细节丰富度。大屏微动效的触发机制包括：自动循环呈现效果（如表格轮播），

自动单次出现（如图表加载），用户交互行为后的反馈（如选中效果）。

根据物体本身的运动趋势和物理规律设计动效，使其更加真实自然，如通过缓动函数贝塞

尔曲线实现渐快/渐慢的变化节奏；

避免动效过多、过强或组合过于复杂，宜在达到效果的同时减少注意力分散。对于可视化

大屏中一些需要着重突出的信息，建议在重要信息点进入屏幕时设计比较明显的动效，完成入

场动画后让信息点回归到静态或者是弱动画来展示。当与信息点产生交互时，建议使用明显的

动画来进一步提升体验；

动效不宜过长，时长建议控制在200ms-600ms范围内。

5.5.3.2大屏微动效常用类型：

提醒/突出/警示。例如，在工厂大屏中，当出现设备故障，通过倒计时闪动和红色扇形光

旋转来模拟雷达效果，突出警告作用；

关键对象的出现与移动。例如，在传染病监测预警大屏中，通过热力图颜色变化和移动，

表示疫情的传播过程和预测方向，引导用户关注；

图表或指标变化。例如，在订单完成率环形图中，动态展示已完成部分从0增加到45%的过

程。数字翻滚/数字翻页器的效果在一定程度上也能够吸引到更多的注意力；

内容浏览或轮播。例如，在各省健康素养指数表格中，通过轮播效果，逐一强调各行数据，

降低阅读负担；

围绕对象的水波扩散。水波不断循环向外涌动扩散，能够传达出发散、覆盖的感