交互优秀案例解读 I 为运动员重新设计移动 AR 训练体验

当我们将虚拟对象放置在用户可以交互的真实世界环境中时,AR 就诞生了。AR可以通过各种类型的设备来完成,本文我们将讨论智能手机等手持设备的AR实践。
该项目是一个对 Nchworm——增强现实健身和训练助手进行用户体验优化的项目,项目将重点分享创建直观且易于使用的沉浸式 AR 体验背后的设计过程。

/背景Background
Nchworm 是一款增强现实运动表现应用程序,可通过你的手机在任何地方准确测量距离、创建训练、球场、场地。Nchworm 帮助运动员在速度、敏捷性、加速度和耐力方面取得更好的成绩,它还允许运动员准确地进行训练。
/挑战Challenge
与虚拟对象实时交互,并为在开放空间锻炼的用户创建直观的沉浸式体验,同时保持对运动员重要的关键数据获取,例如时间跟踪、锻炼跟踪和卡路里跟踪。
1.发现
#1 Discovery
运动员、运动队和他们的教练总是在寻找获得更好成绩和保证胜利的方法。新技术对于专业运动员来说是一个很大的优势,可以提高他们的技术并评估练习的利弊。
AR 是一个不可或缺的工具,运动员可以使用它来获取每次击球、跑步距离、推力、投掷、跳跃等的实时数据。有了这些信息,运动员可以纠正他们的行为、改变技术并做出正确的决定。
/AR用户反馈
在没有用户调查的情况下,通过研究现有用户对从 Google Play 和 App Store 下载应用程序的各种评论和看法,找出用户在 AR 中发现的主要痛点和挑战。用户暴露的痛点是:
界面设计使用不当,并导致如何使用某些功能的混乱
测量距离的可靠性差
GPS 和定位出现问题和故障
注册显示为非活动按钮
一种设备的出色性能在其他设备的应用程序上不起作用
在所有应用程序中,最常见的痛点是使用用户界面时的混乱。用户认为需要更多说明,甚至必须联系支持人员以了解如何使用应用程序。因此我们对用户界面的易读性和可读性进行了广泛的研究,以避免 AR 用户在其他应用程序中遇到这些挑战。
此次评估中考虑了用户评论的应用程序包括 Strava、Jefit、Nike Run Club、Argus、Houzz Home Decor (ar)、TapMeasure — AR utility、AR Civilizations、AR Fitness。
/户外或明亮灯光时用户界面易读性
根据研究,我们发现包括对比度在内的几个因素都会对易读性产生影响。Edward F. Kelley 在一项关于显示日光环境对比度测量方法和日光可读性的研究中发现:
低对比度会降低可读性
这些信息在用户界面的开发中起着至关重要的作用,因为用户将在不同的照明条件下使用该应用程序,这就是UI 工作将重点放在对比度上的原因。对比度越高,在不同光线下越明显,应避免使用朴实、柔和和不饱和的颜色。我们所应用的色板将专注于大胆、饱和、互补的颜色,以最大限度地提高对比度。

/AR 中的可读性和字体
Monotype 和麻省理工学院 AgeLab 进行的一项研究发现,字体的风格会影响驾驶员的眼睛在驾驶时注视仪表板屏幕和离开道路的时间。为了增强增强现实应用程序中的整体用户体验,提高可读性的首选字体是无衬线字体。
/UX 审核——应用程序测试

对现有应用程序进行UX测试,并创建一份概述可用性检查和 UX 最佳实践建议的文档。现有的设计在视觉上不吸引人,并且缺乏用户体验设计和用户界面设计的基础来增强体验。从视觉以及可用性角度来看,有许多领域需要改进,例如:
现实主义
AR 对象应该参与并反映其环境,使用阴影平面、反射、照明和纹理有助于利用现实主义强调在该位置上的对象。
深度
即使包含距离标记,也很难确定圆锥体的距离。在 AR 体验中,最好通过正确使用阴影平面、遮挡和透视来创建深度。这将有助于将较大的对象放置在更靠近用户的位置,将较小的对象放置在更远的位置以定义深度。
内容操作
这个应用程序中几乎所有的控件都是按钮。在 AR 体验中,一定要避免屏幕控制。内容选择、缩放和旋转都应该通过手势来完成。多点触控手势示例:
旋转 — 支持一指和两指的手势
缩放 — 支持捏的手势
并非所有关注可用性的应用程序都非常糟糕,该应用程序在两个方面做得很好:
移动
Nchworm 鼓励移动,这是为 AR 设计时经常被忽视的关键元素,该应用程序清楚地提醒用户他们可以通过引导步骤四处移动。它还巧妙地放置物体,鼓励他们向它移动。
发现表面
该应用程序有效地向用户展示了如何使用手机找到表面。它使用插图向用户展示如何正确扫描,并提供即时反馈以显示检测到的表面。
在为 AR 设计时,可以遵循 Google 的增强现实设计指南,它是设计 AR 体验的非常全面的参考。
2.定义
#2 Define
/绘制草图Sketch
在进入线框阶段之前,我们制作了很多草图,并绘制用户旅程和添加注释,主要是因为在制作线框图时总是会回到草图这一步。有时我们也会将一张草图中的元素与另一张草图混合搭配,以寻找最好的想法来展示到屏幕上。

/线框图Wireframe
通过绘制尽可能接近最终结果的高保真线框图,来帮助我们和利益相关者想象最终设计的样子。

/用户流映射User Flow

/视觉参考Visual Board
完成所有研究之后,我们寻找了一些设计灵感,并在 Invision 上创建了情绪板,以实现有凝聚力的视觉设计。

/配色方案Color

/排版Layout
正如上述研究中提到的,为了增强增强现实应用程序中的整体用户体验,提高可读性的最佳字体是一种人文主义的无衬线字体。所以我们从 Google 字体中选择了 Open Sans,并以不同的字体粗细使用它。

3.发展
#3 Development
最后的完善阶段,我们选择直接添加颜色和图像。在这个过程中,我们尝试了不同的风格和元素,以找到最有效的方法。
/设计变化

第一版设计太简单,第二版太科技,所以我们试图给设计带来一种充满活力和运动感的感觉,同时也强调了 AR 对象,这样用户就可以清楚地看到,当点击锥体时,他会切换到 AR模式。
最终设计




为 AR 体验设计需要应用你所有的用户体验知识,例如用户研究、竞争测试、UX 审核、草图、线框图等,但对于增强现实技术,必须满足某些原则才能确保得到最佳的用户体验可能。

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手,还可获取讲座直播哦~

|福利大放送 | WELFARE
对于设计初学者,完成从0开始创作几乎是不可能的,就像学习过程中书读百遍其义自见一样。有了大量的积累,才能在脑海里建立素材库,这些素材库能帮助同学们完成最初的设计想法积累,基于这样的基础再进行个性化的创作,最终才能做出高质量的作品集。全球院校最新作品集免费拿!添加小助手即可获取:



UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外,我们提供不定主题的公开课和内部小组课,教学计划课程由三大部分组成,包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。



本文版权归UXD尤克斯所有
部分图片来自于网络
如有侵权请与我们联系