许久不见，甚是想念~

各位父老乡亲们，寡人又来啦。

今个儿，咱们继续修炼排版神功！

今天，咱修炼版面率&留白！

按照惯例，同样先来看哈这俩问题~

带着问题去看，强制让众爱卿思考一波。

下面俩版面，哪个给人更精致的感觉？

那必须是「优雅含蓄C」。毕竟她优雅含蓄，是名媛（拼的），精致是人家基本功~

放下皮鞭，寡人认真了~

为啥「优雅含蓄C」更精致？主要是因为C留白更大！

留白大了，就给人更精致的感觉。

反观「热辣滚烫A」，太过饱满，留白比较小，自然精致感就差了~

这里寡人要插句话了~

往几期，不少爱卿在评论区争论，

像这种例子哪个更好~

拿这个例子来讲，

肯定就有爱卿说：“我喜欢A，所以C不好。”

或者，“我喜欢C，所以A不好。”

这呀，就理解错寡人的意思了。

风格本身是木有好坏滴，

根据项目选择合适的风格，

再根据风格设置相应的图版率、跳跃率、留白等要素，

才是咱这系列文章的奥义所在。

所以鸭所以，

根据主观喜好来争论好坏，Duck不必~

毕竟本猫几分钟（寡人就是快）出品的案例，

那必须都是相当华丽且优秀的，

能说明相应要素对版面的影响就够啦~

再看第二个问题~

下面俩卖菜的名片，你会找哪个来买？

那肯定是「大声吆喝A」 呀，

毕竟C爱答不理，没人喜欢~

好吧，看在各位在挥舞皮鞭，

寡人怕了，就容我解释一下~

「A」的留白较少，比较饱满，给人的感觉就很精神，很热情。

而且留白少也会给人更实惠的感觉！

买菜找「小A」，体验肯定棒！

而「爱答不理C」，看这名片真的是爱答不理呀！

大量留白，品质感虽然很强，

但，你一卖菜的搞这么高端干嘛。

看这名片我还以为要去买奢饰品！

总之看上去就很贵且不近人情，没法让老夫讨价还价，

所以拜拜了您嘞，俺还是去找「小A」买~

各位爱卿也看出来了，对他们版面感觉造成影响的就是留白！

但里面还有一个隐性的因素，那就是版面率。

咱家的就先来讲讲，撒子是版面率~

众所不知，

版面四周，

是有页边距的。

学名叫天头、地脚、切口、订口…

这些太繁琐，咱不管，就叫它页边距~

（化繁为简，乃大猫山人之绝学~）

除去页边距的部分就称之为版心~

版面率，就是版心的大小。

所以

版心大，四周的留白就小~

版心小，四周的留白就大~

如果

版心最大，那就是满版。

版心最小，那就是空版，也就是白纸一张。

满版的版面率为100%，空版的版面率为0%。

相信众爱卿都理解版面率了，那么版面率就说完了。

What？这就完了？

大胆！你竟然不讲版面率怎么用~

别急别急，版面率的大小对版面的影响，归根结底还是留白的问题~

所以理解了留白，也就理解了版面率！

不止是版面率。

前几回，在寡人的带领下，

众爱卿都修炼了表现力、图版率、文字&图片跳跃率。

但在这些影响版面的要素里，有一个共性，那就是——留白！

万变不离其宗，说的也是——留白！

理解了留白，前几回的知识点也就能更深刻的理解了。

告诉本宫，留白怎么用？

运用留白的关键，主要是理解留白多少对版面的影响。

你拿着蜡烛挥舞皮鞭，

“这么重要的东西，还不赶紧告诉本宫！”

别打，别打，这就告诉~

留白对版面的影响，众爱卿记住两点就可。

留白越大，越安静、越典雅，品质感越强。

留白越小，越活泼、越亲和，促销感越强。

根据这两点，咱先来看一下，留白跟前几回所学招式的关联~

文字跳跃率中有这么一例子~

A显得比B更为安静，因为A的文字跳跃率比B低，但本质是留白！

留白比B大，所以才显的比B更安静~

图片跳跃率中也有一例子~

同样是A显得更安静更典雅，因为图片跳跃率比B低，但本质依然是留白~

A留白比B大，所以依然显得更典雅~

图版率中又有一例子~

A的亲和力没有B高，除了图版率的因素，

同样是因为A的留白比B高，所以比B高冷，那是绝对当然的~

表现力中又又有一例子~

A比B高端，除了表现力比人物低，也是因为留白比B大~

看了就觉得我等P民，是买不起A的~

如果一个设计作品是满版，但图片中主体比较小，表现力低，也可以视为大面积留白哟！

像这个作品，严格意义上来说就没啥留白，毕竟整个版面都是图片！

但是人家图片是空旷的背景，

透气，表现力也就不高，自然就显得很宁静。

所以，

设计——还得感性与理性结合。

所以呀所以，

学设计，莫学成数理化，别像像记公式一样学设计，

老夫说：设计得灵活！

（像本猫一样，可以是糙汉子，也可以是萌妹纸，）

你又说了：“既然要灵活，那这些理论有啥子用？”

这些理论自然是起参考的作用。

（咱得站在巨（da）人（mao）的肩膀上，才能看的更远不是~）

拿这个海报来说，想让她更安静、更典雅得怎么做？

自然是继续增加留白，减少版面率了！

简单处理了下，凑合看看，重在理解~

像这个，图片经过裁剪，更小了。

留白也就增加了，版面率也就更小了

给人感觉也就更安静、更典雅了~

这呢，就是理论的指导作用~

哎呀，扯远了，咱话说回来，

继续讲讲留白那两点~

留白越大，越安静、越典雅，品质感越强。

所以呀，当你想传达这种气质的时候，就在作品中增大留白吧！

比如你想传达强烈的品质感，高端、买不起，就用大留白，如下~

比如你想传达安静典雅、或者让人想象的一种意境，也用大留白~

再来看第二条：

留白越小，越活泼、越亲和，促销感越强。

所以呀，想表现这种感觉，就在版面中减少留白占比吧~

比如，想要活泼点，就减少留白！

想要促销感强一点，也减少留白咯~

说了这么久留白，

寡人再说道说道~

固然留白很重要，

但留白不能完全取代，

前几回的秘籍招式。

做设计的时候，

用什么图，

什么图版率，

什么跳跃率，

留白设置多少，

这些综合考虑，

才是神功大成之关键~

看寡人说的这么明白了，

要不，各位爱妃~

咱把蜡烛和皮鞭撤了？

以上~

虽写了这么多，但咱也不知道咱这套《玉女心经》有木有把版面率&留白说清楚，

所以有木有说明白，留言告诉寡人吧！

这篇文风这么搞，咱就要这种不正经的，轻松愉快的氛围。所以，点个赞吧~

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 5.还有后续哦～?

以上给大家分享了干货满满的地图基础知识和通用设计原则，希望帮助大家更好的了解地图设计。同时也请大家继续关注CDX创意设计中心公众号的下一篇文章，我们还会再奉上一篇更加实用的地图设计案例，结合本文中的设计原则，手把手教你如何从0到1设计地图。敬请期待！