Sketch #1 如何用Sketch設計地圖配色，並設置成Mapbox的色值

我司高級前端徐峰和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.

推薦閱讀：