近日在短視頻上有關(guān)「高德 AR 導(dǎo)航」的相關(guān)視頻成為爆款，得到了廣大用戶的歡迎和點(diǎn)贊，下面就和大家一起分享，高德 AR 導(dǎo)航從無到有的體驗(yàn)設(shè)計(jì)原則和背后思考。

△ 高德 AR 導(dǎo)航效果

各大公司入局 AR 現(xiàn)實(shí)增強(qiáng)領(lǐng)域，現(xiàn)實(shí)增強(qiáng)技術(shù)也逐漸趨于成熟，隨著對(duì) AR 應(yīng)用領(lǐng)域深入探索，圖像識(shí)別數(shù)據(jù)的積累以及 AR 導(dǎo)航體驗(yàn)探索變得非常重要。高德地圖基于大量的地理信息數(shù)據(jù)和精準(zhǔn)的導(dǎo)航能力，AR 實(shí)景導(dǎo)航正式發(fā)布，讓駕駛員能夠身臨其境的感受增強(qiáng)現(xiàn)實(shí)帶來的駕駛樂趣，那么在復(fù)雜的環(huán)境中又如何把握體驗(yàn)設(shè)計(jì)？與界面設(shè)計(jì)又有什么不同？一直是我們?cè)谒伎嫉恼n題。

我們先從用戶反饋、競(jìng)品分析、AR 導(dǎo)航載體、安全性、環(huán)境感知、設(shè)計(jì)語言 6 個(gè)層面切入分析，把探索的方案落地到 AR 引擎中實(shí)驗(yàn)，再到高德地圖車機(jī)版上線驗(yàn)證，最后服務(wù)于高德 ToB 車企出貨，帶來實(shí)際收益。

AR 導(dǎo)航設(shè)計(jì)原則

作為設(shè)計(jì)師，習(xí)慣了用屏幕的二維空間去思考信息效率的最大化，但是把體驗(yàn)和設(shè)計(jì)放在三維空間中，會(huì)受到環(huán)境、光線、安全性、場(chǎng)景、人、車、路等相互影響。

1. 環(huán)境影響設(shè)計(jì)

環(huán)境的變化影響分為自然環(huán)境、道路環(huán)境、駕駛環(huán)境三類，不同的天氣、道路等級(jí)、駕駛因素都會(huì)對(duì)駕駛員的感受、反應(yīng)、狀態(tài)產(chǎn)生影響，所以在 AR 的空間體驗(yàn)設(shè)計(jì)中，這些影響需要充分考慮其中。

當(dāng)考慮完環(huán)境因素后，還應(yīng)該去真實(shí)的駕駛情景中分析信息呈現(xiàn)的權(quán)重，比如車輛在行駛中前方移動(dòng)的物體一定比車輛靜止時(shí)看到移動(dòng)物體的權(quán)重要高，那么在設(shè)計(jì)上，需要明確信息層級(jí)和顯示時(shí)機(jī)及策略，讓駕駛員在行駛中能夠快速獲取，且正常駕駛不受其影響。

2. 空間體驗(yàn)設(shè)計(jì)

AR 空間體驗(yàn)設(shè)計(jì)最大的難點(diǎn)在于：在界面設(shè)計(jì)中，我們只關(guān)注信息層級(jí)、顏色、大小、動(dòng)態(tài)等，都是在二維平面中去思考信息效率的最大化，但是在 AR 的三維空間中，除上述我們還需關(guān)注安全性、空間性、以及如果讓駕駛員快速獲取增強(qiáng)信息來輔助他進(jìn)行平穩(wěn)駕駛。從下圖比較看，在界面中告訴我前方有什么路況信息遠(yuǎn)遠(yuǎn)不如直接看的效率快。

AR 導(dǎo)航的視域不僅要考慮水平、垂直視野中的布局，劃定舒適區(qū)域，還要考慮距離對(duì)于信息呈現(xiàn)的感受。

經(jīng)過以上對(duì)于布局的規(guī)劃，我們可以得到以下布局關(guān)系。

3. 顏色及視覺權(quán)重

在顏色的選取上，讓整體的配色符合真實(shí)世界的認(rèn)知，在我國(guó)道路交通中對(duì)于顏色界定，路牌中的藍(lán)綠色為不會(huì)立即影響駕駛者行為的信息，紅色、橙色、黃色用戶告知駕駛員暫時(shí)性和永久性的危險(xiǎn)，所以我們可以得出以下顏色體系。

在 AR 導(dǎo)航設(shè)計(jì)中，最大的不同在于，你所有的設(shè)計(jì)都需要跟據(jù)實(shí)現(xiàn)后的策略+真實(shí)環(huán)境路測(cè)去反復(fù)調(diào)整，檢驗(yàn)設(shè)計(jì)邏輯是否符合駕駛員的真實(shí)感知，經(jīng)過了大量路測(cè)及實(shí)驗(yàn)才能敲定。

從設(shè)計(jì)到落地

1. 案例分析

我們嘗試用一個(gè)案例展開來訴說實(shí)際的道路環(huán)境遠(yuǎn)比紙面上的分析要復(fù)雜的多。

在司機(jī)正常駕駛中，既為用戶提供了紅綠燈檢測(cè)，又給用戶提供了車道線提示，單獨(dú)看紅綠燈識(shí)別及車道線提醒都沒有問題，但在十字路口場(chǎng)景可以發(fā)現(xiàn)，紅綠燈和車道線重合，帶來了信息疊壓的問題，經(jīng)過分析發(fā)現(xiàn)：

• 紅綠燈策略：在十字路口駐車時(shí)，檢測(cè)開始，并在紅綠燈變化顏色時(shí)，語音提示用戶并展示綠燈可通行。
• 車道線策略：常駐顯示，無論什么情況下，都顯示當(dāng)前道路車道線。

針對(duì)上述的紅綠燈和車道線重合問題，可以從兩個(gè)層面分析解決。

• 車道線和紅綠燈其一換位置：紅綠燈為視線位置圖像識(shí)別所得，無法更改位置，因此只能調(diào)整車道線位置。
• 策略規(guī)避：分析可發(fā)現(xiàn)，駕駛員在十字路口場(chǎng)景時(shí)，是沒有查看車道線訴求的，但是檢測(cè)紅綠燈訴求強(qiáng)烈，車道線在駕駛員臨近路口時(shí)，是強(qiáng)訴求。

所以迅速采取了方案 2 的方式，讓紅綠燈和車道線差異策略時(shí)段顯示，規(guī)避了該問題，上述問題為簡(jiǎn)單舉例，在實(shí)際現(xiàn)實(shí)空間場(chǎng)景時(shí)，需要注意的是現(xiàn)實(shí)物體識(shí)別是否遮擋駕駛視線或者和 AR 常駐信息重疊。

△ 壓線效果

△ 場(chǎng)景服務(wù)卡片

△ 斑馬線提醒及行人預(yù)警

我們?cè)囅胂?，如果在轉(zhuǎn)彎情況下，我們展示了很多行人 ADAS（預(yù)警系統(tǒng)）提醒，是否影響了正常駕駛？在每個(gè)元素出現(xiàn)和消失的時(shí)候，需要充分的考慮到它對(duì)其他元素的影響，是否符合 AR 空間設(shè)計(jì)體系和權(quán)重策略，差異化顯示為更優(yōu)解。

△ 標(biāo)注：本篇文章內(nèi)容效果在后續(xù)版本中陸續(xù)上線

愿景&未來價(jià)值

1. 有趣 真實(shí) 互動(dòng)

抖音、快手、snapchat 等國(guó)內(nèi)外社交平臺(tái)上的 AR 濾鏡應(yīng)用大多簡(jiǎn)單有趣，比如給你的臉上實(shí)時(shí)畫個(gè)妝，拍邊時(shí)四周漂浮一些可愛的小動(dòng)物，非常符合現(xiàn)代人的使用心態(tài)。但是 AR 在地圖中的應(yīng)用（如步行導(dǎo)航、駕車導(dǎo)航) , 也應(yīng)該考慮如何利用 AR 的特性讓地圖中的數(shù)據(jù)清晰易懂、與人的互動(dòng)也變得更輕松隨意。

常規(guī)使用導(dǎo)航時(shí)，隨著地圖放大，可以看到更多的道路細(xì)節(jié)（車道數(shù)量，路邊停車位，斑馬線，交通事故等）。但是開車時(shí)需要時(shí)刻和真實(shí)世界做對(duì)應(yīng)。受限于屏幕大小，這些信息的展示總是有限的。當(dāng)我們用上了 AR，這些信息就能直接展示在真實(shí)世界中的相應(yīng)位置，不用費(fèi)力去尋找。傳統(tǒng)地圖的方式也將被顛覆。

案例分析 1：放在道路上的虛擬路障

利用 AR 視覺效果進(jìn)行更逼真的強(qiáng)警示作用，而不是導(dǎo)航路線上的一個(gè)簡(jiǎn)單標(biāo)記。

案例分析 2：AR 導(dǎo)航商圈透出

開車到陌生城市時(shí)，結(jié)合 AR 地理位置標(biāo)記，能清楚的知道所在商圈的信息。

2. AR 在出行領(lǐng)域的更多應(yīng)用

隨著城市建設(shè)路網(wǎng)越來越復(fù)雜，AR 在旅游景區(qū)的導(dǎo)覽，多種交通工具混合出行的場(chǎng)景都能更好的發(fā)揮出價(jià)值。這也是今后我們探索的方向

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

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(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ù)