2021-5-26 資深UI設計者
相信很多人在開車時都用過手機或車機上的地圖導航，而今天 Alibaba Design 想和大家分享的就是大家常用的地圖導航的換代升級版——車道級導航。
先來說說車道級導航有哪些不一樣。相比于傳統(tǒng)地圖，車道級地圖導航在信息精細度、定位準確性、動態(tài)信息豐富度上有大幅提升。比如，車道級導航能清晰顯示道路上的虛實標線、自己的車行駛在哪條車道上，還能在地圖上看到車身攝像頭和雷達檢測到的周圍車輛、錐桶、防撞桶等。
車道級導航在智能汽車的駕駛場景中，有兩方面的用戶價值：
目前，高德已經(jīng)發(fā)布搭載了車道級導航能力的量產產品——高德第三代車載導航，已在小鵬P7車型的NGP*自動導航輔助駕駛系統(tǒng)中落地。
*NGP 是高級智能輔助駕駛系統(tǒng)，可以在全中國大部分高快速道路上進行自主并線、超車、駛入匝道等。
車道級地圖導航承載的信息與傳統(tǒng)地圖有明顯差異，如何將這些信息加工轉化為愉悅的駕駛體驗，就是設計師要解決的問題了。下面分享一些我們在車道級導航設計中的思考。
車道級導航應用于智能汽車的人車共駕場景，需要同時考慮用戶的駕乘體驗和車企客戶的設計定制訴求。包含三部分內容：
車道級地圖中所呈現(xiàn)的數(shù)據(jù)元素對比普通地圖更多更復雜，而且在不斷采集更新中，但大致能劃分為三類：動態(tài)識別元素、高精道路元素以及場景氛圍元素，如下圖所示。
我們要做的設計，就是將以上這些數(shù)據(jù)元素以三維視覺化的方式進行呈現(xiàn)，最終服務于駕駛場景中的駕駛者。我們總結了幾個重要的構建原則：
「 清晰的空間關系展示 」
數(shù)字地圖的優(yōu)勢在于能清晰展示復雜世界的空間結構、空間關系?？臻g關系的清晰表達能讓駕駛者更了解當前所處道路環(huán)境，心里更有底，這對于開啟自動駕駛的車輛尤為重要。
空間關系表達的關鍵在于表現(xiàn)道路的上下層級和聯(lián)通關系、坡度變化，加上仿真的車輛及視角變化，實現(xiàn)高架穿橋而過、相機視角由遠及近的場景展示。
空間關系表達的另一重點在于道路與周圍環(huán)境的關系，比如道路與山脈，通過高精地圖可以看到遠方道路的彎曲路形，提前減速，提升山路駕駛安全性。
「 簡約元素風格提煉 」
地圖設計時整體風格選擇需要克制，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與上層業(yè)務組件拉開視覺層級。這樣才能更好的突出當前需要駕駛者注意的重點元素，提升整體的信息傳達效率和體驗。
既要讓駕駛者能快速識別地圖中的元素是什么，又需要讓畫面整體有序，主次明確。所以我們使用介于寫實與抽象風格之間的簡約風格，既能寫實展示元素的關鍵特征，整體又不復雜。
對于單個元素的設計上，主要是通過元素現(xiàn)實中的關鍵特征提取，去掉一些不影響認知的細節(jié)，讓駕駛者一眼就能明確這個元素是什么。
「 動靜風格統(tǒng)一 」
靜態(tài)元素是由高精地圖生成，而運動元素則是車輛傳感器識別的車輛、交通設施等。地圖上的這些元素的仿真表達，能夠反應車周圍的實時動態(tài)環(huán)境信息，增強駕駛者對車輛感知能力的信任。
對于這些動態(tài)識別元素，我們推薦客戶在設計風格上與地圖相呼應，在保證識別性的前提下，兩者風格盡量統(tǒng)一，形成整體感。
下面是客戶設計團隊制作的動態(tài)元素模型：
對于行人、自行車等出現(xiàn)人體的元素，我們通過循環(huán)的骨骼動畫原地播放，以及傳感器確定的運動軌跡，來模擬對應的人體運動。
地圖畫面是由渲染引擎程序的攝像機拍攝出來的。攝像機的位置、俯仰角、投影中心、裁剪區(qū)域等都會影響用戶看到的畫面內容。
「 遠近兼顧的視野 」
為了讓駕駛者有全局的掌控感，車道級地圖的攝像機視野需要兼顧眼前和遠方的信息呈現(xiàn)。在地圖上既可以看清眼前的車道標線、周圍的車輛，又可以看到 500 米甚至一公里后的路形變化、高速出口等。
「 自動駕駛動態(tài)視角 」
我們與客戶設計團隊一起，對自動駕駛場景拆分做了多次討論，最后決定對車速和并線這兩個變量設計動態(tài)視角。
在自動駕駛場景中，攝影機與自車的距離會隨著車速大小在一定范圍內變化。當車速較慢時，拉近攝影機與自車的距離，以強化顯示自車周圍的動態(tài)信息。當車速較快時，拉遠攝影機與自車的距離，獲得更遠的視野和足夠的預判時間。
自動駕駛的關鍵場景是車輛自動并線。為了強化駕駛者對車輛并線決策的感知，在汽車進入并線等待狀態(tài)時，相機的投射中心會移動到目標車位。
「 車道級導航動態(tài)視角 」
與自動駕駛相對的是人駕駛的場景。按與下一個轉向路口的距離遠近，人在駕車導航時可抽象為 4 個階段：順行、預判、確定、動作。
不同的駕駛階段需要不同的攝像機視角，來強調最相關的信息。例如：當下一個轉彎路口在幾公里以后時，駕駛員對幾公里范圍內路況的需求要強于對前方路口位置的需求；當臨近路口時，駕駛員對前方從哪里轉彎、走哪條車道的需求又會強于對幾公里后路況的需求。
下面詳細介紹一下臨近路口時，攝像機視角的動態(tài)過渡策略：
過程 1：根據(jù)用戶位置和交通情況，提示用戶并線，此時將攝像機拉近，畫面從 2D 地圖視野平滑放大到車道級地圖視野，突出并線引導和目標車道；
過程 2：保持攝像機與自車距離不變，仰角隨著自車與路口的距離逐漸減?。存i定路口在屏幕上的位置）。這樣既能有清晰的路口距離感知，又能讓路口形狀逐漸清楚，規(guī)避了大仰角導致的離路口越近，路口形狀越扁平的問題。
不同的路口形狀適合不同的仰角參數(shù)。例如分叉路口用“大仰角”就能既看清路口形狀，十字路口則需要偏鳥瞰的“小仰角”才能看清路口形狀。另外，當轉彎路口之前很近的位置還有一個路口時，還需要調整相機的旋轉角度，來清晰傳達兩個路口的位置和形狀，防止駕駛員走錯。
車道級地圖與自動駕駛關聯(lián)緊急，且依賴于車輛的精準定位能力，是車輛智能化的核心功能展示，對于設計上每個車企都會考慮進行深度定制，與自身 HMI 風格統(tǒng)一，且功能上有與其他車企的差異化與賣點，這就需要我們考慮規(guī)?；O計中的效率問題。
規(guī)?；y點在于，與客戶產研設團隊的合作鏈路摸索和優(yōu)化；車道級元素種類多、狀態(tài)多，設計產出的落地文件生成方式也不同；預覽驗證困難，導致新接觸的客戶設計師理解門檻高，缺乏對應的工具集。
「 低成本風格定制 」
第一階段，我們?yōu)榭蛻籼峁┝烁鱾€設計階段需要的設計規(guī)范、源文件、教程。第二階段，客戶可以使用高德設計團隊打造的 D-Map 平臺，通過所見即所得的方式進行設計方案配置，并且能快速預覽設計效果。
「低成本增減元素」
對于車道級地圖中新增三維元素，梳理了對應的元素新增流程，規(guī)范前期建模中的模型面數(shù)、坐標、法線等，減少返工調整。
傳統(tǒng)導航地圖的使用對象只是人，而車道級導航地圖是人車共用的。在自動駕駛時，車道級導航地圖不僅為自主駕駛系統(tǒng)提供地圖和導航路徑，駕駛者與乘客也可以通過地圖更清楚地了解車輛做決策的依據(jù)，增強對于車輛的信任感；而在人駕駛時，通過車道級的精細引導，可為駕駛員帶來更舒適、更安全的導航體驗。
地圖是人類文明的坐標，隨著科技進步，地圖不斷被賦予新的內涵。對于車道級導航的設計探索才剛開始，未來，我們也會嘗試利用不斷增強的車載硬件算力，與車企一起創(chuàng)造次世代的車載導航體驗，為用戶提供更準確好用的高德地圖。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：優(yōu)設 作者：AlibabaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.miumiuwan.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務