超碰在线视屏,福利在线播放,91麻豆福利

解讀地圖設計

2020-11-3 濤濤

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

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名稱>行政區劃信息。