霓虹灯风格地图 80‘s 8-bit 诞生记 | Mapbox 地图设计思路

Map Design | 80‘s 8-bit

不久前，我们为大家分享了两个《怪奇物语 Stranger Things》电影主题模版，其中有一个充满魔幻风格、令人印象深刻的地图 —— 80‘s 8-bit，如下图

它从《怪奇物语 Stranger Things》第三季海报中汲取了明亮的霓虹色，并结合了基于复古 8 位视频游戏的字体，这篇文章我们请它的创作者 —— Mapbox 官方地图设计师 —— Madison Draper，讲讲关于这幅地图背后的设计思路。

灵感来源

这张地图最初的来源，其实一个 80 年代风格的音乐会。音乐会，你懂的，那霓虹灯闪烁、声浪滚滚的感觉，简直是要调动每一颗细胞。

艺术就是将看不到的东西表现出来。Madison 很想用地图的方式表达这种兴奋的感觉。她联想到了能够带来类似感觉的任天堂（Nintendo）的 8-bit 游戏，并提取了游戏画面中的元素作为地图设计的色块。

这样简洁的草图，可以帮助我更加专注于整个地图的主题表现。

霓虹灯线条色效的打造

这张地图，颠覆传统。我们印象中的地图上出现的网格是什么样的？你可能都没有印象了吧。而 80's 8-bit 将山脉、地形等赋予霓虹灯光的色系，如电流一般，似乎在跳跃，整体都动了起来，凸显着野性、青春、不羁的感觉。

霓虹灯色彩是整体设计中最用心的部分之一，您可以通过下面的细节放大图感受到这种线条周围虚化的效果：道路和标签在黑暗的背景下明亮地发光，在重叠时甚至彼此闪耀。

那这是怎么做的呢？这样的效果是通过线条逐渐降低的不透明度打造的。

字体选择的思考

对于不同类型的字体，Madison 使用了不同的风格，比如对于 country-label, state-label 和 city-label 等有不同的字体定义。

其中 Press Start P2 字体，是源于 80 年代 8-bit 游戏机和手机，属于里程碑式的角色。Heebo 字体的简洁线条，与霓虹灯色系搭配到恰到好处，并且更加突出了 Press Start P2 字体所渲染的活力。

当然，这些字体的选择原则，也要确保它们能够独立地从地理环境中抽离出来，足够清晰而具体。

开始你的设计

Madison 为大家提供好了该字体的模版，点击链接到 Mapbox Studio 里面一起玩起来吧。

成功之作好地图之后，还能生成 Style URL 直接在自己开发的 App 中使用，很方便哦。

https://account.mapbox.com/auth/signin/?route-to=https://studio.mapbox.com/styles/add-style/mapbox/cjxdfmoa800061co85ep81afw