高德最新AR导航设计,把我看傻了...

高德设计 / 2022-01-18 09:52:25

高德最新AR导航设计,把我看傻了...
我们的设计日记 2022-01-18 08:30
以下文章来源于AlibabaDesign ,作者高德设计


▼盖哥我最近天天在直播间分享设计干货
来预约观看,会很有收获
图片
图片

步步精心,打造高德地图 AR 实景步行导航

星球「精华」栏目每天还有更多最新原创设计文章,包括设计技巧、设计趋势、经验分享等等,来帮助大家更好地做设计。

图片



 01.  背景:AR在各个场景的体验价值

伴随着5G时代的来临,AR技术近些年在各行业崭露头角,AR时代应运而生;AR的交互方式不仅提升了交互的准确性、精度,更提升了用户接近真实世界的能力。
▍社交场景:用 AR 的实时响应,来拉近社交的临场感
Facebook 的视频通话针对远程社交场景,通过 AR 滤镜的方式实现了“共享背景”及“共享时光”的社交体验,不但可以和朋友一起对着篝火烤棉花糖,还可以和远方的亲朋好友一起庆祝生日;AR 的高度同步和实时响应,让人与人之间的沟通不再局限于文字或图像视频,而是可以有更多维度的表达方式,拉近了社交的临场感。
图片

▍娱乐场景:用 AR 的虚实融合,增强游戏的互动沉浸感
Snapchat 推出新的共享“连接镜头”,让不在同一空间的用户可以随时随地与朋友共享 AR 游戏体验,比如初步推出的共同组建乐高模型,任一用户添加的任何部件,效果和动画都将实时显示在移动设备上,增强了游戏的互动沉浸感。
图片

▍家居空间:用 AR 的真实可感,重塑零售新体验
IKEA Place 应用透过 AR 极大程度弥合现实与想象之间的差距,更便利地让人们在购买之前把心仪的家具虚拟“放在”自己的房间,看效果和尺寸,不断地为用户打造更宜居的生活空间。
图片

▍出行空间:用 AR 构建更精准高效的步导体验
那么在步行导航中,借助智能定位和视觉识别功能,将 AR 标识真正有机地融合在道路环境中,构建了地图与真实世界的映射关系,呈现更加直观的实景指引,帮助方向感不强的用户解决起步找方向难、不知何时转向等步行难题,使用户便捷高效的到达目的地。
图片

德地图将AR运用到导航中,不难发现高德在设计思考中花费的心思,每个大厂经过设计思考都有一套特定的设计语言,把设计作为一种“沟通的方式”,用于特定的范围/场景内,做适当的表达,进行特定的信息传递。这里也分享给大家一些大厂的设计语言规范,包括阿里、京东、苹果等等,有需要的小伙伴可以点个“在看”多多分享,添加叮当猫回复“设计语言”领取,已有叮当猫的无需重复添加。

图片

图片

长按扫码添加叮当猫回复:设计语言



 02.  拓宽体验:用AR让步行导航更真实可感

图片
在360度 UI 空间中,设计用于聚焦,站立时的自然视角是平视视角,而最佳可视范围是90度,在这个范围内我们可以清晰的看到所有信息,所以我们在设计的时候会将最重要的信息展示在用户进入体验后默认位置的90度视角内。

图片

▍角度:连接现实的引导识别
在设计 AR 转向标时,考虑到 AR 转向标更重要的是在三维空间里指准方向,不同于传统导航呈现的是平面视角;所以从整体的形态定义而言,我们参考了现实环境中的路牌样式,重在解决的是导航过程中“我去哪”的问题。
图片

同时区别于 2D 界面设计的一点还在于三维空间中不仅有角度,还有曲面(环形视角),为了保证引导的可视性,引导标尺寸设置了极小值和极大值,结合辅助动效,使引导标识在极端角度下也能够辨清方向。
图片

▍尺度:由远及近的空间感知
为了打造真实感,引导标识完全按照物理世界的体感打造;远小近大的空间关系,全局全时的光照投影,给人物理世界的真实感受。
图片

 03.  回归本质:AR让步行导航更精准高效

AR 导航实现的关键在于增加了对于周边事物的识别定位,融合了图像定位和 GPS 定位,所以在精准度和实时性上都比传统导航提升很多,结合 AR 第一视角进行 POI 导览、辅助决策、指引导航等服务,提高地图的读图效率,那么为了更好的在用户体验上融合,首先我们要先来明确下 AR 在步导场景下的体验特性。

图片

因此,为了信息能够在导航的过程中更精准高效的展现,梳理了如下设计策略。
图片

▍信息内容:精准可靠的方向指引
由于 AR 导航的视距是当前视距,所以优点在于能够精准指出“当前怎么走”,但是对于超视距的导航用户是没有感知的,所以在底部仍然保留了 2D 地图,让用户明确“之后怎么走”。
图片
▍空间动态:安全可视的透明模式
为了避免诱导标影响用户视野,无法或知自身的定位,在10米靠近诱导标放大时,做了安全可视的透明模式,这样在明确方向的同时也能清晰的知道当前的环境定位。
图片
▍交互策略:及时明确的状态反馈
步导在行进过程中,从安全角度并不建议持续使用,但是为了确保整个体验流程是高效通畅的,需要多维度给予用户交互反馈,避免用户在体验过程中发生意外或者中断;比如在关键路口转向时,即时没有手持导航,也会通过语音及震动提示,避免错失路口。
图片
图片
▍串联场景:高效自然的手势切换
首创的手势自动切换功能,高效的为用户进行地图模式切换,给予不同状态下的信息需求显示。
用户使用步行导航时,竖起手机即可自动进入 AR 导航模式,3D 引导标识随即出现在道路环境中;将手机放平则无缝切换为传统地图导航模式,摄像头随之自动关闭,减少系统耗电;同时为了达到流畅自然的切换效果,在动画探寻的过程中追求平稳中有承接性,所以 3D 模式切换至 2D 模式时,采用的是图面上移的方式作为承接。
图片


 04.  场景延伸:用AR打开探索城市的新方式

科技的发展就是不断以更自然、更直接、更方便的方式去改善、改变社会和生活面貌,而 AR 与地图的结合,正符合了逐渐走向数字化世界的趋势,高德地图基于大量的地理信息数据和精准的导航能力,一直在持续研究 AR 技术如何能在地图中发挥更大的价值,如何利用 AR 特性让地图中的数据清晰易懂、可视可用。

▍更精准:要走的每一步,导航都会为你引路
图片
▍更可视:想知道的信息,地图都会为你呈现
图片
▍更新趣:游玩的地方,换个角度为你碰撞相异时空
图片


 05.  总结:AR的价值主张

在这个日益数字化的世界里,要实现深度的虚实融合,还有很长的路要走,相关技术发展依然面临很多的关键难题,而对于体验设计而言,就是在把握技术边界的基础上,用设计给用户带来更高效自然、舒适贴心的使用体验。

看完高德地图将AR运用到导航中,不难发现高德在设计思考中花费的心思,每个大厂经过设计思考都有一套特定的设计语言,把设计作为一种“沟通的方式”,用于特定的范围/场景内,做适当的表达,进行特定的信息传递。这里也分享给大家一些大厂的设计语言规范,包括阿里、京东、苹果等等,有需要的小伙伴可以点个“在看”多多分享,添加叮当猫回复“设计语言”领取,已有叮当猫的无需重复添加。


图片

 06.  最后

看完高德地图将AR运用到导航中,不难发现高德在设计思考中花费的心思,每个大厂经过设计思考都有一套特定的设计语言,把设计作为一种“沟通的方式”,用于特定的范围/场景内,做适当的表达,进行特定的信息传递。这里也分享给大家一些大厂的设计语言规范,包括阿里、京东、苹果等等,有需要的小伙伴可以点个“在看”多多分享,添加叮当猫回复“设计语言”领取,已有叮当猫的无需重复添加。

图片

图片

长按扫码添加叮当猫回复:设计语言



 07.  说一件大事

Hello,大家好,说一件事~
我们的设计日记社群,2022年招募新人啦,如果你错过了今年的最低价,一定不要错过明年这班车。点击下方卡片,购买50抵扣100优惠券,提前锁定明年最低价。

活动结束后,将恢复原价,大家可以点击卡片,详细了解哈~


↑ 点击卡片即可预约

设计干货
讲故事 | 效率提升 | 设计总结 | 设计细节 | 灵感库 | 创意方法 | 需求切入 | 职场工具人 | 大厂生存指南 | 好的设计 | 设计概念 | 韩国设计 | 图形 | Google | 找灵感 | 品牌 | 品牌配色 | 区分视觉层次 | 设计表达 | 如何学习 | Pinterest技巧 | dribbble技巧 | 没天赋 | 表单 | 竞品分析 | 设计提案 | 用户思维 | 设计思维 | 设计记忆点 | 弹窗设计 | 成长提升 | 如何做练习 | 设计流程 | 情景设计
精美素材
素材合集 | 腾讯表情包 | 3D工具网站 | 免费插画素材 | 国潮素材 | 流体风格网站 | 审美工具网站 | 复古素材网站 | 神器网站 | 背景工具网站 | 作品集素材 | 设计规范网站 | 精美字体 | 高级字体 | 插画库 | 海报网站 | 液态风格素材
设计趋势
色彩叠加 | 赛博朋克 | 品牌升级 | 韩国设计 | 苹果设计 | 液态 | 渐变 | 气泡 | 大理石风格 | UI设计趋势 | 瑞士风格 | 极简风格 | IP打造
BAT职场
职场内向 | 阿里面试 | 没有目标压力大 | 团队管理 | 30岁 | 成长 | 年龄歧视 | 大厂外包 | 社交聊天 | 防PUA指南 | 晋升 | 职场真心话
设计师专访
爱滑雪的设计师 | 从小公司到BAT | 站酷推荐设计师 | 有准备的人 | 弃教从设 | 26岁从0开始 | 理工科设计师 | 书法设计师 | 斜杠青年 | 兼职电台主播

最美交互

B站高德 | 企业微信菜鸟 | 腾讯视频菜鸟 | 淘宝QQ | 哔哩哔哩盒马 | 微信小米输入法 | bilibili大众点评 | 网易云音乐微信

////// END //////
图片
阅读原文
阅读 2711
写下你的留言
精选留言

Sky
置顶
加入【设计日记分享群】和各个领域的设计师一起学习进步,添加叮当猫微信helloskytcz,我们一起同行!
已无更多数据






----------------------------
本文由新墨整理并发布。转载来自互联网,若侵权则删除!
新墨5年开发经验,45名团队成员,上线已达100+产品,于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计

新墨官网地址:http://www.sinmore.com.cn/
新墨物联网站:http://www.sinmore.cn/
布鸽科技:http://www.buge.vip/

热门文章
最新文章
推荐文章