2020-10-22 資深UI設(shè)計者
地圖作為記錄地形傳遞路線信息的載體,在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術(shù)的發(fā)展而變化,從石板、動物皮革,到絲綢、紙張。當互聯(lián)網(wǎng)走進千家萬戶,地圖也步入電子化時代。
相較于紙質(zhì)地圖,電子地圖優(yōu)勢顯著:更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖(后文簡稱地圖)的出現(xiàn)也影響著人們的出行方式,尤其當智能手機普及,我們可以隨時查詢地點、發(fā)起導航,再也不需要提前記下高速出口和轉(zhuǎn)向路口了。
滴滴擁有網(wǎng)約車、代駕、騎行、公交、自駕導航等眾多業(yè)務,是一站式出行平臺。而地圖作為承載出行服務的重要載體,橫向支撐著各業(yè)務線的發(fā)展。以網(wǎng)約車業(yè)務為例,調(diào)研結(jié)果顯示絕大部分乘客都會關(guān)注并使用地圖。
隨著各業(yè)務線對體驗的要求不斷提升,單一的地圖模式已經(jīng)不能滿足業(yè)務訴求及用戶需求,需要進一步細分場景、精細刻畫地圖樣式,于是地圖的設(shè)計也變得愈發(fā)重要。
地圖承載的信息種類復雜、數(shù)量巨大,初期可能會找不到設(shè)計切入點。我們可以先了解下它的定義和實現(xiàn)方式,或許就能從中找到答案。
定義:地圖是依據(jù)一定的數(shù)學法則,采用地圖語言,經(jīng)過制圖綜合來表示地球表面的圖形。
實現(xiàn)流程:
結(jié)合“從雛形到完整地圖”這一步流程的實現(xiàn)方式,進而可將地圖拆分為基礎(chǔ)層、策略層和感官層。幫助各職能角色找到對應切入點。
解構(gòu)地圖后,我們不難看出,感官層是設(shè)計側(cè)需要關(guān)注的重點層級。
面對如此復雜的地圖信息,為了梳理出清晰的思路,我們會對地圖元素進行分類:根據(jù)數(shù)據(jù)的類別和呈現(xiàn)狀態(tài),可拆分為點、線、面三類元素。
名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪。
名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區(qū)域狀的地理實體,如醫(yī)院、小區(qū)等。
從定義可以看出,地圖是一種特殊的圖形語言,是以上所有元素的集合體。相比我們所了解的UI設(shè)計、運營設(shè)計,地圖有屬于自己的設(shè)計原則。以下為大家總結(jié)了一些核心的原則:
符合制圖學和公眾認知
地圖發(fā)展到現(xiàn)在已經(jīng)成為了一門學科,我們會發(fā)現(xiàn)即使語言不通,拿到一張地圖時也能看懂,這是因為有制圖學和公眾認知在規(guī)范著地圖設(shè)計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知,大大降低了用戶的學習成本和記憶負擔,使地圖可以作為一種世界通用語言流通起來。
保證識別度
地圖屬于信息類工具,其上出現(xiàn)的元素均需清晰可識別,保證可讀性是最基本的設(shè)計原則。所以在設(shè)計時會限制顏色對比度、最小字號等,而具體規(guī)則會根據(jù)場景確定。
清晰有層次
地圖的層次清晰包含了兩個方面:信息主次清晰,視覺具有整體性。
信息主次清晰,地圖信息龐雜,沒有主次關(guān)系會影響用戶的讀圖效率。在設(shè)計時需要考慮元素本身的特點、重要性,可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關(guān)聯(lián)性,不同元素有差異性。同時,信息主次也會根據(jù)比例尺的變化有所調(diào)整。
視覺具有整體性,在滴滴的業(yè)務場景中,地圖通常作為最底層組件出現(xiàn),上層還會有很多業(yè)務組件。因此在設(shè)計時需克制用色,既要保證地圖中各元素之間的區(qū)隔度,又要保證地圖整體與其他業(yè)務組件拉開視覺層級。這樣才能更好的突出當前業(yè)務模塊的重點,提升整體的使用效率和體驗。
細分地圖模式
地圖在各業(yè)務模塊中應用廣泛,用戶需求也不盡相同,設(shè)計時需要根據(jù)使用場景區(qū)分不同模式。以網(wǎng)約車場景為例,業(yè)務信息始終處于上層,地圖用來幫助用戶定位、快速發(fā)單。因此,網(wǎng)約車場景的地圖整體性強、色調(diào)偏冷、視覺層級后退,能更好的搭配網(wǎng)約車模塊的整體設(shè)計,保證用戶的操作效率。
具有品牌特性
品牌調(diào)性一直是滴滴設(shè)計層面非常關(guān)注的原則,品牌基因貫穿了所有產(chǎn)品,始終具有獨特的視覺風格。遵循品牌的視覺語言,使地圖可以更好的融合到產(chǎn)品中,保證了設(shè)計的統(tǒng)一性。
文章來源:優(yōu)設(shè) 作者:CDX創(chuàng)意設(shè)計中心
藍藍設(shè)計( www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
藍藍設(shè)計的小編 http://www.miumiuwan.com