2021-4-6 資深UI設(shè)計(jì)者
近日在短視頻上有關(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ù)也逐漸趨于成熟，隨著對 AR 應(yīng)用領(lǐng)域深入探索，圖像識別數(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ì)又有什么不同？一直是我們在思考的課題。
我們先從用戶反饋、競品分析、AR 導(dǎo)航載體、安全性、環(huán)境感知、設(shè)計(jì)語言 6 個(gè)層面切入分析，把探索的方案落地到 AR 引擎中實(shí)驗(yàn)，再到高德地圖車機(jī)版上線驗(yàn)證，最后服務(wù)于高德 ToB 車企出貨，帶來實(shí)際收益。
作為設(shè)計(jì)師，習(xí)慣了用屏幕的二維空間去思考信息效率的最大化，但是把體驗(yàn)和設(shè)計(jì)放在三維空間中，會(huì)受到環(huán)境、光線、安全性、場景、人、車、路等相互影響。
1. 環(huán)境影響設(shè)計(jì)
環(huán)境的變化影響分為自然環(huán)境、道路環(huán)境、駕駛環(huán)境三類，不同的天氣、道路等級、駕駛因素都會(huì)對駕駛員的感受、反應(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ì)上，需要明確信息層級和顯示時(shí)機(jī)及策略，讓駕駛員在行駛中能夠快速獲取，且正常駕駛不受其影響。
2. 空間體驗(yàn)設(shè)計(jì)
AR 空間體驗(yàn)設(shè)計(jì)最大的難點(diǎn)在于：在界面設(shè)計(jì)中，我們只關(guān)注信息層級、顏色、大小、動(dòng)態(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)系。
3. 顏色及視覺權(quán)重
在顏色的選取上，讓整體的配色符合真實(shí)世界的認(rèn)知，在我國道路交通中對于顏色界定，路牌中的藍(lán)綠色為不會(huì)立即影響駕駛者行為的信息，紅色、橙色、黃色用戶告知駕駛員暫時(shí)性和永久性的危險(xiǎn)，所以我們可以得出以下顏色體系。
在 AR 導(dǎo)航設(shè)計(jì)中，最大的不同在于，你所有的設(shè)計(jì)都需要跟據(jù)實(shí)現(xiàn)后的策略+真實(shí)環(huán)境路測去反復(fù)調(diào)整，檢驗(yàn)設(shè)計(jì)邏輯是否符合駕駛員的真實(shí)感知，經(jīng)過了大量路測及實(shí)驗(yàn)才能敲定。
1. 案例分析
我們嘗試用一個(gè)案例展開來訴說實(shí)際的道路環(huán)境遠(yuǎn)比紙面上的分析要復(fù)雜的多。
在司機(jī)正常駕駛中，既為用戶提供了紅綠燈檢測，又給用戶提供了車道線提示，單獨(dú)看紅綠燈識別及車道線提醒都沒有問題，但在十字路口場景可以發(fā)現(xiàn)，紅綠燈和車道線重合，帶來了信息疊壓的問題，經(jīng)過分析發(fā)現(xiàn)：
針對上述的紅綠燈和車道線重合問題，可以從兩個(gè)層面分析解決。
所以迅速采取了方案 2 的方式，讓紅綠燈和車道線差異策略時(shí)段顯示，規(guī)避了該問題，上述問題為簡單舉例，在實(shí)際現(xiàn)實(shí)空間場景時(shí)，需要注意的是現(xiàn)實(shí)物體識別是否遮擋駕駛視線或者和 AR 常駐信息重疊。
△ 壓線效果
△ 場景服務(wù)卡片
△ 斑馬線提醒及行人預(yù)警
我們試想下，如果在轉(zhuǎn)彎情況下，我們展示了很多行人 ADAS（預(yù)警系統(tǒng)）提醒，是否影響了正常駕駛？在每個(gè)元素出現(xiàn)和消失的時(shí)候，需要充分的考慮到它對其他元素的影響，是否符合 AR 空間設(shè)計(jì)體系和權(quán)重策略，差異化顯示為更優(yōu)解。
△ 標(biāo)注：本篇文章內(nèi)容效果在后續(xù)版本中陸續(xù)上線
抖音、快手、snapchat 等國內(nèi)外社交平臺上的 AR 濾鏡應(yīng)用大多簡單有趣，比如給你的臉上實(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í)世界做對應(yīng)。受限于屏幕大小，這些信息的展示總是有限的。當(dāng)我們用上了 AR，這些信息就能直接展示在真實(shí)世界中的相應(yīng)位置，不用費(fèi)力去尋找。傳統(tǒng)地圖的方式也將被顛覆。
案例分析 1：放在道路上的虛擬路障
利用 AR 視覺效果進(jìn)行更逼真的強(qiáng)警示作用，而不是導(dǎo)航路線上的一個(gè)簡單標(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)覽，多種交通工具混合出行的場景都能更好的發(fā)揮出價(jià)值。這也是今后我們探索的方向
文章來源：優(yōu)設(shè) 作者：AlibabaDesign
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com