大廠案例 | 最近爆火的高德AR導(dǎo)航!
▲點擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們
歡迎來到專業(yè)設(shè)計師學(xué)習(xí)交流社區(qū)
三分設(shè)｜連接知識，幫助全球 1 億設(shè)計師成長
轉(zhuǎn)自：AlibabaDesign
編輯：孫淑雅
共 2787?字，預(yù)計閱讀 7?分鐘
近日在短視頻上有關(guān)【高德AR導(dǎo)航】的相關(guān)視頻成為爆款，得到了廣大用戶的歡迎和點贊，下面就和大家一起分享，高德 AR 導(dǎo)航從無到有的體驗設(shè)計原則和背后思考。
高德AR導(dǎo)航效果
各大公司入局 AR 現(xiàn)實增強(qiáng)領(lǐng)域，現(xiàn)實增強(qiáng)技術(shù)也逐漸趨于成熟，隨著對AR應(yīng)用領(lǐng)域深入探索，圖像識別數(shù)據(jù)的積累以及 AR 導(dǎo)航體驗探索變得非常重要。高德地圖基于大量的地理信息數(shù)據(jù)和精準(zhǔn)的導(dǎo)航能力，AR 實景導(dǎo)航正式發(fā)布，讓駕駛員能夠身臨其境的感受增強(qiáng)現(xiàn)實帶來的駕駛樂趣，那么在復(fù)雜的環(huán)境中又如何把握體驗設(shè)計？與界面設(shè)計又有什么不同？一直是我們在思考的課題。
我們先從用戶反饋、競品分析、AR 導(dǎo)航載體、安全性、環(huán)境感知、設(shè)計語言 6 個層面切入分析，把探索的方案落地到 AR 引擎中實驗，再到高德地圖車機(jī)版上線驗證，最后服務(wù)于高德 ToB 車企出貨，帶來實際收益。
01?AR 導(dǎo)航設(shè)計原則
作為設(shè)計師，習(xí)慣了用屏幕的二維空間去思考信息效率的最大化，但是把體驗和設(shè)計放在三維空間中，會受到環(huán)境、光線、安全性、場景、人、車、路等相互影響。
· 環(huán)境影響設(shè)計
環(huán)境的變化影響分為自然環(huán)境、道路環(huán)境、駕駛環(huán)境三類，不同的天氣、道路等級、駕駛因素都會對駕駛員的感受、反應(yīng)、狀態(tài)產(chǎn)生影響，所以在 AR 的空間體驗設(shè)計中，這些影響需要充分考慮其中。
當(dāng)考慮完環(huán)境因素后，還應(yīng)該去真實的駕駛情景中分析信息呈現(xiàn)的權(quán)重，比如車輛在行駛中前方移動的物體一定比車輛靜止時看到移動物體的權(quán)重要高，那么在設(shè)計上，需要明確信息層級和顯示時機(jī)及策略，讓駕駛員在行駛中能夠快速獲取，且正常駕駛不受其影響。
· 空間體驗設(shè)計
AR 空間體驗設(shè)計最大的難點在于：在界面設(shè)計中，我們只關(guān)注信息層級、顏色、大小、動態(tài)等，都是在二維平面中去思考信息效率的最大化，但是在 AR 的三維空間中，除上述我們還需關(guān)注安全性、空間性、以及如果讓駕駛員快速獲取增強(qiáng)信息來輔助他進(jìn)行平穩(wěn)駕駛。從下圖比較看，在界面中告訴我前方有什么路況信息遠(yuǎn)遠(yuǎn)不如直接看的效率快。
AR 導(dǎo)航的視域不僅要考慮水平、垂直視野中的布局，劃定舒適區(qū)域，還要考慮距離對于信息呈現(xiàn)的感受。
經(jīng)過以上對于布局的規(guī)劃，我們可以得到以下布局關(guān)系。
· 顏色及視覺權(quán)重
在顏色的選取上，讓整體的配色符合真實世界的認(rèn)知，在我國道路交通中對于顏色界定，路牌中的藍(lán)綠色為不會立即影響駕駛者行為的信息，紅色、橙色、黃色用戶告知駕駛員暫時性和永久性的危險，所以我們可以得出以下顏色體系。
在 AR 導(dǎo)航設(shè)計中，最大的不同在于，你所有的設(shè)計都需要跟據(jù)實現(xiàn)后的策略+真實環(huán)境路測去反復(fù)調(diào)整，檢驗設(shè)計邏輯是否符合駕駛員的真實感知，經(jīng)過了大量路測及實驗才能敲定。
02?從設(shè)計到落地
· 案例分析
我們嘗試用一個案例展開來訴說實際的道路環(huán)境遠(yuǎn)比紙面上的分析要復(fù)雜的多。
在司機(jī)正常駕駛中，既為用戶提供了紅綠燈檢測，又給用戶提供了車道線提示，單獨(dú)看紅綠燈識別及車道線提醒都沒有問題，但在十字路口場景可以發(fā)現(xiàn)，紅綠燈和車道線重合，帶來了信息疊壓的問題，經(jīng)過分析發(fā)現(xiàn)：
紅綠燈策略：在十字路口駐車時，檢測開始，并在紅綠燈變化顏色時，語音提示用戶并展示綠燈可通行。
車道線策略：常駐顯示，無論什么情況下，都顯示當(dāng)前道路車道線。
針對上述的紅綠燈和車道線重合問題，可以從兩個層面分析解決。
車道線和紅綠燈其一換位置：紅綠燈為視線位置圖像識別所得，無法更改位置，因此只能調(diào)整車道線位置。
策略規(guī)避：分析可發(fā)現(xiàn)，駕駛員在十字路口場景時，是沒有查看車道線訴求的，但是檢測紅綠燈訴求強(qiáng)烈，車道線在駕駛員臨近路口時，是強(qiáng)訴求。
所以迅速采取了方案 2 的方式，讓紅綠燈和車道線差異策略時段顯示，規(guī)避了該問題，上述問題為簡單舉例，在實際現(xiàn)實空間場景時，需要注意的是現(xiàn)實物體識別是否遮擋駕駛視線或者和 AR 常駐信息重疊。
壓線效果?
場景服務(wù)卡片
斑馬線提醒及行人預(yù)警
我們試想下，如果在轉(zhuǎn)彎情況下，我們展示了很多行人 ADAS （預(yù)警系統(tǒng)）提醒，是否影響了正常駕駛？在每個元素出現(xiàn)和消失的時候，需要充分的考慮到它對其他元素的影響，是否符合 AR 空間設(shè)計體系和權(quán)重策略，差異化顯示為更優(yōu)解。
標(biāo)注：本篇文章內(nèi)容效果在后續(xù)版本中陸續(xù)上線
03?愿景&未來價值
·?有趣 真實 互動
抖音、快手、snapchat 等國內(nèi)外社交平臺上的 AR 濾鏡應(yīng)用大多簡單有趣，比如給你的臉上實時畫個妝，拍邊時四周漂浮一些可愛的小動物，非常符合現(xiàn)代人的使用心態(tài)。但是 AR 在地圖中的應(yīng)用（如步行導(dǎo)航、駕車導(dǎo)航) , 也應(yīng)該考慮如何利用 AR 的特性讓地圖中的數(shù)據(jù)清晰易懂、與人的互動也變得更輕松隨意。
常規(guī)使用導(dǎo)航時，隨著地圖放大，可以看到更多的道路細(xì)節(jié)（車道數(shù)量，路邊停車位，斑馬線，交通事故等）。但是開車時需要時刻和真實世界做對應(yīng)。受限于屏幕大小，這些信息的展示總是有限的。當(dāng)我們用上了 AR，這些信息就能直接展示在真實世界中的相應(yīng)位置，不用費(fèi)力去尋找。傳統(tǒng)地圖的方式也將被顛覆。
案例分析1：放在道路上的虛擬路障
利用 AR 視覺效果進(jìn)行更逼真的強(qiáng)警示作用，而不是導(dǎo)航路線上的一個簡單標(biāo)記。
案例分析2：AR導(dǎo)航商圈透出
開車到陌生城市時，結(jié)合 AR 地理位置標(biāo)記，能清楚的知道所在商圈的信息。
· AR在出行領(lǐng)域的更多應(yīng)用
隨著城市建設(shè)路網(wǎng)越來越復(fù)雜，AR 在旅游景區(qū)的導(dǎo)覽，多種交通工具混合出行的場景都能更好的發(fā)揮出價值。這也是今后我們探索的方向，未來會陸續(xù)發(fā)布相關(guān)文章，敬請期待。
超值課程推薦
超 10 億用戶的產(chǎn)品，到底是怎么做用戶體驗的？
原創(chuàng)好文推薦
Web Vitals —— 谷歌的新一代 Web 性能體驗和質(zhì)量指標(biāo)
想要引導(dǎo)用戶行為轉(zhuǎn)化，設(shè)計師必須深刻理解這 4 個認(rèn)知心理學(xué)理論
讓設(shè)計圈一片嘩然的 Google 新 logo 到底出了什么問題？國外的設(shè)計專家這么說
如何系統(tǒng)的增強(qiáng)用戶粘性，提升產(chǎn)品轉(zhuǎn)化率？你要懂得“行為設(shè)計學(xué)”
設(shè)計新趨勢「玻璃擬態(tài)」到底是什么？這里有一份實現(xiàn)效果的詳細(xì)教程
如何將設(shè)計系統(tǒng)快速的從 Sketch 切換到 Figma？這里有 6 個需要注意的關(guān)鍵點
歡迎大家關(guān)注三分設(shè)，每天分享優(yōu)質(zhì)設(shè)計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。
