中国地震  2022, Vol. 38 Issue (2): 293-303
基于地震信息的大屏可视化技术研究与应用
李华玥1,2, 郑通彦1, 王尅丰1, 林向洋1, 文鑫涛1     
1. 中国地震台网中心, 北京 100045;
2. 中国地震局地质研究所, 北京 100029
摘要:为提高指挥大屏信息读取效率, 更好地进行防震减灾工作, 对指挥大屏地震信息可视化开展了一系列研究, 详细探讨了基于地震信息的指挥大屏可视化内容, 包括大屏布局、设计思想、颜色搭配、文字表达、图标设计、交互显示与整体展示效果等方面, 对地震应急信息的准确完备、快速传递、清晰表达和高效处理有一定提高。
关键词地震应急    地震灾情    可视化设计    大屏设计    
Research and Application of Large Screen Visualization Technology Based on Seismic Information
Li Huayue1,2, Zheng Tongyan1, Wang Keifeng1, Lin Xiangyang1, Wen Xintao1     
1. China Earthquake Networks Center, Beijing 100045, China;
2. Institute of Geology, China Earthquake Administration, Beijing 100029, China
Abstract: In order to improve the reading efficiency of information from command screen and to better carry out earthquake prevention and disaster reduction, a series of studies on the visualization of command screen for seismic information are carried out in this paper. We discuss the visualization content of detailed seismic information on command large screen, including large screen layout, design idea, color matching, text expression, icon design, interactive display and overall display effect. Our work is of great significance for accurate, complete, rapid transmission, clear expression and efficient process of earthquake emergency information.
Key words: Earthquake emergency     Earthquake disaster     Visualization     Large screen design    
0 引言

随着经济的不断发展,地震灾害带来的风险也日益加剧。最大限度地减少地震灾害带来的人员伤亡和经济损失是防震减灾工作的主要工作内容之一。其中,灾情信息是抗震救灾指挥决策的重要依据,若能将地震应急信息在指挥大屏上转化为视觉形式,增强数据呈现效果,丰富视觉表现效果,使应急人员以直观交互的方式实现对数据的观察和浏览,则可有效地帮助应急人员发现数据中隐藏的特征和关系,更便捷地获取有用信息(张晋辉等,2017陈谊等,2020聂高众等,2012杨彦波等,2014)。

数据可视化大屏设计是以大屏为主要展示载体的数据可视化设计。大屏具有面积大、可展示信息多的特点,可以在观感上给人留下震撼印象,方便团队讨论与决策。因此,大屏数据可视化常用于信息展示、数据分析和监控预警等工作,特别是在涉及大数据的监控、指挥、调度等方面,大屏显示系统已经成为不可或缺的核心基础系统(张新阳等,2017赵雅婷,2020)。目前,在电力、钢铁、气象等领域,大屏可视化已有不同程度的研究与应用,在地震领域还处于起步阶段,数据可视化的独特优势未得到充分体现(徐达等,2019芮亮亮,2020顾丽鸿等,2014)。

本文系统、详细地探讨了指挥大屏可视化的大屏布局、设计原则、颜色搭配、文本表达、图标设计、交互显示与整体展示效果。通过研究设计指挥大屏可视化方案,规范信息展示过程中所涉及的组织与表达、图例规范、颜色搭配等,力求在大屏上直观地展现地震应急信息,更好地服务于地震应急信息的判读与应用(江宁等,2018吴熙彦等,2011郑通彦等,2021)。

1 可视化大屏设计

信息可视化的定义最早于1999年提出,信息可视化通常被认为是产生信息交互及视觉表现,用以扩充用户的认知领域(Card et al,1999);其是一种依靠计算机支持的、利用人眼的感知能力对数据进行交互的可视表达以增强认知的技术(陈为等,2019)。在人们不知道数据中隐藏着什么问题或想知道更加深层次的数据内在关系的时候,信息可视化系统可以将数据转化为可感知的图形、符号、颜色、纹理等,增强数据识别效率,帮助人们迅速缩小范围,找到有效信息。

信息可视化大屏设计作为信息可视化中的一类分支,是在数据可视化的基础之上以大面积屏幕为显示载体的可视化界面设计(李金金,2020)。其设计核心是如何在一块屏幕上将复杂、抽象的数据,以可视化、易理解的方式,让人读懂数据之间的层次与关联,这就关系到大屏布局、色彩选用、字体设置、动效设计等的综合运用(张开智等,2019)。例如,通过合理布局,减少寻找信息的步骤;规范图标,提高图案的识别性;使用认知机制观察信息,发挥认知推断的作用;将信息编入一个可操作的界面等(戴文澜,2013)。

结合地震应急业务需求,在排版布局、图表选用、色彩搭配等方面设计时应遵循以下几个原则,使大屏更好地服务于地震应急业务,为应急决策人员和指挥人员提供清晰明了、简明有效的震时应急信息支持。

(1) 专业权威原则。震后数据大屏可视化的排版布局、图表应用均应服务于业务。在地震应急信息专业表达的同时,兼顾美学形式与功能实现,尽可能平衡美学上的需求和功能上的保证。

(2) 易于识别原则。大屏相较普通电脑显示器,尺寸更大,承载数据更多。为避免观者迷失,大屏信息呈现要有焦点、有主次,先总览、后细节。首先展示核心数据,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二、三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

(3) 协调统一原则。为减少大屏展示过程中的视觉疲劳感,视觉风格上进行扁平化处理,并尽可能减少颜色使用。颜色本身具有一定的语义,为了减少对内容的误判,画面中使用的颜色应尽量保守。

2 可视化布局规划 2.1 大屏终端现状

中国地震台网中心大屏展示系统通过控制终端、平板触摸屏和计算机等设备,将计算机、影碟机、摄像机、视频展台等多种信号源投送到大屏上,实现视频会议、专业图件展示、震区地图展示等视听应用功能(林向洋等,2020)。大屏幕尺寸为9.6m(宽)×2.7m(高)=25.92m2(图 1),显示单元尺寸为400mm×300mm,屏体分辨率为6000ppi×1685ppi。该屏为LED大屏,具有图像清晰、对比度高、色彩均匀、一致性高、无拼缝等特点。

图 1 原始大屏布局
2.2 业务需求

地震发生后,应急人员将迅速开展地震灾害快速评估工作,同时与发震省地震局建立视频会议,并将相关地震信息和视频会议画面投送至指挥大屏上。随着各项应急工作的开展,相关产出将不断在大屏上滚动展示(表 1)。

表 1 地震应急信息投屏内容

震后第一时间,大屏将首先展示地震三要素和震区附近的基础背景信息,通常为非震时已有的应急准备产品,包括人文、地形、构造、历史地震背景和灾害预评估结果等。在完成地震灾害快速评估后,大屏将展示灾害评估信息,包括地震烈度、人员伤亡、经济损失等评估结果,以及其他可为应急救援决策提供支持的信息等。随着现场灾情上报至指挥部,大屏将展示震区实际灾情信息,包括对灾情全面分析结果、协同联动信息、现场工作队员回传指挥部的短消息、照片和相关现场工作信息等。至地震应急结束,大屏将持续展示包括救援决策信息、救援调度、灾害损失评估结果等内容(徐敬海等,2010张翼等,2016王琳等,2019)。

由此看出,震后的地震信息具有多源异构的特点,信息来自多个部门的应急产出,常见专业报告、科技图件、工作照片和演讲幻灯片等。原有将大屏一分为二展示地震信息和视频会议的方式(图 1),存在信息堆叠、图件缩放、关键信息被覆盖隐藏等问题,不能体现LED高清大屏的展示优势。

2.3 页面布局

合理的大屏布局可以使大屏业务内容显示更加层次化、秩序化与专业化,有效地增强大屏信息展示能力(胡贵伟等,2019李金金,2020姚忆南,2021)。通过前期对大屏展示内容的梳理,抽取出基础背景、灾情评估、震区灾情、应急救援4个业务场景,提取每种场景下的关键指标,明确其主次关系,对核心数据进行可视化设计,对于次要数据适当弱化设计(表 2)。

表 2 业务场景主要展示内容

4个业务场景中均包含一些关键的常驻信息,因此,将大屏划分为左右一大一小2块屏幕(图 2)。左侧屏幕展示包括地震三要素、设防烈度、快速评估烈度等在内的常驻信息和震后最重要的震情灾情信息,方便应急人员快速读取关键信息。右侧屏幕中央为地图展示及标注区域,是整个大屏展示的核心区域,展示影响场分布、人口经济分布、历史地震分布、地形地貌等多维、动态效果丰富的地图;两侧为照片、图表等辅助信息;下方为自定义图层选择按钮。整体上,左侧屏幕以文字信息展示为主,右侧屏幕集中呈现地图等视觉内容,这种分屏模式既减少了信息交互的干扰,同时保证了视觉信息的清晰度和高效获取。所有模块灵活搭配,适配不同场景信息呈现,增加空间利用率。

图 2 大屏规划布局
3 可视化要素设计 3.1 图标设计

人类视觉对于以数字、文本等形式存在的非形象化信息的直接感知能力远远落后于对于形象化视觉符号的理解。图标设计对地图显示图标、图表使用图标、图例等图标符号进行了尺寸及使用的规范。

为保证图标专业权威,具有实用性,在标准地震灾害符号的基础上对图标要素进行更加细致的美工设计,延用各专题符号的使用习惯,保持应急人员对符号的认可程度和熟悉程度(图 3)。其次,为使图标在大屏显示中易于识别,在设计中确定了不同层级的图标尺寸,确保图标所传递的信息重点突出,强调主次,并确保在大屏展示时,小尺寸的图标下仍有很好的可读性和清晰度,具体尺寸见表 3。同时,为减少地图的视觉负载,通过改变图标颜色和细节形状来表示不同状态,增加图标的信息负载量,提高其信息传递的效率(表 4)。

图 3 地震灾情图标示例

表 3 图标尺寸

表 4 层级图标符号
3.2 字体设计

在地震应急过程中,前后方数据源源不断传向指挥中心,涌现出大量的地理文本数据等非结构化数据,难以通过图标直观标注。这些非结构化数据在大屏展示时,需要通过文字的字体、字号、字色、字型、字列、字隔、字向、字位等视觉变量的组合来展现不同的地图可视化效果(表 5),所选用字体应具有容易辨识、不会产生奇异变形的特点。对不同级别的标题和文字继续排序,适配不同大小。整体上,字号应不小于36号,且字号尽量为偶数字号,便于前端开发时换算(赵雅婷,2020)。在中西文混排时,要注意中文和西文间的转换,需在中西文间留有间隔,帮助用户更快速地扫视文字内容(图 4)。

表 5 系统字体图例

图 4 字体应用示例
3.3 色彩设计

颜色是信息可视化与视觉设计中最重要的元素之一,不同的颜色给人带来不同的心理感受。同时,颜色具有承载信息的功能,建立数据信息到颜色的映射,可增强数据表现力(图 5)。配色方案确定了大屏系统中信息内容的基调色彩和特殊语义色彩,其中每一种颜色均代表了一种独特的信号,代表了不同数据类型之间的关系与差异(李金金,2020)。

图 5 基调色色卡图

由于大屏展示背景面积过大,在大屏设备中普遍使用深色作为背景色。深色背景可聚焦视觉,利用色调与明度的变化搭配亮色图表,能够保证可视化图表的清晰辨识度,便于突出内容。此外,白色为背景色容易出现视觉疲劳,深色调相对柔、不刺眼。因此,本次大屏设计采用蓝色为基调色,蓝色具有科技感,给人冷静的感受,呈现清晰明了的使用体验。

语义色是指有习惯性寓意的约定俗称的颜色。例如,监控系统发生故障或者错误时,颜色选择高亮红色表示;在完成数据更新或系统正常运行时,一般选择绿色表示(李金金,2020)。本次按照惯例,采用红、黄、绿3种颜色表达不同程度的提示信息,如在描述房屋破坏时,用红色表示严重破坏,黄色表示部分破坏,绿色表示房屋状态良好(表 6)。

表 6 状态颜色图例
3.4 交互按钮设计

交互按钮是一种按钮动画效果,是用户在交互的过程中所呈现出的动画化图形语言,也是界面对用户正在进行的操作的可视化反馈(马驰,2019)。在地震应急工作中,常需要根据需求与可视化界面中的图形元素进行交互式分析,仅靠一幅静态的可视化图像无法支持数据分析的动态过程(任磊等,2014)。本文针对交互按钮的常态、点击、划过、弹出等状态展示进行了设计规范。场景选中采用蓝色高亮表示,图层选中采用字体加粗表示,标签内容选中采用下划线表示(图 6)。

图 6 交互按钮示例
4 实际应用

通过对大屏幕可视化技术的研究,在震后不同时间节点,实现地震应急基础背景、灾情评估、实时灾情和应急救援信息等全流程可视化展示(图 7,仅展示显示效果,非实际数据)。以应急救援阶段为例(图 7(d)),左侧分屏上常驻展示地震位置、发震时间、震级、震源深度、人员伤亡情况和地震后应急时间等信息,右侧分屏以震中为中心,展示地震影响场和救援力量分布情况。左侧用图标和数字简明表示救援力量数据,用文字展示震情趋势判断结果等辅助信息,右侧滚动展示现场上报的灾情照片和各应急单位产出科技图件,方便应急工作人员直观地看到应急救援的现状,能快速获取较为详细的救援数据,并用红色、黄色提示当前需重点关注的内容。

图 7 大屏展示效果

每个业务场景均默认了特定的图层组合,在选择某个场景后,直接显示相关图层,实现展示内容的快速切换。但在实际地震应急过程中,常需根据实际情况添加其他图层,因此在右屏场景展示中增加了图层自定义按钮(图 8),使得菜单和图层分离的设计形式可兼顾便捷性和可拓展性。

图 8 自定义图层界面
5 结语

对地震信息进行可视化处理,保障应急信息准确完备、快速传递、清晰表达和高效处理,是未来地震应急产品的重要发展方向。依托中国地震台网中心已建成的大屏展示系统,结合地震应急需求,本文对地震信息的可视化大屏设计进行了相关研究,并对地震应急信息进行归类整理,按照地震应急工作不同阶段的工作内容,构建了不同业务场景,重新划分屏幕布局,对大屏颜色、字体、图标、交互按钮等可视化样式进行了规范,为地震应急提供可视化分析展示,保障应急人员更快速地掌握地震数据,更高效地进行地震应急工作。此外,可视化技术不仅为地震应急工作者提供清晰的决策,同时也可向参观者形象地展示地震业务运行的全过程。

参考文献
陈为、沈则潜、陶煜波等, 2019, 数据可视化, 北京: 电子工业出版社.
陈谊、张梦录、万玉钗, 2020, 图的表示与可视化方法综述, 系统仿真学报, 32(7): 1232-1243.
戴文澜, 2013, 美学角度的信息可视化概述, 设计, (11): 126-128.
顾丽鸿、毕晓亮、葛朝强等, 2014, 调度大屏可视化展示系统的研究与应用, 华东电力, 42(12): 2859-2863.
胡贵伟, 赵建国, 王军林, 2019. 大屏幕可视化的设计和应用发展. 见: 2019年全国公共安全通信学术研讨会. 乌鲁木齐, 295~304.
江宁、张红才、王青平等, 2018, 福建省地震预警信息图标设计, 华南地震, 38(4): 43-47.
李金金, 2020, 大屏数据可视化系统中的视觉表现探析, 大众标准化, (16): 151-153. DOI:10.3969/j.issn.1007-1350.2020.16.066
林向洋、文鑫涛、高小跃等, 2020, 地震应急指挥中心可视化中控系统的设计与实现, 地震地磁观测与研究, 41(4): 225-231. DOI:10.3969/j.issn.1003-3246.2020.04.028
马驰, 2019, 图形界面设计中的动态效果应用及趋势探析, 设计, 32(20): 113-115.
聂高众、安基文、邓砚, 2012, 地震应急灾情服务进展, 地震地质, 34(4): 782-791. DOI:10.3969/j.issn.0253-4967.2012.04.020
任磊、杜一、马帅等, 2014, 大数据可视分析综述, 软件学报, (9): 1909-1936.
芮亮亮, 2020, 大屏可视化在钢铁管控中心系统中的运用, 信息与电脑, 32(11): 85-87.
王琳、姜立新、杨天青等, 2019, 地震应急信息自动分类方法研究, 震灾防御技术, 14(4): 907-916.
吴熙彦、徐锡伟、安艳芬等, 2011, 城市活动断层探测成果图件集的编制规范研究, 地震地质, 33(4): 978-989. DOI:10.3969/j.issn.0253-4967.2011.04.020
徐达、孙超、刘乖乖等, 2019, 大屏可视化技术在气象领域的应用, 科技传播, 11(10): 133-135.
徐敬海、聂高众、刘伟庆等, 2010, 多源异构地震灾情分类与编码研究, 灾害学, 25(增刊): 286-290.
杨彦波、刘滨、祁明月, 2014, 信息可视化研究综述, 河北科技大学学报, 35(1): 91-102.
姚忆南, 2021, 数据可视化大屏UI设计的研究和分析, 自动化仪表, 42(5): 107-110.
张晋辉、龙海云, 2017, 国际地震预警研究现状与研究热点的可视化分析, 中国地震, 33(1): 172-179.
张开智、万向、陈亚民, 2019, 关于数据大屏可视化的设计流程与发展趋势的分析研究, 科技创新导报, 16(27): 130-133.
张新阳、孙梦觉、牛斌, 2017, 大屏可视化技术在电力系统中的应用研究, 电力大数据, 20(10): 61-64.
张翼、唐姝娅、王悦等, 2016, 地震应急信息产品分类编码研究, 震灾防御技术, 11(1): 132-143.
赵雅婷, 2020, 数据可视化大屏艺术设计, 艺术品鉴, (27): 100-101.
郑通彦、文鑫涛、李华玥等, 2021, 地震应急信息速报视图自动发布系统的设计与实现, 中国地震, 37(1): 206-215.
Card S K, Mackinlay J D, Shneiderman B, 1999, Readings in Information Visualization: Using Vision to Think, San Francisco: Morgan Kaufmann Publishers Inc.