解读地图设计

pic

原po发文时间：2020-10-30 14:41

👉

Part 1. 地图的发展 Part 2. 地图在滴滴的重要性 Part 3. 解构地图 Part 4. 地图设计原则 -Part 1. 上篇要点回顾 Part 2. 设计背景 Part 3. 设计落地 Part 4. 设计验证 Part 5. 未来形态畅想

Part 1. 地图的发展

地图作为记录地形传递路线信息的载体，在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化，从石板、动物皮革，到丝绸、纸张。当互联网走进千家万户，地图也步入电子化时代。

相较于纸质地图，电子地图优势显著：更新速度快、获取信息效率高、更清晰、可交互等。电子地图（后文简称地图）的出现也影响着人们的出行方式，尤其当智能手机普及，我们可以随时查询地点、发起导航，再也不需要提前记下高速出口和转向路口了。

Part 2. 地图在滴滴的重要性

滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务，是一站式出行平台。而地图作为承载出行服务的重要载体，横向支撑着各业务线的发展。以网约车业务为例，调研结果显示绝大部分乘客都会关注并使用地图。

随着各业务线对体验的要求不断提升，单一的地图模式已经不能满足业务诉求及用户需求，需要进一步细分场景、精细刻画地图样式，于是地图的设计也变得愈发重要。

Part 3. 解构地图

地图承载的信息种类复杂、数量巨大，初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式，或许就能从中找到答案。

定义：地图是依据一定的数学法则，采用地图语言，经过制图综合来表示地球表面的图形。

实现流程：

采集真实世界的地点信息，经过编译转化成数据

数据信息中包含了地点的坐标、分类、名称等

数据经过渲染形成可视化雏形地图

雏形地图经过设计最终变成策略完整、视觉美观的电子地图。

结合“从雏形到完整地图”这一步流程的实现方式，进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。

基础层，指的是地图的数据和能力。数据大家已经有所了解了，能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础，才能设计出信息精准、交互明确的地图。

策略层，则指的是如何使用这些基础数据和能力。地图数据量非常庞大，无法全部展示，需要结合不同的场景及用户需求，有重点的呈现。

感官层，便是我们给数据穿上的衣服，会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。

解构地图后，我们不难看出，感官层是设计侧需要关注的重点层级。

Part 4. 地图设计原则

元素分类

面对如此复杂的地图信息，为了梳理出清晰的思路，我们会对地图元素进行分类：根据数据的类别和呈现状态，可拆分为点、线、面三类元素。

点元素：地名、POI*等。数量庞大，是城市规模的体现，尤其POI信息，它是地图中颗粒度最细的位置信息。

线元素：道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等，描绘出了城市的样貌。

面元素：陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现，很大程度上决定了一张地图的色调。

名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺。

名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等。

核心设计原则

从定义可以看出，地图是一种特殊的图形语言，是以上所有元素的集合体。相比我们所了解的UI设计、运营设计，地图有属于自己的设计原则。以下为大家总结了一些核心的原则：

1、符合制图学和公众认知

地图发展到现在已经成为了一门学科，我们会发现即使语言不通，拿到一张地图时也能看懂，这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知，大大降低了用户的学习成本和记忆负担，使地图可以作为一种世界通用语言流通起来。

2、保证识别度

地图属于信息类工具，其上出现的元素均需清晰可识别，保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等，而具体规则会根据场景确定。

3、清晰有层次

地图的层次清晰包含了两个方面：信息主次清晰，视觉具有整体性。

信息主次清晰，地图信息庞杂，没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性，可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性，不同元素有差异性。同时，信息主次也会根据比例尺的变化有所调整。

视觉具有整体性，在滴滴的业务场景中，地图通常作为最底层组件出现，上层还会有很多业务组件。因此在设计时需克制用色，既要保证地图中各元素之间的区隔度，又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点，提升整体的使用效率和体验。

4、细分地图模式

地图在各业务模块中应用广泛，用户需求也不尽相同，设计时需要根据使用场景区分不同模式。以网约车场景为例，业务信息始终处于上层，地图用来帮助用户定位、快速发单。因此，网约车场景的地图整体性强、色调偏冷、视觉层级后退，能更好的搭配网约车模块的整体设计，保证用户的操作效率。

5、具有品牌特性

品牌调性一直是滴滴设计层面非常关注的原则，品牌基因贯穿了所有产品，始终具有独特的视觉风格。遵循品牌的视觉语言，使地图可以更好的融合到产品中，保证了设计的统一性。

-

Part 1. 上篇要点回顾

核心设计原则

符合制图学和公众认知

保证识别度

清晰有层次

细分地图模式

具有品牌特性

元素分类

点元素：地名、POI等

线元素：道路、地铁线、水系线、铁路线、航线、边界线等

面元素：陆地、草地、湖泊海洋、AOI等

名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺

名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等

Part 2. 设计背景

为了实现“让出行更美好”的使命，今年乘客端新增了自驾导航。地图贯穿了该产品的全流程，且首页、路线规划页、导航中等场景用户需求都不相同。然而已有的模式，从配色到信息展现，都不符合首页地图的场景需求，于是需要重新设计。

以下详解设计过程。

Part 3. 设计落地

设计关键词推导

根据自驾导航的目标，拆解出了首页地图的设计目标：

构建适合自驾场景的浏览地图

提升地图体验与设计品质，提高用户满意度和好感度

打造具有滴滴品牌调性的地图

用户需求及习惯表明：在首页主要是明确自身定位、查看其他位置信息，且视距基本是手持距离。那么“构建适合自驾场景的浏览地图”关键点就在于识别度，更好的展示重点信息，保证用户读图效率。

“提升地图体验与设计品质，打造具有滴滴品牌调性的地图”的目标，可以通过视觉手段实现。在浏览场景，用户使用地图的时间不固定，为避免长时间浏览产生疲惫感，地图配色需要更舒适，对比度也要适中。这点也与自驾导航整体的设计关键词“轻量”不谋而合，于是推导出了关键词轻量化、品牌感。

设计地图方案

明确设计关键词后，开始着手设计。关键词中的轻量化、品牌感基本上决定了这款地图的调性，识别度则重点影响信息展现。上篇提到，设计时可以把地图元素拆分成点、线、面三类，按照由大到小的顺序设计，即先确定配色，再设计文字图标等信息，以免元素过多互相干扰。

1、设计整体配色

轻量化：传达轻量化的感受需要控制取色范围，于是我们制定了颜色使用规则（下图）。

色相：以冷色为主，医院（红色系）等具有公众认知的颜色可除外；颜色从品牌色系中选取

明度：限定颜色的明度范围，选取中间-略高的部分，平衡颜色对比度

饱和度：避免使用高饱和度的颜色，保证配色的舒适感

通过分析颜色，我们对传达轻量化的感受有了大致的把握。那么品牌感如何体现呢？

品牌感：具有品牌调性的地图能更好的融入产品设计风格，也能够区别于竞品，这在滴滴全流程的设计中都十分重要。在地图上我们主要用颜色及图标绘制表达品牌调性。

颜色：结合轻量化的用色规则，从品牌色系中选取，使地图配色与其他组件更加融合

图标绘制：沿用滴滴设计规范中的图标绘制语言，如圆角、简单形状等，拉齐视觉感受

最终根据“轻量化”和“品牌感”这两个关键词，设计出了地图配色的效果图。

2、设计地图信息

配色确定后，即可开启POI图标+文字、AOI文字、道路文字、以及各类行政区划文字的设计。

识别度：设计地图信息时，保证基本识别度的方式，可通过文字颜色、字号大小、图标绘制等实现。但是要做到清晰有重点，就要关注信息间的层次感。

以POI信息为例。回顾下此时的用户需求：了解自身定位、查看其他位置信息。从这点可以锁定第一展示优先级应为POI——地图上定位最精准的信息种类。而已有的图标识别度较弱，无法满足需求，于是我们进行了重绘。通过用色表达图标类型、首选有公众认知的载体作为表意、增强颜色饱和度及对比度，搭配文字颜色，从视觉上把POI信息提升至第一顺位。

用同样的方法，根据重要程度，通过设计拉开了信息的视觉层级：POI>道路名称>AOI名称>行政区划信息。