赞助商
立即赞助

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

产品经验3年前 (2021)发布 流光
2.4K 0 0

模型交互的设计分析及体验建议模型交互的作用范围及交互特点

当用户在真实环的景中稳定放下物体模型后,会有模型进行进一步互动的需求。这类模型交互,通常会改变模型本身的物理属性。例如:

  • 移动:改变物在境中的位置。
  • 缩放:改变物体的大。
  • 旋转:旋转物体便于用户不改变自身位观察物体。
  • 删除/重置:让模型环境中消失或出。

基于目前 AR技术和手设备限制,目前模型交互主要是过屏幕利用维交互驱动 AR 三维场景模型,从而与模型进互动。屏幕维交互设计,主要是利用维手势和界控件去到交互目。例如:

  • 按钮/摇杆:在机界面中计按钮、摇杆。
  • 手势:目前技术支持瞬手势操作、连续手势操作。比如单指击、单指长按、双指缩放、双指旋转等等,我们在日常使用APP常用手势操作。

通过进行理的析计,赋予这些势和界面控件体的功能,去控制三维景中模型的移动、旋转、缩放。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

模型移动的交互定义及设计形式

用户与模型进行互动,移动是最为常见的一种操行为。通在手机屏幕的手势操或按钮操,控模型在现场中的位移。

需要通过计用户使用常用并熟知的势模型进行交互,利用二维势驱动三维空间中的模型在X轴、Y轴、Z轴的位移。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

放置模型后根据移动范围X轴、Y轴、Z轴,在现实环的虚拟模型进行移动互动操作,计段包括势、摇杆的方式。可以参考以下五种计内容:

  • 单指按住左右移动:模型移动以屏幕有效的外边沿为。
  • 指按住前后移动:纵深移动遵循近大远的透视效果。
  • 单指按住上下移动:模型以轴线上下移动,实为改变模型所在平位,投影以暗示高度。(需注意,单指按住前后和上下移动不会时出现。)
  • 点哪去哪:模型从原置向目标置移动。
  • 界面摇杆:若屏幕手势交互有可对控制对象成持续遮挡,或者无法很好的成复杂操作要求,可通过屏幕控件满足需求。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

模型移动并非需要X、Y、Z三个轴均开放,际是根据模型位移互的具需求去选择开放度,并设计合理的互方式去响应模型的移动。参考以下案例:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

模型旋转的交互定义及设计形式

实场景中除了移动模型的置,还可以通过旋转360°观察模型细节,不仅控制模型还能把玩模型,赋予模型命感,让用户好与模型行互动。设手段主针对手势的设。可以参考以下三种设内:

  • 双指/逆时拧:手双指时/逆时拧旋转模型。
  • 指向左/向右滑动:一只手指左右滑动。
  • 单指向左/向右滑:一只手单指左右滑。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

旋转模型是为了全方位观察模型,让用户更好地把玩模型。通过以下案例来进行说:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

模型缩放的交互定义及设计形式

移动模型、旋转模型是与模型互动,果想深模型则需要对模型进行缩放操。设计手段包括手势、滑动条、缩放倍数的按钮。以参考以下三种设计内容:

  • 双指扩展/捏合缩放:模的中心点等缩放。
  • 拖动滑动条缩放:拖动滑动条在0-100%的范围内进行缩放,当标尺拖动到极时,则模型不响应缩放。
  • 固定缩放倍数按钮:倍数已经固定,限定缩放的大。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

指扩展/捏合缩二维手机界面被家熟知的手势操作,滑动条、固缩倍数按钮的缩形式,AR场景多用于游戏类产品,一般模型置时固模型小,入游戏后不支持手持操作。可以参考以下案例:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

一种特殊的况,当支持置多模型时,如何设呢?此时,需通过点击选中模型,模型入选中态,与其他模型区分,选中后行的操作只作用于该模型,并支持删除模型的功能。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

为了增加模型交互时体验丰富和细腻程度,模型交互(过程、成功后)会有相应反馈设计。括:模型自身动效、符合真实世界视觉表现、音效、震动、语音反馈等。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

模型交互的设计原则和建议

1. 根据模型需要定义互自由度

模型的互程度,需根据特定模型的自身属/产品的类型去定义,并非所有互类型需要涉及。跟核心模型验无关的互禁止或增加操难度。例科普类模型固定放置在平面,需要便捷地旋转以查看模型细节,但Y轴移动查看的需求不大,部分场考虑禁止Y轴操。又例游戏类 AR 模型位置相对固定,更的验在与固定模型进行的细部互。

2. 手势设计简单且符合直

手势设计优先使用通用的方式,若没有通用的方式,则尽能使用简单和符合用户直的方式进行设计。若违反该原则能造成用户的理和忆障碍,需要加重用户引导,避免给用户造成操困难。

3. 手势设计按需搭且不冲突

在设定模型的互自由度,选择合适的手势进行搭使用。但一种操方式只匹一个互结果,不出现手势冲突。手势的搭需要成套考虑。例以下搭:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

异常处理的设计分析及体验建议

1. AR中异常况的义及设内

传统APP设存异常况,比如无网络加载失败,登录发错误况,那置类AR 中否存异常况呢?

在放置类AR 场景中体验时,由于使者操作当,导致模屏或模丢失,无法与再进行交互,我们统称为异情况。还有一种情况较特殊,当正在体验放置类AR时,它应突然被唤起,再重返放置类AR 场景的处。我们从交互设计层面需要对异情况进行及时处,正确引导户解决困惑,给使者一个良好的 AR 体验。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

在与模互过程中,会现异情况,需要通过一些设计形式可及时地帮助使者解决异问题,设计手包括:字、图、语音、辅助图形、重置、复位,具体根据实际设计需求而定。可参考设计容:

  • 模型出屏:模型出屏后视觉线索引导用户找到模型,可以搭配文字、动图、语音形式,按照设场景自由组合。
  • 模丢失:当视觉线索引导未到模时,通过点击按钮将模复位。按钮可驻或非驻。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

发生模型出屏、模型丢弃复位异常情况,根据品类型和场景选择合适设计手段,解决用户困惑。结合具体案例以说明:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

在异常情况有些相特殊情况,第情况:体验放类AR时,手来电后不不离开,再返回时,根据技术能力来进交互设计引导,保留场景及模型或引导用户新获取平立AR场景。第情况:进入AR场景后,模型是固定大小尺寸,在设计时,需要考虑让用户可以新放模型在新位,提供按钮。

游戏类、科普类设时需保留之AR场景,延续性的体验,技不到保留,则需重新识别平面再次建立AR场景行体验,如果支持置多模型的场景,建议不保留。当入AR场景后,模型固小尺寸,设时,考虑界面需重置按钮,让用户可以重新置模型新的置。下面结合案例具体明:

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

此外,AR内体验中也会发丢失平面的异常况。这里的异常处理可以使用话准确告知用户原因,还可以配以图片、动图、语音,具象清晰引导用户解决问题。需注意与平面识别引导的设形式保持一致性,若平面识别未使用语音,则识别失败提示也不能使用语音,避免突兀感。可以参考以下设内:

  • 纯文话术:过简单明了文正确引导用户操作。
  • 图片/动图+文字话:图片/动图诠释文字的含义,帮用户理解如何操作。
  • 语音+字话术:语音辅助字,使信息更有效传达,从而引导户操作。

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

2. 异情况的设计原则和建议

模屏后需要及时引导户到模,避免焦虑感。

模型丢失需要通设计形式的组合搭,以操便捷的互引导用户。

建议在计游戏类、科普类AR产品,再次返回APP 需要保留之前的AR景,保留延续性。

注意如进入AR场景时音效和语音,则异常情况引导不能出现音效和语音,避免突兀感。

平面识别失败后需及时反馈用户如何操作,需注意设形式保持后一致。

放置类AR的设计核心原则

以就AR置类交互节点的分析设建议的详细内。我们希望设师能围绕AR应用的真实场景,考虑到每体验节点的细节,结合文提到设建议,设过程中关注以下关键目标,用户创造加友好细腻的交互流程体验过程。

  • 晰:传内容晰明了,不会生疑惑或歧义。
  • 效:能帮用户功达到交互目标。
  • 流畅:无停顿感,过程一气呵成。
  • 愉悦:用户感愉快、无压力。
  • 可控:可主交互,过程反馈清晰,给用户尽在掌握中的受。

希望通我们提出的设计内容、设计原则建议能帮助到为阅读的设计师、开者们,在的产品设计、互设计中能让用户在放置类AR场有更的验,也是我们编写的目的所在,为AI科技尽绵薄之力。

欢迎关注公众号:「百度AI交互设计院

今年超火的放置类AR设计,送你一份大厂出品的设计指南(下)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:我在2年前曾经写过一篇《也许AR增强现实技术才是距离设计师最近的未来》,而 Adam Fard 对于 AR 技术的观点和视角更...
Adam Fard
一、CONCEPT 近几年,AR/VR 的概念非常火热,许许多多的科技公司投入到这股浪潮之中。 2017年上半年我参与了「小白墙」产品...
AR
AR的特点 不隔离真实世界,而是将计算机生成的信息和物体叠加到现实场景中。 借助AR设备,用户可以更自然地与增强现实环...
AR
此次项目所介绍的是一款儿童拼音启蒙AR产品,核心用户为3至6岁的学龄前儿童。整个设计团队在项目中结合儿童认知、家长诉求、...
AR设计
近日在短视频上有关「高德 AR 导航」的相关视频成为爆款,得到了广大用户的欢迎和点赞,下面就和大家一起分享,高德 AR 导航...
AR导航
作为人类,我们无法总是理性地看到事物的本质。社会心理学告知我们,人类的感知与决策,在一定程度上,会带有偏差。而作为设...
双曲贴现
编者按:在今年的 Google I/O 大会上,Android Q 的深色主题的推出后,官方的 Material Design 的设计规范也随之进行了更新。...
Android设计规范
@途家UED:途家网,全球民宿预订平台,为用户提供公寓、别墅、树屋等各式新奇住宿。 为了更好的贴近及满足用户体验,设计团...
实战案例