基于物流場景下的地圖信息可視化設(shè)計
點擊?
▲?三分設(shè)
?
關(guān)注，和?10?萬設(shè)計師一起成長
三分設(shè) x 京東設(shè)計中心JDC
正文共：5792 字? 25 圖? 預(yù)計閱讀時間：15 分鐘一、前言
1.1 地圖在物流場景中的重要性
地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。
當(dāng)下互聯(lián)網(wǎng)電子地圖的具有可快速迭代、信息可實時更新的優(yōu)勢，大大的提升了地圖展示信息的維度，提升信息獲取的效率。
其次B端地圖以實操為主，對設(shè)計師來說，從結(jié)構(gòu)、框架到表現(xiàn)層的設(shè)計都更為復(fù)雜，但是目前并沒有一套詳細(xì)的B端地圖視覺設(shè)計方法參考。
1.2 現(xiàn)存問題分析
1.2.1一致性較差 a.布局不統(tǒng)一，無法形成統(tǒng)一的用戶認(rèn)知 地圖相關(guān)設(shè)計中頁面主要包含了地圖與列表信息展示區(qū)，具體到設(shè)計針對不同的用戶和使用場景中布局存在差異，但由于缺乏固定標(biāo)準(zhǔn)和有效的說明，對布局的使用較為隨意，輔助功能的位置也不固定，且無統(tǒng)一的展示規(guī)則，導(dǎo)致頁面從整體感觀上一致性較差，缺乏統(tǒng)一的認(rèn)知；
b.組件不一致 地圖需求涉及多條業(yè)務(wù)線，以散點形式提出，由不同設(shè)計師負(fù)責(zé)，且地圖地圖設(shè)計元素復(fù)雜，涉及點、線、面等多個元素，對應(yīng)多種類型以及狀態(tài)。在用色以及組件樣式上無固定標(biāo)準(zhǔn)，缺乏統(tǒng)一的視覺語言，無法形成統(tǒng)一的品牌影響力。
1.2.2 信息不易查看
a.可視化區(qū)域過小，造成聯(lián)動性差PC端主要的分辨率有：1920*1080、1440*900、1366*768、1280*720等不同尺寸的分辨率，最低不低于1080。但由于設(shè)備尺寸差異較大，同一設(shè)計在最大屏和小屏的展示效果差異較大。例如在1280*720分辨率地圖區(qū)域過小，對于此分辨率用戶不是很友好，需要進(jìn)行布局優(yōu)化。
b.原有設(shè)計無法滿足新增場景 在項目中，需求常以迭代形式提出，會出現(xiàn)原有設(shè)計無法滿足現(xiàn)有需求的場景。
1.2.3 界面展示繁雜
a.信息類型復(fù)雜且量大，不易查看B端業(yè)務(wù)的復(fù)雜性使得地圖的信息量較大，在底圖底圖的基礎(chǔ)上，由于物流場景以及B端業(yè)務(wù)的復(fù)雜性，界面包含了多種可視化信息以及對應(yīng)狀態(tài)，使頁面展示信息散點較多，不易查看，信息獲取困難。
b.缺乏品牌屬性 在滿足信息傳遞效率的前提下，會有業(yè)務(wù)方提出增加京東元素，提高一線員工的企業(yè)歸屬感與自豪感，但在目前的設(shè)計中缺乏統(tǒng)一的品牌屬性的傳遞以及物流行業(yè)屬性。
二、物流場景下地圖可視化視覺設(shè)計原則
地圖承載的信息種類復(fù)雜、數(shù)量巨大，好用的地圖需要各方面協(xié)調(diào)合作，涉及多個角色，發(fā)揮專業(yè)能力，從后端基礎(chǔ)數(shù)據(jù)能力支撐到產(chǎn)品側(cè)功能的合理，再到設(shè)計側(cè)感官傳遞，主要可以分為3層。
基礎(chǔ)層： 指的是地圖的數(shù)據(jù)能力。例如地圖的渲染能力、定位能力、數(shù)據(jù)準(zhǔn)確度，需要有底層數(shù)據(jù)才能保證功能的可用性，才有設(shè)計的價值；
策略層： 如何使用這些基礎(chǔ)數(shù)據(jù)和能力，地圖數(shù)據(jù)龐大，包含點線面以及多種組合方 式，需要結(jié)合不同的場景和用戶需求呈現(xiàn)不同的重點。
感官層： 地圖最終的呈現(xiàn)效果影響到功能是否好用，根據(jù)品牌調(diào)性、對應(yīng)場景訴求等去設(shè)計最終的配色、元素等，是設(shè)計側(cè)需要關(guān)注的重點層級。
感官層作為用戶最直接的觸達(dá)，需要保證交互視覺的一致性、信息的易讀性，同時遵循品牌的視覺語言。
2.1、一致性 一致性可以幫助培養(yǎng)用戶習(xí)慣，降低用戶學(xué)習(xí)成本，打破不同系統(tǒng)地圖功能的操作壁壘。根據(jù)用戶目標(biāo)、業(yè)務(wù)場景、以及具體的信息量制定布局規(guī)范，符合一致性原則。使用相同的標(biāo)記、顏色和符號，讓用戶在不同的頁面和功能中都能夠快速地識別和理解。
2.2、易讀性
通常用戶在地圖界面通常以查看目標(biāo)為主，但由于元素較多，信息量大，加上比例尺展示變化，會導(dǎo)致地圖信息呈現(xiàn)較為繁雜，因此需要注意信息的易讀性，保證傳遞信息的效率和質(zhì)量。通過精簡化視覺表達(dá)，讓信息簡單易識別，充分考慮信息優(yōu)先級，并對視覺權(quán)重的調(diào)節(jié)與把控，突出重點，聚焦核心信息傳遞。提高用戶對系統(tǒng)信息的識別和理解能力，對于提升頁面信息易讀性，提高信息傳遞效率和減少錯誤操作的發(fā)生有著非常重要的作用。2.3、品牌性
地圖頁面所承載的信息類型多、量大，為了保證整體頁面層級的清晰，地圖信息的呈現(xiàn)以簡潔為目標(biāo)，確保地圖信息最大限度的展示。其次需要遵循品牌的視覺語言，與系統(tǒng)整體品牌形象保持一致，使用相同的顏色、字體等元素，同時可以添加獨特的品牌元素，增強(qiáng)用戶的品牌感知，提高品牌的識別度和形象。三、布局分析
地圖主要地圖信息和展示信息構(gòu)成，在界面展示上由界面地圖區(qū)域+輔助面板構(gòu)成，地圖中又包含圖例以及地圖操作區(qū)，良好的布局可以提高易讀性，減少過于擁擠導(dǎo)致的信息排列混亂。根據(jù)用戶目標(biāo)、用戶習(xí)慣應(yīng)對不同的需求場景主要包含3種不同的界面布局形式。
3.1 地圖為輔，操作為主
用戶主要以操作為主，用戶流程先在面板操作，先錄入-搜索后，再在地圖看結(jié)果。因此需要滿足地圖展示區(qū)域易于查看，采用單側(cè)畫板的形式；基于用戶操作流程，根據(jù)從左到右的操作習(xí)慣，將畫板置于左側(cè)。
3.2 地圖為主，信息為輔 主要以查看地圖為主，面板展示相關(guān)內(nèi)容，例如數(shù)據(jù)指標(biāo)、表單、卡片等信息，具有地圖聯(lián)動交互，按照地圖進(jìn)行篩選結(jié)果，按照用戶操作程度，以地圖為主、操作為輔。尤其在工作臺類的系統(tǒng)其于用戶人群主要是一線實操人員，使用設(shè)備以1920、同時存在1280分辨率用戶、界面?zhèn)冗厡?dǎo)航中包含一二級導(dǎo)航，使屏幕寬度被壓縮。因此需使用右側(cè)呈現(xiàn)面板的布局方式。
3.3 兩級面板 適用于信息量較多或需要多級下鉆的場景，通過點擊觸發(fā)下一級面板，可展開收起，節(jié)省空間，減少對地圖的遮擋。 （建議面板在左側(cè)展示）。
四、 顏色定義
4.1色彩定位 地圖頁需要的顏色比較多，從使用場景上可以分劃分為：主要色彩、異常色彩、懸浮狀態(tài)色彩。
主要色彩： B端系統(tǒng)以冷色為主，根據(jù)系統(tǒng)主題色衍生出的規(guī)范色中選取色相差異較大的冷色為主色使用，用于展示不同類別；
異常色彩： 用于表示地圖狀態(tài)，例如報錯色、預(yù)警色、提示色，因此出了異常/對比外，其它頁面盡量不使用，以免產(chǎn)生誤導(dǎo)；
hover色： 猶豫地圖中包含地圖底圖以及多種可視元素，在頁面色彩信息較多時，需要差異化色彩，明確區(qū)分操作狀態(tài)，因此建議使用粉色或紫色；
4.1.2數(shù)據(jù)對比色彩
系統(tǒng)地圖上存在需要通過顏色對比區(qū)分可量化指標(biāo)，以熱力圖為主，需要針對內(nèi)容進(jìn)行定制化顏色。 主要分為以下幾種類型：- 冷/暖純色對比： 即同類色對比，用于兩極分化對比，表示指標(biāo)程度/密度，色階越深程度越深/數(shù)量越大。具體可根據(jù)系統(tǒng)主題色選擇，或業(yè)務(wù)指標(biāo)定義選取，紅色更多表示需預(yù)警，需要預(yù)警的場景可使用紅色，反之藍(lán)色；
- 和暖色系對比： 也表示程度/密度，伴隨色相差異，等級差異性更明顯；
- 特殊熱 力圖： 常規(guī)熱力圖的一種形式，冷暖多色對比，差異性更明顯，表示程度的基礎(chǔ)上可區(qū)分狀態(tài)預(yù)警/安全狀態(tài)，多用于彌散式熱力圖為主；
五、地圖可視化內(nèi)容
在物流場景中，地圖本身作為底圖存在，基于底圖之上的可視化信息主要包含“點、線、面”。
5.2 點 元素點是地圖最末級的，也是最常用的元素，根據(jù)使用場景主要可以分為定位點、軌跡點、聚合點。
5.2.1 定位點
定位點用于標(biāo)記地圖位置上的信息，基礎(chǔ)點元素主要包含普通定位點、數(shù)字點、標(biāo)簽點?？筛鶕?jù)使用場景選取不同的樣式，傳遞信息，但不同類型點元素需風(fēng)格統(tǒng)一，拉齊視覺感受；- 普通定位點 ：用于表達(dá)位置信息，呈現(xiàn)方式能最大程度地顯示地圖上的信息，減少內(nèi)容遮擋，也是在設(shè)計中首先要考慮的類型。可結(jié)合icon和文本展示不同的信息類型，例如站點、起點終點等信息。
- 數(shù)字點： 包含數(shù)字信息，可用于表達(dá)點位編號，或呈現(xiàn)該點的數(shù)據(jù)信息，但呈現(xiàn)數(shù)據(jù)信息時展示數(shù)值不能超過百位，避免展示擁擠；
- 標(biāo)簽點： 如果地圖上標(biāo)記的內(nèi)容沒有合適的圖標(biāo)能展示出來，可以直接利用文本來描述，例如路區(qū)名稱，雖然只與圍欄劃分面同時存在，但是以點的性質(zhì)呈現(xiàn)；
- 特殊點： 頁面只有1個特殊點位，需要差異化區(qū)分類型用來傳遞品牌基因；
注意：點的尺寸可根據(jù)頁面點的密度選取尺寸，但點的大小不跟隨地圖縮放改變；
5.2.2 軌跡點 地圖軌跡點是車輛行駛過程中選取位置信息，對軌跡進(jìn)行記錄的點。根據(jù)點的數(shù)量和使用場景可以分為常規(guī)和特殊標(biāo)記點。
- 常規(guī)點 ：打點頻率高間隔短，表達(dá)信息一致，點數(shù)量較多，由點連線形成軌跡。可通過點的行徑方向查看軌跡，根據(jù)密度分布查看停留時長等信息；
- 特殊軌跡點 ： 打點頻率較少，多用于圍欄打卡，例如發(fā)車/到達(dá)打卡，也可用于軌跡中異常點標(biāo)記。
注意：地圖縮放不影響大小，只區(qū)分密度；
5.2.3 聚合點 聚合則是重疊時位置利用聚類功能將相鄰的氣泡組件合并在一起，通過數(shù)字顯示包含的內(nèi)容，對范圍內(nèi)的數(shù)量信息進(jìn)行分類聚合，這種形式有利減少頁面點密度過高，幫助用戶理解和操作。
- 固定聚焦 ：表示根據(jù)點大小對比數(shù)值大小，不可通過縮放地圖，使聚合點拆分為離散單點，；
- 動態(tài)聚合/離散： 用戶以定位點信息查看為主，但由于點信息較多，地圖比例尺放大到一定程度，導(dǎo)致點信息大量重疊，信息易讀性變差，因此需要對點數(shù)量進(jìn)行聚合展示，通過滾輪滑動/點擊放大地圖，地圖放大過程中，點逐級離散，反之逐級聚合。
5.3 線 線數(shù)據(jù)在地圖上呈現(xiàn)為線性，一般都沿著可行道路展示信息。常規(guī)地圖場景線路主要以實時導(dǎo)航為主，例如高德、滴滴導(dǎo)航。在物流B端場景中主要用于查看人員、車輛軌跡。
5.3.1 軌跡線
軌跡可視化的形式之一，軌跡線主要由線元素構(gòu)成，包含色彩、元素、線粗等視覺影響。- 元素構(gòu)成： 從構(gòu)成樣式上主要包含有導(dǎo)航/無導(dǎo)航線兩種，有導(dǎo)航線主要通過方向箭頭說明行徑方向，具體采用哪種線路可根據(jù)用戶目標(biāo)而定。
- 顏色狀態(tài)區(qū)分 ：用于區(qū)分線路類型和狀態(tài)，色彩的使用與規(guī)范用色要求一致；
- 線粗： 可根據(jù)地圖中線路數(shù)量決定線粗，線粗細(xì)不隨地圖縮小/放大而改變；
根據(jù)使用場景梳理出多種線路模式
- 單線路 ：單線路包含一個起始點和單條線路，主要用于對單軌跡線查看。例如查看車輛行駛軌跡，并通過色彩區(qū)分不同路段中的狀態(tài)，同時對異常點進(jìn)行標(biāo)記，分析異常路段與節(jié)點，實現(xiàn)行駛?cè)鞒瘫O(jiān)控。
- 分段式線路 ：單條主線路流程包含多個串點線路，存在多個分段，通過顏色區(qū)分狀態(tài)，可通過點擊查看某一線路段的詳細(xì)信息。
- 實際與推薦對比/多條軌跡推薦 ：包含多條起始點一致、獨立且平行線路存在，用于不同線路的對比。主要應(yīng)用在實際線路與推薦線路或多條不同軌跡線路的對比。
- 多條線路規(guī)劃：規(guī)劃線路很多，信息量大，且為平行關(guān)系，線路樣式可以選擇粗或者細(xì)的線路；
5.3.2飛線
反映兩個地域與多地域間的數(shù)據(jù)關(guān)系，相對于軌跡線的精確表達(dá)，飛線是基于數(shù)據(jù)統(tǒng)計的可視化呈現(xiàn)形式，例如進(jìn)/出港線線可視。從業(yè)務(wù)場景上可分為單點發(fā)散，和多點多發(fā)散的形式，對線的展示要求不一致，在樣式上無固定要求，可根據(jù)需求和展示效果配置飛線顏色、透明度、飛線形狀、粗細(xì)、弧度以及流光動效等。普通關(guān)系 ：主要用于查看點到點位置信息以及線路數(shù)量展示；
對比關(guān)系： 在普通飛線的基礎(chǔ)上增加了對比關(guān)系，可用于對比程度/數(shù)量等信息。具體的顏色可根據(jù)對比需求自行選擇。
5.2.3 繪制線
用于繪制類地圖的特殊樣式，主要結(jié)合繪制工具使用，可編輯繪制類的線，用戶可以完成繪制線路內(nèi)容，是對用戶劃分操作的邊界可視。（使用場景較為單一）
5.4 面
5.4.1 圍欄面
面數(shù)據(jù)要展示地圖上的具體區(qū)域。在目前系統(tǒng)上，面主要用于地理圍欄劃分。地理圍欄指再顯示世界劃分虛擬邊界。地理圍欄服務(wù)適用于需要針對特定區(qū)域，監(jiān)控用戶位置與區(qū)域關(guān)系的場景中，由面+標(biāo)記點構(gòu)成。場景：網(wǎng)格式地圖主要用戶簽到打卡類、區(qū)域數(shù)據(jù)查看類、路區(qū)編輯類場景。 在不同比例尺下地圖展示區(qū)域劃分維度不同，展示規(guī)則為對應(yīng)下一級的圍欄：區(qū)域——戰(zhàn)區(qū)——片區(qū)——路區(qū)——AOI。
樣式 ：上由描邊和透明面（不遮擋地圖信息）構(gòu)成，描邊劃分邊界，面表示覆蓋范圍。分為常規(guī)、預(yù)警、提示、參考三種類型，選取色相差異較大且具有代表性的顏色用于狀態(tài)區(qū)分。
從查看方式上，主要分為非聚焦型查看與聚焦型查看。非聚焦型查看狀態(tài)下，用戶往往沒有具體查看目標(biāo)，會從上到下查看不同區(qū)域的內(nèi)容，或進(jìn)行不同區(qū)域的對比，存在跳躍性，因此不需要聚焦到某個狀態(tài)，一般地圖大多用的是非聚焦型。聚焦型是指在特定的情況下，用戶需要對某一個區(qū)域的進(jìn)行詳細(xì)查看或操作。
5.4.2 可視化圖表
- 氣泡圖
- 網(wǎng)格地圖
*可根據(jù)需求選擇不同的顏色對比方式。
- 彌散式熱力圖
色彩選取上，拉開冷暖差異，增強(qiáng)用戶對色彩感知，同時符合制圖學(xué)和公眾認(rèn)知降低了用戶的學(xué)習(xí)成本和記憶負(fù)擔(dān)。
- 區(qū)域熱力圖
六、總結(jié)
通過對現(xiàn)存問題進(jìn)行分析，結(jié)合實際業(yè)務(wù)場景，對現(xiàn)有設(shè)計內(nèi)容進(jìn)行整合再設(shè)計，輸出設(shè)計原則和具體的方法性規(guī)范，為設(shè)計師提供指導(dǎo)，并應(yīng)用到具體設(shè)計中。提供了清晰的思路，和可復(fù)用的組件，提高了用戶體驗的一致性和設(shè)計師的效率。但規(guī)范不是一成不變的，需要在應(yīng)用中進(jìn)行完善和補(bǔ)足，進(jìn)行可持續(xù)優(yōu)化與拓展。
//////? END ?//////
我們相信設(shè)計師和創(chuàng)造者一樣是思想家 三分設(shè)
一個開放的設(shè)計師共創(chuàng)學(xué)習(xí)型社區(qū) 助力全球 1 億設(shè)計師成長
好書推薦
關(guān)于我們·深度鏈接
歡迎添加?????星標(biāo) · 獲取每天推薦知識分享 每天閱讀充電 · 養(yǎng)成終身學(xué)習(xí) 「資訊」「文章」「活動」「招聘」「課程」共創(chuàng)計劃·成員招募 「合伙人計劃」 「翻閱計劃」 「分享行動」 「項目共創(chuàng)」 「新媒體聯(lián)盟」 ??????
期待與更多優(yōu)秀產(chǎn)品設(shè)計師一起成長
掃碼進(jìn)群
加入星球資料庫
全年助力設(shè)友建立設(shè)計知識體系和職場指導(dǎo)咨詢， 「體系化知識研討」「設(shè)計·管理書籍共讀」「線上職場訓(xùn)練營」 「實戰(zhàn)項目共創(chuàng)」「大會活動交流」 分享設(shè)計/管理/職場/心得，定期直播，答疑解惑
↓↓↓點開
『
閱讀原文
』
，關(guān)注星球資料庫
評論
圖片
表情