相信很多人在開車時(shí)都用過手機(jī)或車機(jī)上的地圖導(dǎo)航，而今天 Alibaba Design 想和大家分享的就是大家常用的地圖導(dǎo)航的換代升級(jí)版——車道級(jí)導(dǎo)航。

先來說說車道級(jí)導(dǎo)航有哪些不一樣。相比于傳統(tǒng)地圖，車道級(jí)地圖導(dǎo)航在信息精細(xì)度、定位準(zhǔn)確性、動(dòng)態(tài)信息豐富度上有大幅提升。比如，車道級(jí)導(dǎo)航能清晰顯示道路上的虛實(shí)標(biāo)線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達(dá)檢測(cè)到的周圍車輛、錐桶、防撞桶等。

車道級(jí)導(dǎo)航在智能汽車的駕駛場(chǎng)景中，有兩方面的用戶價(jià)值：

• 車輛自動(dòng)駕駛時(shí)，提供駕駛環(huán)境實(shí)時(shí)模擬的視覺可視化界面，建立人對(duì)系統(tǒng)的認(rèn)知和信任；
• 在人開車時(shí)，提供貼合現(xiàn)實(shí)的路口形狀、直觀的并線引導(dǎo)，降低駕駛者對(duì)導(dǎo)航信息的認(rèn)知成本。

目前，高德已經(jīng)發(fā)布搭載了車道級(jí)導(dǎo)航能力的量產(chǎn)產(chǎn)品——高德第三代車載導(dǎo)航，已在小鵬P7車型的NGP*自動(dòng)導(dǎo)航輔助駕駛系統(tǒng)中落地。

*NGP 是高級(jí)智能輔助駕駛系統(tǒng)，可以在全中國(guó)大部分高快速道路上進(jìn)行自主并線、超車、駛?cè)朐训赖取?

車道級(jí)地圖導(dǎo)航承載的信息與傳統(tǒng)地圖有明顯差異，如何將這些信息加工轉(zhuǎn)化為愉悅的駕駛體驗(yàn)，就是設(shè)計(jì)師要解決的問題了。下面分享一些我們?cè)谲嚨兰?jí)導(dǎo)航設(shè)計(jì)中的思考。

車道級(jí)地圖導(dǎo)航的體驗(yàn)設(shè)計(jì)框架

車道級(jí)導(dǎo)航應(yīng)用于智能汽車的人車共駕場(chǎng)景，需要同時(shí)考慮用戶的駕乘體驗(yàn)和車企客戶的設(shè)計(jì)定制訴求。包含三部分內(nèi)容：

• 三維世界構(gòu)建
• 空間視角展示
• 全局樣式定制

1. 三維世界構(gòu)建

車道級(jí)地圖中所呈現(xiàn)的數(shù)據(jù)元素對(duì)比普通地圖更多更復(fù)雜，而且在不斷采集更新中，但大致能劃分為三類：動(dòng)態(tài)識(shí)別元素、高精道路元素以及場(chǎng)景氛圍元素，如下圖所示。

我們要做的設(shè)計(jì)，就是將以上這些數(shù)據(jù)元素以三維視覺化的方式進(jìn)行呈現(xiàn)，最終服務(wù)于駕駛場(chǎng)景中的駕駛者。我們總結(jié)了幾個(gè)重要的構(gòu)建原則：

「 清晰的空間關(guān)系展示 」

數(shù)字地圖的優(yōu)勢(shì)在于能清晰展示復(fù)雜世界的空間結(jié)構(gòu)、空間關(guān)系?？臻g關(guān)系的清晰表達(dá)能讓駕駛者更了解當(dāng)前所處道路環(huán)境，心里更有底，這對(duì)于開啟自動(dòng)駕駛的車輛尤為重要。

空間關(guān)系表達(dá)的關(guān)鍵在于表現(xiàn)道路的上下層級(jí)和聯(lián)通關(guān)系、坡度變化，加上仿真的車輛及視角變化，實(shí)現(xiàn)高架穿橋而過、相機(jī)視角由遠(yuǎn)及近的場(chǎng)景展示。

空間關(guān)系表達(dá)的另一重點(diǎn)在于道路與周圍環(huán)境的關(guān)系，比如道路與山脈，通過高精地圖可以看到遠(yuǎn)方道路的彎曲路形，提前減速，提升山路駕駛安全性。

「 簡(jiǎn)約元素風(fēng)格提煉 」

地圖設(shè)計(jì)時(shí)整體風(fēng)格選擇需要克制，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與上層業(yè)務(wù)組件拉開視覺層級(jí)。這樣才能更好的突出當(dāng)前需要駕駛者注意的重點(diǎn)元素，提升整體的信息傳達(dá)效率和體驗(yàn)。

既要讓駕駛者能快速識(shí)別地圖中的元素是什么，又需要讓畫面整體有序，主次明確。所以我們使用介于寫實(shí)與抽象風(fēng)格之間的簡(jiǎn)約風(fēng)格，既能寫實(shí)展示元素的關(guān)鍵特征，整體又不復(fù)雜。

對(duì)于單個(gè)元素的設(shè)計(jì)上，主要是通過元素現(xiàn)實(shí)中的關(guān)鍵特征提取，去掉一些不影響認(rèn)知的細(xì)節(jié)，讓駕駛者一眼就能明確這個(gè)元素是什么。

「 動(dòng)靜風(fēng)格統(tǒng)一 」

靜態(tài)元素是由高精地圖生成，而運(yùn)動(dòng)元素則是車輛傳感器識(shí)別的車輛、交通設(shè)施等。地圖上的這些元素的仿真表達(dá)，能夠反應(yīng)車周圍的實(shí)時(shí)動(dòng)態(tài)環(huán)境信息，增強(qiáng)駕駛者對(duì)車輛感知能力的信任。

對(duì)于這些動(dòng)態(tài)識(shí)別元素，我們推薦客戶在設(shè)計(jì)風(fēng)格上與地圖相呼應(yīng)，在保證識(shí)別性的前提下，兩者風(fēng)格盡量統(tǒng)一，形成整體感。

下面是客戶設(shè)計(jì)團(tuán)隊(duì)制作的動(dòng)態(tài)元素模型：

對(duì)于行人、自行車等出現(xiàn)人體的元素，我們通過循環(huán)的骨骼動(dòng)畫原地播放，以及傳感器確定的運(yùn)動(dòng)軌跡，來模擬對(duì)應(yīng)的人體運(yùn)動(dòng)。

2. 空間視角展示

地圖畫面是由渲染引擎程序的攝像機(jī)拍攝出來的。攝像機(jī)的位置、俯仰角、投影中心、裁剪區(qū)域等都會(huì)影響用戶看到的畫面內(nèi)容。

「 遠(yuǎn)近兼顧的視野 」

為了讓駕駛者有全局的掌控感，車道級(jí)地圖的攝像機(jī)視野需要兼顧眼前和遠(yuǎn)方的信息呈現(xiàn)。在地圖上既可以看清眼前的車道標(biāo)線、周圍的車輛，又可以看到 500 米甚至一公里后的路形變化、高速出口等。

「 自動(dòng)駕駛動(dòng)態(tài)視角 」

我們與客戶設(shè)計(jì)團(tuán)隊(duì)一起，對(duì)自動(dòng)駕駛場(chǎng)景拆分做了多次討論，最后決定對(duì)車速和并線這兩個(gè)變量設(shè)計(jì)動(dòng)態(tài)視角。

在自動(dòng)駕駛場(chǎng)景中，攝影機(jī)與自車的距離會(huì)隨著車速大小在一定范圍內(nèi)變化。當(dāng)車速較慢時(shí)，拉近攝影機(jī)與自車的距離，以強(qiáng)化顯示自車周圍的動(dòng)態(tài)信息。當(dāng)車速較快時(shí)，拉遠(yuǎn)攝影機(jī)與自車的距離，獲得更遠(yuǎn)的視野和足夠的預(yù)判時(shí)間。

自動(dòng)駕駛的關(guān)鍵場(chǎng)景是車輛自動(dòng)并線。為了強(qiáng)化駕駛者對(duì)車輛并線決策的感知，在汽車進(jìn)入并線等待狀態(tài)時(shí)，相機(jī)的投射中心會(huì)移動(dòng)到目標(biāo)車位。

「 車道級(jí)導(dǎo)航動(dòng)態(tài)視角 」

與自動(dòng)駕駛相對(duì)的是人駕駛的場(chǎng)景。按與下一個(gè)轉(zhuǎn)向路口的距離遠(yuǎn)近，人在駕車導(dǎo)航時(shí)可抽象為 4 個(gè)階段：順行、預(yù)判、確定、動(dòng)作。

不同的駕駛階段需要不同的攝像機(jī)視角，來強(qiáng)調(diào)最相關(guān)的信息。例如：當(dāng)下一個(gè)轉(zhuǎn)彎路口在幾公里以后時(shí)，駕駛員對(duì)幾公里范圍內(nèi)路況的需求要強(qiáng)于對(duì)前方路口位置的需求；當(dāng)臨近路口時(shí)，駕駛員對(duì)前方從哪里轉(zhuǎn)彎、走哪條車道的需求又會(huì)強(qiáng)于對(duì)幾公里后路況的需求。

下面詳細(xì)介紹一下臨近路口時(shí)，攝像機(jī)視角的動(dòng)態(tài)過渡策略：

過程 1：根據(jù)用戶位置和交通情況，提示用戶并線，此時(shí)將攝像機(jī)拉近，畫面從 2D 地圖視野平滑放大到車道級(jí)地圖視野，突出并線引導(dǎo)和目標(biāo)車道；

過程 2：保持?jǐn)z像機(jī)與自車距離不變，仰角隨著自車與路口的距離逐漸減?。存i定路口在屏幕上的位置）。這樣既能有清晰的路口距離感知，又能讓路口形狀逐漸清楚，規(guī)避了大仰角導(dǎo)致的離路口越近，路口形狀越扁平的問題。

不同的路口形狀適合不同的仰角參數(shù)。例如分叉路口用“大仰角”就能既看清路口形狀，十字路口則需要偏鳥瞰的“小仰角”才能看清路口形狀。另外，當(dāng)轉(zhuǎn)彎路口之前很近的位置還有一個(gè)路口時(shí)，還需要調(diào)整相機(jī)的旋轉(zhuǎn)角度，來清晰傳達(dá)兩個(gè)路口的位置和形狀，防止駕駛員走錯(cuò)。

3. 全局樣式定制

車道級(jí)地圖與自動(dòng)駕駛關(guān)聯(lián)緊急，且依賴于車輛的精準(zhǔn)定位能力，是車輛智能化的核心功能展示，對(duì)于設(shè)計(jì)上每個(gè)車企都會(huì)考慮進(jìn)行深度定制，與自身 HMI 風(fēng)格統(tǒng)一，且功能上有與其他車企的差異化與賣點(diǎn)，這就需要我們考慮規(guī)?；O(shè)計(jì)中的效率問題。

規(guī)?；y點(diǎn)在于，與客戶產(chǎn)研設(shè)團(tuán)隊(duì)的合作鏈路摸索和優(yōu)化；車道級(jí)元素種類多、狀態(tài)多，設(shè)計(jì)產(chǎn)出的落地文件生成方式也不同；預(yù)覽驗(yàn)證困難，導(dǎo)致新接觸的客戶設(shè)計(jì)師理解門檻高，缺乏對(duì)應(yīng)的工具集。

「 低成本風(fēng)格定制 」

第一階段，我們?yōu)榭蛻籼峁┝烁鱾€(gè)設(shè)計(jì)階段需要的設(shè)計(jì)規(guī)范、源文件、教程。第二階段，客戶可以使用高德設(shè)計(jì)團(tuán)隊(duì)打造的 D-Map 平臺(tái)，通過所見即所得的方式進(jìn)行設(shè)計(jì)方案配置，并且能快速預(yù)覽設(shè)計(jì)效果。

「低成本增減元素」

對(duì)于車道級(jí)地圖中新增三維元素，梳理了對(duì)應(yīng)的元素新增流程，規(guī)范前期建模中的模型面數(shù)、坐標(biāo)、法線等，減少返工調(diào)整。

總結(jié)

傳統(tǒng)導(dǎo)航地圖的使用對(duì)象只是人，而車道級(jí)導(dǎo)航地圖是人車共用的。在自動(dòng)駕駛時(shí)，車道級(jí)導(dǎo)航地圖不僅為自主駕駛系統(tǒng)提供地圖和導(dǎo)航路徑，駕駛者與乘客也可以通過地圖更清楚地了解車輛做決策的依據(jù)，增強(qiáng)對(duì)于車輛的信任感；而在人駕駛時(shí)，通過車道級(jí)的精細(xì)引導(dǎo)，可為駕駛員帶來更舒適、更安全的導(dǎo)航體驗(yàn)。

地圖是人類文明的坐標(biāo)，隨著科技進(jìn)步，地圖不斷被賦予新的內(nèi)涵。對(duì)于車道級(jí)導(dǎo)航的設(shè)計(jì)探索才剛開始，未來，我們也會(huì)嘗試?yán)貌粩嘣鰪?qiáng)的車載硬件算力，與車企一起創(chuàng)造次世代的車載導(dǎo)航體驗(yàn)，為用戶提供更準(zhǔn)確好用的高德地圖。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：AlibabaDesign

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.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ù)