高德AR导航

- 日理万妓 2021-09-21 23:36 420阅读 0赞

近日在短视频上有关【高德AR导航】的相关视频成为爆款，得到了广大用户的欢迎和点赞，下面就和大家一起分享，高德AR导航从无到有的体验设计原则和背后思考。

![ca66de84f9b72d6a7f92d8028ebc88e8.gif][]

![5ac3d95032de7e833bf0cf02de9d2ede.png][]

![7e775177b42030a8a42db0129ccda49f.png][]

高德AR导航效果

各大公司入局AR现实增强领域，现实增强技术也逐渐趋于成熟，随着对AR应用领域深入探索，图像识别数据的积累以及AR导航体验探索变得非常重要。高德地图基于大量的地理信息数据和精准的导航能力，AR实景导航正式发布，让驾驶员能够身临其境的感受增强现实带来的驾驶乐趣，**那么在复杂的环境中又如何把握体验设计？与界面设计又有什么不同？一直是我们在思考的课题。**

我们先从用户反馈、竞品分析、AR导航载体、安全性、环境感知、设计语言6个层面切入分析，把探索的方案落地到AR引擎中实验，再到高德地图车机版上线验证，最后服务于高德ToB车企出货，带来实际收益。

![d842f1a9b1490eab49882e78398c42fd.png][]

## **01** ##

## **AR导航设计原则** ##

作为设计师，习惯了用屏幕的二维空间去思考信息效率的最大化，但是把体验和设计放在三维空间中，会受到环境、光线、安全性、场景、人、车、路等相互影响。

![80f40a4517a3a5c95aae413adbf6c218.png][]

**· 环境影响设计**

环境的变化影响分为自然环境、道路环境、驾驶环境三类，不同的天气、道路等级、驾驶因素都会对驾驶员的感受、反应、状态产生影响，所以在AR的空间体验设计中，这些影响需要充分考虑其中。

![d2c9cf0140cc0831ac331acc1d105f1f.png][]

![8cf3b6f4dd8196915773e137ff486c3a.png][]

当考虑完环境因素后，还应该去真实的驾驶情景中分析信息呈现的权重，比如车辆在行驶中前方移动的物体一定比车辆静止时看到移动物体的权重要高，那么在设计上，需要明确信息层级和显示时机及策略，让驾驶员在行驶中能够快速获取，且正常驾驶不受其影响。

![5badca03d30b1e0f89953dd09e30cf97.png][]

**· 空间体验设计**

AR空间体验设计最大的难点在于：在界面设计中，我们只关注信息层级、颜色、大小、动态等，都是在二维平面中去思考信息效率的最大化，**但是在AR的三维空间中，除上述我们还需关注安全性、空间性、以及如果让驾驶员快速获取增强信息来辅助他进行平稳驾驶。**从下图比较看，在界面中告诉我前方有什么路况信息远远不如直接看的效率快。

![060b0a5b1cced94f4b623db744e2c8b4.png][]

AR导航的视域不仅要考虑水平、垂直视野中的布局，划定舒适区域，还要考虑距离对于信息呈现的感受。

![379c8d6c5de1cc546d329d4dcd5dbef2.png][]

![b1014464a040fb826370366f169ae21f.png][]

经过以上对于布局的规划，我们可以得到以下布局关系。

![1a53b68a160bee4e61b8b3aed23ff64a.png][]

**· 颜色及视觉权重**

在颜色的选取上，让整体的配色符合真实世界的认知，在我国道路交通中对于颜色界定，路牌中的蓝绿色为不会立即影响驾驶者行为的信息，红色、橙色、黄色用户告知驾驶员暂时性和永久性的危险，所以我们可以得出以下颜色体系。

![8681ca854c04edf970a79e33c3046213.png][]

在AR导航设计中，最大的不同在于，你所有的设计都需要根据实现后的策略+真实环境路测去反复调整，检验设计逻辑是否符合驾驶员的真实感知，经过了大量路测及实验才能敲定。

![82de0524ca99bf2ce0b70b7cc1b948fb.png][]

## **02** ##

## **从设计到落地** ##

**· 案例分析**

我们尝试用一个案例展开来诉说实际的道路环境远比纸面上的分析要复杂的多。

在司机正常驾驶中，既为用户提供了红绿灯检测，又给用户提供了车道线提示，单独看红绿灯识别及车道线提醒都没有问题，但在十字路口场景可以发现，红绿灯和车道线重合，带来了信息叠压的问题，经过分析发现：

*  红绿灯策略：在十字路口驻车时，检测开始，并在红绿灯变化颜色时，语音提示用户并展示绿灯可通行。
 *  车道线策略：常驻显示，无论什么情况下，都显示当前道路车道线。

![f1a4f2ca45cef80e78544a43b9cbd699.png][]

针对上述的红绿灯和车道线重合问题，可以从两个层面分析解决。

1.  车道线和红绿灯换位置：红绿灯为视线位置图像识别所得，无法更改位置，因此只能调整车道线位置。
2.  策略规避：分析可发现，驾驶员在十字路口场景时，是没有查看车道线诉求的，但是检测红绿灯诉求强烈，车道线在驾驶员临近路口时，是强诉求。

所以迅速采取了方案2的方式，让红绿灯和车道线差异策略时段显示，规避了该问题，上述问题为简单举例，在实际现实空间场景时，需要注意的是现实物体识别是否遮挡驾驶视线或者和AR常驻信息重叠。

![fc4a5c00805dc02b672be66fd6f973c3.gif][]

压线效果

![57ef31ef9293ab5fe1b3a93652cf5c78.gif][]

场景服务卡片

![ef18eaeaf79901086c8d84ec5fee6c5d.gif][]

斑马线提醒及行人预警

我们试想下，如果在转弯情况下，我们展示了很多行人ADAS（预警系统）提醒，是否影响了正常驾驶？在每个元素出现和消失的时候，需要充分的考虑到它对其他元素的影响，是否符合AR空间设计体系和权重策略，差异化显示为更优解。

![03387ce1b9054451a46d7d3724948b22.png][]

标注：本篇文章内容效果在后续版本中陆续上线

## **03** ##

## **愿景&未来价值** ##

**· 有趣**** 真实 互动**

抖音、快手、snapchat等国内外社交平台上的AR滤镜应用大多简单有趣，比如给你的脸上实时画个妆，拍边时四周漂浮一些可爱的小动物，非常符合现代人的使用心态。但是AR在地图中的应用（如步行导航、驾车导航) , 也应该考虑如何利用AR的特性让地图中的数据清晰易懂、与人的互动也变得更轻松随意。

常规使用导航时，随着地图放大，可以看到更多的道路细节（车道数量，路边停车位，斑马线，交通事故等）。但是开车时需要时刻和真实世界做对应。受限于屏幕大小，这些信息的展示总是有限的。当我们用上了AR，这些信息就能直接展示在真实世界中的相应位置，不用费力去寻找。传统地图的方式也将被颠覆。

**案例分析1：放在道路上的虚拟路障**

利用AR视觉效果进行更逼真的强警示作用，而不是导航路线上的一个简单标记。

![6d27efc3bcc6c1a69cc91be76e3e5069.png][]

![8ceb78008a5f295a80a4a87dbeb9ed1c.png][]

![1b2d5c0b3b0cf34f90d709da28c9d680.png][]

![3bb9f5288bdd6564c4fca07a1d1b7dd0.png][]

**案例分析2：AR导航商圈透出**

开车到陌生城市时，结合AR地理位置标记，能清楚的知道所在商圈的信息。

![82ffe0565435d0ae36a76c28d769e9d5.png][]

**· AR在出行领域的更多应用**

![376cd937daae6d7ad172edf2e7fdb0cf.png][]

随着城市建设路网越来越复杂，AR在旅游景区的导览，多种交通工具混合出行的场景都能更好的发挥出价值。这也是今后我们探索的方向，未来会陆续发布相关文章，敬请期待。

[ca66de84f9b72d6a7f92d8028ebc88e8.gif]: /images/20210920/d0997c8246824ee08d505ec5aac881f7.png
[5ac3d95032de7e833bf0cf02de9d2ede.png]: /images/20210920/23f7ec1e1569460eb67691d5eaf7ecf4.png
[7e775177b42030a8a42db0129ccda49f.png]: /images/20210920/6ce8b70a26e04e7bb84bb3b045ab3a5b.png
[d842f1a9b1490eab49882e78398c42fd.png]: /images/20210920/d11d2516871a488ea5476eb7caded54c.png
[80f40a4517a3a5c95aae413adbf6c218.png]: /images/20210920/e564691b71b540cfbccb7c520a625973.png
[d2c9cf0140cc0831ac331acc1d105f1f.png]: /images/20210920/fe24863b1e1c41dda8b9e2112caa0bf3.png
[8cf3b6f4dd8196915773e137ff486c3a.png]: /images/20210920/6573eb24dde94820887db6639b7fe1dd.png
[5badca03d30b1e0f89953dd09e30cf97.png]: /images/20210920/e642fd21e9494a13ac068044a826af5f.png
[060b0a5b1cced94f4b623db744e2c8b4.png]: /images/20210920/ce48bba02d4e4b7b9b3f95589ed28c2d.png
[379c8d6c5de1cc546d329d4dcd5dbef2.png]: /images/20210920/34f091db13fe4a4cbdc54e97b266dc59.png
[b1014464a040fb826370366f169ae21f.png]: /images/20210920/8b85b76a4b7c4b378d53e7933954fd8f.png
[1a53b68a160bee4e61b8b3aed23ff64a.png]: /images/20210920/e5f21d4b129f48fa996313bbe8b9c3e9.png
[8681ca854c04edf970a79e33c3046213.png]: /images/20210920/d9d454d1ad764ca09cd13a2ad7327a65.png
[82de0524ca99bf2ce0b70b7cc1b948fb.png]: /images/20210920/110cf93110024439a5780c9568841bba.png
[f1a4f2ca45cef80e78544a43b9cbd699.png]: /images/20210920/f0d64c14166543eaa31586d838a0fc89.png
[fc4a5c00805dc02b672be66fd6f973c3.gif]: /images/20210920/7a889ff46020454d9b3644c60cf901c0.png
[57ef31ef9293ab5fe1b3a93652cf5c78.gif]: /images/20210920/a8bd9fd8dd6946beaf32fbcce62fc6c8.png
[ef18eaeaf79901086c8d84ec5fee6c5d.gif]: /images/20210920/e0ae4226452f4fed9bffc49ef351b272.png
[03387ce1b9054451a46d7d3724948b22.png]: /images/20210920/4a26fef010934f4780e332c5254db0a1.png
[6d27efc3bcc6c1a69cc91be76e3e5069.png]: /images/20210920/576b8b7602454296ab5e8c00174f5230.png
[8ceb78008a5f295a80a4a87dbeb9ed1c.png]: /images/20210920/7a95611d1707474092bd369a75ab5f80.png
[1b2d5c0b3b0cf34f90d709da28c9d680.png]: /images/20210920/a36da245a78e4af78bf93b840b7da8ae.png
[3bb9f5288bdd6564c4fca07a1d1b7dd0.png]: /images/20210920/d624e1d0a4224fc8a9adb80af3c6074f.png
[82ffe0565435d0ae36a76c28d769e9d5.png]: /images/20210920/f327f7c8c66b48ce8e9c46fb91fccd83.png
[376cd937daae6d7ad172edf2e7fdb0cf.png]: /images/20210920/aa04b69119f747c1b16371f06b8cc7ab.png