如何进行AR交互设计?

AR类产品的出现,可能是第一次实现虚拟世界与现实世相互“融合”,完成屏幕的“跨越”,人机交互设计也开始从二维平面迈向三维世界。然而,由于市场和技术的因素,AR产品的人机交互界面仍然处于早期,各种理念和方法仍处于逐步形成与试验阶段。通过对现有AR产品交互设计的调研和思考,以及现有移动产品的对比,本文将阐述一些方法,以供思考和交流。AR效果的呈现有多种方式,市场在短期内主要分为基于手机等移动设备的移动AR和基于头显设备的AR眼镜(包括一体机...

如何进行AR交互设计?

AR类产品的出现,可能是第一次实现虚拟世界与现实世相互“融合”,完成屏幕的“跨越”,人机交互设计也开始从二维平面迈向三维世界。然而,由于市场和技术的因素,AR产品的人机交互界面仍然处于早期,各种理念和方法仍处于逐步形成与试验阶段。通过对现有AR产品交互设计的调研和思考,以及现有移动产品的对比,本文将阐述一些方法,以供思考和交流。

AR效果的呈现有多种方式,市场在短期内主要分为基于手机等移动设备的移动AR和基于头显设备的AR眼镜(包括一体机和分体机),但也包括车载HUD、商超大屏互动等等,本文将阐述较为通用的设计方法,也将包含对不同呈现方式简要介绍。

以下内容肯定有不足和不全面的地方,欢迎各位朋友批评指正,我也将及时修改和完善以下内容。


一、一些核心思想

1. 增强

针对增强现实产品的交互设计,首先要做到对现实世界信息的“增强”。

这里的信息并不局限于文本,还包括图片、3D对象、声音等等,而存在形式包含了虚拟信息和现实世界中的信息。

这里的增强包括信息宽度和深度,举个发动机的例子,用户通过AR交互分解发动机虚拟模型并了解各部分的详细规格和属性,这时得到的是发动机对象的信息深度,而同时对比同类型或同时代发动机规格或性能,则是在了解信息的宽度,换言之,在进行产品设计时,既要兼顾交互对象的自身属性和环境相关性,也要关注相关信息的联系(当然要借助信息挖掘)。

如何进行AR交互设计?

如何进行AR交互设计?


2. 清晰

无论是系统还是系统中的应用,都要能够正确直观的传达信息,这包括了内容无歧义、状态可见和显示合理。[1]

无歧义要求,在任何情况下,都能传达出一种信息,且这种信息就是用户想要或系统要求用户完成的指令或反馈。比如,在工业操作中,当要求用户“抓取眼前的箱子”,一定要指示出是“哪个箱子”,而不是仅提供一条指令。

如何进行AR交互设计?

状态可见要求系统时刻清晰的显示当前所处状态,在正确的时间提供正确的状态,让用户时刻了解刚完成什么、现在在做什么、接下来要进行什么,比如在加载内容时要提供进度条或loading图标,当加载完成要有信息提示“已完成加载”等等。

如何进行AR交互设计?

显示合理则要求以最精炼的呈现方式来传达信息,降低用户焦虑和不安,如能用图片或3D对象说明的,就不要使用文字;能用大字体,就不用小字体;等等。 对于确实需要同时展示大量消息的场景,需要提供全局放大功能。

如何进行AR交互设计?

此外,在进行设计前一定要明确,所有的设计都是建立在场景和功能之上的,一切脱离场景和功能的设计,都不再能做到清晰传达。


3. 一致性

人类的认知具有连续性,从一个阶段进化到另一个阶段的过程中,总会存在“中间地带”,这一过程中需要在两个阶段间建立连续性和传承性,帮助用户对新事物建立“心智模型”。所以在短期内,无论是移动AR还是AR眼镜,在进行交互设计时,要更多的延续现有的交互规则和设计规范,如控件的反馈、手势等等,在基础交互层面较多的保持一致。

以下为WIMP对比图,包括交互设计中最基础的4点:窗口、图标、菜单、控制点[2],通过对比PC、移动设备、AR和VR,可以看出交互在不同平台上的差别与延续。

如何进行AR交互设计?

WIMP对比图

此外,设计者应该更多的关注系统和应用内部用户体验的一致性,即同一信息、功能、操作要保持一致。这种一致包括:结构一致、色彩一致、操作一致、反馈一致和文字一致。[3]


4. 灵活自由

灵活自由指在场景需求下,所有对象都具有可变性。这种可变性的幅度随场景需求的变更而变化,比如家具应用中,虚拟的3D家具可以随需要改变颜色、大小等。所有交互对象的可变性包括但不限于位置、大小、颜色、材质、光影等,甚至环境也包含在内。这种修改是对较难修改的做出临时的可视化修改,相当于一种“超自然交互”,且拥有“上帝视角”,这也是增强现实交互的深刻体现。

如何进行AR交互设计?

“工作台”是一种典型的体现灵活自由的场景

如何进行AR交互设计?

“工作台”是一种典型的体现灵活自由的场景

此外,灵活自由也意味着不受时间和空间的限制,能够查看一切对象的历史信息、对未来的可能性做出预判,能够帮助用户掌握整个场景内的空间信息。

灵活自由的目的是为了高效。大部分新产品设计都是为了提高效率,而灵活自由的交互能帮助用户按照自己最舒服的操作方式完成任务。灵活自由不仅能帮助产出物提高效率,也能帮助生产工具,即AR系统和应用,不断更新迭代,这种迭代通过“小步快跑”的策略,从细微处开始调整改变,在进化过程中逐步迭代,才能够保证用户既不反感和迷茫,也不影响整体体验和反馈效果。最终,这不仅带来了生产工具的更新,也完成了用户向新阶段的更新。

如何进行AR交互设计?


5. 用户为中心

用户是产品的控制者,设计要始终围绕用户进行,包括环境在内的所有对象要做到状态可控、自然反馈,某些场景下还应有隐喻和可探索。

状态可控指在不同场景下都让用户对信息有可控性。除了传统的增删改查,还需要所有对象易取,易交互。在真实世界中,用户大脑默认所有主动发出的交互都具有一定可控性,这种可控性自人类使用电子产品以来一直得以延续,在AR产品中,依然需要保证所有交互对象以“人”为中心。这一方面要求产品设计的交互流程都在当前认知范围内,另一方面要求做到防错和容错,在可控范围内提供更大的产品边界,比如提供撤销/重做功能,提供可操作的错误/修改提示等等。

如何进行AR交互设计?

自然反馈要求所有信息反馈都符合自然界交互反馈和之前的用户习惯。AR产品中的可交互对象包括虚拟对象和真实对象,真实对象用户可以直接完成交互,虚拟对象却不然。为了保证虚拟和现实的交互连贯性,虚拟对象要尽可能符合真实对象的交互习惯,如一个3D虚拟对象可以被抓起或抛掷,不同对象间会发生碰撞或挤压等等;此外,当与一些UI控件和信息发生交互,效果应该按照预想的方式进行,比如一个按钮是可回弹的,当点击后就要发生回弹的反馈,不能卡住,同样这种自然反馈在音效反馈中也要成立。

如何进行AR交互设计?

因为AR产品更贴近于真实世界,这时候适当使用隐喻将会使交互对象更显“真实”。合理使用隐喻要求,即暗示了恰当的使用方法,又避免了限制[4]。如AR购物场景下,用户看见购物车本能的会将商品放进去,但购物车的容量没必要进行限制,因为人们网购时购物的量有可能远超现实中的量;但隐喻并不总是有助于理解产品功能,所以要适当的取舍。此外,在保证一定安全性的前提下,人类天性都会探索未知,通过引入一定的可探索性,有助于提高用户对产品的喜爱和忠诚度。这一切都必须以用户为中心来设计与执行。

如何进行AR交互设计?


二、几点基本的设计规范

1. 直接操作

直接和对象进行交互,减少不必要的按钮等其他控件作为“中间人”。相比于2D屏幕上的直接交互,AR界面中的直接交互更具有现实意义,因为直接交互更接近于自然交互,用户能直观的看到交互产生的结果,这能帮助用户产生更强的操纵感,能更深的沉浸在业务中。

如何进行AR交互设计?


2. 环境相容

场景中的对象不仅仅是3D对象和UI控件等,环境也是对象之一。因此,环境要时刻围绕需求产生并融入场景。环境中的每一个对象,无论虚实,都要与整体环境相容,以提高完成业务的沉浸感,减少无关信息的影响,交互设计也要尽可能符合用户在真实世界的行为和反馈[5]。此外,用户同时也是环境中的一个对象,也要融入场景环境中。场景、环境、用户,三者是一个相互融合的关系,好比流水线上的工人,时刻都在处于完成某一工作的场景,完成工作又有流水线这一环境,工人又是流水线和工作场景中必不可少的一环。

如何进行AR交互设计?

上一张托尼,虽然有不少交互设计的错误,但足够说明此问题


3. 恰当反馈:

前面提到反馈应做到自然,而反馈最应该做到的是及时与正确,否则会造成用户对系统或应用的认知错误,因为延迟反馈和错误反馈都会极大的影响产品业务流程的顺利完成,引导用户走向“歧途”。

如何进行AR交互设计?

在核心思想的“以用户为中心”中提到了容错与防错,这里在再次提及并进行引申。在进行防错设计时,一要考虑帮助用户排除错误操作的可能,二要在关键操作和可能引起重大失误的操作时,反馈“是否确认”的操作;而在设计“容错”中,不仅要反馈操作错误在哪里,而且要提供修正方案,如一个仓库场景下,当某一个货箱无法交互,除了显示原因(如“锁定”),还可以显示哪些货箱是可操作的,或者通过引导完成货箱“解锁”。


4. 美学考量

这里的美不代表通俗意义上的美观或好看,而是表示设计是否符合场景需求,比如在游戏或娱乐属性强的应用中,使用极简设计极大可能会降低用户兴趣和参与度,而在教育或学术研究型应用中使用极简设计,反而会降低用户焦虑,提升对当下任务的沉浸感。营造产品美学特点不仅需要从颜色、字体和形状,更要从材质,光影等等空间属性的角度进行考量。


三、必知的常识性规则

1. 减少操作疲劳

目前的设备,手机或平板需要长时间手持设备,眼镜或头显虽然能解放双手,但视场角较小,如果没有充分考虑交互内容的展示距离与角度,就需要频繁移动头和脖子,造成较严重的疲劳感。当然,造成疲劳不可避免,但在设计上要尽可能降低疲劳感。

如何进行AR交互设计?

其次在视觉上,通过减少无关控件、隐藏待处理信息、将核心内容尽可能多的控制在视场角范围内等方法;

如何进行AR交互设计?

第三在操作上,尽量多使用单手交互能够完成的,减少复杂手势操作、更多融入语音或眼球追踪等被动交互等等。


2. 减少干扰:

首先,“提供短平快的AR体验”(“Design your UX for short and quick AR engagement”)[8],让用户焦点时刻围绕任务和场景,避免其他信息吸引注意力。其次,要合理提示现实世界中的干扰,如开车过十字路口,要高亮提醒信号灯状态和横穿马路的行人,避免造成重大危险的干扰。

如何进行AR交互设计?

再比如针对AR营销的广告内容,要根据展示场景、传播目的来决定交互方式,如可以用唤起好奇心等多种手段引导用户打开,但不能默认播放,因为在AR的世界中视觉冲击太多,很容易让用户产生焦虑,保留适当的克制对于产品留存很重要。

如何进行AR交互设计?


3. 提供指引:

AR系统和应用将用户从2D带入了3D,认知层面发生转变,新用户对于产品需要一个学习过程,此时应该提供使用使用指引,如同手机APP对新用户提供的指引,否则焦虑感会让人很快放弃产品。此外,指引不应仅针对新用户,还应在新功能上线、关键操作(如支付)等情况下提供,且简洁合理,特别是关键操作时最好提供说明或帮助按钮,以便及时提供支持。

如何进行AR交互设计?


4. 注意物理条件限制

在进行操作之前,由于2D世界和3D世界的不同,应进行空间检测、平面(或称为“基准面”、“参考面”)检测并判断遮挡关系。这是由设备主动对环境发起的交互,可以帮助用户确定可交互对象的范围。同时也限定了用户交互的安全范围,减少操作中造成的人身伤害。

如何进行AR交互设计?


5. 其他感觉反馈必不可少

在使用增强现实产品时,用户实际置身于一个真实环境营造的“场”中,试想在现实中,我们不仅接受视觉、听觉,还有触觉、味觉,甚至各种磁场、引力场等等都围绕在周围,所以要通过不断丰富的传感器,帮助用户形成更接近真实的交互体验。


6. 合理处理中断

用户主动中断的情况下,如应用切到后台运行或重新定位检测平面等等,需要提供合理反馈,告知用户操作后果并提供是否进行的选项。

当用户被动中断时,如即将断电、有信号干扰,或是现实中有其他对象突然进入场景等等,需要提供被动交互,帮助用户了解当前状态,并且引导用户做出主动反馈。[9]

在用户被中断,重新进入系统或应用时,一定要注意此时的用户起始点,如果用户相对于场景的坐标发生了变化,就需要重新定位并检测环境,以减小操作误差。


四、设计方法与流程

在进行设计时,依然可以参考用户体验五要素的流程,即战略层(产品远景、业务需求)→范围层(需求分析、功能确定)→结构层(信息架构、页面关系)→框架层(页面布局)→表现层(视觉表现)。但在实际操作中,需要更多的关注一下三点:


1. 确认真实场景

首先要明确:不是为了AR而AR。一定要有真实的使用场景,要能解决用户问题。然而要注意,广告中加入AR做营销,确实是一种有效的手段,不属于“强行AR”的范围。

其次,AR类系统或应用场景中有大量现实世界的对象存在,由于应用内展示的信息量有限(不能影响主要任务或造成干扰),这就导致不同的应用下交互方式可能差别很大,更倾向于定制化。比如同样是面向工业,机械制造更多需要操作指引,包括标记、模型拆分与组合等等;仓储管理需要室内导航,包括目标物定位、路线指引等等。所以,确定了场景,才能细化需求,设计交互。


2. 确定合理需求

这一过程,除了和传统移动产品需求分析一样,还要注意以下三点:

首先确定,罗列的需求是否为刚需或高频发生。不是的话没有意义且浪费资源。还要清楚AR技术的使用是作为功能解决单一需求,还是作为一个用例;是体验的核心,还是只作为辅助手段。

如何进行AR交互设计?

高德导航中作为辅助功能

其次,针对迭代产品要考虑到,新增需求是否会对现有逻辑和交互设计产生较大的影响,如果是就需要联合多部门和用户共同商讨决定。

第三,在产品流程梳理中,要充分识别哪些是最需要通过AR优化的,哪些是可优可不优的,哪些是绝对不能优化的,制定出优先级。

第四,作为一款产品必然有一个潜在需求,就是传播需求。一个产品从设计之初就要天然的具有自带传播属性,为推广运营做铺垫。

最后,要充分考虑到哪些信息从云端调用,哪些放在客户端,减小延迟,提高用户体验。


3. 采用良好交互

这一过程要充分考虑:如何“增强”信息,才能满足需求。“增强”的效果,要从更好达成目标,节省更多时间,运行压力和耗电更小等等多个方面进行考量。如果“增强”过度,会造成资源浪费、增大延迟,比如购买电视机场景中,单击产品显示产品名和价格,就比完全显示产品详情、参数要好。反之,如果“增强”不足,会导致用户焦虑,甚至不能完成业务流程。

此外,3D环境下的影响也应重点考虑,毕竟2D和3D的环境不同,需要提供具有空间感的交互逻辑。

如何进行AR交互设计?


五、关于设计师的一点思考

在最后,我要说一点关于“共情”的想法。

在用户体验中,最重要的一种能力可能要算“同理心”了。同理心能帮助产品和设计人员提前去解决用户将要遇到的问题。同理心是一种天赋,但并不意味着后天不能通过练习培养。当面对AR产品设计时,更需要这种能力。因为AR系统和应用是一套全新的体验,产品设计人员更难全面的体验和统计用户感受,因此需要不断的运用同理心去模拟用户,想用户之所想,这样才能减少用户新进时的迷茫与焦虑。

运用同理心,不断试错,不断迭代,不断尝试新交互思维与方法,才能逐渐探索出合适AR产品的交互方法。

如何进行AR交互设计?

推荐阅读:

AR技术推动教育前行

AR技术如何革新制造业?

AR将颠覆制造业和物流业?

A R能给户外广告带来什么 ?

AR技术的103个应用场景汇总!

AR与区块链结合将大力促进行业发展

AR变革通讯 让场景化工作应用一目了然

AR技术发展迅猛,产业瞄准八大应用领域!

AR浪潮来袭 这些都是市面最佳增强现实智能眼镜

AR悄无声息改变我们的生活,看这39位专家怎么说


如何进行AR交互设计?

如何进行AR交互设计?点击“阅读原文”看更多资讯

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36771/

(0)
交互精选交互精选
上一篇 2018-04-29
下一篇 2018-04-30

相关推荐

  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 【优秀作业展示】交互设计基础(三)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第三期陆晗产品设计15201高铁购票界面设计搜索目的地如果没有没有您想要的目的地可以选择搜索功能选择日期如果选择三天以后出...

    2018-05-08
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 交互设计 | 除了镜子,原来你还能在这发现真实的自己

    Create Your Difference. by CYD艺术设计作品: WHAT DEFINES YOU?现在,艺术家们已经不再为了审美而艺术,也不再为了艺术而艺术.在他们的创作过程中,它们通过各种形式,对身边的或遥远的一切事物进行讽刺、抗议、质疑或推崇,以此向他人传达比文字更立体的新兴概念或特殊感情。而交互装置——这种特殊的装置艺术,由于有我们人类/观众直接的参与,创作者/艺术家/设计师尝试表达的感情更为直观;更由于人机的互动,他...

    2018-05-05
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 不会Sketch的设计师将要被淘汰!

    这  是 一 本 让 我 废 寝 忘 食 的 书前几天小花闲来无事逛知乎被一篇名为《写一本书出版是怎样一种体验?》的问答吸引了目光,里面有一位作者黄方闻详细的介绍了他的第一本书《动静之美——Sketch移动UI与交互动效设计详解》筹备历程。Sketch这款软件在UI设计上确实有着无可比拟的优势,很多大公司都在用sketch工作,再不会Sketch会被淘汰掉。目前用sketch跟ps的人数比越来越接近了。Sketch因其强大的功能以及极低...

    2018-03-02