第42卷第5期2021年5月
白 动化仪表
PROCESS A U T O M A T I O N INSTRUMENTATION
Vol.42 No. 5
May. 2021
数据可视化大屏U I设计的研究和分析
姚忆南
(上海工业自动化仪表研究院有限公司，上海200233)
摘要：如今，数据可视化大屏被越来越多地应用在B端企业和政府企业的项目中。与传统的互联网C端产品不同，B端的大屏可视化是一项结合了视觉传达学、用户心理学和计算机科学的学科，不同项目面向各个行业，展示需求错综复杂，不同企业用户对于大屏展示的需求又千差万别。国内没有一套针对于数据可视化大屏相对完善的视觉解决方案，导致众多设计师和产品经理在接触类似项目时无法入手。从可视化图表
、用户行为交互、视觉记忆模式、大屏幕显示下用户对界面彩场景设计的感受，以及字体应用和动态图形动画等多个维度，提炼出一套相对完善和全面的视觉设计理论，以应对不同的大屏业务展示场景。数据可视化大屏便于使用者快速、准确地传达可视化信息。
关键词：用户界面设计；U I设计；大数据可视化；多媒体设计；计算机图像处理技术；视觉传达艺术
中图分类号：TH-702 文献标志码：A D0I：10. 16086/j. cnki. i s s n1000-0380. 2019120061
Research and Analysis on Large Screen UI Design for Data Visualization
YAO Yinan
(Shanghai I n s t i t u t e of Process Automation & Instrumentation Co.,Ltd.,Shanghai 200233,China)
Abstract： Nowadays, the big screen of data visualization i s more and more used in the projects of T O-B enterprises and government enterprises. Unlike the traditional Internet T O-C end products,the big-screen visualization of B-end i s a combination of visual communication, user psychology and computer science. Different projects face to various industries,and the display requirements are intricate. Different enterprises for large-screen display are very different. However,it i s embarrassing that there i s no relatively complete visual solution for large-screen data visualization in China,which ca
uses that many designers and product managers have no way to start when they are exposed to similar projects. From a variety of latitudes such as visual charts, user behavior interaction,visual memory mode, user's perception of interface color scene design on a large screen display, and font application and dynamic graphics animation, a relatively complete and comprehensive visual design theory i s refined. The large screen viewing of data visualization i s convenient for conveying visual information quickly and accurately.
K e y w o r d s：User interface design； UI design；Big data visualization； Multimedia design； Computer image processing technology；Visual communication a r t
〇引言
数据可视化大屏就是借助视觉语言的表达方式，将枯燥、专业、不直观易读的数据内容转化为有趣、浅 显、直观的内容并传达给大屏观看者的一种手段。在 当前新技术支持下，数据可视化除了“可视”，还有可 有可交流、可互动等特点[1—5]。该技术的本质是数据空 间到图形空间的映射，是一种抽象的具象表达。大屏设 计要避免为了展示而展示，所有的排版布局、图表应用 都应该基于用户的需求。为了避免观看者迷失，信息呈现必须有焦点和主次。本文通过可视化图表、视觉设 计、彩心理学[6]、字体规范和动态图形等多方面的维 度分析，深人剖析，结合工业大屏态势感知的实际案例，提炼出一套相对规范和完整的大屏设计理论，帮助企业 高层和观看者快速、精准了解企业数据可视化信息。
1数据可视化U I设计的思路和过程
1.1数据可视化数据的分析和图表的选择
对比、关系、分布和构成是数据分析常用的4个维 度。在开始界面设计之前必须明确给屏幕前的用户展
收稿日期=2019-12-23
基金项目：20丨8年工业互联网创新发展工程-典型行业工业互联网企业级集中化安全监测平台建设基金资助项目
作者简介：姚忆南（1990—），男，学士，助理工程师，主要从事大屏数据可视化界面设计等工作,E-mai l:ya0y i nan@S i pai
•
108
•
自 动化仪表
第42卷
I
突出相对差异
突出相对和
, 突出相对和
^ ' HL1/ 1 L 突出相对差异 ###胃
突出占比突出增量和减量数据项间组成关系
teM A M daM
ntdMrt
lH «U (h r t
to M N t%(d b M (W l
a l q 替
玲
10 r l
遞
图i
数据可视化设计的原则和常用的图表类型
Fig. 1 Principles of data visualization design and common chart types
一般柱状图、条形图、折线图和饼图是比较常见的 图形。柱状图的图形表现的传递形式最为直观，可以 反映数据类别之间的差异。条形图即横向柱状图，是 属于柱状图的一种分支类型，但两者之间有一个重要 的区别。当数据分类多且名字字段较长的时候，应该 选择条形图。条形图能够横向布局，方便展示较长的 字段名称。折线图用于反映数据随着时间变化而变化 的趋势。饼图常用于比例关系，可以展示每一部分占 比的百分比。由于人眼视线习惯于顺时针方向转动， 因此设计过程中需要将对应的百分比模块从大到小顺 时针排列。当饼图数据类型过多或数据中有〇的数值 时，可以考虑将饼图直接替换成柱状图131。
雷达图和地罔相对使用频率不是那么高。雷达图 可以用来表现一个周期数值的变化，常用于财务数据 中。雷达图数据类别最多6个，并且需要加上文字说 明，以减轻阅读负担。地图图表类型适用于控件位置 的数据集。常用的地图类型有区域地图，散点地图，热 力地图。如今的数据可视化项目，地图图表越来越多
地应用于智慧城市、信息安全等领域。这也是未来数 据可视化的设计趋势。1.2尺寸的适配
一般在设计可视化界面的前期，需要确定具体的 屏幕分辨率和设计稿尺寸41。明确产品上线后的应用 场景。如产品仅应用于企业内部的丁.作人员，不作为 大屏展示等更加早期的显示器比例。如服务的企业客 户有后期在大屏幕上展示可视化效果的需求，则需要 设计师与定制的大屏供应商细致沟通，确认大屏输人 有几路信号源。时下流行的技术分为多个信号源输人 和单个信号源输入。一般来说，单个信号源输入的情 况较少。单个信号源只能输人展示1张线上界面，对 于业务和数据量大的企业展示利用率低，且不实用，比 例也多数为时下较常用的21 :9或32 :9。而多个信号 源接人大屏则是时下最为普遍实用的实现方式。通过 显卡自定义计算机的分辨率，将大屏切割成若干个小 屏，设计师也应当提醒大屏定制商用最常用的16:9或 16:10比例的小屏拼接成大屏，从而确保最佳的视觉
示什么，通过图表需要表达什么样的规律和信息联系 即数据之间的相关性；分布即指标中的数据主要集中在 什么范围，呈现出怎么样的规律；比较即数据之间存在 着何种差异性；构成则是数据分为几部分构成，每部分 的占比是多少。在E-Charts  2等网站，可以到常用的
可视化图表和各类实际案例的分析，并能到适合的图 表类型进行分析。常见的数据可视化图表类型有柱状 阁、折线图、饼图、条形图、雷达图和地图等。每种图表 类型适用于不同的数据类型，不可随意使用。图1中列 举了数据可视化设计原则和常见的图表类型。
I m w U t W M
CahwCWl
F f f f r
ill
每个数据两个变置
多维度
数据较多仅数据间对比
•
_______单一维度
每个数据一个变童
111
梦
数据较少
非周期性数据较少数据项
较多项较长时间
较短时间
基于时间的数据件对比
两个维度
对比
一个维度
你想展现什么分布
三个维度
基于时间的动态数据
较短时间_________|
较长时间
静态数据
数据
点较少数据点较多
-两个维度丨-三个维度
s o
.1™
第5期数据可视化大屏U I设计的研究和分析姚忆南.109 .
效果。
1.3界面的布局和划分
设计稿的尺寸确立后，需要设计师和产品经理、前 端工程师对接讨论页面上的控件布局和模块设计划 分。通过前期需求文档，抽取业务场景关键的指标，明确主次关系，提取业务中用户最关心、最核心数据进行 展示，对于次要的数据源和控件可以适当弱化设计[5]。以工业安全态势感知的大屏界面为例，界面中最中心 的区域放置工厂各个车间的3U可视化模型，以便用 户第一时间了解各个车间的信息安全情况。而其余的 模块和数据依次排布在中心区域的周围，通过数据、图标和列表的形式展现，提高信息传达的效率。
对于页面的排版和划分部分，利用网格将版面划 分成若干小块。再将设计好的模块和U I控件依次排 人网格，从而保持页面的统一性和一致性。这样的排 版更加符合规范和逻辑。
1.4彩的筛选和情绪板的建立
颜的选择在U I和可视化的设计中尤为重要。在设计前，需根据产品的市场定位、用户人和品牌文 化建立合适的彩情绪版。以环上常见的赤橙黄绿 青蓝紫7种颜为例，每一种颜在彩学中都代
表 不同的含义。赤红寓意着速度、激情，通常用于电商 行业。橙黄寓意着食物新鲜，在生鲜领域运用较为 广泛。紫寓意着高贵、高冷，通常也运用在奢侈品领 域。而蓝和青则寓意着专业、科学，在科技领域运 用最为广泛。结合工业信息安全行业的特性，青蓝 是最符合产品主题的颜。确定主之后，需要确 定辅助和背景。本文利用橙黄和深蓝灰作为辅 助和背景[6]。
1.5字体的选择
字体是数据可视化设计中极为重要的一环。字体 的好坏直接决定了界面的易读性和用户体验。在选择 字体时优先选择系统默认的字体，了解字体是否可以 免费商用，在考虑识别性的同时也要考虑是否与当前 界面风格兼容。根据国外权威化网站MIT和Uber等 公司的研究，一般数据可视化常用的英文数字字体有 Avenir next、Helvetic Neue、Segoe ui、Acens、Din和 Dighal-7等。中文字体则应尽量选择系统自带或着默 认的字体，如Windows系统下默认的中文字体为微软 雅黑，而Mac系统下默认的字体为苹方[7]。如果软件 界面是云端部署，设计过程中又需要用到其他字体，则需要前端开发人员嵌人第三方的字体包。部分字体包 占用空间大，为了优化页面加载速度，可以使用fontcreator等软件将对应的字体包中不必要的字符删除，从而减少字体包的大小（一个完整的字体包中一 般包括了阿拉伯文、符号、拉丁文、日文、西里尔文、希 腊文、拼音等多种字符，对于数据可视化界面和大屏的 场景，仅保留中文和数字便可，其余都可删除）。
1.6动效设计
在如今的大数据时代,3D数据可视化的设计已经 越来越多地用于智慧城市、工业互联网等政府项目中，而动效设计又是数据可视化设计中非常重要不可或缺 的一部分[8]。动效的赋能可以让数据变得活灵活现，第一时间抓住观看者的眼球。在设计过程中，应分析 在哪些重要的模块上赋予动画效果。这是因为过分的 动效又容易喧宾夺主，反而弱化了信息数据的传递。
动效设计在可视化项目中遇到的最大问题就是开 发的落地实现。在项目时间允许的情况下，设计师会 产出设计静帧图（包含标注和切图）、动画交互文档和 视频Demo。静帧图用来直接和需求方进行对接沟通，后续验收时也可以根据静态图进行效果评定。将输出 的PSD源文件进行字体、字号、颜、位置等基本参数 的标注和注释。而对于部分开发人员实现起来较为复 杂的效果，则需设计师将对应的icon、图片进行切片处 理。同时，输出的视频Demo也会向需求方和开发者 进行演示，使得最后上线的效果不会与设计时偏差太 多。除了 Demo之外，设计师还应当提供一份交互流程，如部分手势交互、点击前后的效果和跳转，方便开 发和用户二次确认。通过动效设计流程的梳理，降低 用户理解成本，提高工作效率。
动效设计的方法可以归纳为-方盒理论：“置身于 三维空间下，信息的体量是无穷的，我们需要在设计数 据展示模块时寻适合的载体，在庞大的信息体量和 有限的用户界面中间寻求平衡，为用户创作传递他们 最先看到的那一面，这即是为一切动效解决方案提供 理论支撑点的六方盒理论。
1.7界面控件和U I组件库的输出
在完成全部静态页面设计之后，必须将页面中所 有控件，图标等元素进行一一提取整理。这既是模块 化设计。在U1设计中，每一个文字，颜，图标，图片 都是一个对应的原子元素，这些元素以不同的方式拼 凑在一起，就组成了不同了界面。总体来说，模块化设 计有一致性、高效率、便捷性等优点。
统一一致性是界面设计中非常重要而且基础的部 分。比如界面中日期的选择组件，整个产品中应该只 有一种形式存在，否则容易引起用户的困扰。一些诸 如列表、按钮等元素可反复组合利用。如果在产品迭 代过程中，用户希望更改颜或者样式，也可以在对应
• 110 •白 动化仪表
第42卷
的模块里进行统一调节修改，而不用一个个页面进行 单独修改1891。同样，模块化的设计控件也可以与设计 图一并交给前端开发，方便开发过程中反复查看值 大小等信息，提高工作效率。
2实际案例的应用和分析
研究者为某汽车企业设计的可视化界面，可用于
超大屏或计算机端展示，使用人为企业高层和计算 机运维人员，在和企业需求方反复沟通之后进行模
块 化的定制。通过3D 建模的方式将企业的厂房布局在 界面中心，在上方的弹窗并分别用绿黄红三代表低 中高危三个维度的厂房信息安全情况。在界面的四 周，经过分析和筛选之后，分别选用了词云图、柱状图 和列表对安全事件、风险车间和高风险资产进行展示。 考虑到页面的时间维度为一天24 h ，故在界面下方插 入了统计趋势图，让用户更加直观地看到一天中事 件发生的高频时间段。在静态页面完成之后，将页 面上的控件通过切片的方式导入After  Effects ，根据 用户的需求对相应的元素进行动效设计，最终输出 设计图。
3结论
数据可视化是把相对复杂、抽象的数据通过可视
的方式，以人们更易理解的形式展示出来的一系列方
法。数据可视化能够更形象地表达数据内在的信息和 规律，促进数据信息的传播和应用。大屏可视化的设 计要避免为了展示而展示，在设计之初需通过反复的 调研和沟通，明确B 端用户真正的业务需求，并通过 数据分析筛选出最合适的图表展示类型。在界面设计 开发的过程中，遵循大而简、简而精的原则，将最重要 的数据信息以动态的方式呈现给用户，同时弱化不必 要的元素，即设计的核心思想。
参考文献：
[1] 黄光龙，张欣.大数据信息可视化显示界面设计研究[•!].工业
设计,2019( 1) = 138-139.
[2] 郑戟明，柳青.Echarts 在数据可视化课程中的应用[J ].电脑知
识与技术,2020(2) :9-11.
[3] 何萍.信息可视化图表架构设计与创意表达[门.现代经济信
息，2019(22) :321-322.
[4；]张开智，万向，陈亚民.关于数据大屏可视化的设计流程与发展
趋势的分析研究[J].科技创新导报,2019(27)：丨30-133.
[5] 胡贵伟，赵建国，王军林.大屏幕可视化的设计和应用发
展[C]//中国通信学会会议论文集,2019:295-304.
[6] 蒋飞燕.浅析彩在U I 设计中的应用[J].传播力研究，
2019(14) ：171-172,212.
[7] 王静一.浅谈字体设计在视觉传达中的应用-评《字体设计的基
础表现与视觉传达》[J].中国教育学刊,2020(2) :144-146.
[8] 马驰.图形界面设计中的动态效果应用及趋势探析[J].设计，
2019(20) ：113-115,
[9] 邓朝晖.U I 界面控件设计细节研究[J].电脑编程技巧与维护，
2020(2) ：138-139,147
(上接第106页
）
往项目有了更加严格的要求，对设计以及鉴定也带来 了非常大的影响。本文通过鉴定试验不断改进，提出 合理、有效的鉴定方法。
①
根据阿伦纽斯定律的计算样机热老化时间，并
且根据各工况条件选取适合的元器件，使得样机满足 鉴定寿命要求，顺利通过热老化鉴定试验。
②
提出K 3类仪控就地盘箱柜耐辐照剂量计算方
法，试验结果可以满足K 3类设备在不同辐照剂量条 件下使用要求。
③ 通过对箱体结构、安装支架的改进，同时对全厂 地震反应谱进行包络，使得设备顺利通过抗震鉴定
试验。
④ 本文给出仪控就地盘箱柜严重事故环境的鉴定 依据、鉴定步骤以及K 1、K 3类样机鉴定试验后的基准
ui设计专业
性能试验结果，以证明本华龙一号安全级仪控就地盘 箱柜顺利通过了所有鉴定试验，为后续项B 提供了良
好的技术经验。同时，该研究也为应对后续核电厂更 复杂工况下的安全级设备鉴定奠定了基础。
参考文献：
[1] 核工业标准化研究所.GB/T 12727核电厂安全系统电气设备
质量鉴定[S].2017.
[2] 王希.关于核电站仪控设备鉴定技术的研究[J ].中国战略新兴
产业，2017(16): 147.
[3] 法国核岛设计和建造规程协会.R C C -E 压水堆核电站核岛电气
设备设计和建造规则[S]. 2005..[4] 钱建华，王超，杨壮豪，等.压水堆核电站严重事故下的设备鉴 定[J].辐射防护通信，2017,37(3) :5-8.
[5] 吴萍，郭林，刘莉.浅析华龙一号严重事故压力变送器选型与鉴
定[J].自动化仪表，2020,41(3) :21-24.
[6] 国防科学技术工业委员会.EJ/T 1197核电厂安全级电气设备
质量鉴定试验方法与环境条件[S]. 2007.
[7] 刘栋，王宏印，张甬.核电厂设备鉴定的过程控制与管理[J ].核
安全，
2013,12(2) :69-73.[8] 郑开云.A P 1000核电设备鉴定试验探讨[J].发电设备， 2014(3) ：154-159.
[9] 吴斌.美法核级电气设备鉴定标准比较[J].仪器仪表用户，
2019,26(8) :86-89.
[10] 郎爱国.核电厂和缓环境、显著老化机理与设备鉴定[•!].核安
全，2006(3)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。