Part 1. 地圖的發(fā)展

地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時(shí)代技術(shù)的發(fā)展而變化，從石板、動(dòng)物皮革，到絲綢、紙張。當(dāng)互聯(lián)網(wǎng)走進(jìn)千家萬(wàn)戶，地圖也步入電子化時(shí)代。

相較于紙質(zhì)地圖，電子地圖優(yōu)勢(shì)顯著：更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖（后文簡(jiǎn)稱地圖）的出現(xiàn)也影響著人們的出行方式，尤其當(dāng)智能手機(jī)普及，我們可以隨時(shí)查詢地點(diǎn)、發(fā)起導(dǎo)航，再也不需要提前記下高速出口和轉(zhuǎn)向路口了。

Part 2. 地圖在滴滴的重要性

滴滴擁有網(wǎng)約車、代駕、騎行、公交、自駕導(dǎo)航等眾多業(yè)務(wù)，是一站式出行平臺(tái)。而地圖作為承載出行服務(wù)的重要載體，橫向支撐著各業(yè)務(wù)線的發(fā)展。以網(wǎng)約車業(yè)務(wù)為例，調(diào)研結(jié)果顯示絕大部分乘客都會(huì)關(guān)注并使用地圖。

隨著各業(yè)務(wù)線對(duì)體驗(yàn)的要求不斷提升，單一的地圖模式已經(jīng)不能滿足業(yè)務(wù)訴求及用戶需求，需要進(jìn)一步細(xì)分場(chǎng)景、精細(xì)刻畫地圖樣式，于是地圖的設(shè)計(jì)也變得愈發(fā)重要。

Part 3. 解構(gòu)地圖

地圖承載的信息種類復(fù)雜、數(shù)量巨大，初期可能會(huì)找不到設(shè)計(jì)切入點(diǎn)。我們可以先了解下它的定義和實(shí)現(xiàn)方式，或許就能從中找到答案。

定義：地圖是依據(jù)一定的數(shù)學(xué)法則，采用地圖語(yǔ)言，經(jīng)過(guò)制圖綜合來(lái)表示地球表面的圖形。

實(shí)現(xiàn)流程：

• 采集真實(shí)世界的地點(diǎn)信息，經(jīng)過(guò)編譯轉(zhuǎn)化成數(shù)據(jù)
• 數(shù)據(jù)信息中包含了地點(diǎn)的坐標(biāo)、分類、名稱等
• 數(shù)據(jù)經(jīng)過(guò)渲染形成可視化雛形地圖
• 雛形地圖經(jīng)過(guò)設(shè)計(jì)最終變成策略完整、視覺(jué)美觀的電子地圖。

結(jié)合“從雛形到完整地圖”這一步流程的實(shí)現(xiàn)方式，進(jìn)而可將地圖拆分為基礎(chǔ)層、策略層和感官層。幫助各職能角色找到對(duì)應(yīng)切入點(diǎn)。

• 基礎(chǔ)層，指的是地圖的數(shù)據(jù)和能力。數(shù)據(jù)大家已經(jīng)有所了解了，能力指的是引擎渲染能力、定位能力、圖像識(shí)別能力等。有了數(shù)據(jù)及各類能力作為基礎(chǔ)，才能設(shè)計(jì)出信息精準(zhǔn)、交互明確的地圖。
• 策略層，則指的是如何使用這些基礎(chǔ)數(shù)據(jù)和能力。地圖數(shù)據(jù)量非常龐大，無(wú)法全部展示，需要結(jié)合不同的場(chǎng)景及用戶需求，有重點(diǎn)的呈現(xiàn)。
• 感官層，便是我們給數(shù)據(jù)穿上的衣服，會(huì)根據(jù)品牌調(diào)性、對(duì)應(yīng)場(chǎng)景訴求等去設(shè)計(jì)最終的配色、圖標(biāo)等。

解構(gòu)地圖后，我們不難看出，感官層是設(shè)計(jì)側(cè)需要關(guān)注的重點(diǎn)層級(jí)。

Part 4. 地圖設(shè)計(jì)原則

1. 元素分類

面對(duì)如此復(fù)雜的地圖信息，為了梳理出清晰的思路，我們會(huì)對(duì)地圖元素進(jìn)行分類：根據(jù)數(shù)據(jù)的類別和呈現(xiàn)狀態(tài)，可拆分為點(diǎn)、線、面三類元素。

• 點(diǎn)元素：地名、POI*等。數(shù)量龐大，是城市規(guī)模的體現(xiàn)，尤其POI信息，它是地圖中顆粒度最細(xì)的位置信息。
• 線元素：道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現(xiàn)了道路的走向、區(qū)域的劃分等，描繪出了城市的樣貌。
• 面元素：陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現(xiàn)，很大程度上決定了一張地圖的色調(diào)。

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

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

2. 核心設(shè)計(jì)原則

從定義可以看出，地圖是一種特殊的圖形語(yǔ)言，是以上所有元素的集合體。相比我們所了解的UI設(shè)計(jì)、運(yùn)營(yíng)設(shè)計(jì)，地圖有屬于自己的設(shè)計(jì)原則。以下為大家總結(jié)了一些核心的原則：

符合制圖學(xué)和公眾認(rèn)知

地圖發(fā)展到現(xiàn)在已經(jīng)成為了一門學(xué)科，我們會(huì)發(fā)現(xiàn)即使語(yǔ)言不通，拿到一張地圖時(shí)也能看懂，這是因?yàn)橛兄茍D學(xué)和公眾認(rèn)知在規(guī)范著地圖設(shè)計(jì)。如地圖默認(rèn)北向上、草地水系基本遵循物理世界的顏色、省界線是實(shí)線、停車場(chǎng)圖標(biāo)大多用P來(lái)代表等等。符合制圖學(xué)和公眾認(rèn)知，大大降低了用戶的學(xué)習(xí)成本和記憶負(fù)擔(dān)，使地圖可以作為一種世界通用語(yǔ)言流通起來(lái)。

保證識(shí)別度

地圖屬于信息類工具，其上出現(xiàn)的元素均需清晰可識(shí)別，保證可讀性是最基本的設(shè)計(jì)原則。所以在設(shè)計(jì)時(shí)會(huì)限制顏色對(duì)比度、最小字號(hào)等，而具體規(guī)則會(huì)根據(jù)場(chǎng)景確定。

清晰有層次

地圖的層次清晰包含了兩個(gè)方面：信息主次清晰，視覺(jué)具有整體性。

信息主次清晰，地圖信息龐雜，沒(méi)有主次關(guān)系會(huì)影響用戶的讀圖效率。在設(shè)計(jì)時(shí)需要考慮元素本身的特點(diǎn)、重要性，可通過(guò)顏色、icon/文字大小、線形寬窄等表達(dá)。做到同類元素有關(guān)聯(lián)性，不同元素有差異性。同時(shí)，信息主次也會(huì)根據(jù)比例尺的變化有所調(diào)整。

視覺(jué)具有整體性，在滴滴的業(yè)務(wù)場(chǎng)景中，地圖通常作為最底層組件出現(xiàn)，上層還會(huì)有很多業(yè)務(wù)組件。因此在設(shè)計(jì)時(shí)需克制用色，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與其他業(yè)務(wù)組件拉開視覺(jué)層級(jí)。這樣才能更好的突出當(dāng)前業(yè)務(wù)模塊的重點(diǎn)，提升整體的使用效率和體驗(yàn)。

細(xì)分地圖模式

地圖在各業(yè)務(wù)模塊中應(yīng)用廣泛，用戶需求也不盡相同，設(shè)計(jì)時(shí)需要根據(jù)使用場(chǎng)景區(qū)分不同模式。以網(wǎng)約車場(chǎng)景為例，業(yè)務(wù)信息始終處于上層，地圖用來(lái)幫助用戶定位、快速發(fā)單。因此，網(wǎng)約車場(chǎng)景的地圖整體性強(qiáng)、色調(diào)偏冷、視覺(jué)層級(jí)后退，能更好的搭配網(wǎng)約車模塊的整體設(shè)計(jì)，保證用戶的操作效率。

具有品牌特性

品牌調(diào)性一直是滴滴設(shè)計(jì)層面非常關(guān)注的原則，品牌基因貫穿了所有產(chǎn)品，始終具有獨(dú)特的視覺(jué)風(fēng)格。遵循品牌的視覺(jué)語(yǔ)言，使地圖可以更好的融合到產(chǎn)品中，保證了設(shè)計(jì)的統(tǒng)一性。

文章來(lái)源：優(yōu)設(shè)    作者：CDX創(chuàng)意設(shè)計(jì)中心

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)