希望通过本文，让您快速了解AR的实现原理，AR的设计流程，以及在设计过程中遇到的问题。最后，我将分享我多年来所做的事情。AR设计的一些提示和技巧。2013年加入腾讯大家庭，加入家族后一直负责QQ相关设计工作。2015年开始参与研发短视频APP的设计，将QQ的社交内容娱乐化，并结合一些新技术。ARAR这个词大家并不陌生，但是AR的实现原理是什么呢？AR的中文名称是增强现实技术，是实时计算摄像头图像的位置和角度，并为图像、视频、3D模型添加相应的技术。简单来说，就是在现实世界中叠加一些虚拟信息，然后在设备上实时计算出它的位置和角度变化。AR的目标是在现实世界中与屏幕上的虚拟内容进行交互，帮助大众更快速、更直观地获取信息，AR自身具有很强的商业价值。我周围的朋友经常将AR与VR混淆。其实AR就是增强现实技术，VR就是虚拟现实技术。AR是将虚拟物体放置在我们周围的真实环境中，增强对现实世界的感官体验；VR就是把我们置身于一个虚拟的环境中，创造一种以虚实结合的身临其境的体验。它们在设备上是分开的。AR对大众用户的参与和操作门槛很低，因为AR只需要有一部带摄像头的智能手机就可以成为载体。在增强现实世界的同时，重塑用户的交互体验，而VR设备是普通大众难以接触到的，需要更专业的设备和场地。AR技术的核心是识别和跟踪，可以通过两种方式实现：图像检测法；全球卫星定位系统方法。图像检测法图像检测法其实是AR最常用的定位方法，常用于图像识别和人脸识别。其技术实现过程主要分为三个步骤：步骤1：需要采集特征图像，算法对图像进行规划处理，计算有效特征点进行匹配。你可以看到下面的图片1。这些小绿点是有效的特征点。第二步：从偏离的矩形计算三维坐标系，创建空间。第三步：实时跟踪数据内容的位置和角度变化。我刚才提到如何检测设计师的绿色小点？这里推荐给大家一个网站——Vuforia。注册账号并上传设计图后，可以直接标注作品的特征点并打分。点数越多，识别准确率越高。观察第一张图上下两幅作品，可以发现只有背景和深度不同，形成的有效特征点也不同，因为算法会在灰度对比度高的时候形成更多的有效特征点。我们再看第二张图，可以发现第二张图在太阳的圆形部分并没有形成任何有效的特征点，因为算法会排除掉一些比较平滑的曲线或者元素，这些被认为是无效的特征点。这类点一般都是在夹角处出现，所以为了让特征点得分更高，我们需要：避免绘制一些光滑或弯曲的元素；特征点需要均匀分布在各个角落。最后看第三张图，几何云的部分在不同的位置重复出现，其形成的有效特征点的个数和位置也相同。因为重复出现的规则图形会被算法判断为无效特征点而被排除，所以在设计时要避免使用一些规则图形和一些重复出现的元素。图像检测的优点是简单、高效和多样性。缺点是容易受环境、光线、距离、遮挡、焦距等因素影响，导致虚拟内容出现抖动、卡顿、误判、识别慢、无法识别等情况。出现。环境光的远近就不用说了。遮挡取决于取景器的角度和范围。对焦指的是设备，也就是我们的相机，我们的手机对深色和渐变色对焦会比较慢。所以在做视觉稿的时候，其实需要满足很多条件，需要和开发进行多环境测试，一起讨论，才能得到一个比较合格的识别图。一个优秀的识别图一定要保证它的稳定性，还要保证它的识别速度。让我们看看它在实际项目中是如何应用的。2016年，团队策划了《QQ奥运火炬手》AR活动，基本上处于毫无经验的情况下，不断试错，不断修正。从样式到定稿历时近两个月仅用了3000稿就完成了6个奥运城市28幅标识图的设计。可以看出DEMO呈现的效果比较稳定，识别速度很快，基本一秒内完成。这里强调“优秀”二字，是因为我们不想让用户在刚接触AR的时候有一些挫败感，从而导致对新技术的体验产生抵触情绪，所以我们在上面做了很多调试识别率的速度和稳定性。当时还获得了吉尼斯世界纪录证书。这是以前的一个小DEMO，逐层传输的过程，通过手机扫一扫识别。刚才讲了图像检测方法的图像场景，现在我们来看纹理识别场景。人脸识别其实就是图像检测方法的边缘检测。内容与正文无缝衔接。比如经常用到的特效挂件，你在市面上的一些美颜APP中看到过什么样的功能？实时美颜修脸动作触发人脸变形换脸，捏脸氛围滤镜3D模型等，就不一一细说了，相信大家都懂的。对于QQ的一些社交场景，我们团队也做了一些QQ特有的特效挂件，比如QQ聊天界面可以使用的拍摄功能，聊天，可以在视频聊天中看到和播放。并且利用AI和AR的结合，在两人通话的过程中做了一个小游戏，通过做表情赢取对方的红包。全球卫星定位系统方法全球卫星定位系统方法使用GPS来定位我们所在的位置，在现实空间中找到一个平面，并与现实世界中的虚拟对象进行交互和查看。优点是适合户外追踪，可以克服户外场景中光照、对焦等不确定因素。缺点是会测试设备的性能，包括当前的网络环境。可以看到上面有两个比较陌生的词，一个是LBS（LocationBasedService），一个是POI（PointofInterest）。LBS实际上是一种基于移动定位服务配置服务GPS获取位置的方式。一些AR游戏是基于LBS实现的，它们使用的实现方式是全球卫星定位系统方式。而POI就是一个兴趣点，可以代表地图上的建筑物、商店或者景点等，它包含四个方面的信息，分别是名称、类别、坐标和分类。这是一款2016年日本出品的AR游戏，相信大家都玩过。本游戏采用全球卫星定位系统方式实现。刚才之所以给大家看短视频，是因为腾讯2017年QQ的操作和它的玩法很像。都是根据地图找红包。或者一个宝物，然后找到这个位置，然后完成一些任务就可以获得这些红包或者礼物。在做这个操作的时候，需要考虑如何体现AR的空间概念。比如你需要合理利用一个真实的空间，因为设计师出的设计稿尺寸不再是750×1334，它是一个真实的空间，需要扩展这个空间来引导用户移动手机的摄像头并跟踪这些虚拟对象进行移动和交互。我们可以通过物体的方向来体现空间感，比如从远到近，从左到右，从上到下等等，让用户产生移动感。在地图引导方面，我们可以从距离的层面来打造三维空间。比如AR点离我们比较近的时候，我们需要加强我们的信息，做一些差异化的动画引导。需要给出一个简单的贴纸或者简单的元素来告知用户远处还有红包或者礼物。IP的力量是非常强大的。当时QQfamily的小Q作为财神爷形象给用户发红包。它的作用是与用户进行平等对话，陪伴用户完成一些任务，建立平等亲密的关系。2016年，通过《QQ奥运火炬手》活动，QQ被誉为中国第一款AR用户突破1亿的社交应用。整个活动吸引了来自全球143个国家的用户。超过近2亿次互动。2017年，《QQ天降红包》的运营活跃用户超过3亿，半年内，行业内仍有部分用户口碑良好。QQ是一个非常年轻的产品，它的用户绝大部分是学生。通过此类活动与新技术的结合，我们成功地将QQ品牌升级为年轻化、娱乐化、科技化。过去的设计方法是在图形、动画和色彩上做一些创新。现在我们加入了一些新技术，比如AI、AR、音效、物理振动等，可以升级用户的一些感官体验，让设计更具沉浸感和娱乐性。AI和AR很好的结合，是因为更好的AI需要更好的AR来体现。然后大家都说AI就是AI，AR就是AR。其实这种说法是错误的，因为它们的关系非常密切。如果打个比方，“AI就是人脑，AR就是人的一些感官体验”。这些新技术的结合将使设计和活动具有四个优势，即话题性、系列性、沉浸性和娱乐性。通过一些新技术给用户带来的新鲜感和话题性，将时间音效、震动画面等一些元素有效的串联在一起，让用户身临其境，更专注于操作，进一步强化了整个设计，整个产品的趣味性，也提升了整个产品的娱乐价值。去年世界杯期间，我们推出了《QQAR穿越赛场》。与奥运会相比，世界杯并不是一个全民关注的赛事，所以很大一部分时间花在了用户研究上，试图提高用户的参与感。我们分析用户的行为和心理，希望通过新的交互形式和新技术让用户更好地参与。在做运营设计的时候，需要从三个部分来规划：如何吸引用户；如何在用户体验过程中创造一些惊喜；希望用户有一个出口来表达他们的愿望和分享活动。那么如何吸引用户参与活动呢？可以利用一些视觉提示，突出一些关键信息，通过差异化设计满足用户的好奇心。比如用一个足球的运动轨迹来吸引用户的注意力，让用户产生好奇，点击入口，到达第二页的时候，需要告诉用户具体的活动内容。这是一种比较轻量级的设计方法。更直接的方式是在登录QQ后直接给用户一个事件通知。这需要结合QQ扫一扫界面，结合活动中的场景，打造全新的UI风格。我们可以通过一些颜色纹理和执行动画告诉用户，这是一个充满科技感的操作活动，一个全新的UI活动风格，一个全新的科技感风格。身临其境的体验往往还包括人的感官体验和认知体验。我们需要从大众的一些记忆中提炼出一些设计元素，结合当下的场景和应用进行组合。那么我们如何提取用户的一些记忆元素呢？我们可以利用我们记忆中的一些片段来提取它的颜色、纹理，以及声音、图形、运动、光学和力学等特征，以融入设计。说到穿越这个话题，大家也会想到哆啦A梦的穿越门或者哆啦A梦的时光机，也有网友会想起我们这几年很火的奇异博士的片段。我们提取奇异博士打开门的通道，提取其运动、机械和光学等设计元素。首先，我们需要对用户进行“空中画圈”的教育。“空中盘旋”这个词，大家应该不难理解。当时，很多大学生都被邀请到公司做研究。会玩不代表大家没看过奇异博士，也不代表大家不接触AR。就是因为这种新的交互方式会给用户心理造成不确定因素，怀疑自己的判断。我习惯直接在屏幕上画圈，而不是抬手，在空中画圈，打开直通门，甚至有些同学一直把手放在摄像头上。这将会发生。这使我们的设计更加客观。我们认为容易理解的东西，对于一些大众用户来说，实际上并不容易实现。在这个研究的基础上，我们结合图文并茂，最终优化了十几个程序，并不断找同学进行实战研究，最终想出了一个解决方案——模拟一个真实的圆圈场景。制作动画，并加入简洁的文字和操作反馈，引导用户操作。它还支持用户在屏幕上画圈，但仍然无法关闭摄像头。这是为了防止用户在试用期间发生。一些中断。对于AR圈作为设计师的工作，设计这一点的动画看似很简单，其实很难。开发者需要考虑手机性能、QQ引擎等问题。为了保证流畅的用户体验，在设计上可能需要做出一些牺牲。当时我们有一个限制，动画必须在5到8帧内。但是会出现卡顿、色差、模糊、死板，而且我们用AE的粒子效果做动画的时候，不符合开发实现的原则，所以要不断调试还原发展效应。再者，比如AE中的粒子效果导出为PNG后，会出现较大的色差。这些都需要不断纠正和解决。我们多方调试，修正方案，寻找解决方案，最终做出了比较满意的效果。在空中画一个圈之后，马上会形成一个3D的穿越门，可以让我们在360度观看，可以在现实和虚拟场景中来回穿梭，这就需要很多mesh来做一些纹理处理，但是会遇到技术问题，所以我们只能用最精简的方式来达到我们理想的效果。对于一些引擎来说，还是有技术上的限制，需要想很多办法去整合资源。比如从AR画圈到AR过门，再到一个虚拟的AR竞技场，其实合成了四种不同的资源，需要严格控制整个时间的进出。第一步：你需要想办法使用一些聪明的技巧让过渡自然。第二步：如何让用户有身临其境的感觉，可以从视觉、听觉、触觉三个方面提升用户的感官体验。以第一人称视角，可以以360的角度观看整个AR赛场，再配合现场的一些真实音效，比如解说员的解说，还原一种真实感。第三部分：触摸。触觉设计我们知道，自从iOS升级后，手机就有了强、中、弱三个档次的振动。我们设计了这些振动的频率以及长度，以恢复踢球、射门和在草地上来回滚动的触感，主要目的是增强用户的真实感。第四步：如何增强用户的分享欲望。除了在质感上打造真实的报纸质感外，我们根据用户的一些阅读习惯对内容进行布局，分布在各个角落。接下来，根据全国制服的颜色、不同的赞美文案、为用户画圈的过程，会有视频录屏将这些元素融合在一起，打造出一份神奇的报纸，并利用这些个性化的设计，提高用户的满意度。参与感让用户产生分享欲望。设计体验AR设计流程建议：定义玩法时，交互和操作尽量简单，降低用户的参与门槛和操作门槛，不要让用户形成挫败感；制定最佳的新手引导计划，确保用户知道如何玩这个活动；在可视化阶段，需要预留开发测试时间，反复调试还原可视化效果。AR的设计原则其实和大部分的设计原则是差不多的。一样的，是一个金字塔三角关系，首先要保证适用性，适用性就是要有一些简单明了的操作，一些引导建议用户使用AP或者玩这个活动，避免给用户造成一些心理上的影响挫折;稳定。需要保证整个体验过程的顺畅，需要多维度的进行一些操作反馈，避免用户体验过程出现意外或者中断；最后就是愉悦感，通过设计手法让用户获得一定的娱乐感和满足感。让自己沉浸其中，忘记现实世界的场景。AR沉浸式体验建议：场景：需要设计一个吸引用户的背景或剧情，让用户产生探索欲望；空间：要合理利用真实空间；剧情：需要明确一些更细化的目标，让用户的行为有一些特殊的反馈，让用户对整个体验有绝对的掌控感；角色：通过创建一些角色关系，进行情境设计，增强用户的参与感；氛围：通过视觉、听觉、触觉三个方面来提升整个体验的愉悦感；节奏：从简单到有挑战性，需要慢慢来，循序渐进，让用户注意力集中。结论最后是对我的AR项目的一些反思。之前经常觉得设计师的工作就是考虑app怎么包装，品牌怎么包装，怎么好看。事实上，它不是。我们需要考虑一些用户体验问题，需要有一些产品思维。所有融入新技术的设计都是非常冒险的。好的设计其实是在很多条件下选出来的。最好的解决方案。我们在设计过程中会遇到很多困难和局限，需要用设计来解决一些技术问题。我们将以这些局限性作为思考问题的出发点，提供更完整的解决方案。同时，我也相信科学技术。我们不断改进，所以有一天我们可以实现我们理想的设计。
