智能制造数据可视化大屏的UI设计探究.pdf

PAGE050经验交流Experience Exchange人类处理数据的能力已远远落后于获取数据的能力。数据可视化如何更佳完美呈现一直以来都是设计师们研究的目标。本文基于智能制造通信行业，从可视化现状、可视化大屏设计要素分析，结合可视化技术应用场景，对智能制造通信工业数据平台可视化应用研究进行阐述，并对部分应用案例进行介绍，表明优秀的可视化设计在通信产业相关平台中的重要意义。The capability of people data-acquiring is far behind their data-processing.Nowadays,making full optimized data visualization has long been a goal for designers.This paper focuses on the research including application of intelligent manufacturing in communication industry and data platform visual management,which is based upon the using of intelligent manufacture in communication industry,visualization development up to the present,much analysis on visualization technology and key factors for designing large screen display,as well as application scenarios.Besides,some cases using data visualization has been introduced,demonstrating the significant importance of excellent visualization design in communication industry platforms.光纤光缆 可视化大屏 视觉设计 图表optical fiber&cable;large size display for data visualization;visual design;chartsDoi:10.3969/j.issn.1673-5137.2024.02.007摘 要 Abstract关键词 Key Words智能制造数据可视化大屏的UI设计探究 何家乐 杜学文 洪思云 王田 张晰若 司正中（西安西古光通信有限公司 陕西 西安 710000）0.引言在大数据时代，数据获取的速度远远超过数据处理的速度，数据可视化作为人与计算机的桥梁，能够很好地帮助用户总览数据的特征，提出分析问题和条件，对数据进行筛选、过滤并将需要的数据通过合适的方式展现出来。可视化技术在不断探索中寻求着更加直观的数据呈现形式，相比冗长乏味的文字记录，更加生动直观，便于理解。可视化强大的信息展现和传播的能力构成了大数据分析流程中不可或缺的一部分。1.现状我国光纤光缆政策经历了从引导、规划光纤光缆建设到光网全面覆盖城乡，再到规划千兆网络覆盖的转变。在国家政策的推动下从无到有发展起来，并一步步在突破速率的道路上不断进步，未来随着互联网行业的加快转变，对光纤光缆的要求越来越高，行业的发展也将进一步加快。随着以人工智能、大数据、区块链为代表的新一代信息技术加速与制造业融合，制造业生产方式与企业形态正在发生根本性变革。企业智能化改造升级，已悄然应用到各类生产线，在此过程中往往注重应用系统的建设，而忽视对数据分类、组件样式及布局呈现。这就容易堆积大量无用数据、遗漏关键数据指标，影响工作效能、降低工作效率，与降本增效的目标背道而驰。2.可视化大屏设计要素2.1 设计前准备在开始设计之前有很多必要工作，为在后期能更准确地设计出符合项目风格的界面，需要考虑的问题包括但不限于：使用环境、大屏终端、需求分析等。使用环境指的是用户在使用该系统（大屏）时的所处地理环境。在设计之前需实地踏勘，了解建设场所、光照、距离及互动性等多方面因素，综合考虑在内，甚至可提前模拟建成后使用效果，避免因设计考虑不足，造成用户体验差的现象出现。大屏终端主要考虑大屏的类型，包括大屏面板的材质、大小、是否为拼接屏幕等元素。大屏终端的材质会影响实现PAGE051经验交流Experience Exchange出来的效果，可能会有饱和度过高、过底或有一定的色偏；屏幕的尺寸和分辨率会影响设计布局、字体大小、设计元素大小等；若为拼接屏幕，需要提前做好适配，以及在设计过程中避免将重要元素展现在拼接位置，从而可能导致内容的不清晰或错位的情况发生。需求的分析至关重要，直接影响到UI界面的设计风格以及布局等，需求理解偏差可能会导致设计大量修改甚至被推翻。2.2 整体风格目前市场上数据可视化产品的风格大部分为深色科技风,以深色背景为主；以及衍生出的FUI的风格设计，注重视觉效果和科技感，通过虚构的科技元素和图形符号来营造高科技感和未来感。后来出现了更多其他风格，如中国风、浅色风、甚至卡通风等。整体设计区别较大的两种类型为数据看板和数字孪生。数据看板主体为数据图表的展示，有时会添加部分模型做结构展示等；数字孪生场景多为城市、园区等大规模建筑构成，因为其概念定义为在数字世界中创建一个同物理实体城市外观一致、行动一致、思想一致的数字虚拟场景，所以风格和数字看板、地图类有明显区别，多为写实风，在特殊应用场景下也会有蓝色科技感，所以如何让展示的数据和场景融为一体是设计师需要考虑的。因此在设计光纤光缆制造数据可视化大屏时，可考虑采用适合的光效、高饱和度的颜色突出重点信息，帮助用户快速聚焦视觉中心，通过增加粒子流动光效打破生产制造中的机械化的乏味；在大背景基调基础上增加地图元素，并在用信息传输线条连接的方式可表现数据传输与收集。2.3 设计规范大屏设计一般而言需要展示的数据较多，且样式也灵活多变，通常数据会被划分为更小的板块做排列，布局分为左右、左中右等，标题置于顶部。大屏中间为视觉聚焦区，放置最重要的场景部分，数据版面则分散在周边。如图1、2所示。图1图2整体颜色根据产品自身定位有极大关联，例如：军工类大屏多使用暗绿色、金融类大屏多使用黑色与金色结合、光纤光缆制造业以及工业园区多使用蓝色等。确定颜色后，根据实际使用环境来确定整体的色调，以光缆制造数据可视化平台为例，使用环境是在室内，受外界环境光干扰及小，所以可以不用考虑外界光线，只用根据室内的光线来确认整体平台的色调即可。文字的大小根据屏幕尺寸来定，应避免文字过小导致阅读困难的情况发生。以分辨率为19201080的屏幕为例，最小字号不建议低于14像素。一般而言，整个系统中的字体大小应不超过5种，常用字体大小应为三种左右：总标题、标题、内容文字的大小。文字的字体一般选择系统默认字体，避免出现生僻字或特殊符号显示不全的情况发生；若有特定字体需要嵌入时，需要考虑该字体的可识别性，以及是否可商用。2.4 图表设计正确的图表使用不仅能让使用者清晰、快速的捕捉到目标信息，也能够很好地帮助用户总览数据的特征，更有利于实时调整策略。2.4.1 图表的基本分类常用的图表类别有以下几种：散点图、折线图、柱状图、饼状图、条形图、雷达图、组合图等多种方式呈现，并可根据需求对图表进行元素的增加或删减、样式的调整1。特定的行业或需求下还会用到K线图、仪表盘、桑基图、竖图等，或存在多种图表相结合的情况，如图3所示。图32.4.2 图表的设计图表大类细分小类应用场景柱状图基础柱状图，多柱图、条形图、正负条形图、堆叠条形图、堆叠图、阶梯瀑布图等对比分类数据的数值大小折线图基础折线图、曲线图、面积图、堆叠折线图、堆叠曲线图、堆叠面积图，阶梯折线图、垂直折线图等观察数据的变化（趋势）饼状图环形图、半环形图、南丁格尔玫瑰图、嵌套环形图等对比分类数据的数值大小散点图基础散点图、涟漪特效散点图、单轴轴散点图、气泡图等比较跨类别的聚合数据PAGE052经验交流Experience Exchange1）交互：一般而言，在web端上常用鼠标操作，页面上鼠标箭头体积小，可以在不干扰用户阅读的同时，精准的帮助用户进行单击、双击、框选等常规操作；在移动端界面上操作，由于设备尺寸偏小，用户的使用习惯为单手进行单击、双击、长按、滑动等操作来进行页面的交互；由于大屏终端一般被用来进行监测、汇报等工作，所以在设计图表时需要弱化交互，将信息间可能多的展示出来，避免用户难以获取目标信息的情况出现，例如：当大量的信息需要用列表展示时，需要用轮播动画的方式将每条信息展示出来，轮播停留时间为58秒，而不是用分页的方式让操作者手动点击。2）情感化设计：应当适当的做一些情感化设计，让数据图表更生动形象。如图4所示，相同的数据变量以不同的方式展现出来，在表达男女比例时，可以用男、女性对应的图标来表示相关内容，用户可以更加直观的获取到关键信息。图43）帮助用户做视觉选择：当想要表示一周内每天的数据量时，最先想到的是可以将每个数据通过使用柱状图来清晰的表达出来，但是单一的数据展现可能并不能满足使用者的需求，所以还可以将数据做汇总置顶展现出来，这样图表不仅多了一个维度展示数据，浏览图表的时候也会有一种先总后分的舒适结构。除此之外，还可以通过柱状图+折线图的方式，在统计数据的同时，观察数据的变化，如图5所示。图52.5 动效设计动效是可视化的重要组成部分，能增加观感体验，凸显关键产品内容、强调功能信息关联，帮助用户理解产品、情感化互动。动效应符合自然、高效、适度的原则。动效可以大致分为三类：引导类动效、反馈类动效、转场类动效：（1）引导类动效：指的是通过视觉和动效来聚焦用户的视线，以此来吸引用户的注意力。例如：在场景中出现告警的情况，赋予告警图标闪烁的动效，引导用户关注到告警的内容；（2）反馈类动效：指的是告诉用户当前系统的运行状态，降低用户迷失感，给予用户一定的心里预期。例如：用户在点击按钮后，如遇上卡顿等情况，适当的按钮缩放会暗示用户已完成点击操作，等待页面加载即可，避免出现用户错以为没有点击上的情况发生。（3）转场类动效：简单的说就是帮助用户理解页面间的变化和层级关系，让用户清楚的知道自己当前所在的位置以及将要跳转的页面。例如：在进入系统或切换页面时，适当的动效可以过渡页面转场，让页面看起来更生动。此外，动效的设计要考虑到，服务器在承载大量数据涌入的同时，是否能承载较多的动画，以及过多的动画使得画面过于杂乱，极其容易喧宾夺主，影响用户阅读，反而弱化了数据的展示。3.智能制造通信工业数据平台的可视化应用以西安西古光通信有限公司（以下简称西古光通）为例，根据前期调研结果，智能制造通信工业数据平台一般会应用在两种场景下：一种是不需要过多交互的看板，用来记录、实时查看员工出勤情况、监控设备等管理者可以根据实际情况对具体流程进行快速调整；一种是智慧厂区类型，涵盖整个厂区的建模，用来查看园区总览信息，包括园区概览、光缆产值、园区安防、车辆管理、水电能耗等。3.1 看板大屏看板类型以断纤情况作为示例：每天的负责人员需要对厂房设备进行实时监测，大屏整体所处环境在室内，由于厂房高度较高，环境较为封闭，光线受外界影响不大，且考虑节能降本因素，大屏整体设计为暗色；考虑到公司的logo标志主体色为蓝色，建筑外观以白色为主，蓝色线条为辅，所以整体界面使用蓝色作为主色。图6所示，是当月断纤统计图。分别显示了：断纤次数、累计次数、生存长、累计生存长、生存长目标值。前两项数据和后三项数据表示内容、单位不相同，并且数值也有很大差别，因此采取了折线图+叠加图的方式进行展现：左边纵坐标代表的是生产的长度，右边纵坐标代表断纤次数，为了方便用户能快速、清晰识别图表对应的纵坐标，在单位顶部添加对应的折线、柱状图的缩略图标。该图表横坐标数据比较多，左右两列均有纵坐标，所以整体图表的元素也较多，管理者如何能准确知晓每个图表对应的数据。PAGE053经验交流Experience Exchange图6对于此类问题可以有两种解决方式：第一，将每列数据汇总做成动态图例，每隔3至5秒进行替换。第二，将生存长、累计生存长、生存长目标值三条折线进行透明度调整，进行显隐替换。根据上述所说，数据过于多用户无法快速抓取目标信息，所以我们选择第一种展示方式。但是，从第1项到第30项数据展示至少要经历一分半的时间，如果用户想要知道位置偏后的数据，需要等待时间过场，此时我们需要添加触发交互，单次点击某一横坐标即可显示对应数值，就可以避免图例轮播时间过久的问题。3.2 智能制造大屏智能制造大屏视觉表现不同属数据看板，属于数据孪生方向，一般是由三维场景模型与数据图表组成，场景与数据进行联动。因为场景风格与现实相近，场景构成较为复杂且多变，甚至同一个场景会根据天气、时间做整体色调的改变，所以在设计时不仅要考虑图表本身的表现方式，也要将场景对数据展示的干扰规避掉。以西古光通的智能制造通信工业数据平台AI预警页面为例，通过3D建模的方式将园区的厂房布局在界面中心，因数据量较多，所以置于场景两侧，避免对场景过多遮挡2；另外，该页面场景永久为白天，考虑到图表展示问题，需要给图表底层添加一层透明遮罩，减少场景对数据的干扰。页面顶部中间为平台名称，底部为菜单栏，选中的菜单高亮显示，左侧数据分别为预警类型统计和预警列表，因系统中运用智能视频分析技术，对厂区重点区域进行监测，当发生火灾、打架、人员拥挤等情况时触发告警，列表中包含预警时间、位置、状态、类型、查看详情，点击查看按钮可以查看本条预警的详细信息；右侧为各个厂房的重点监控画面，可以实时监控厂房情况。在场景中对重点区域进行打点，当该点位发生告警时，点位颜色从蓝色的正常状态变化为红色的预警状态，点击点位弹出弹框，展示具体预警信息，当预警解除后，点位颜色恢复为蓝色。如图7所示。图74.总结通信产业的发展经过长时间的沉淀已经非常成熟，其中业务的复杂程度也可想而知。随着可视化大屏越来越广泛地应用在各行各业，更多的通信相关企业也开始使用数据可视化帮助自己提高管理、工作效率。面对这些复杂的业务流程，优秀的设计能够帮助、引导用户获取目标信息，从而实现真正的高效管理。对于数据可视化大屏设计，设计师不仅仅需要考虑视觉层面的效果，还需要综合考虑业务需求及开发实现效果，从而达到功能性与审美性的统一3。1 冯雅茹.基于手机信令的城市绿地活力差异研究D.东南大学，2019.DOI:10.27014/ki.gdnau.2019.001838.2 聂洪权，郑燃，王欣.华龙一号核电厂安全级仪控就地盘箱柜的鉴定J.自动化仪表，2021,42(05):102-106+110.DOI:10.16086/ki.issn1000-0380.2020080004.3 王威.数据可视化大屏艺术设计J.中国电业，2020(19).参考文献作者简介何家乐，设计主任工程师，现任职于西安西古光通信有公司，从事系统界面美术设计及创意设计等。