Sketch #1 如何用Sketch设计地图配色,并设置成Mapbox的色值

Sketch #1 如何用Sketch设计地图配色,并设置成Mapbox的色值

Yuki 顾雪Yuki 顾雪

我司高级前端徐峰wang wayne大神跟我解释了一下Mapbox原理如上,我们通常做的地图可视化数据基本是使用Mapbox或D3实现的,Mapbox中它分为很多层,最底层是Water,然后是Base,之后是地区层,比如镇、区、洲、国家、最上层是数据层,通常用Leaflet做。

举个最简单的例子,这是一张不同区域用不同颜色表示的地图,上图是最终效果,下图我把叠加的两个层分开,区域层是降低了透明度叠加上去的。

这是示意图。最上层是有颜色的部分,中间层是灰色部分,最底层是黑色部分。

我的工作是在Sketch做Mockup,把颜色值告诉前端大神们。
首先,我要下一张矢量世界地图,里有大概300个图形,要把它们随机分成4组


Base组里是所有图形,我曾尝试过合并图形,一合就卡,根本没法改颜色,所以只能这样分成组。

每次我改颜色都需要选择这每个组里的所有图形,超级麻烦。于是我做了一个控制层,新建了6个方块,设置成Share style,然后把那300多个图层依次绑到Share style上,所以我每次只要修改一个方块的颜色就可以修改所有地图的颜色,再也不用去选地图了。

另一个问题是,由于区域层的颜色只用了50%的透明度,所以交给前端大神们的颜色值是需要做反向处理的,最左边是你希望显示的颜色,然后加一层color burn,再降低50%的透明度,这样,与Base层叠加后才会靠近本身的颜色。所以你看到的是before的颜色,但我们用的是middle的颜色。

看到这里,程序员们一定会吐槽说:“你直接用mapbox studio不就好了?土鳖~”

前面说了,mapbox studio其实只能做一个water+base+text,真正的数据可视化部分是在JS里完成的,你不能要求设计师一个人把事全干了吧,我把时间用来写代码了那谁来帮我写Blog呢?

这是Mapbox studio的界面,用Admin可以定义国家和省的样式,但是再往下一级就只有text label而没有polygon了.

更新,开始整理mapbox studio样式,删删删终于删到只改这3个参数就够了

顺便也做了个leaflet的chrorpleth图,同样整理了样式,只改框里的内容就可以,其他各种graph可以挪到sketch里做mockup.

6 条评论