2021-4-6 資深UI設計者
近日在短視頻上有關「高德 AR 導航」的相關視頻成為爆款，得到了廣大用戶的歡迎和點贊，下面就和大家一起分享，高德 AR 導航從無到有的體驗設計原則和背后思考。
△ 高德 AR 導航效果
各大公司入局 AR 現實增強領域，現實增強技術也逐漸趨于成熟，隨著對 AR 應用領域深入探索，圖像識別數據的積累以及 AR 導航體驗探索變得非常重要。高德地圖基于大量的地理信息數據和精準的導航能力，AR 實景導航正式發布，讓駕駛員能夠身臨其境的感受增強現實帶來的駕駛樂趣，那么在復雜的環境中又如何把握體驗設計？與界面設計又有什么不同？一直是我們在思考的課題。
我們先從用戶反饋、競品分析、AR 導航載體、安全性、環境感知、設計語言 6 個層面切入分析，把探索的方案落地到 AR 引擎中實驗，再到高德地圖車機版上線驗證，最后服務于高德 ToB 車企出貨，帶來實際收益。
作為設計師，習慣了用屏幕的二維空間去思考信息效率的最大化，但是把體驗和設計放在三維空間中，會受到環境、光線、安全性、場景、人、車、路等相互影響。
1. 環境影響設計
環境的變化影響分為自然環境、道路環境、駕駛環境三類，不同的天氣、道路等級、駕駛因素都會對駕駛員的感受、反應、狀態產生影響，所以在 AR 的空間體驗設計中，這些影響需要充分考慮其中。
當考慮完環境因素后，還應該去真實的駕駛情景中分析信息呈現的權重，比如車輛在行駛中前方移動的物體一定比車輛靜止時看到移動物體的權重要高，那么在設計上，需要明確信息層級和顯示時機及策略，讓駕駛員在行駛中能夠快速獲取，且正常駕駛不受其影響。
2. 空間體驗設計
AR 空間體驗設計最大的難點在于：在界面設計中，我們只關注信息層級、顏色、大小、動態等，都是在二維平面中去思考信息效率的最大化，但是在 AR 的三維空間中，除上述我們還需關注安全性、空間性、以及如果讓駕駛員快速獲取增強信息來輔助他進行平穩駕駛。從下圖比較看，在界面中告訴我前方有什么路況信息遠遠不如直接看的效率快。
AR 導航的視域不僅要考慮水平、垂直視野中的布局，劃定舒適區域，還要考慮距離對于信息呈現的感受。
經過以上對于布局的規劃，我們可以得到以下布局關系。
3. 顏色及視覺權重
在顏色的選取上，讓整體的配色符合真實世界的認知，在我國道路交通中對于顏色界定，路牌中的藍綠色為不會立即影響駕駛者行為的信息，紅色、橙色、黃色用戶告知駕駛員暫時性和永久性的危險，所以我們可以得出以下顏色體系。
在 AR 導航設計中，最大的不同在于，你所有的設計都需要跟據實現后的策略+真實環境路測去反復調整，檢驗設計邏輯是否符合駕駛員的真實感知，經過了大量路測及實驗才能敲定。
1. 案例分析
我們嘗試用一個案例展開來訴說實際的道路環境遠比紙面上的分析要復雜的多。
在司機正常駕駛中，既為用戶提供了紅綠燈檢測，又給用戶提供了車道線提示，單獨看紅綠燈識別及車道線提醒都沒有問題，但在十字路口場景可以發現，紅綠燈和車道線重合，帶來了信息疊壓的問題，經過分析發現：
針對上述的紅綠燈和車道線重合問題，可以從兩個層面分析解決。
所以迅速采取了方案 2 的方式，讓紅綠燈和車道線差異策略時段顯示，規避了該問題，上述問題為簡單舉例，在實際現實空間場景時，需要注意的是現實物體識別是否遮擋駕駛視線或者和 AR 常駐信息重疊。
△ 壓線效果
△ 場景服務卡片
△ 斑馬線提醒及行人預警
我們試想下，如果在轉彎情況下，我們展示了很多行人 ADAS（預警系統）提醒，是否影響了正常駕駛？在每個元素出現和消失的時候，需要充分的考慮到它對其他元素的影響，是否符合 AR 空間設計體系和權重策略，差異化顯示為更優解。
△ 標注：本篇文章內容效果在后續版本中陸續上線
抖音、快手、snapchat 等國內外社交平臺上的 AR 濾鏡應用大多簡單有趣，比如給你的臉上實時畫個妝，拍邊時四周漂浮一些可愛的小動物，非常符合現代人的使用心態。但是 AR 在地圖中的應用（如步行導航、駕車導航) , 也應該考慮如何利用 AR 的特性讓地圖中的數據清晰易懂、與人的互動也變得更輕松隨意。
常規使用導航時，隨著地圖放大，可以看到更多的道路細節（車道數量，路邊停車位，斑馬線，交通事故等）。但是開車時需要時刻和真實世界做對應。受限于屏幕大小，這些信息的展示總是有限的。當我們用上了 AR，這些信息就能直接展示在真實世界中的相應位置，不用費力去尋找。傳統地圖的方式也將被顛覆。
案例分析 1：放在道路上的虛擬路障
利用 AR 視覺效果進行更逼真的強警示作用，而不是導航路線上的一個簡單標記。
案例分析 2：AR 導航商圈透出
開車到陌生城市時，結合 AR 地理位置標記，能清楚的知道所在商圈的信息。
2. AR 在出行領域的更多應用
隨著城市建設路網越來越復雜，AR 在旅游景區的導覽，多種交通工具混合出行的場景都能更好的發揮出價值。這也是今后我們探索的方向
文章來源：優設 作者：AlibabaDesign
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務