实战案例!QQ-AR「穿越赛场」背后的设计过程全面总结 - 优设网 - UISDC

实战案例!QQ-AR「穿越赛场」背后的设计过程全面总结

2018/11/23 评论区

编者按:AR 是即将到来的热门领域,而QQ 从AR传递火炬、AR红包、到AR送祝福到本次的AR穿越赛场,每一次都给人惊喜。本次的设计过程更是吸引了3000多万人参加,口碑极高,设计细节也非常值得学习,看完忍不住下载了QQ,为设计师的巧思点赞!

2018年的夏天,俄罗斯举办了为期1个月的世界杯比赛,在比赛期间,QQ推出了「QQ-AR穿越赛场」 主题活动,整体设计利用前沿的 AR技术,打造了业界首创的「画圈开启任意门」创新玩法,整体活动吸引了全国373个城市3015万用户成功穿越活动赛场,收获了业界与用户的良好口碑,同时90后参与用户占比83%,充分体现出QQ科技化、年轻化、娱乐化的魅力。那么,本次活动是如何从众多活动中脱颖而出的呢?在新技术面前设计师又该具备哪些能力呢?未来 QQ-AR 还会做哪些规划呢?

一、如何在世界杯活动中脱颖而出

1. QQ为什么要参与世界杯活动

2016里约奥运会期间QQ举办了「奥运传火炬」活动,并在当年赢得了QQ网友极大的关注度。而来自2014巴西世界杯官方与2016里约奥运会官方数据显示,世界杯全球民众的网络关注量要高于奥运会,也是全球四年一度的超级热点。所以,对于QQ来说这是一个提升QQ品牌口碑,刺激用户社交活跃的绝佳时机,与用户一起狂欢。

2. 让用户有参与感

世界杯作为2018年的超级热点,在比赛期间想必会有各种各样的活动出现,那么QQ要想在众多活动中脱引而出,设计的核心目标是什么呢?

我们从过往的大型活动设计经验来看,好的创意可以激发用户的好奇心,但要想在全流程中营造一个愉悦的用户体验,仅仅是有一个好的概念是远远不够的,用户体验的核心应该是让「用户有参与感」。所谓的参与感不是给出各式各样的方案让用户按照流程去使用,而是给予用户创造从思想上、情绪上、行为上的可能性,并通过自身的主动操作与整体的设计流程相互影响,使用户感知更加立体,更加个性,从而加强用户在体验中的参与感,让用户印象深刻。

用户有共鸣是「参与感」的基础

很多设计师在接到一个新需求时,往往会通过「我觉得」「我认为」「我喜欢」描绘出一套高效率的设计方案。但对于创新型的活动设计,单从设计师经验之谈出发,容易局限设计的思维空间,忽略了用户认知的重要性,用户无法从活动中体会真正的乐趣,导致设计后期不得不进行大量方案修改,拖延了设计周期,反而大大降低了效率。所以,在创新型的活动设计的首要任务就是想用户所想,与用户认知产生共鸣,降低用户理解成本,更加投入的参与到活动中来。

那我们的目标用户是足球球迷吗?

答案:不是。

对于QQ这样亿万级的产品,要想带动全民参与,目标用户就一定不能局限。观看世界杯的球迷可分为三类铁杆球迷、伪球迷、蹭热点的小白用户,而这三类用户也包含了能参与活动的绝大多数,所以在第一轮方案策划我们找了三类不同的用户进行访谈,提炼符合目标用户认知的设计元素。

创意有火花是「参与感」的升华

与用户共鸣的设计元素算是给创意带来了好的灵感,但提炼这些元素,打造吸引用户创意玩法,就需要设计师运用掌握的设计方法,将元素碰撞出火花。 在本次世界杯活动中我们采用了「组合式创意思考」方法。将三类用户认知元素进行打散,并与当下大热的互动玩法、技术手段进行创意连线,碰撞出最有火花的创意亮点。

这么多火花如何进行筛选呢?

答案:具体项目具体分析的原则,首先应该设定列出关键性问题。

从世界杯项目来说:

  • 问题一:项目周期较短,可否在一个月内完成?
  • 问题二:没有像红包、礼券等奖励,方案对于用户参与的动力是不是充足?

从用户的角度来说:

  • 问题三:三类目标用户是否都会买单,满足全民参与的目标?
  • 问题四:创意是否具备独特性,与世界杯结合的自然性、视觉表现是否有冲击性?

让用户化身活动主角是「参与感」的精髓

从小我们就喜欢听故事,一个好的故事关键在于场景的打造,让聆听者充满联想犹如身临其境,仿佛自身是故事中的一角,而这种感受便是故事带来的「参与感」。

那对于世界杯活动我们应该如何讲故事,让用户化身为活动主角呢?

第一,要有代入感的故事氛围。

一个好的故事文字能够调动读者内心的情绪,而一个好的视觉场景用户会因为黑暗感受到恐怖,会因为鸟语花香感知到一股清香,会因为一片沉静的大海而触景伤情,而这种视觉场景所带来情绪就是代入感,也是吸引用户参与活动的关键。而 AR技术的特点是让虚拟与现实结合,这一特点,也在活动氛围的搭建上拓展了设计想象空间,所以我们在虚拟世界中搭建了一个穿越任意门,当用户在真实世界中向前走,会穿越进入一个360度的全景的3D球场,用户可以从视觉、听觉中感受球场氛围,并在环境中融入于用户相关的信息,让用户更加快速的融入活动中来。通过模拟足球场景的方式,用户一定会给予自己对足球的认知经历展开联想,从而触达用户内心的感受,加强了用户故事的代入感。

第二,要有使命感的故事环节。

烘托氛围的代入感可以说是从思维上让用户参与到活动中来,而使命感是想让用户从行为意识上融入活动中去,将用户自身的交互行为,反馈在活动的流程中,感觉自身赋予某种使命掌控活动。世界杯活动中我们设定用户需自身画圈的方式解锁任意门,在真实世界中走动,穿越赛场化身为1名足球运动员,并接受关键罚球挑战。通过一系列的用户参与行为,更容易让用户信以为真,体会穿越带来的乐趣。

第三,要有成就感的故事收获。

故事中主角之所以是主角,是因为他有自己独特的光环让众人印象深刻。前面我们从代入感、使命感给予了用户更加立体的参与感受,那么,如何让用户将自己所参与的情绪表达出来,这就需要最后的成就感所达成。世界杯活动中我们将用户化身为赛场上的一员,而这个过程我们希望后台进行了全程记录,就像现实生活中的记者一样,将这个令人兴奋的过程记录下来,并通过报纸的形式铺天盖地的告诉大家。让主角不是自娱自乐,而是可以面向全员炫耀的一场故事讲解,获得自我的成就感,从而也带动了用户的参与感。

3. 设计方案的框架

前期通过访谈、脑爆、创意提取等方式,提炼了世界杯活动加强用户「参与感」的关键因素,最终确定了活动的整体故事框架。

二、穿越没有想象中简单

经过前期的方案分析、交互框架的搭建,给予项目后续实现奠定了基础。但对于「QQ-AR穿越赛场」这种创新型活动,由于是业界首创,利用技术也相对复杂,所以在实现过程中一定会遇到各种挑战,而这些挑战对于设计师的综合能力要求也更高。

1. 活动入口深,如何告知用户

在过往举行大型活动时,一般会在消息列表给予高曝光入口,比如QQ红包春节活动、QQ奥运活动。而对于世界杯来说,我们希望高曝光让用户感知强烈,参与活动中来。另一方面又担心,每次大型活动高曝光都是在挑战用户的耐心,久而久之引起用户反感,影响QQ大盘的用户口碑。

那么这一次世界杯活动入口应该在哪?

答案:QQ扫一扫。由于本次世界杯活动利用了 AR技术,而在QQ上,已经教育了用户来扫一扫参加AR贺卡、蜘蛛侠、百事可乐小黄脸等AR活动,不会对用户有骚扰又符合情理。但从活动入口曝光来说:扫一扫入口过深,每一步的点击都会导致用户流失。扫描这种操作方式过于隐蔽难以让用户感知活动,导致用户参与率低。

设计难点:在有限的条件下引导用户参与活动。

方案一:一种场景化的引导方式

当用户进入QQ时,我们利用世界杯强关联的足球元素,让用户可以直观的在界面顶部发现足球运动动画,并通过用户的主动操作促使足球动画也按照流程一步步的进行运动,增强了点击过程中的趣味性。这种方式区别于传统的红点提示,与活动本身的剧情结合更加密切,用户的代入感更加强烈,也通过设计元素更加明确了活动的内容,变相提高了活动的曝光率。

方案二:一种与用户界面关联的引导方式

在大型活动中QQ闪屏一定是曝光最强,用户参与度最高的,但过去大多数闪屏都仅仅是停留在告知的层面上,很难与用户有共鸣。而这一次我们将闪屏与用户消息列表界面相结合,当用户进入QQ时,营造一场球员从用户消息列表穿越的动画假象,给用户更多与世界杯相关联的想象空间,快速将用户带入活动氛围中来。既做到了用户引导,又做了活动新手教育的效果。

2. 让用户画个圈圈并不是件小事

在拟定方案的初期,开启任意门的方式我们有过激烈的讨论,一方观点认为要「简单直观」,当用户进入活动空间中就应该凭空出现任意门,这样设计既降低了用户参与的门槛,又提升了活动的曝光率。另一方观点认为要「遵循习惯」,QQ-AR 过往的活动大多数是教育用户扫描静态的手势、物体或图片解锁活动,那世界杯活动是不是也可以让用户扫描真实的门,或者一个固定手势开启穿越门呢?

设计难点:要与用户认知相同,减少用户对新型互动的教育成本。

从产品设计的角度来说两个观点都是可行的,但想让用户有意愿参与活动,却缺少打动用户的认同感、新鲜感、惊喜感,与现有的竞品体验都差不多,很难留住用户,建立较好的业界口碑。就像现在有钥匙锁、指纹锁、密码锁,你觉得它有问题吗?影响使用吗?其实没有,但是如果有一把锁使用了声纹控制技术,可以像《一千零一夜》故事中那样喊一声「芝麻开门」就能解锁的门,那种感觉一定是会加强用户的认同感、新鲜感、惊喜感。唐纳德诺曼大师曾经说过:「用户依念的不是物品本身,而是与物品的关系以及物品给人们传达的意义和情感」。所以,当我们有了任意门这个好的概念时,并不应该迫切的给用户灌输理念,而是要拉近活动本质与用户的距离,树立良好的口碑。

所以,我们认为开启任意门的方式需要从以下三个方面进行考虑。

第一,用记忆打破僵局。

首先,要找到与用户相同的记忆点?;叵胛颐羌且渲械娜我饷?,有哆啦A梦中穿越时空的粉红任意门,有神笔马良中画笔成真的神话任意门,有奇异博士中凌空手势的魔法任意门。这三个任意门都是大家熟悉的,具备让用户产生共鸣的基础。

其次,找到放大用户记忆的关键特征。比如「哆啦A梦」的粉红门,「神笔马良」的神笔,「奇艺博士」的火光之门都是可绑定记忆的故事元素?;谟没煜さ募且淠谌莺筒僮餍问缴杓?,有利于减少记忆负担,赋予用户空间想象,打破产品自身与用户认知的隔阂。

第二,让差异化去满足用户好奇心。

市面上常见的手机端AR互动都是以扫描静态的图像或物体为目标,识别触发展示相应图像、视频、3D模型等,这种体验虽然满足了信息的拓展性,但却缺少互动性,让用户难以享受AR体验带来的参与乐趣,更多用户反馈感觉是用另外一种方式看了一段普通视频。

所以,要想让用户感受到活动的差异化,我们需要了解AR技术的特定属性,从设计的角度破除固有的模式化操作,设计让用户眼前一亮的AR新型体验。根据过往的AR设计经验,AR操作设计需要注意以下三个用户体验:

  • 体验中减少用户接触性的物理感知;
  • 避免道具成为用户体验的门槛;
  • 不要停留在手机界面设计,要有与真实空间的互动。

再回到我们记忆中的三款任意门,从操作上还原「多啦A梦」、「神笔马良」都需要很明确的推、拉、拿等物理感知操作,「神笔马良」还需要提供操作的神笔道具,如果采用这种方式,用户参与感的体验门槛会大大提升。而「奇异博士」的操作方式是最符合移动端AR体验的,用户无需接触任何物体和道具,通过手势凭空画圈,就能出现穿越门,这样的方式操作门槛低,操作行为非常自然,也利于后期方案的拓展。

第三,让简洁自然带来愉悦操作体验。

一个创新的交互方式,教育用户如何操作一定是设计的重中之重,而在 QQ-AR世界杯活动初期确立,我们第一个预估的设计难点就是让用户在后置摄像头前画圈的教育。既然是让用户使用,那用户必须全过程参与到设计中来。整个过程我分为了三个阶段:

第一阶段:设计师设计,按照信息结构搭建教育引导。

我们将画圈引导分为了抬手机引导、手势引导、扫描引导、画圈引导四个阶段。根据这四个过程我们输出了两个方向:一步搞定所有,让用户自己理解。让用户一步一步来,更贴心的用户服务。

用户反?。阂徊礁愣ㄋ蟹绞?,用户完全不知道要干什么,访谈的用户全部无法继续,也无法通过文字理解自己需要做什么。一步一步来的方式,用户觉得整个过程很复杂,流程很长,觉得操作起来有难度,不愿意参与。

第二阶段:用户疑惑解答,按照用户意愿反馈搭建。

在第一次访谈中,我们发现用户的问题集中在「复杂」上,不理解上,所以我们优化了信息结构,设计了两个方向:用图文配合来解答「简」;让动画来做来解答「易」。

用户反?。河没Ю斫馕谑只聊簧匣?。来访的2位用户理解为手机屏幕画圈,1位理解为扫描画圈,但影响他的并不是动画而是文字。

第三阶段:设计师提炼,抓用户理解点设计教育目标。

在第二个阶段的我们解决了对于抬手机、手势识别、画圈这个动作理解,但对于后置摄像头画圈教育,还需要重点突破?;叵牍サ?AR教育引导设计,用户为什么一直在屏幕上画圈,对比下发现这一次我们界面中缺少了一个最基础的元素那就是「扫描」,用户难以与现有的界面引导进行区分,依旧停留在屏幕内设计。而「扫描」操作对用户的教育,是在真实的空间中找到可识别的目标(如二维码、条形码、书籍等),所以我们需要让界面「扫描」感知更强烈。

在访谈过程中我们还发现动画引导,比图文引导在新型互动的场景下,用户更愿意去理解、去模仿,而之前的动画为何无法理解后置摄像头画圈呢?用户反馈动画一直在教育画圈,没有教育用户伸手画圈,更不知道在手机后置摄像头画圈。所以我们需要让动画更接近我们的真实行为。

用户反?。捍蠖嗍没芄煌ü约旱睦斫獬晒υ诤笾蒙阆裢坊?,并获得从未有过的惊喜感。而还有一部分用户依旧选择屏幕上画圈,也觉得屏幕画圈更符合他们的认知操作习惯。最终,在画圈操作方式上,在界面教育我们依旧以引导后置摄像头画圈为目标,希望给用户带来我们预设的惊喜感,同时我们也保留了在屏幕画圈的用户认知习惯,希望画圈这个操作既能让用户体会到其中的乐趣,也不要让用户因为自身的习惯而被拒之门外。

3. 任意门:制造惊喜,让用户愿意深入探索

「穿越」是世界杯运营项目的核心概念,而任意门作为连接真实世界与虚拟球场的时空信道,必须制造穿越时空的惊喜感,激发用户深入探索的兴趣,后续的体验流程才能顺利开展。

我们搜集了许多任意门的设计参考,希望创造极具科技感的视觉特效。为了达到理想的任意门粒子效果,最终采用了3D建模和动态贴图的方式,搭配手Q的3D引擎进行开发。

基本上,任意门的设计主要包含两部分。

任意门模型

任意门包含时空通道出入口、游离粒子面片、以及火焰粒子动态贴图层等。

受限于手Q引擎所能支持的运算能力,同时要考虑整体CPU和GPU的资源占比,建造模型时需考虑许多限制条件,例如模型面数不能过多,避免影响效能,或是动态贴图仅支持矩形面片等,这些限制成为还原设计的困难与挑战。因此,唯有在理想设计和技术实现之间找到平衡点,才能在符合技术规范的条件下,达到理想的设计效果。

为了突破技术上的限制,我们试着去了解3D引擎的运作原理,与工程师讨论技术可行性,并由设计师快速制作3D模型供其测试效能,历经多次的尝试与沟通,最终设计出符合技术规范的任意门模型。

第一版模型:粒子效果不如预期,而且没有时空通道的感觉。

第二版模型:门洞与外围的火焰粒子效果像是两个独立个体,效果不好。

最终版模型:调整门洞形状,并扩大外围粒子效果的范围,达到理想的效果。

粒子效果

粒子效果是任意门最吸睛的部分,也是形塑空间感不可或缺的要素。接续前述的模型设计,粒子效果便是透过模型面片的动态贴图,实现绚丽的视觉特效。粒子效果分为两个层次,一是主视觉的火焰粒子效果,由内圈到外圈呈现白-蓝-紫的颜色过渡,产生向外发散、流动的动态效果;二是营造氛围、塑造体积感的游离粒子。

动态贴图的每秒帧数(FPS)、图片分辨率、文件大小等,皆会影响最终呈现的视觉效果。由于手Q引擎3D渲染的能力有限,导致每秒帧数和图片分辨率两者必须有所取舍,亦即每秒帧数提高,图片分辨率必须降低。因此,为了呈现最佳的粒子效果,必须找出最合适的参数设置,让粒子的清晰度与动态效果,不至于受限于运算能力而大打折扣。

小结

除此之外,本次采用了 ARKit技术,允许用户透过走动的方式,穿越任意门走进360°全景球场。为了让用户感兴趣,愿意走进球场中,任意门的设计,能让用户透过门洞窥视球场的状况,并且隐约地听见观众的欢呼声,借此吸引用户向前一探究竟;而当用户进入球场后,也能从门洞看到原本的真实世界,仿佛真的穿越至另一个空间,置身在真实的球场中。

4. 360°全景球?。捍丛焐砹倨渚车某两?/h5>

给用户第一人称视角

为了增益用户的参与感,使其有着身临其境的感受,我们采用第一人称视角的设计。当用户穿越至球场时,可以任意旋转手机角度,360°环景观看球场全貌,感受加油声此起彼落的氛围,也能从大屏幕看见欢迎自己入场的信息。与此同时,用户身处的位置也刻意安排在球门前,双方正在等待角球踢出的时刻,球员正在身旁走动、卡位,由此更增添了临场感,仿佛置身在真实球场一般。

考虑到手机屏幕的视角局限性,360°全景中关键的角色与对象,尽可能在单一屏幕呈现,无须用户旋转过多的角度,即可掌握剧情内容与信息全貌。除了考虑对象之间的位置关系,摄像机与角色之间的距离,也是影响屏幕可视范围的关键因素。最终皆需在手机中观看效果,调整至最佳的观景视角。

运用镜头走位,让用户跟随剧情安排

在剧情安排上,可分为两部分。第一部分,用户作为参与者,随着比赛的进展和队友在场上奔跑。用户加入球赛后,会成为QQ全明星队的1员,为了增加比赛的可看性和冲击性,我们模拟了一个足球故事桥段:队友拦截敌方进攻时的传球,接着快速带球推进至球场另一端,但遭遇敌方铲球犯规,我方球员倒地,最后裁判吹罚任意球。

配合这段剧情的镜头走位(用户视角),在设计上也做了巧妙的安排,用户会跟着截球队友一起移动,目睹截球瞬间并参与反击。为了避免用户因旋转手机而错过剧情,若用户视角离开球时,手机屏幕会出现向左看/向右看的文字提示,让用户能立即掌握球的位置,以及球场上正在发生的剧情故事。

第二部分剧情,用户担任主罚的角色,亲自罚踢任意球。此处的剧情皆为固定视角镜头,主要是为了让用户聚焦在这段剧情转折:我方获得任意球机会,而这个重责大任将交给用户来执行。剧情提示也会呼唤用户名,「xxx,关键的罚球靠你了」,以此增加用户与比赛的联结性。

第一部分:360全景剧情

第二部分:固定视角剧情

任意球交互设计

到了罚射任意球的阶段,用户可依据滑动屏幕的轨迹和角度,射出左中右三种不同的球路??悸窍钅康目⑹奔浜统杀?,我们不以开发游戏为目的去制作射球交互,决定采纳视频衔接的方式,根据用户手指碰触屏幕的起点和终点之间向量关系,播放不同球路的射门视频。

然而,视频衔接的方案存在缺点,由于球无法跟随滑动轨迹去移动,缺少实时的回馈。为了改善这个问题,我们添加了滑动轨迹的视觉反馈,增强用户的操控感知,同时,踢球的瞬间,手机也会随之震动,以此丰富用户的感官体验。

进球后会播放精彩回放,从不同角度观看进球的过程,最后一幕是队友兴高采烈地向前奔来,接着画面转场过渡,生成QQ足球快讯的个性化报纸。

配音与音效

除了剧情和镜头语言,配合故事线发展的配音与音效亦十分重要,声音对于形塑球场的真实体验,扮演了举足轻重的角色。

为了营造实况转播般的临场感,每个剧情环节都搭配了专业的播报员,针对赛况进行解说,例如用户穿越至球场时,立即播报欢迎用户上场的信息,或是队友截球,以及随即发起进攻的转折点,透过语调和声量的抑扬变化,传达紧张刺激的比赛氛围。

另外,球场上不可缺少的,便是观众的加油、吶喊和鼓噪声,加上球员奔跑、踢球和喘气的声音,这些音效彼此之间的堆栈与错落,除了要配合剧情演进与场上变化,体现球场当下的状况,也需反映球场观众的情绪起伏,比方说屏气凝神等待射球的那一刻,转瞬间球破网而入,全场欢声雷动,或是球员盘球杀入禁区,即将射入致胜一球,却被敌方犯规功亏一篑,这些情绪的转折点,透过声音的操弄,有时比起视觉更具感染力,更容易让用户沉浸在比赛氛围中。

整体而言,呼应本次项目要传递给用户的价值,希望让用户在世界杯这个体育盛事有参与感。因此,我们运用虚拟现实的技术,打造一个高度仿真的球场,透过第一视角的运用,配合剧情的走向,让用户从在场上奔跑的观者,转换为关键的任意球主罚者,像是亲身参与了一场足球比赛。

5. 个性化内容,让用户愿意分享

魔法报纸将用户推向荣耀的巅峰

我们将QQ-AR世界杯活动的整个体验流程闭环理解成一则故事。故事的主角就是用户,用户从画圈、穿越来到世界杯球场,化身成为征战赛场的1名球员,在赛事正值胶着时,用户一脚飞起,射进决胜的一球。这一刻,所有的荣耀与光辉都集中在用户身上,这一刻,就是用户的主角时间、巅峰时刻!

那么,设计如何才能将这一刻的荣耀记录下来,促成用户主动分享,推动活动更广泛的传播,让更多的用户愿意参与到活动中来呢?

我们采用了「报纸头条」这一形式来加强、放大用户的荣耀感:用户在绿茵场上以关键一球逆转赛局时,就迅速登上了各大媒体的头条。报纸头条这一形式,不仅能记录下这一传奇瞬间,还能放大用户的主角光环,使之得到极大的心理满足。我们把用户从手势画圈,进入赛场到射出关键一球的精彩瞬间录制了下来,呈现在报纸上,就像哈利波特里的魔法报纸一样神奇。

为了塑造置身其中的真实感,报纸的设计完全遵循现实世界中报纸的规则:设计运用了纸张的质感,看起来像一份真正的报纸摆在了桌面;采用报纸常用的栅格排版,也就是常说的「豆腐块」设计;大字号的标题,具备足够的视觉冲击力,并第一时间将用户的名字暴露出来,抓住人们的眼球;而在非核心区域,为了让信息不脱离用户,则将用户与好友(按照亲密度筛?。┓胖糜谕皇录?,挑起PK,通过这种方法来制造话题,碰撞火花,提高分享意愿。

多样报纸给用户个性化的表现

用户对于千篇一律,千人一面的事物,难以提起对事物的好奇心,而我们的活动也是如此,如果用户参与的结果相差无几,分享意愿也会大打折扣,特别是95后、00后用户,更加期望独特性。

在赛场上,为了彰显自家球队精神,每支球队都指定了代表色,将其运用在徽章、球衣等地方。众所周知,巴西国家队的传统球衣是热情洋溢的黄绿色搭配,犹如狂野的热带雨林;阿根廷是其国旗的配色:浅蓝和白色作为主色,搭配精致的金色;另一支赫赫有名的球队曼联因其俱乐部徽章是一只手持三叉戟的红色魔鬼而被称为「红魔」:每次曼联出场,球场都会变成红色的海洋。

因此,我们选择了巴西、阿根廷、法国、中国等15支球队,搜集其徽章、球衣等标志物,从中整理出这15支球队的颜色组。但问题随之而来,当我们把这15支球队的颜色组放在一起时,五花八门,非?;炻?,而且普遍非常鲜亮,塑料感过强。因此,我们给明度和纯度设置了一个范围,一边对每个颜色组进行逐一调整,一边进行整体观察把握,最后达到和谐统一的视觉效果。此外,还整体调节了图片、颜色块的亮度,以表现纸张特有的杂质感和哑光感。这样,我们就获得了15组颜色组,配置到报纸的名称、头版标题、日期等地,设计出了15种不同的报纸,与15支球队一一呼应。

在球员和球迷心中,一件有着独特数字的球衣,不仅仅是简单的一件衣服,而是一个象征,它随着球员征战南北,承载着赛场上的所有的欢喜与悲愁,光荣与失落。譬如梅西的10号球衣,已经是绿茵场上独特的标志了,受到了球迷们的热烈追捧。我们在报纸上设计了不同数字的球衣,希望赋予用户一个属于他自己的独特数字,延续穿越赛场上的沉浸感。当用户看到他喜欢的球队颜色和独特数字时,能会心一笑,即达到了我们的设计目标。

三、反思:好的设计是权衡众多条件下的最佳方案

综上所述,本项目的几个关键环节中,设计侧会面临多方面的挑战,用户的学习成本、手机系统的差异、3D计算的性能要求、网络流量限制、体验的场景、活动的时长等。

为了在众多条件的约束下取得最佳方案,我们也对最初设计方案进行了特别的调整,例如对于没有AR能力接口的机型,会有倒计时自动穿越的特性;为了提高画圈的成功率,也支持在屏幕画圈和自动纠正;根据不同性能的机型,对预加载时机、画质效果也做了多种配置。为了让用户更快参与进剧情发展,静态机位也调整为动态追踪……

我们想要传达的,并非一味的坚持最初的「完美」设计,而是身为设计师必须了解,设计方案在众多条件耦合下的可行性,尤其是背后的技术风险与时间成本也是不可忽视的一环。

引述设计思维(Design Thinking)的观点,一项产品或服务必须兼顾用户需求(Desirability)、技术可行性(Feasibility)与商业可行性(Viability)。设计师必须运用设计方法,在满足科技和商业可行性的前提下,满足人对产品或服务的需求。由此可见,一个好的设计是权衡众多条件下的最佳方案,设计师面对条件限制在所难免,不如将限制视为思考问题的出发点,提供更完善的解决方案。

点击查看完整视频

四、展望

「QQ-AR穿越赛场」除了为用户带来耳目一新的感官互动和印象深刻的体验,更重要的意义在于打破仅靠单项技术而难以持续商业化的格局。通过巧妙结合手势识别、AR、360度全景视频技术,在用户的本能层面带来了超出预期的惊喜,为连续的行为体验构造了合理性,从而创造了更有吸引力和持续性的互动场景。

判断一项技术可否持续商业化的基本要求在于是否可复用与拓展?!窺Q-AR穿越赛场」 的本质是在真实环境下创建可沉浸式互动场景的体验,抛开「足球」的元素,这种创新的体验还可以在「空间维度」、「时间维度」和「社交维度」发掘更多有效契合用户诉求的互动场景。

空间维度:打破物理空间的隔阂,除了可以穿越到球场,也许还可以穿越到动物园,城市上空,甚至三次元……

时间维度:回溯昔日是人类的本能,通过地理位置分析,可以让用户以最直观的方式「浏览」所在位置的历史。既可用来展示沧海桑田,也可以沉浸的方式体验分享者留下的快乐。

社交维度:跨入穿越门,迎接用户的既可能是一次扣人心弦的组队探险,也可能是一场好友精心策划的生日Party。以AR/VR作为卖点的产品所遇到挑战在于新鲜内容的有限性,随着新鲜感的下降,持续沉浸其中的用户也会随之流失。让用户持续保持对产品新鲜感的手段之一就是引入社交元素,通过「任意门」拉近彼此的距离,伴随着「穿越空间」的强烈仪式感和好奇心,以社交形式为渠道创造的互动更能超出用户预期。

从AR传递火炬、AR红包、到AR送祝福、AR穿越赛场,手机QQ持续试水前沿技术,探索用户的应用场景,不断触碰到体验场景与技术能力最佳结合的极限。伴随着技术能力的迭代升级,手机QQ不仅为用户带来耳目一新的互动体验和社交玩法,连接用户的方式也逐渐从量变进化到质变,基于图像识别、空间探测与视频互动的能力耦合,未来会发掘出更多创新的应用场景。

腾讯ISUX?实战案例」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.bvfyw8.cn/the-design-behind-qq-ar

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里