穿越时空的可视化（3）：地图风格的灵感

原创 杨柳桦樱 VisIt有视没事 来自专辑灵感系列：穿越时空的可视化

编译者前言

《穿越时空的可视化》是一个编译系列，本文是第三篇。该系列编译自Paul Kahn发表在Nightingale上的《全球信息设计》系列文章。《全球信息设计》介绍了大量经典的可视化设计，涵盖了从现存最早至今的视觉语言。通过研究这些经典设计的思路，不管是设计构图、布局、叙事技巧，还是对主题数据的不同设计方式，相信都能为我们当下的可视化实践带来灵感。

本文编译自《全球信息设计》的地图主题系列第2、3篇：《帝国地图：界限你我》、《城市地图：视角》。地图主题后续还有可视化陆地旅行、交通等系列。

我精选了4个例子，并在每个例子后边的“编者小言”里，做一些总结或补充，抛砖引玉，供大家思考。

在上一篇里，我们认识了五个世界地图的例子，这些例子充分说明了地图是反映已知世界的表达方式。设计师对地域大小和细节的处理，体现出这些地区在他心中的重要性与认知程度，也反映出其所代表的世界观。

在现今，我们所受信息的限制越来越小，对世界的客观认知越来越达成共识，因而在设计上，对于大小与细节的处理，更可能是一种有意识的设计选择。

那么，除了在信息上做文章外，比如对地域信息上的繁简处理、信息叙事角度，还有哪些其他设计技巧和思路，能帮助我们创造出更有风格的地图呢？

1/4 拟人化的帝国

基于对欧洲大陆的认识，大多数人心中都有一个欧洲的地理轮廓。在这个轮廓里，西边是大西洋，南边是地中海，北边是北极地区。若我们试着画一下欧洲版图，可能不能把海岸线形状或陆地比例画准确，但半都会将欧洲陆地放在大西洋、地中海和北极地之间。

在16世纪，人文主义传统从大学开始传播起来，并重新唤起了人们对阿拉伯、希腊、罗马和希伯来文化的认识。由新教改革和天主教反改革带动的战争，从内部分裂了政治和宗教结构，而奥斯曼帝国也由东扩展到了欧洲。欧洲世界此刻正经历着集体身份危机。

编者注释：这一时期，土耳其奥斯曼帝国向欧洲扩张，奥斯曼帝国是伊斯兰宗教，而当时欧洲是基督教世界。

由诗人和数学家约翰内斯·普茨（Johannes Putsch）设计的《女王欧洲》（Europa Regina，英文为Queen Europe）地图于1537年首次作为木刻版画出现。

左图是约翰内斯·普茨的《女王欧洲》（1537年），右图是塞巴斯蒂安·明斯特（Sebastian Münster）在《宇宙观》（Cosmographia）中版本（1570年）。

普茨将欧洲大陆顺时针旋转了90度，使这个被内战四分五裂的大陆，从整体上看起来像女王的身形。女王的身体是一个岛屿，被四周的亚非岛屿所割裂。山脉是她长袍上的缎带，比利牛斯山脉是她的项链。皇家徽记、地名、城市名和河流名是她的装饰装扮。

后来《宇宙观》中的插图便是以普茨的这个设计为基础。《宇宙观》是一本广受欢迎的描述世界的德语书，由塞巴斯蒂安·明斯特编写。《宇宙观》首次出版于1544年，并以多种语言重印，直到17世纪。除了修订版的《女王欧洲》地图外，该书还有其他几张地理地图，包括另外一幅和女王欧洲相似的欧洲地图，只是那张图不是以东为上的朝向。

在《宇宙观》版本中，王室徽记和地理名称都消失了，女王长袍的领子变高了，不列颠群岛变成了女王权杖上的旗帜。海因里希·本宁（Heinrich Bünting）于1587年的《圣经旅行书》（Itinerarium sacrae scripturae）中也有一个版本，大部分细节相似。只是在本宁的版本里，因以北朝上，女王是躺着的，不那么生动。

海因里希·本宁在《圣经旅行书》中的版本, 1587年。

《宇宙观》的这张地图，表达了哈布斯堡王朝想要实现全面统治的愿望。

编者注释：哈布斯堡王朝在当时已经是欧洲统治领土最多的霸主了，除了对付新教徒和奥斯曼帝国，为领土扩张的征战仍旧不断。

我们可以把这张地图与欧洲现代地图放在一起，看拟人化后相应区域的摆放方式。

右图是20世纪时期的地图，绿色区域是哈布斯堡王朝实际统治的区域。

女王的王冠是整个伊比利亚，而哈布斯堡王朝当时只统治着西班牙。她的心脏是哈布斯堡王朝的首都波西米亚。她的右手握着表示西西里岛的球，这也是哈布斯堡王朝领土的一部分。她的左肩上则是荷兰。女王身上绘制的是主要的河流和地区，实质上暗示着一个并不存在的统一王国。

迈克尔·艾辛格（Michael Aitsinger）和弗朗斯·霍根伯格（Frans Hogenberg）, 《比利时雄狮》（Leo Belgicus），创作于1586年，收藏于比利时皇家图书馆（Royal Library of Belgium）。

这张人形化的《比利时雄狮》地图画的是现在的荷兰、比利时和卢森堡，时间可追溯到同一时期。这里的“帝国”指当时反对西班牙（哈布斯堡王朝）统治的十七个联合省。

之所以选择狮子，是因为在当时，几乎每个盾牌上都有狮子图案。狮子的脊柱和头部线条是北海海岸线。它的舌头从阿姆斯特丹北部水域的坎彭伸出。他的后腿从佛兰德斯和布鲁塞尔伸出，而左脚放在卢森堡。《比利时雄狮 》最早由奥地利制图师迈克尔·冯·艾廷（Michael von Aitzing）于1586年绘制，想要表现该地区的地理风貌与叛逆的政治环境。

事实证明，这头狮子成为荷兰抵抗运动的统一标志，还在数十年的冲突中有过多次修改。

《十七个城市的比利时雄狮》（Novissima, et Accuratissima Leonis Belgici, Seu Septemdecim Regionum Descriptio），克拉斯·扬斯祖昂·维舍尔（Claes Janszoon Visscher），创作于1611年。

这头撑着利剑而坐的狮子是1611年的版本，由荷兰雕刻大师克拉斯·扬斯祖昂·维舍尔在西班牙十二年停战期间（1609–1621年）所制。北海和英国海岸被带有寓意的风景图所取代，而狮子的上方是十七个参加独立战争省份的盾牌图案，两边则是停战协定中的二十个城市的插图。

�� 编者小言

1. 情感修辞手法

在情感上，这两个例子都充分表达出一种民族统一或团结一致的意愿。同时，在信息上，暗示了女王与女王之外、狮子与狮子之外的你我边界关系。

比利时雄狮差不多就是女王欧洲地图里女王左肩的地区。

在传统的信息图设计中，拟人手法并不新鲜。甚至可能有人还觉得有点老派。不过近年来，不限于拟人，比喻一直是可视化的重要修辞手法之一。比如将里斯本交通比喻为心脏，将美国历年移民数比喻为树的年轮，将通往主城市的道路比喻为叶脉，将总统发言比喻为愤怒小鸟的羽毛。

图一：Traffic in Lisbon by Pedro M. Cruz；图二：Simulated Dendrochronology of U.S. Immigration 1790-2016 by Pedro M. Cruz, John Wihbey, Avni Ghael, Felipe Shibuya - National Geographic；图三：Roads to Rome by the Moovel Lab；图四：One Angry Bird by Periscopic。

然而，尽管成功的隐喻设计受人喜爱，但无论是数据处理、算法、开发还是设计，难度都不小。比如第一张图，将里斯本交通比喻为心脏的作品，其中的算法就发布了不止一篇论文。

2. 多层次信息可视化

比较两幅《比利时雄狮》会发现，第一幅的十七个城市的表格。而第二幅里，这十七个城市的徽章被置顶了，并且两侧还增加了20个城市的风景图。

在第二幅图里，至少有三层信息：地理（地图）、十七个参战城市（徽章）和二十个停战协定城市（风景图）。其实第一幅图也有多层信息，除了地图外，其他信息都放在表格里了，比如十七个参战城市名单和徽章及其治理者等。不管是如今的仪表盘（dashboard）设计，还是数码交互设计，第二幅图的处理可能更适合参考。

2/4 游客视角

我所知的最早期的城市地图是给观光客的。在《西湖清趣图》中，先印入眼帘的是长达九英里的湖畔的俯景，继而又瞬间将我们的目光引向湖畔周边。杭州西侧的人工湖，与各式融为一体的的花园、寺庙、房屋与凉亭，成为中国工程学的一大成就。杭州是宋朝的首都，当时是中国、可能乃至世界最大的城市。湖畔、运河、水坝则是这个城市的重要部分，也是许多诗歌和绘画的主题。

《西湖清趣图》，创作于13或14世纪，现藏美国弗利尔艺术馆（Freer Gallery of Art）。该卷轴从右向左滑动阅读，此部分图是起点，即钱塘门入口。

这张长52英尺的卷轴画，记录了从钱塘门出发，逆时针环湖一周，再返回钱塘门的沿湖景色。沿岸徒步、骑马和乘车的人川流不息。第一组建筑物上飘着旗帜，上面标示是卖食品和酒的商铺，岸边有不少消费者。人们在桥上漫步，打着遮阳伞。湖中，数百艘大小船只在行驶。

酒铺的细节。

这张城市地图是和谐地融合了水、建筑、花园和农田。熙攘，繁华，一片岁月静好。用摄影来比喻就是，设计师从高架船的甲板上以连续的跟踪镜头呈现城市。当我们环视西湖时，难免不时停下来，去品味那些饶有趣味的风景点。

细节图：从右到左，我们可看到农田、景慈寺和雷峰塔。控制流入湖泊的水闸标有“清水闸”。

�� 编者小言

搜一下西湖景区地图，出来的画面不禁让人反思。

谷歌搜索“西湖景区地图”的前几行结果

也许有人会说，《西湖清趣图》是一幅画，而景区地图是功能图。但在功能与设计之间，是不是可以找到一种平衡，从而增添功能之外的文化情趣呢？

其实在插图界，也不乏优质的文化地图，只是风格一般较偏西洋，或个人化。反而极少见到那种吸纳国画精髓的地图，不限于水墨风格、国画透视、工笔白描等。

3/4 多角度透视

前面中国和欧洲的例子都是从单一视角观看城市。马特拉克·那西（Matrakci Nasuh）于1537年创作的伊斯坦布尔袖珍画，则采用了不同的方法，从内外同时看奥斯曼帝国的首都。马特拉克是一位伟大的书法家和画家，也是闻名的军人、剑师和数学家，曾在亚洲和欧洲的军事战役中服役。他的名字源于他发明的Matrakçı，一种土耳其用于训练剑士的军事体育运动项目，这项运动活跃至今。他的伊斯坦布尔地图是《苏莱曼大帝的两伊征途之驻扎地记述》（ Beyân-i Menâzil-i Sefer-i ‘Irakeyn Sultan Süleyman，英文）的开篇插图。这本书绘制了由苏莱曼统帅从伊斯坦布尔开始和结束的奥斯曼帝国军事征程。

编者注释：苏莱曼是奥斯曼帝国第10位和在位时间最长的苏丹，向东征服了伊朗和伊拉克，成为伊斯兰世界的领袖，向西的基督世界征战，一直打到匈牙利和维也纳。

马特拉克·那西，伊斯坦布尔，《苏莱曼大帝的两伊征途之驻扎地记述》，1538年。

马特拉奇的伊斯坦布尔图是以东为上，可能是为了让金角湾（Golden Horn）正好处于书页折叠处。位于金角湾以北的加拉达（Galata）在左页，伊斯坦布尔在右页。仅在这两页纸上，他画了100多个建筑，包括罗马、拜占庭和奥斯曼帝国时期的主要建筑。构图的视点随眼到之处灵活巧取。在看右边的伊斯坦布尔城墙和左边的加拉达海岸建筑时，似乎是站在金角湾东行的军舰甲板上看过去的。但是在城墙内，又是向东眺望着整个城市。这样一来，设计师便可展示大多数建筑物的外墙，例如托普卡珀皇宫（Topkapi Palace）、圣索菲亚大教堂（Hagia Sophia）和法齐赫清真寺（Fatih Mosque）。随着城墙和要塞向右延伸，他再次改变视角，变成从城内向南看。

鉴于页面大小，主要建筑与城市中心的距离必须压缩。所以他更倾向于表现建筑的相对位置，而不是实际距离。最明显的例子，就是伊斯坦布尔这一页右下角的耶迪库勒堡垒（Yedikule Fortress），实际上处于地图上其他建筑物西边很远的地方。在左边加拉塔这一页上，西边的艾郁普苏丹清真寺（Eyüp Sultan Mosque）和右侧的少女塔（the Maiden’s Tower lighthouse）都有这种缩减距离的处理。这两个例子里，它们的相对位置都对，但实际上离中心的建筑物很远。

加拉达这一页的八个地点标注，对应的谷歌地图位置。1. 加拉达塔（Galata Tower）；2. Tophane和乌斯库达（Uskudar）码头；3. 学校；4. 乌斯库达；5. 巴扎（Bazaar）；6. 艾郁普苏丹清真寺；7. Kagithane河；8. 少女塔。

�� 编者小言

1. 另一种命题思路

与前面同一时期的欧洲女王地图相比，一个出自内忧外患的庞大王朝，一个出自意气风发的入侵者角度，表现出全然不同的设计意志。

在那个年代，该绘本的选题出发点可能更多是为了传授信息，毕竟人们远行困难，对其他城市知之甚少，很多地理知识都是靠游记、绘本获取的。当然，这之中也不乏昭彰功绩的效用。而这两点，都可以为当代可视化命题提供思路。

一些关于城市文化的博客，尤其是旅游类博客，也不乏借此主题为旅游路线推荐。毕竟在某种程度上也可以说，这本绘本是苏莱曼的打卡地图，里面的插画也是在描绘其所到城市的面貌。

图中标记出这本绘本中苏莱曼打卡的城市。（Facsimile Finder）

2. 3D之外的透视选择

这本绘本的风格，乍看之下，很像有时在商场墙上展出的高段位儿童画。有趣的是，马特拉奇对于多视角的灵活运用，也确实很体现“儿童画”的思路：画自己知道的，而不是看到的。

图集截取自The Public Domain Review，图源来自维基百科

其实在看这幅图的时候，我们不太容易去挑剔透视的不准确，因为注意力都在看那些建筑的分布和细节了。我们的大脑能够处理这种“不可能图形”。反而，这种多视角处理，能提高空间利用率。尤其是对于平面作品，在处理信息元素上能有更多空间和角度上的选择。也许这种处理，可以作为3D和2.5D地图的补充方案。

白色箭头为视角辅助线。第二幅图为该绘本中的另一幅《阿勒颇》（Aleppo）。

4/4 鸟瞰图

在现代早期的欧洲，这种用全景图像表现城市的技术相对普遍，然而是在19世纪的美国才达到了顶峰。全景图或航空视图的城市地图产业的出现，得益于技术、经济和文化的结合。与手工着色的铜版雕刻相比，新技术使彩色图像的制作与复制变得更简单，也更便宜。绘画可以快速转印到胶印石上，彩印后再廉价贩售给市民。

芝加哥商业区的鸟瞰图, 普尔兄弟（Poole Brothers），1898年。印刷在四张纸上，大约3乘以9英尺。我们可以看到基础设施，有船、火车、有轨电车、街道、建筑物和公园，但看不到人。商家位置名单列在地图的下方。地图的视角朝西，便于从湖岸欣赏风景。

有许多文化因素也推动了这些城市地图的生产。在美国内战之后的几十年中，主要港口城市的河道与铁路接通了，从而推动了农村城镇的工业发展。美国的工业和基础设施发展迅速，移民增多，人口扩散。

一批年轻的巡回艺术家们专门绘制城镇地图，他们先在当地募集订购，然后印制地图给销售代理商，之后又继续前往下一个城镇。据估计，大约有2500个城镇是在这种情形下被绘制的。国会图书馆的数字馆藏中有1500多张地图。这些收藏作品有一半是来自四位艺术家的作品。其中，萨迪德斯·莫蒂默·福勒（Thaddeus Mortimer Fowler）是这四巨头中最多产的一位。

福勒制作了五十四年的地图，在美国很多地方生活和工作过。他的职业生涯始于绘制宾夕法尼亚州、西弗吉尼亚州和俄亥俄州的城市，那里的新城市因石油和煤矿而发展迅速。他沿着德州和俄克拉荷马州的铁路线，名副其实地画了一辈子。

为了绘制城市地图，福勒会向市民和市民团体募资。赞助人决定地图的内容。然后他会选择视角和主题，来展现市民想看到的建筑物，包括地图边上那些公共和商业建筑物插图，以及地名图例。

新泽西州阿斯伯里帕克（Asbury Park）鸟瞰图，萨迪德斯·莫蒂默·福勒，1881年。福勒于1881年居住在阿斯伯里帕克，并绘制了多个版本的地图。有的版本里有建筑物插图，而有的画有旁边的海洋镇（Ocean Grove）。看这幅图，沿岸没有建筑物的物业都被文字标记为“酒店用地”，海滩上有很多沐浴者，湖上则到处可见划船者。

以福勒的才华，没有哪个城市太大或太小。他绘制过费城和匹兹堡的详细航视图，也画过俄亥俄河沿岸和德州铁路线上的繁荣小镇。

萨迪德斯·莫蒂默·福勒的地图。左图：《匹兹堡》（Pittsburgh），宾夕法尼亚州，1902年；中图：《西斯特维尔》（Sistersville）, 西弗吉尼亚，1896年；右图：《落日镇》（Sunset）, 德州蒙塔古县，1890年。

这些例子体现了他的作品特点。他的构图视角使建筑物保持统一的比例，并逐渐消失于地平线。城市景观约占图纸的80％。他用现代交通和工业的标志（汽船、铁路和吸烟工厂）来强调每个城市的基础设施建设。想必，他的赞助商也喜欢《匹兹堡》里后方工厂的滚滚浓烟。

福勒所绘制的城市总是熙熙攘攘，有步行的，乘着马车和货车的，推着手推车的，还有登船和搭火车的。不管建筑物的实际朝向是什么，光源都统一从左边进来。为了便于阅读，街道、河流和地名标签的方向也是灵活变化的。

编者注释：太平洋铁路是第一条横贯北美大陆的铁路。

左图：《匹兹堡》细节；中图：《西斯特维尔》细节；右图：《落日镇》细节。

在《匹兹堡》中，我们能看到电车从莫农加希拉城大桥上驶入，在《西斯特维尔》中，俄亥俄河沿岸上架设着石油井架，而在《落日镇》，我们可以看到德州太平洋铁路。

�� 编者小言

福勒的鸟瞰图布局，尤其是《阿斯伯里帕克》，让我想起如今常见的仪表盘设计。主图是带可视化数据的城市地图，四周是重要统计数据或细节信息。那么就引出一个我们平时可能忽略的设计问题：什么时候采用鸟瞰图视角？

采用鸟瞰图视角最多的是3D地图。福勒选这个角度是为了展示建筑物的样貌，3D地图则是为了显示和比较柱状条的高度。

在信息量上，绝大多数3D地图的可视化与平面地图没有什么区别，都是以颜色变化来体现某一个数值的大小。但3D地图显然更具有观赏性，这也是建筑设计上使用鸟瞰图的初衷：更容易体现整体观感性。但在交互性上，鸟瞰视角的3D地图显然就不如平面地图友好。

图一取自Uber Engineering，图二取自我的业余项目。

尽管，像Mapbox这类工具已经提供了pitch参数，允许用户调整视角，但不代表这个设计问题不需要考虑。比如，日常使用仪表盘工作的用户，展示数据成果的大屏，显然在观赏性与交互友好之间应有不同的的平衡与取舍。

此外，即便是为了数据结果的观赏，根据城市特征和页面空间的关系，也可能采用或不采用鸟瞰图视角。比如下面这个例子，左边的新加坡采用了平面视角，右边的芝加哥采用的鸟瞰图视角。两图都以各自最好的角度展示了数据。

MIT Senseable City Lab的Urban Sensing项目截图

如果新加坡地图采用鸟瞰图视角，北部和东部的数据便难以展示。而芝加哥这座城市，以上北下南看的话，是竖的长方形，若采用平面视角放置在方形画板中，则图的左右会非常空旷，并且上下会压缩，变得拥挤，使得数据在视觉上难以区分。

编译者后语

历史信息图不仅给予我们风格参考，比如旅游地图风格、情感修辞，也能提供命题思路和信息层级设置的灵感。同时，也能给交互式的数据可视化设计带来诸多思考，比如仪表盘的布局、地图视角的选择。

其实每一个灵感启发点都可以延展和深挖。并且这些图，也都还有很多可以细谈的参考点。以后有机会可以再专门写。

下期预告：《穿越时空的可视化（4）：画交通地图的灵感》

编译源文：

https://medium.com/@pauldavidkahn

第5篇 Kingdom Maps: Drawing the Boundary Between Us and Them

第6篇 City Maps: Ways to View the ‘Polis’

补充的相关历史资料来自维基百科

原标题：《穿越时空的可视化（3）：地图风格的灵感》

阅读原文