通過閱讀“地圖基礎知識及通用設計原則”，相信大家已經對地圖及其設計有了一定認知，本篇我們來了解下如何實踐。

Part 1. 上篇要點回顧

- 核心設計原則

• 符合制圖學和公眾認知

• 保證識別度

• 清晰有層次

• 細分地圖模式

• 具有品牌特性

- 元素分類

• 點元素：地名、POI等

• 線元素：道路、地鐵線、水系線、鐵路線、航線、邊界線等

• 面元素：陸地、草地、湖泊海洋、AOI等

*名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪

*名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區域狀的地理實體，如醫院、小區等

Part 2. 設計背景

為了實現“讓出行更美好”的使命，今年乘客端新增了自駕導航。地圖貫穿了該產品的全流程，且首頁、路線規劃頁、導航中等場景用戶需求都不相同。然而已有的模式，從配色到信息展現，都不符合首頁地圖的場景需求，于是需要重新設計。

以下詳解設計過程。

Part 3. 設計落地

- 設計關鍵詞推導

根據自駕導航的目標，拆解出了首頁地圖的設計目標：

• 構建適合自駕場景的瀏覽地圖

• 提升地圖體驗與設計品質，提高用戶滿意度和好感度

• 打造具有滴滴品牌調性的地圖

用戶需求及習慣表明：在首頁主要是明確自身定位、查看其他位置信息，且視距基本是手持距離。那么“構建適合自駕場景的瀏覽地圖”關鍵點就在于識別度，更好的展示重點信息，保證用戶讀圖效率。

“提升地圖體驗與設計品質，打造具有滴滴品牌調性的地圖”的目標，可以通過視覺手段實現。在瀏覽場景，用戶使用地圖的時間不固定，為避免長時間瀏覽產生疲憊感，地圖配色需要更舒適，對比度也要適中。這點也與自駕導航整體的設計關鍵詞“輕量”不謀而合，于是推導出了關鍵詞輕量化、品牌感。

- 設計地圖方案

明確設計關鍵詞后，開始著手設計。關鍵詞中的輕量化、品牌感基本上決定了這款地圖的調性，識別度則重點影響信息展現。上篇提到，設計時可以把地圖元素拆分成點、線、面三類，按照由大到小的順序設計，即先確定配色，再設計文字圖標等信息，以免元素過多互相干擾。

1、設計整體配色

輕量化：傳達輕量化的感受需要控制取色范圍，于是我們制定了顏色使用規則（下圖）。

• 色相：以冷色為主，醫院（紅色系）等具有公眾認知的顏色可除外；顏色從品牌色系中選取

• 明度：限定顏色的明度范圍，選取中間-略高的部分，平衡顏色對比度

• 飽和度：避免使用高飽和度的顏色，保證配色的舒適感

通過分析顏色，我們對傳達輕量化的感受有了大致的把握。那么品牌感如何體現呢？

品牌感：具有品牌調性的地圖能更好的融入產品設計風格，也能夠區別于競品，這在滴滴全流程的設計中都十分重要。在地圖上我們主要用顏色及圖標繪制表達品牌調性。

• 顏色：結合輕量化的用色規則，從品牌色系中選取，使地圖配色與其他組件更加融合

• 圖標繪制：沿用滴滴設計規范中的圖標繪制語言，如圓角、簡單形狀等，拉齊視覺感受

最終根據“輕量化”和“品牌感”這兩個關鍵詞，設計出了地圖配色的效果圖。

2、設計地圖信息

配色確定后，即可開啟POI圖標+文字、AOI文字、道路文字、以及各類行政區劃文字的設計。

識別度：設計地圖信息時，保證基本識別度的方式，可通過文字顏色、字號大小、圖標繪制等實現。但是要做到清晰有重點，就要關注信息間的層次感。

以POI信息為例。回顧下此時的用戶需求：了解自身定位、查看其他位置信息。從這點可以鎖定第一展示優先級應為POI——地圖上定位最精準的信息種類。而已有的圖標識別度較弱，無法滿足需求，于是我們進行了重繪。通過用色表達圖標類型、首選有公眾認知的載體作為表意、增強顏色飽和度及對比度，搭配文字顏色，從視覺上把POI信息提升至第一順位。

用同樣的方法，根據重要程度，通過設計拉開了信息的視覺層級：POI>道路名稱>AOI名稱>行政區劃信息。

3、整體調整

在完成了配色和信息設計后，我們需要整合所有元素統一調整。此時，通常會出現元素互相干擾的問題，我們可以回歸到場景需求中解決此類問題，按照信息的重要程度調整，最終形成完整方案。

Part 4. 設計驗證

地圖方案落地后，我們會關注設計品質的驗證。由于地圖的工具屬性，驗證其設計品質及用戶滿意度一直是行業內較困難的事情。地圖既是一種圖形語言，又承載了大量的信息，且需符合場景需求，要驗證的內容非常多。因此我們建立了地圖評測模型，從美觀度、識別度、讀圖效率等多維度進行評測，量化地圖設計品質。

通過對自駕導航首頁地圖的兩輪調研，我們回收了大量有效結論，如用戶對道路等級的關注程度、如何使用AOI信息等等。新版地圖在美觀度、識別度等方面均得到了用戶的認可。

了解用戶的聲音，能更好的幫助我們深耕地圖設計領域、全力推動地圖體驗優化。

Part 5. 未來形態暢想

當前科技發展迅速，近些年出現的HUD、AR等導航，用現實世界的畫面代替了地圖，不需要轉換思維、記憶地圖語言，讓人與世界的連接更輕松便捷。我們不妨順著這個趨勢大膽的暢想一番，在未來的某天，世界的數據會植入我們腦中，不再有陌生的地方，現有的地圖形態也許會消失，因為它就在我們腳下。

文章來源：站酷    作者：CDX創意設計中心

藍藍設計( m.hengshangtqd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務