2020-11-3 資深UI設計者
通過閱讀“地圖基礎知識及通用設計原則”，相信大家已經對地圖及其設計有了一定認知，本篇我們來了解下如何實踐。
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創意設計中心
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務