注：本文为田野调查法式的探索性研究，试图探索出一些设计方法和准则，仅供参考。

1. 概述

DT时代，数据已经成为最重要的资产和生产工具。人们基于生产生活产生的数据，进一步的加工提升为更精准的业务导向数据，展示数据的状态-“态”，判断数据背后的业务趋势-“势”。喧嚣一时的Facebook数据泄漏事件，也从侧面印证了数据的重要性。源于此，为了提升海量数据的提取和读取效率，更好的展示数据蕴含的态势，数据可视化的图表已经充满了不同终端（大屏、PC、移动端与一些硬件设备），数据可视化已成为数据工作者和设计师对数据的终极加工方向。因此对设计师而言，数据可视化设计已经愈来愈重要，好的数据可视化图表能在第一时间将业务信息及其走向传达给用户，是对人类在理解能力和效率上的延伸。

商业数据来源于消费者，消费者都有自己的位置属性--同一城市的不同区域、不同城市、不同国家等等。不同区域的不平衡和差异化，所产生的数据自然趋向差异。这些会成为数据重要的属性元素和变量，所以地理位置维度的数据可视化会显得尤为重要，地图自然会成为很好的数据展示形式和载体。

地图元素可视化的优势有两个方面：

1.地理位置属性，天然的基于位置属性的分类维度，优质的位置属性维度信息可视化的载体。人们对于地图的熟知和其指代意义能够在可视化信息传递中起到事半功倍的作用。

2.地图分层模型利于展示多维度的数据，可将地图分层模型的数据快速迁移，以地图分层的逻辑进行可视化数据分类和结构化展示。

以上两点都得益于人们对于地图认知模型的熟悉，能够起到事半功倍的效果，这也正是地图分层可视化设计研究的原因和方向。

2. 地图分层

2. 1地图分层定义

在论述具体的设计分析前有必要简单了解一下地图分层的概念。

分层定义：一般同类型的元素为一层，每层除元素外的区域为完全透明层，所有层叠加成完整的地图。

分层目的：地图分层便于将地图元素分层管理，能够批量管理单个图层上的全部元素。

分层应用：一般情况下一个图层上只有单一类型的元素，像日常的行政地图的元素，从下至上的图层顺序大致为江湖湖海 》道路桥梁网 》兴趣点。日常的地图可视化一般是借用地图的分层逻辑和展示形式或在基础地图上叠加要强调的业务图层。

兴趣点（POI-POINT OF INTEREST）：地图展示的所有位置点统称兴趣点。

国标中部分兴趣点的用色

2.2地图分层结构模型

为了能够更好的理解文中论述的内容，会将部分研究结果提取的研究观点(如地图分层结构模型)位置前置，以便能够在具体的案例中做一个论证。

严格的来说所有展示的图表都是几何元素的集合，因此在剖析地图分层设计的结构时便从最本源的组成元素入手，追本溯源透过现象看本质，以便能够更好的发现地图可视化底层的规律。

如下图所示为总结提取出的地图分层设计的结构及其组成元素，下面的具体设计论述中都会按照这个结构，先抽出一些可能会不太好理解或容易出现理解偏差的概念做一个简单的界定。因为也非严谨的几何学概念，可能放到具体的案例中会更好理解一些，如果界定还是不好理解可结果后续的案例分析。

直角与圆角：两边的连接处为圆弧则为圆角，反之则为直角。非严格的几何学定义，因二者表达出不同的气质，用对比的名称便于表达。

离散/聚合/覆盖：元素之间相互不接触为离散，反之则为聚合、覆盖。聚合还有一个另外一个概念，多元素重合后抽象为更高一层级的标识形象，类似量变到质变，如极石成山，集流成河。

图层控件：有些元素作为地图的操作控件层不具有地理意义，如放缩工具层、地图元素的过滤条件操作图层等等。

地图分层设计的结构

图层元素能够传达其外化气质和情感基调，如色彩的冷暖、直角的严谨冰冷生硬圆角的流畅和、对称的稳定不对称的破坏动感。

而元素之间的聚合关系、图层间的关系往往是映射不同元素、不同图层之间的关系，如寺庙在山上、绿植层会覆盖掉其下层的山体层。诸如此类逻辑关系通常会带入事物的故事梗概，有机的串联起图层元素之间的关系。可视化数据的故事线索，也需要通过图层关系进行关联。

以上二者融合构成一个完成的有机体，有骨骼有情绪才能传达全面的信息

地图分层设计的模型

下面将会分别以常规地图（日常用到的导航地图）、地图分层可视化（业务案例）案例为对象，运用上述的地图分层结构模型进行分析和提取以发现蕴藏的设计规律，以供参考。

备注：在案例分析中，将会利用地图不同缩放层级下主体显示不同图层元素的特性，通过缩放地图的形式抽取不同图层的元素属性和图层属性。

3. 常规地图分层设计分析

3.1 PC端常规地图设计分析

下图所示为高德地图，从右至左从下至上为不断扩大缩放层级后的展示效果。

图形：从右至左从下至上依次为，非规则图形的异形（整体无图形）> 规则图形圆、直线、矩形、直线（秩序感），规则图形居多。通过图形传达气质，自然图形元素传达的整体视觉情绪也是从流畅到条理。由整体感知到功能细化展示，平面地图层级的块面分割，是强功能和业务的诉求，当线性分割较多时区域视觉元素多，视觉噪点太多，从信息可读性上来说不利于地图的整体性展示。 

色彩：下图中抽取了由下至上的图层用到的色彩，冷暖色调穿插使用，暖色调强调突出的元素，如上层的路网和地铁等兴趣点。但暖色调的颜色较多，视觉焦点会较多，不太利于降低页面的整体的视觉噪音。会增加可视化观知的成本，也会削弱可视化的功能诉求，如室内图层元素过多反而会降低寻找特定兴趣点的效率，可将不常用的兴趣点隐去或弱化。

高德

如下图所示为Google地图，从右至左从下至上为不断扩大缩放层级后的展示效果。

图形：与高德相比，整体倾向于弱分割，分割线和区块边缘的连接处少用直角，都有一定的倒圆角。信息图形的观感统一性和流畅感会更好一些。最小缩放层级有球体地图，放缩过程逻辑更有画面感和故事性，故事情节的传递方式传递信息效率要高很多。室内平面地图级的区块不做块面分割，强整体，弱功能。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，暖色调较少,色调较统一。色彩种类要少很多，用色比较克制，冷色调更容易降低视觉噪音，整体的融入感会更好。

谷歌

下图所示为百度地图，从右至左从下至上为不断扩大缩放层级后的展示效果。

图形：较小的缩放级别时，直线分割较多过于注重区域分割，影响整体画面。较大缩放级别时规则图形居多，但图形元素的信息量比高德的少，所以界面清爽很多，对应信息条理会清晰很多，传递效率对应提升。分割线和区块用直角较多会有些凌乱和生硬，不是那么的亲和。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，上层暖色调突出。同高德相比暖色系用的种类较少且色系更相近，整体展示效果要好很多。

百度

3.2 移动端常规地图设计分析

下图所示为百度地图，从右至左不断扩大缩放层级后的展示效果。

图形：注重图层的分割，较清晰，利于信息展示但有损整体观感。控件操作层的业务诉求较多，有大量的操作图标，所以操作层较密集。重功能，焦点在控件层。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，层与层之间色系差距较大，在小屏幕上会略显凌乱。

百度

下图所示为高德地图，从右至左不断扩大缩放层级后的展示效果。

图形：同百度地图。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，上层暖色调突出。

高德

下图所示为苹果地图，从右至左不断扩大缩放层级后的展示效果。

图形：背景层的分割很弱，很少出现直角，弱化细部图层的分割，重视主题，视觉较统一。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，冷色系为主且色系较统一，视觉负累较小，亲和度较高。

 苹果

下图所示为谷歌地图，从右至左不断扩大缩放层级后的展示效果。

图形：背景层的分割很弱，很少出现直角，弱化细部图层的分割，重视主题，视觉较统一。

色彩：下图中抽取了由下至上的图层用到的色彩，主体冷色调为主，上层暖色调突出。层次比较分明，能够快速传递上层的信息。

谷歌

下图所示为几个移动端地图为载体的可视化案例。

图形：为突出上层（前景），下层（背景）加遮罩，遮罩的程度根据信息展示层级的需要决定。常用的可视化分层设计调用地图的方式，通过蒙版弱化地图背景，以便更好的展示业务层。

色彩：前景背景差异较大，突出前景的业务层。前景图层元素色彩饱和度更高，快速定位焦点。

下图所示几个移动端地图为载体的可视化案例。

图形：车辆聚合的层级由车辆数量至区域。分层级渐进聚合，有利于展示不同维度的信息及信息间的逻辑关系。精妙的故事情节更有利于信息的有效传递。

色彩：主体冷色调为主，暖色调极少。

4. 常规地图分层设计分析总结

如下图所示抽取了常规地图由下至上图层上兴趣点的色彩，可作为可视化设计中遇到常规地图的参考。

大体来说常规地图的用色还是遵循拟物的原则，因为是现实环境的抽象，所以各方面还是追求真实的映射。横向对比主流地图的分层设计，总体观感上为更好的突出某一个图层的兴趣点，需要克制整个环境的用色，多用冷色调浅色系。冷色调浅色系的环境融合性更好，需要强调的图层兴趣点建议采用冷色系深色调，与暖色调相比，冷色系深色调即突出又不噪杂，环境的可融合性好。

常规地图基本上是通过色彩来确定感观基调，因为可视化的兴趣点映射的是同样的实际的地理位置元素，所以差异化不是很大，只是通过处理边缘连接点的圆角与直角来做一些细微的感观基调传达。

常规地图及其延伸应用的可视化设计遵循下图所示的规律：

1.通过图形的几何属性和色彩来确定整体的观感：冷暖、直角圆角取其自身观感进行组合以满足可视化信息的观感诉求。

2.通过透明遮罩叠加的方式处理不同图层间的融合：叠加、聚合、离散合理处理不同图层的元素的展示问题。

3.通过突出的图层控件关联起元素与元素间的关系、图层与元素间的关系、图层与图层间的关系，串联起可视化的故事梗概。

5. 地图分层可视化设计案例解析

运用地图分层进行可视化设计的功用一般有两个方向-载体与分层结构模型

载体：将常规地图作为可视化的载体，在常规地图上叠加业务图层。一般是为了突出业务层，多加工业务图层，地图作为搭建认知环境的背景故事板，快速将用户带入可视化传递信息的故事中。

分层结构模型：利用常规地图分层结构的逻辑，展示业务结构及逻辑。可视化业务的信息模型可映射为地图分层模型，利用人们熟知的地图认知的心理模型降低信息的习得成本，提升可视化信息传达效率。这种情况就需要逐层加工图层元素了，工作量比较大。

直角深色系

色彩：冷色调深色系能够传递出科技感、未来感，可以作为注重可视化数据展示趋势的选择，更容易带入场景。

图形：如下图中上部的三张图上圆框出放大的细部都是棱角分明的直角，直角块面分割清晰，能打造出不限于稳定的动感。于此同时图层元素个体及其布局趋向不对称，部分中心对称，这种对称处理加深了图形动感的趋向。

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

分层模型：相对来说每一层都要绘制，然后根据地图的分层模型进行展示，工作量会大很多。

直角浅色系

色彩：冷色调浅色系有工程机械感的气质，此种用色情况下色彩不夺目，更容易展示信息。

图形：直角元素整体轴对称较多，部分中心对称，规整的分割能够传达出完整、严谨。

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

分层模型：相对来说每一层都要绘制，然后根据地图的分层模型进行展示，工作量会大很多。

直角浅色系暖色调

色彩：冷色调暖色系有纸质图纸的质感，工程机械感。此种用色情况下色彩不夺目，更容易展示信息。

图形：整体轴对称较多，部分中心对称，规整的分割能够传达出完整、秩序。

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

分层模型：相对来说每一层都要绘制，然后根据地图的分层模型进行展示，工作量会大很多。

直角浅色系冷色调 

色彩：冷色调冷色系古朴、古风和油画的清冷感，安静不失气质。

图形：圆角不对称，轻分割、整体感、融入感。 

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

圆角

色彩：下层冷色系深色调，上层暖色系对比明显凸显上层，特别容易吸引关注。

图形：圆角为主，圆角块面趋向融合不分割，流畅灵动的科技感。

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

直角圆角结合

色彩：直角冷色系下层，圆角暖色系上层，能够拉出分明的层次感，能够展示信息的丰富度。

图形：直角圆角相结合，但二者趋向规则图形，为对称图形。信息较多时图形对称能够梳理出一定的秩序感。 

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

蒙版遮罩

蒙版遮罩：通过加上类似滤镜的不同蒙版，色彩形成清晰的对比，能突出需要强调的信息。

载体：选择地图一个图层作为业务信息的载体进行可视化，主要处理业务表达层的图形和色彩以突出。多处理色彩，少处理地图层图形。地图的天然载体，处理起来工作量小，事半功倍。

操作控件分析

色彩：操作控件一般为最顶部的图层，也是整个界面的点睛之笔，需要与底层形成反差。

图形：操作区一般需要规则图形，作为操作入口稳定的规则图形有利于提效。

6. 地图分层可视化设计参考方法

6.1参考准则

基于以上地图分层的可视化设计的分析，可梳理出如下的地图分层可视化基于图层元素属性的设计准则参考，可参照快速输出地图分层可视化的感情基调。

6.2设计模型

基于以上的设计分析及梳理，输出了地图分层可视化设计的模型。

1.确立方向：从流程角度来说首先需要确定信息可视化的模型，需要选用地图作为载体还是选用地图的分层结构模型，确立好方向才能快速输入。

2.确定基调：确定信息可视化的观感基调，以便通过特有特质的色彩和图形准确满足需求。

3.细化：通过图层控件或透明遮罩等方法填充完善可视化的结构细节。

7. 小结

地图分层可视化设计是一个系统的工程，本文试图通过田野调查法的方式发现一些结构和细节的设计规律，确定一些设计的指引，仅供参看。