寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

lizhiyong 2019-11-03

Designing the Treasure map style

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

不久前,我们为大家介绍了霓虹灯风格地图 80‘s 8-bit 的设计思路,这篇文章我们继续分享一个有趣的地图设计 —— 寻宝风格地图 Treasure。

这张地图来自 Mapbox 官方地图设计师 Madison Draper,在艺术化的表达和阐述中,也着重突出了导航功能点,结合了 Mapbox Standard 的和 Mapbox North Star 两种风格,融合汽车导航和航海导航功能为一体,并且借助字体的变化营造一种寻宝的感觉。

灵感来源

如前所述,下面两张地图风格就是 Treasure 的最初灵感来源了。

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

而 Treasure 在原风格上添加了手写体 —— Homemade Apple Regular,便营造出来一种寻宝地图的韵味。

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

借助洋流,纬度圈以及独特的海洋标记,Treasure 的导航功能性得以体现.

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

这张地图不仅仅是用来看的,更是需要拿来用的。 —— Madison Draper

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

突出之处 —— 纹理

纹理为地图带来了立体感,将屏幕中的平面图变得似乎可以触摸和感受一般。

Treasure 涉及到两种类型的纹理:重复和非重复。

  • 非重复图标,通常用于点数据的单个图标,比如海洋标签背后的船只。您可以到 Maki Icon Editor 中创建属于自己的非重复图标。

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

  • 重复图标,创建了一种从端到端的无缝连接模式,这些图案用于填充多边形或线条。 Mapbox 的瓦片尺寸是 512px * 512px,这意味着重复纹理尺寸需要完美地划分 512 以使图标无缝连接。举个例子,Treasure 使用了两种图标,一种用于水(water64),一种用于土地(urban64)。两种图标均为 64px * 64px,512px * 512px 瓦片可以完美被填充。

制作重复图案时,需要确保整个画布上都填充图案,并且边缘相互兼容。如果你觉得有兴趣,可以看看这个例子,了解具体如何在 Mapbox Studio 添加 SVG 图案。

添加字体

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

设计地图的难点之一是将弯弯曲曲的手写字体与直来直去的线条(道路和纬度圈)进行结合,并保证易读性。应该怎么做比较好呢?为了确保线条不会影响易读性,可以尝试在文本中添加一个光晕,类似于文本和线条之间 2 px 的缓冲区,让光晕与背景层保持相同的颜色,就不会分散设计的注意力。

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

如何开始设计

点击链接登入 studio.mapbox.com,即可使用 Treasure 寻宝地图模版,在此基础上开展您的设计!

寻宝风格导航地图 Treasure 诞生记 | Mapbox 地图设计思路

还可以尝试将 Treasure 与 Navigation SDK 相结合,参考之前的导航 App 制作教程,做一个真正可以用来寻宝的地图吧!

如果您设计出了自己的作品,欢迎发送邮件至 [email protected] 并附上简单的设计思路,即可获得中文全彩《地图设计指南》一本。

相关推荐