几个月前，Code-HQ的UE4专家联系到我希望重新设计Nchworm —— 一个帮助人们在现实健身和训练的虚拟助手。这是一个很好的机会，我可以和大家分享一个直观而且实用的AR体验背后的设计过程。
在我们进入不同的设计阶段之前，让我们先谈一谈AR。我们已经可以用多种类型的AR设备实现将虚拟对象放置在真实世界的环境中的技术，用户可以和这些虚拟对象进行交互。在这个特殊的案例中，我们将讨论AR设计在手持设备（如智能手机）中的应用。
背景
Nchworm是一款跟体育训练相关的AR应用程序，可以精确测量距离，并在手持设备所在的任意位置模拟练习场地。Nchworm将帮助运动员提高速度、灵活性、加速度和耐力，并进行精准的训练。
挑战
我们需要为用户创建一个直观的沉浸式体验，可以实时与虚拟物体进行交互，能够在开放空间锻炼，同时保留一些重要的功能，比如时间跟踪、训练跟踪和卡路里跟踪。
阶段一：发现
运动员和他们团队以及教练总是想方设法取得更好的成绩以确保胜利。新科技对职业运动员来说是一个巨大的优势，不仅可以提高他们的技术，还能评估他们练习是否有效。
AR可以成为所有运动员获取重要实时数据（例如每次击球、跑步距离、推力、投掷、跳跃等）的不可或缺的工具。有了这些信息，运动员就可以纠正他们的姿势，改变技术策略，做出正确的决定。
AR用户反馈
在缺乏用户调查的情况下，我主动研究了不同商店平台现有用户对于Nchworm的各种评论和看法，找出用户在AR应用程序中发现的主要缺点和挑战。用户暴露出的Nchworm的缺点有:
- 糟糕的用户界面设计，对用户在使用某些功能时造成困惑
- 测量距离的可靠性差
- GPS和定位问题和故障
- 注册按钮有时不能点击
- 不同设备的兼容性不好
在所有被测评的应用程序中，最常见的问题是用户界面设计造成的困惑。用户认为他们需要更多的教程和指导，甚至有时他们需要联系技术部门来弄清楚如何使用这些操作。为了避免AR用户在其他应用程序中遇到的这些挑战，我们对用户界面的易读性和可读性进行了广泛的研究。
被评估的应用程序：Strava, Jefit, Nike Run Club, Argus, Houzz Home Decor (ar), TapMeasure — AR utility, AR Civilizations, AR Fitness)
户外或明亮的灯光环境下用户界面的易读性
根据对易读性的调研，包括对比度在内的几个因素都会对易读性产生影响。他们总结了有关颜色相关因素的影响，发现在日光环境条件下，颜色差异对易读性的作用很小。Edward F. Kelley在一项关于显示日光环境对比度测量方法和日光条件下的可读性的研究中发现：日光可读性假设负对比度将降低可读性。
这些信息在用户界面的开发中起着至关重要的作用，因为用户将在不同的灯光下使用这款应用程序。这就是为什么UI设计将主要关注对比度的原因。对比度越强，在不同的光线下就越明显。我们应尽量避免土地色、柔和色和不饱和色，将重点放在大胆、饱和、互补的颜色上，达到最大的对比度。
AR中的可读性和字体
虽然没有确凿的研究可以证明sans serif或serif字体之间谁更清晰，但最近的研究已经证明，许多sans字体是清晰的，但不是可读的。这在很大程度上与字母本身的形状有关。Monotype和麻省理工学院的AgeLab进行了一项研究，发现sans serif字体的样式会影响司机在开车时眼睛盯着仪表盘屏幕而离开道路的时间。这项研究测试了人文主义的字体风格和怪诞的字体风格，发现人文主义字体对司机来说更容易阅读。
“平均扫视时间相差12％，相当于以美国高速公路限速行驶50英尺。”
研究表明，两种sans-serif字体样式之间的扫视时间差太大，无法忽略。为了增强可读性，提高AR整体的用户体验，应首选人文主义sans字体。
用户体验评估-应用测试
Nchworm App
由于我们已经有了一个App，我决定对它进行一次用户体验评估。通过这个评估，我记录了可用性审核的结果及关于用户最佳体验的建议。现有的设计在视觉上并不吸引人，并且缺乏基本的增强现实体验的用户体验设计和用户界面设计。从视觉的角度以及易用性方面，有许多方面需要改进，例如：
现实主义
AR对象应融入并反映环境。使用阴影平面，反射，照明和纹理能够帮助我们利用真实感来强调虚拟对象。
深度
即使圆锥体包含距离标记，也很难确定圆锥体的距离。在AR体验中，最好通过正确使用阴影平面，遮挡和透视来创建深度。在更靠近用户的位置放置较大的对象，在更远的位置放置较小的对象，这将有助于定义深度。
内容操纵
该应用程序中几乎所有控件都是按钮。我们应避免在AR体验中使用这类控制，可以通过手势来完成内容选择、缩放和旋转。多点触摸手势示例：
- 旋转——支持一根手指和两根手指的手势
- 缩放——捏按调整比例
并非所有人都非常关注易用性，该应用现在在旋转和缩放这两个方面表现并不差。
移动
Nchworm支持移动，这是在设计AR应用时经常忽略的关键元素。该应用清楚地提醒用户他们可以按照指导的步骤进行移动。它还巧妙地放置了一些物体来鼓励用户移动过去。
发现
该应用程序有效地向用户展示了如何使用手机找到一个表面。它使用插图向用户展示了如何正确扫描，并再表面被检测到时提供即时反馈。
当设计AR程序时，我喜欢参考谷歌的增强现实设计指南，因为它是一个非常全面的设计AR体验的指南。
阶段二:定义
草图
在进入线框图阶段之前，我喜欢画很多草图。如下图所示，我做了多达四个版本的界面。我也喜欢绘制用户路线并添加注释，这主要是因为我在进行线框图绘制时，总是会回头查看我的草图。我最终选择了其中一个版本，但有时我会混合好几张草图中的元素以寻找最佳的解决方案。
线框图
我是高保真线框图的超级粉丝，它能帮助我和利益相关者直观地看到最终的设计，所以我尽可能让它接近最终结果。
AR应用的高保真线框图
用户流程图
路标使用流程
Invision情绪板
视觉参考
当所有调研都结束后，我开始寻找一些设计灵感。第一步是在Dribbble上为Nchworm创建一个空间。我可以在里面记录任何功能上和视觉上的灵感。当我有足够的视觉参考的时候(大约十个左右)，我就会在Invision上创建一个情绪板，结合所有的视觉参考元素。
配色方案
排版
正如上面的调研中提到的，为了增强AR应用程序中的整体用户体验，最好的字体是人文主义的sens字体。我从谷歌字体中选择了Open Sans，并使用了不同的字重。
阶段三:发展
这个阶段我添加了颜色和图像。在这个过程中，我尝试了不同的风格和元素来寻找最适合的方案。正如你所看到的，我在这个阶段调整了我的设计，他们不一定像线框图一样，而是有一些细微的变化。
设计的变化
版本1感觉太简单了，版本2太技术化了。我试图给设计带来活力和运动感，同时也能强调AR对象。在版本3中，当用户点击圆锥时，他会过渡到AR模式。
最终的设计
结论
AR体验设计需要运用你所有的用户体验知识，比如用户研究、竞品测试、用户体验评估、草图、线框图等等。但对于AR技术来说，为了确保获得最好的用户体验，必须遵循一些原则。推荐大家阅读在移动设备上设计AR体验的官方指南:《谷歌的AR设计指南》、《苹果AR人机界面指南》。
编译作者：叶苏 | 纽约 | 数字媒体研究生
原文作者：Justin Baker
原文链接：https://medium.muz.li/haptic-ux-the-design-guide-for-building-touch-experiences-84639aa4a1b8
