粤港澳大湾区城市数据和产业空间价值的可视化。
ROLE
Product Designer
TIMELINE
2020.03 ~ 2020.04
MY CONTRIBUTION
UI / UX Design
Motion Design
Data Visualization
背景介绍
粤港澳大湾区包括广东省广州、深圳、珠海、佛山、惠州、东莞、中山、江门、肇庆九市，和香港、澳门两个特别行政区，总面积约 5.6 万平方公里，2018 年底总人口逾 7100 万，地区生产总值达 16425 亿美元，人均生产总值 23342 美元。该区域是中国开放程度最高、经济活力最强的区域之一。
粤港澳大湾区产业空间价值地图是量城科技和广东省规划院共同发起的一项研究，立足于大湾区的各项微观数据，以企业主体对产业空间的发展诉求为视角，对 11 个城市和 157 个重要的产业平台进行全方位的价值评估。研究最终产出了《粤港澳大湾区产业空间价值评估报告》，该网站是对研究报告的可视化呈现。
网站不仅要呈现研究结论，还要将研究报告中使用的各项数据也以可视化的方式展示出来。国外的一些同类产品在公开数据可视化上做了很好的典范，例如 DataUSA 、DataMéxico，数据不只是表格中密密麻麻的数字，而是充满趣味、容易理解且类型丰富的图表。设计类似的「城市数据」网站一定十分复杂并充满挑战，一直想有机会挑战自己，粤港澳大湾区产业空间价值地图就是一次这样的机会。
信息架构
与研究报告的组织方式不同，设计网站首先要厘清数据之间的关系，研究报告中使用的数据既包含城市、区县层面的统计数据，也包含产业园区落位、周边设施等空间数据。
所以第一步是对信息进行分类，我们将信息分为 4 类：
- 粤港澳大湾区整体数据：大湾区整体的统计数据，例如人口、面积、生产总值等数据以及产业园区在各城市的分布情况；
- 城市数据：每个城市包括城市下的区县都有城市人口、通勤、经济、产业、公共服务设施、商业服务设施等数据；
- 产业园区数据：每个产业园区的位置、企业、周边设施等数据，和我们评估指标下的得分和整体排名情况；
- 价值评估指标：评估指标说明和具体计算方法，以及单个评估维度下的产业园区排名。
对信息分类后，开始构思网站整体的信息架构。考虑到数据类型不同，我们将不同类型的数据聚合到不同页面，同时首页作为一个整体的概览页也提供了城市、产业园区、评估指标的入口。将几个页面的内容做了清晰的区分：
- 首页：展示粤港澳大湾区整体情况，提供到城市页面、产业园区、评估指标页面的入口；
- 大湾区城市：展示大湾区城市列表，点击进入城市详情页；
- 产业园区：展示产业园区列表，可进入各产业园区详情页；
- 园区排行榜：展示用于评估产业园区价值的 6 个指标，每个指标有对应的说明页和单项排行榜。
首页设计
首页是用户访问网站的入口，在功能上承担整体概览、目录索引的功能，首先要考虑我们想传达的信息可以展示完整。
信息上，首页需要展示：
- 研究报告名称、简介；
- 粤港澳大湾区基本数据；
- 粤港澳大湾区地图；
- 产业园区的组成和分布；
- 产业空间价值评估方法；
- 城市和产业园区的快捷入口；
- 完成报告和购买数据入口。
可以看出，首页中需要展示的信息量很大，需要对信息进行合适的组织，并在布局上进行合理的安排。更难的是，如何在信息展示完整基础上，保证用户访问时有持续浏览的兴趣，把用户吸引到我们讲的故事当中。
当时做了一些布局尝试，当信息排布都有些冗余，交互也相对复杂，访问数据需要切换分类或者点击多次才能看到，整体上较为单调，只是原本地将信息呈现出来，缺少吸引力，总之不是很满意。
在进行一些原型尝试后，对首页设计如何改进也没有明确的思路，设计陷入僵局。于是选择停下来，开始重新思考首页的目标：
- 让用户了解研究发起的背景和目标；
- 让用户对粤港澳大湾区的城市组成、空间位置、人口、经济情况有基本的认识；
- 让用户了解本次研究的产业园区在各城市的分布情况；
- 让用户了解我们的评估方法，以及按照我们评估方法评估出来的园区得分情况；
- 为用户提供一个方便查看某一个城市或者园区数据的入口；
- 引导用户查看完整报告和购买数据，促进转化。
在思考首页目标时，注意到城市、产业园区、评估方法几项内容之间是层级递进式的关系，在空间展示上可以利用层级关系，并结合交互操作制作一种动态的展示形式。
在地图产品中，鼠标滚动对地图进行缩放是十分常见的操作（zoom in & zoom out），滚动放大的交互正好与数据之间的关系可以对应上，于是决定使用「纵向滚动」的交互操作，另外考虑到不同层级下需要展示对应的数据，于是增加了「分屏」的设计方案：
- 纵向滚动：对应不同缩放等级，滚动时从全国层级缩放到粤港澳大湾区，到 157 个产业园区；
- 分屏：滚动的同时，右侧增加分屏，展示对应地图层级的数据（城市 → 园区 → 评估方法）。
.gif%3Ftable%3Dblock%26id%3D96461f06-1483-4fb7-9c72-1b620b932837%26cache%3Dv2?width=1500&optimizer=gif)
城市页
城市封面
城市页想让用户一打开就感受到城市的氛围，首屏采用了大背景图的设计，并且精简在图片上展示的内容，只保留关键信息，其余信息放到首屏以外。于是在图片库中挑选了各城市的无版权图片作为背景。
城市数据
我们为粤港澳大湾区的城市收集整理了大量的统计年鉴数据，这些数据都需要在城市页面中需要展示。接下来就是要根据每个部分的数据特点决定对应的可视化形式：
- 基本信息：让用户建立对城市的基本认知，使用了在地图中高亮当前城市的方式，展示城市在粤港澳大湾区中的位置，和基本数据（下图第一行左）；
- 城市人口数据：人口数据分为常住人口、户籍人口等多个维度，每一项展示城市及城市内各区县的人口统计数据，使用柱状图 + 地图的方式，同时使用不同强度的颜色填充，使柱状图（区县的排名情况）和地图（区县所在位置）建立起联系（下图第一行中）；
- 城市人口分布：城市中白天、夜间人口分布，居民集中的区域「热度」很适合使用热力图展示（下图第一行右）；
- 通勤结构：城市内各区域间的人口流入、流出情况，流入、流出城市占比使用饼图，并在地图用不同颜色的线表示流入、流出的位置，线的粗细代表流动人口的数量多少（下图第二行左、中）；
- 城市经济：城市和个区县的经济基本面信息，包括 GDP、增速、人均 GDP 等 15 个维度，每个维度下同时要展示各区县的数据情况，因此设计了可点击切换的卡片选项，卡片中默认展示全市的数据，可自动轮播或用户手动切换查看其他维度数据。各区县的数据增加了从高到低排序功能，于是采用了柱状图的形式，直观反应各区域在城市中所处的位置（下图第二行右）；
- 城市产业：第二产业、第三产业同样采用了柱状图；城市内的重要产业园区使用在地图上标注的方案（下图第三行左）；
- 企业微观数据：企业增长数据，使用折线图可以更好查看数据的趋势；行业分类为了更好查看城市内行业比重，使用了矩形树图（Treemap 图）；企业分布使用了在地图上展示蜂窝图的方案，相比热力图更加精细；
- 公共服务设施、商业服务设施：使用可切换的列表形式，选中时在地图上展示该分类下的蜂窝图，查看该类数据在城市中的分布情况。
产业园区页
产业园区详情页展示该园区的数据情况，以及在我们的评估体系下各维度的得分情况。
产业园区首屏
首屏需要向用户介绍产业园区的基本情况和我们对该产业园区的价值评估，因此与首页地图区域类似，也采用了分屏的设计，左侧展示园区基本信息和数据，右侧展示我们对园区的价值评估。
本次对产业园区的评估共有 6 个维度，每一个维度都会经过计算评估出一个得分和排名情况。为了更直观地展示园区在评估维度下的表现，我们使用了雷达图的形式，园区在各维度的得分情况一目了然。
产业园区数据
产业园区页的数据主要是该园区在我们 6 个评估维度下的表现情况，每个维度依赖一些数据来评估，同样需要根据数据特点考虑适合的可视化形式：
- 区位价值度：该产业园区的对外交通便利性（距离高速公路出入口、火车站、机场、港口距离）、到核心城市的距离、创新源临近度（到到高等院校或科研机构的距离），为了更直观表现空间上的距离，设计采用了在地图上标注对应点位的方式，用户可在左侧列表切换查看不同分类；
- 产业活跃度：与城市中的产业数据类似，行业分类、企业规模采用了矩形树图（Treemap 图）；新增企业数量使用了柱状图；
- 创新活跃度：产业园区内部的高新技术企业和专列、软著数量等，以文字展示为主；
- 政策支持度：收集该地区和园区的相关支持政策，以文字展示为主；所在城市营商环境，使用带排序的柱状图展示，并高亮该城市在全部城市中所处的位置；
- 成本友好性：产业园区的地租地价、人工成本、水电气价格、内部交通便利性，使用文字展示和地图结合的方式；
- 发展特色度：该园区中世界 500 强企业、独角兽企业、上市公司的数量，和园区发展历程、发展亮点；使用地图和文字展示结合的方式。
