信息可视化设计在零碳园区中的应用研究

摘要：为进一步提高我国在全球碳中和进程中的贡献度，促进碳数据信息在工业园区碳管理中的高效、直观传达，探索可视化界面设计赋能零碳园区数字化管理与碳中和目标的实现路径。本文基于文献分析与案例研究，利用可视化设计理论与方法，对零碳园区碳中和规划发展过程相关的碳数据进行可视化设计研究，并通过案例实践，进行园区部分碳数据的可视化设计应用。实现了零碳园区中建筑、交通、生态碳汇的可视化界面的设计研究与实践。因此，本文的可视化的界面设计可以在社会层面为“双碳”助力，同时可以为未来的零碳园区可视化界面提供参考。

关键词：双碳；信息可视化；界面设计；零碳园区；碳中和

中图分类号：TP391.1 文献标识码：A文章编号：1003-0069（2024）12-0132-04

Abstract：In order to further improve China’s contribution to the global carbon neutrality process，promote the efficient and intuitive communication of carbon data information in the carbon management of industrial parks，and explore the path of visual interface design to empower the digital management of zerocarbon parks and the realization of carbon neutrality goals. Based on literature analysis and case studies，this paper uses visual design theory and methods to conduct visual design research on carbon data related to the carbon neutrality planning and development process of zero-carbon parks，and carries out the visual design and application of some carbon data in the park through case practice. The design，research and practice of visual interfaces of buildings，transportation and ecological carbon sinks in zero-carbon parks have been realized. Therefore，the visual interface design in this paper can help “dual carbon” at the social level，and at the same time provide reference for the visual interface of zero-carbon parks in the future.

Keywords：Double carbon；Information visualization；Interface design；Zerocarbon parks；Carbon neutral

引言

2020年9月22日，我国在第75届联合国大会上提出“双碳”目标，即要将我国二氧化碳排放力争于2030年前达到峰值，并努力争取2060年前实现碳中和。作为碳排放大国，我国在温室气体减排方面面临着前所未有的国际压力。研究表明，全国碳排放30%来自工业，因此，解决工业园区碳排放问题是我国实现碳达峰碳中和的关键，零碳园区也由此成为当下工业园区最迫切的改造与建设目标。因此，如何以系统性视角，结合前沿设计创新理论与方法，助力实现“3060目标”显得尤为重要。其中，零碳园区的碳数据管理因其所涉及的数据量大、数据种类复杂，为园区内各部门的数字化、智慧化运行与管理带来了诸多挑战。信息可视化设计可成为解决这一问题的创新助力，通过零碳园区碳管理系统界面实时显示园区内碳数据变化，能够准确、快速地以较为直观的视觉形式辅助园区管理与决策人员，针对园区内关键碳排放影响部门制定减排政策，从而逐步实现园区的碳中和目标。

一、零碳园区碳管理系统界面的信息结构与内容

零碳园区的碳管理系统界面主要由园区内碳数据信息构成，针对其信息可视化设计是基于以人为本的服务理念，结合视知觉原理与逻辑学知识对碳数据进行合理的结构与布局设计。良好的零碳园区碳管理系统界面设计能够引导管理人员捕捉碳管理中的关键信息，避免用户受到复杂信息干扰从而出现认知困难，从而保证园区碳数据信息传达的速度与准确度，进一步提升园区碳管理的效率，更加精准地进行碳排放核算，支撑碳核算体系运转[1]。

（一）信息结构可视化

符合用户信息处理需求的可视化设计主要体现在功能性信息的清晰表达。由于目前全球零碳园区建设数量不多，整体还处于探索与建设过程，对零碳园区碳管理数据中功能性信息的确定，主要从理论研究与实践研究两方面出发。在理论研究方面，文章通过对国内外140篇工业园区碳排放相关文献进行分析与总结，结合园区碳中和实现原理（即园区空间与时间边界内的碳排放量小于或等于碳吸收量），构建出零碳园区碳中和目标实现的核心功能性信息，这些核心功能性信息的获取同时也是用户为达成零碳园区建设目标，在工业园区碳管理过程中最迫切的信息需求，如图1所示。零碳园区碳管理系统界面应包括碳排放端与碳吸收端两方面数据信息的收集、监测、分析与展示，在碳排放端，该界面需要具备的功能性信息有：能源供给端信息（如清洁能源的利用、天然气等能源品种及信息）与能源使用端信息（如建筑、生产、交通、市政的能源消耗信息）；在碳吸收端，该界面需要具备的功能性信息有：工业碳捕集信息（如生物碳、CCUS技术等信息）与生态碳汇信息（如园区内的植被种植、水池等碳汇信息）等。最后，还需要集中展示园区碳中和进程数据，包括园区以年为单位统计的碳排放量计算与监测数据、碳吸收量计算与监测数据、使用清洁能源所抵消的碳排放量数据，以及不同部门关键碳排放因素的突出显示，以便于园区管理人员根据实际情况，更好地把握园区碳中和决策制定的内容。

在此基础上，通过实践研究。文章调研了目前国内外工业园区的优秀碳数据管理系统界面设计，结合对设计专家意见的调研，对碳管理系统界面的核心功能性信息进行了层级化的信息结构设计，如图2所示。零碳园区碳管理系统界面的信息结构从园区碳中和信息需求以及用户视觉习惯的角度出发，把上述核心功能性信息进行分层设计，将实时碳地图、能源、建筑、交通、碳汇实时碳数据列为零碳园区碳管理系统界面的一级界面。

零碳园区碳管理系统界面中的二级界面是基于一级界面所展开的具体信息内容。其中，实时碳地图的二级界面信息有：园区建筑3D立面图、园区交通路线图、园区植物分布图；能源实时碳数据的二级界面信息有：可再生能源的减碳数据显示、基础设施的实时碳排放图等；建筑实时碳数据的二级界面信息主要有：建筑实时碳数据、建筑节能措施减排图等；交通实时碳数据的二级界面信息主要有：停车场剩余车位数据、交通出行路线选择等；碳汇实时碳数据的二级界面信息主要有：植物种类功效及固碳量、植物固碳排行等。

零碳园区碳管理系统在信息结构层直观展示了界面设计的视觉层次，能够使用户在最具效率的程度上把握园区碳管理的相关核心碳数据，也使碳数据信息区域和内容结构清晰明了，使用户在零碳园区碳管理界面上具有很好的视觉认知体验。

（二）信息内容可视化

信息可视化就是通过综合处理抽象数据并转化为图形图像这类用户易于理解的视觉元素来实现，从而让用户可以用最为直观的形式来完成对于数据信息的接受与理解。信息可视化的内容是指界面展现的所有文字、图片等信息要素，结合前述研究与分析，零碳园区碳管理系统界面的信息内容主要是两大核心信息内容：实时碳地图内容以及实时碳数据内容。

1.实时碳地图内容

园区实时碳地图的内容主要包括园区建筑实时碳地图、园区交通实时碳路线图以及园区植物碳汇分布图。园区实时碳地图的实现，是碳管理系统平台将园区模型制作为动态展示画面，通过接入各项碳数据，结合地图表现形式来传达园区碳数据在各个区域的分布及运行情况。例如，园区某部门区域内的碳排放量变化，较其他区域则会产生颜色变化的对比，实时地图可视化在信息可视化方面主要是应用6种图表类型的地图形式，实现数据及分布类信息可视化。园区实时碳地图主要实现两方面的碳信息传达功能，一方面是准确表现园区内碳排放与碳吸收数据所在区域和空间位置分布，另一方面是直观定位出碳排放量较大的区域，给予园区管理用户以所见即所得的视觉传达体验。实时碳地图的数据来源主要有两种，主要是通过接入园区能源账单数据，进行碳排放量的转换计算，其次是通过园区内设置的温室气体传感器数据进行补充与数据对比验证，从而提高整体实时碳数据的准确性。

园区实时碳地图内容的可视化，将偌大的园区空间信息与复杂的园区碳数据进行结合，将碳数据数值信息转化成直观的图形与色彩变化，带给用户更快捷有效的认知感受，大大减轻了用户的认知负荷，提高认知速度，获取有效的园区碳数据信息[2]。

2.实时碳数据内容

园区实时碳数据的内容主要包括能源实时碳数据、建筑实时碳数据、交通实时碳数据以及碳汇实时碳数据。这些碳数据主要有两种信息可视化表达方式，一种是以表格形式呈现某一段时间（周、月、年）内的碳排放或碳吸收数据，另一种是以统计图的形式，如柱状图、环形图、折线图等展现碳数据变化趋势以及不同部门碳数据所占比例情况。

在能源实时碳数据方面，实时碳数据内容的信息可视化主要功能是对园区的能源使用进行分区域、项目的内容归纳，如清洁能源利用、天然气等能源品种及账单信息。在建筑实时碳数据方面，内容可视化的主要功能是了解办公建筑内的碳排放情况，以方便管理人员对于建筑的节能减碳做出相应的措施，例如：加快更新建筑节能基础设施等标准，提高建筑节能降碳要求等。在交通实时碳数据方面，内容可视化的主要功能是对园区内交通碳排放进行监测，这样的界面信息设计可以有力地对园区内交通形式进行组织，加强园区内接驳交通及园区内外运输管理。在碳汇实时碳数据方面，内容可视化的主要功能是监测园区内不同植物种类的固碳能力，以方便园区生态管理者对植物的分布进行再设计与规划，从而减少更多的碳排放，达到生态固碳的目标。

3.实现信息内容可视化的途径

这些数据内容通过表格与统计图的可视化，并且对数据来源进行详细且准确的分类，可以让园区管理者能够清晰地掌握园区内碳排放与碳吸收情况，对园区的关键碳影响部门和区域有清晰的认知和了解，掌握园区的碳中和进程情况。

表格的可视化数据内容将园区的所有原始碳数据直接接入，不但能够提高辨识性，而且通过准确的数字化展示更是提高了园区碳数据在内容可视化方面的可信度；统计图的可视化，则更加有利于用户直观了解园区碳排放的数据。如条形统计图可以直观看出各种数据大小的图表类型，根据碳数据的大小、时间等进行排列设计，清晰表达出碳排放的数据情况；折线统计图可以表示园区内碳数据的多少，还可以反映统计碳数据的增减变化；扇形统计图可以反映总数据与占比数据之间的关系，将不同来源的碳排放数据占总数据的比例以更高效的方式显示，可以提高数据结果获取的效率，更清晰地了解部分与整体之间的比例关系。

二、碳管理系统界面的信息可视化设计表达

信息设计表达可以说是一种信息可视化设计方法，主要结合用户的需求来设计定位，采用视觉设计手段，通过色彩，图形，版式以及文字等元素把数据信息转化为用户可以识别的直观信息，创造出更加完整，美观以及流畅的界面风格来提升信息传递的准确性以及高效性。用户体验较好的信息可视化设计表达能够通过视觉表现形式来吸引使用者，激发其兴趣与好奇心，进而捕捉其注意力，提升用户接收与反思数据的速度与效率。零碳园区碳管理系统界面主要从用户需求角度出发，对界面版式布局、界面色彩搭配、界面可视化要素进行设计表达，通过信息之间的形态与色彩等对比来提高关键碳信息的传达效率助力优化零碳园区碳管理模式与流程。

（一）版式设计

信息可视化中的版式设计取决于两大因素，首先，版式设计中内容的规划需要符合内容逻辑，这是由前述构建的信息结构层级决定的，要从布局上理清信息组织结构和层级关系。其次，版式信息读取流程设计需合理，人们视线习惯自上而下，从左至右，而且水平移动比垂直移动要快，这就是人们阅读习惯读取过程中3个最基本阅读习惯。在界面的版式设计中，信息的结构具有绝对的视觉主导作用。以建筑碳数据界面版式设计为例，如图3所示。

将时间信息、园区建筑、界面切换和刷新按钮作为最主要的部分，置于界面最中心的位置，使得用户的视觉聚焦于此，直观了解建筑碳排情况，轻松点击就可实现界面切换与界面刷新，减小了操作压力。在左侧，用户可以选择历史数据查看建筑碳排放进程，十分容易操作。往下为趋势图，更加直观地反映了建筑的碳排放情况。右侧的碳数据变化图及辅助减排信息也可以帮助用户更加清晰地了解园区建筑如何实现节能减排。这种界面版式的灵活设计，不仅适配于场景信息的呈现，更提高了空间的利用率[3]。

（二）界面色彩

色彩是信息可视化的重要设计元素，独特的色彩基调需要将设计对象、使用环境以及行业特征综合起来考虑，三者相辅相成、相互制约，并在具体设计中结合信息可视化的主题与内容进行考虑。色彩在界面设计中与界面风格相辅相成，利用好的色彩搭配可以提高界面的使用效率[4]。零碳园区碳管理系统界面的用户范围并不广泛，主要面向园区内管理及决策人员，应从此类界面主要受众的性别、年龄、文化层次来甄别其色彩喜好，从迎合用户心理需求的角度进行色彩表现。此外，也要结合行业、领域的不同进行色彩上的变化，如在碳中和相关行业领域中，绿色和蓝色象征着低碳和科学的生活方式，贴近自然。因此，在园区碳管理系统界面的可视化设计中，可以考虑绿色系与蓝色系的搭配。如图4，为零碳园区可视化界面设计色彩。可选取蓝色、绿色作为系统界面的主色，以展现科技感与智能感；另外，选取黑色、深灰色作为界面背景色，给大众一种理性思考的深邃空间感。在视觉上，深色调更易识别，且适合长期观看，不易产生视觉疲劳，同时更加节省电力，符合园区实现碳中和的目标。

（三）图形元素

在可视化界面的文字元素设计方面，文字是信息传达的主要手段，也是可视化界面设计必不可少的元素。在界面的布局不清晰时，文字设计起到了对用户视觉的导航作用及信息内容的解释作用。在可视化界面的设计中，每个布局都有着与之对应的文字标题，并且字体种类不超过2种，以达到整个字体风格的统一，这可以使得用户快捷、清晰地了解该板块的数据及信息；在图表中应用的文字及数据，设计不同的变换方式，如文字随着用户操作或随着时间变换，容易辨识的特点可以使用户直观感受碳排放的来源及变化趋势，以帮助用户或园区管理者制订减排策略。

（四）交互方式

交互元素是可视化界面的一个重要属性，主要为用户提供主动或被动的互动方式[5]。交互的便利性决定了用户在使用可视化界面过程中的体验感。本研究采用点击选择、点击刷新等对于用户最为简单的交互操作设计，可以使用户快速了解可视化屏幕传达的信息，并对之后的行动轨迹做出选择。例如，在办公建筑的界面设计中，点击对应的建筑楼层，即可显示楼层号及其碳排放数据，这对于用户来说，是十分便于操作的交互方式；另外，图表动态的交互设计可以为用户创建沉浸式体验的活动氛围感[6]，如在植物固碳界面设计中，点击植物的名称即可显示其功效及日固碳量，就如同参与到园区植物固碳中的一环。

三、碳管理系统界面信息可视化设计实践

（一）技术路线与平台设计

本文的零碳园区碳管理系统界面可视化设计在前端使用EasyV数字孪生可视化平台，并通过Python语言进行编辑。该可视化设计方案内容主要有建筑碳管理可视化界面设计、交通碳管理可视化界面设计与生态碳汇可视化界面设计，技术路线如图5所示。

其中，Easy V数字孪生可视化平台结合了GIS（Geographic Information Science）、BIM（Building Information Modeling）等技术，围绕数字孪生、行业应用等，帮助用户实现数字化管理；Python软件，可以在大量数据的基础上，结合科学计算、机器学习等技术，对数据进行清洗、去重等进行针对性的分析，针对园区内重复出现的问题可以进行关键字的提取，以生成可视化的图表，是可视化界面设计中重要的一环；青萍空气检测仪是一款检测空气中二氧化碳含量、PM2.5含量、温湿度及总挥发性有机化合物（TVOC，Total Volatile Organic Compounds）的便携性仪器，已接入米家智能联动，检测数据可实时上传到云端，以便后续数据的统计和整理，其精确度和检测覆盖率可作为碳排放数据参考。研究以办公建筑为单位，用检测仪器收集办公室二氧化碳浓度，来作为建筑碳排放的数据监测来源。

（二）零碳园区碳管理系统界面设计应用

1.建筑碳管理可视化界面设计

通过对零碳园区碳管理系统界面的设计研究，在园区运营管理过程中可实现园区各部门碳数据信息的可视化展示，以园区建筑中办公建筑的碳管理可视化界面设计为例。首先，在界面左侧，可以设置建筑碳排放时间范围的选择，通过用户操作，界面会刷新至指定时间段的建筑碳排放情况；其次，设计建筑办公室的实时碳排放量趋势图，实时显示办公室随时间推移所产生的用电量及其空间内的温湿度变化，以便联动的建筑节能与通风设施进行调节；接着，加入碳排放量预警图，当碳排放超出范围时显示为红色，以达到预警员工的效果，从而通过有关措施减少区域内的碳排放量。

在界面中部显示当天时间、办公室3D立面图，用户点击立面图对应楼层可查看楼层号与碳排放情况，以及设计界面的切换与刷新版块，方便用户切换查看其他的碳排放来源。最后，在界面右侧设计了月初末建筑办公室碳排放量变化图，根据月初月末的碳排放对比可以看出碳排放变化的差距，从而对办公室产生碳排较少的进行鼓励嘉奖，对于碳排较多的办公室进行预警整改。在办公室的碳排放检测中，使用青萍空气检测仪检测到的二氧化碳浓度及其他含量记录数据，该数据可以通过青萍空气检测仪开发者平台（https：//developer. qingping.co）与Easy V平台进行互传，以达到数据共享；为了使得用户有参与感，设计了建筑办公室碳排放量优秀评比图，根据碳排放多或少来奖励或预警办公室人员；还设计了各种举措下碳排的减少量变化图，有步行出行（减少交通、电梯碳排放）、增加绿植（吸收及固定二氧化碳）、宿舍人员的节约意识（节约电能、光能等）以及通风加湿设备（空调系统的通风和室内加湿系统都可以使得室内二氧化碳浓度降低）。

2.交通碳管理可视化界面设计

接下来，还进行了园区中交通碳管理可视化界面的设计实践。首先，在界面左侧，设计了今日天气及风向的内容；在其下方，设计了交通路况总览图，选择驾车或其他交通工具出行的用户可以在总览图上查看每条道路的实时交通状况，有效节省路况信息查找时间；在左侧最下方加入了园区停车场数量统计图，对于进出停车场的车辆数量与车辆产生碳排放数据进行实时检测，既方便车主查看停车场车辆状况，又方便园区管理者针对交通碳排数据做出相关的减排行动。

在界面中部，加入上海交通情况的实时地图。在界面右侧有与之对应的交通情况实时判断水位图，这是对于交通情况了解最简单最快捷的方式，当水位图为红色时，交通情况堵塞；另外，还设计了园区内的交通碳排每周总结柱形图，该柱形图总结了一周以来每日碳排占每周总交通碳排放的情况，以便观察周内哪一天的碳排最多，哪一天的碳排最少；最后，设计了园区停车信息动态显示变化图，根据时间的变化，可以清晰地观察到园区内停车场进入的车辆停车状况以及车牌号的登记。

3.生态碳汇可视化界面设计

除此之外，本文还进行了生态碳汇可视化界面的设计。首先，在界面左侧设计了植物固碳占比及植物功效显示图，在占比圆环点击对应植物的色块，会显示植物总占比、日固碳量与功效。在这里，植物固碳量数据来源方式有两种：第一，园区内二氧化碳检测仪收集数据；第二，为单位面积植物固碳量乘以植物占比面积所得；接着，是植物碳排月总结对比图的设计，可以显示园区内植物月初月末吸收碳排的变化量，此对比图可以明显观察出何种植物的固碳效果最好，从而引入园区以规划植物占比，从而减少碳排。

在界面中部设计了园区植物分布总览图。最后，在界面右侧加入了植物固碳排行榜，即对园区内植物的固碳效果优劣进行排行显示；还加入了植物固碳对比（白天黑夜），即随着时间推移，对园区内植物白天与黑夜的固碳能力进行对比，从而对植物的占比、位置进行规划，以减少园区产生的碳排。

结语

碳数据的系统可视化界面设计，帮助零碳园区节能减碳，实现“双碳”目标，是未来绿色低碳时代发展的重要方向。本文通过对零碳园区中碳管理系统界面信息及“双碳”政策下零碳园区建设的需求进行分析，得出了可视化界面设计在零碳园区中应用的必要性结论。并且，以上海市闵行区内工业园区碳管理系统界面为设计目标对象，对其办公建筑、交通、植物固碳三方面进行了可视化的界面设计。最终，实现了零碳园区的碳数据管理系统可视化的设计方案，为将来可视化界面设计在零碳园区中的应用提供了思路以及解决方案。

基金项目：国家社科基金重大项目（17ZDA020）：设计形态学研究；2022教育高等教育司智能创新设计人因与工效学联合实验室项目（编号：202209LH16）；国家自然科学基金重点项目：多学科知识激励的复杂成形装备正向创新设计理论与方法研究（编号：20Z103020019）；上海交通大学设计学院-上海闵行房地（集团）联合零碳智慧园区（项目编号：23H020100957）

参考文献

[1]马欣.“双碳”背景下零碳园区建设研究[J].合作经济与科技，2023，（08）：4-7.

[2]袁浩，胡士磊，徐彦等.运动类APP的信息可视化界面设计研究[J].包装工程，2020，41（18）：236-241. DOI：10.19554/j.cnki.1001-3563.2020.18.030.

[3]李华玥，郑通彦，王尅丰等.基于地震信息的大屏可视化技术研究与应用[J].中国地震，2022，38（02）：293-303.

[4]戴娴子，杨棚瑞.基于认知心理学探析APP界面设计中的色彩[J].湖南包装，2022，37（06）：93-95+143.

[5]Gong C. Human-machine interface：Design principles of visual information in human-machine interface design[C]//2009 International Conference on Intelligent Human-Machine Systems and Cybernetics. IEEE，2009（2）：262-265.

[6]杨超杰，张运彬，周红石.交互界面中图形符号的设计研究[J].设计，2023，36（07）：83-85.