打造有温度的H5动画:用户的故事将会被如何演绎

2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?


2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?

打造有温度的H5动画:用户的故事将会被如何演绎

1、给2016的故事加点温度

让根深蒂固的空间形象焕发新生,这势必要跳出固有的思维。我们历经多轮脑暴,逐层拆解空间内容,输出“空间、远近、门、世界、礼物、源泉、永恒”等接近百个关键词,最终聚焦在“温度”与“自我”两个维度,希冀挖掘用户自身的故事,展现空间产品的温暖情怀。

打造有温度的H5动画:用户的故事将会被如何演绎

围绕着“温度”与“自我”,继续拓展出“书本、午后、回忆、穿越、斗转、星移”等关键词,最终取“时光”谐音,融合“采撷”之意,确立了“拾光2016”的概念。

打造有温度的H5动画:用户的故事将会被如何演绎

此次希望打破插图所营造的“虚拟世界”,以实拍的视频营造更真实的氛围。午间的阳光、白色纱窗、实木桌面给内容铺垫了温暖的基调;书本、日历、拍立得等小物件,作为内容的沉淀对象。生活中的光影瞬间,在温暖的小角落予以展示,表达“你我TA的空间回忆”。

打造用户的“参与式体验”

画面内容以用户的“第一视角”来呈现,营造用户“自身”翻看回忆的氛围。即:由“视觉引导”到“内容展示”的过程。观看体验是由“观看+互动”两次获知的过程组成,最后将这两层信息重新编码[1]。用户在此体验过程中增强了参与感,可以“身临其境”地参与到叙事场景之中,与内容即时地“交流”,增强内容的感知与认同感[2]。

打造有温度的H5动画:用户的故事将会被如何演绎

2、营造温暖的视频基调

在拍摄过程中,需保持主画面的绝对静止,对局部内容进行动态表现(如:金鱼在游动、窗帘在摆动),让看似静态的画面“活起来”。采用Sony A7S II – 4K 30fps ,借助 F2.8大光圈,足以让背景内容完美虚化,让画面呈现丰富的层次感。强大的视频宽容度,给后期的调色、内容合成、重新构图都带来诸多便利。

打造有温度的H5动画:用户的故事将会被如何演绎
                                                 

打造有温度的H5动画:用户的故事将会被如何演绎  

打造有温度的H5动画:用户的故事将会被如何演绎

  1. 以“时钟”的滴答转动掀开2016空间扉页
  2. 用“书”喻人,沉淀过往,叙说你的2016空间故事
  3. 精美的日历与你的第一条说说结合,完美的诠释了何谓“历历在目”
  4. 木质音乐盒与旋转移动的木偶相得益彰的展现了每一份礼物的美好,代表着每一个倾注真心的私人订制
  5. 拍立得拍出空间精彩瞬间,记录“第一个空间访客”,延续“瞬间感动”,让友谊触手可及
  6. 集成“智能回忆优质相片”,镌刻于木质相框,给每个人独一无二的“拾光集”

打造有温度的H5动画:用户的故事将会被如何演绎

打造有温度的H5动画:用户的故事将会被如何演绎

3、让温暖的画面永不停歇

主视觉由文字内容来承载,字体结构粗细有变、结构丰富而饱满,让画面更有叙事之感。拆分字体中的某些结构做虚实的轮播切换,一方面营造内容在“呼吸”的氛围,另外体现“记忆的虚实”之感。

打造有温度的H5动画:用户的故事将会被如何演绎

视频影调风格希望营造清新、通透的感觉,这里将主色调设为暖黄色,在背景及次要画面部分,采用浅绿色予以点缀,保证画面的冷暖平衡。

在loop视频的后期设计中,为避免重复视频所造成的画面跳闪,翻书、翻日历、拍立得的场景,背景微动保持5s以内的情况下,将视频“正+反对接”形成一个完整的循环;礼物盒的场景,让小猴子在视频的入点和出点保持同一位置,从而实现内容循环时无缝连接。(避免文件过大,此处gif已做加速处理)

打造有温度的H5动画:用户的故事将会被如何演绎  

打造有温度的H5动画:用户的故事将会被如何演绎   

打造有温度的H5动画:用户的故事将会被如何演绎 

打造有温度的H5动画:用户的故事将会被如何演绎

在入场视频结束后,标题内容、用户信息以“轻动画”的形式,依次出现在承载物上,让信息以更缓和、有层次的方式呈现。

4、打磨最优化的技术方案

为了带给用户更顺畅的体验过程,视频背景的设计、开发实现的过程,历经反复几十次的修改与打磨。在视觉上呈现无缝对接,除了后台预加载文件,还在文件输出做了各种尝试。

最初,使用一条完整视频,在需要循环的位置,通过premiere中插入mark标记,开发通过读取mark的信息实现视频循环。但此方式经测试后发现,偶尔会无法拾取mark点,或拾取位置不准等问题,第一次的尝试就此失败。

打造有温度的H5动画:用户的故事将会被如何演绎

然后,尝试分段输出视频,由于视频view在相邻场景切换时,画面加载过程中会闪黑,也尝试截取每段视频的第一帧,作为静态画面来占位,然后加载入场动画、循环播放loop动画,但经过多番测试,画面依然会闪烁。

打造有温度的H5动画:用户的故事将会被如何演绎

此处飙泪略过N种技术实现策略……

打造有温度的H5动画:用户的故事将会被如何演绎

最后,经过多方协商与测试,在ios侧比较理想的方式是:“第一帧静态图占位+入场第一帧200ms buffer time +入场动画 +loop动画+N次循环loop动画 ”。以访客场景为例,首先,播放入场的第一帧画面,保证背景信息的展示,此时后台开始读取200ms的第一帧定格;然后,播放拍照的入场动画;紧接着播放loop动画;最后,loop动画会在背景不断重复,以达到流畅的观看体验。最终的音乐方案,选择一条节拍精简的底乐在背景重复播放,为画面增添轻松愉悦氛围。

打造有温度的H5动画:用户的故事将会被如何演绎

5、小结

从创意到设计执行再到技术实现,整个项目团队合力推动,力求在有限的时间内,打造最流畅而又饱有情感化的设计。2016年,不论你过得如何,通过饱有温度的画面,来承载用户的信息给回忆增温,这就是你我TA的“2016拾光影像”。

参考文献

[1] Information Resources Management Association.Web-based Education: Concepts, Methodologies,Tools and Applications(Vol.1)[M].New York:Information Science Reference,2010:1754-1758

[2] 张新磊,基于分布式认知理论的互动影像设计探索[J].《装饰》2014,5

 

作者:tdstone

来源:腾讯ISUX

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25253/

(0)
CatherineCatherine
上一篇 2017-05-11 05:08
下一篇 2017-05-11 07:09

相关推荐

  • 从二维到三维,利用 Z 轴打造界面的空间感

    互联网空间不像现实世界,它完全是一个平面化的二维虚拟空间,所有的物体都处于一个空间平面上,但是信息内容却是有层级关系的,那么应该如何在一个平面空间里来展现多重层级关系的信息呢?

    2017-05-18
  • 订单流程研究之提交订单

    在上一篇笔者有提到,平台不一定都提供货到付款服务,因此京东、唯品会和亚马逊在提交订单时需要选择支付方式,而淘宝天猫则是在提交订单之后才需要选择支付方式。提交订单之后,每种类型的订单可支持的操作也就不一样了。

    2017-05-31
  • 作为UX设计师,你需要知道的52个专业术语

    “注意用户做什么,而不是他们说什么。”
    ——雅各布 尼尔森“令你反感的客户是你最大的学习动力来源。”
    ——Bill Gates“想成长为设计师?花大部分时间考虑它的运作方式,而不是看起来如何。”
    ——乔希·帕克特

    2017-05-01
  • 亚马逊语音交互设计规范(三)Alexa的回应

    作者:Amazon翻译:原形必录这篇是整个设计规范的重点,因为在设计语音交互时最主要的就是Alexa的回复内容,本篇给出了很多让对话更自然易懂的方法,希望对大家有帮助。往期回顾:《亚马逊语音交互设计规范(一)设计流程》《亚马逊语音交互设计规范(二)用户说的内容》本文讲的是Alexa如何表达能让人们更容易理解和更好的回应。Alexa能够以自然的对话方式来回应、通知,还能问问题。 在设计Alexa对用户说什么时,我们可以参考以下做法。本章目...

    2018-03-18
  • 设计思考:中西医结合,开出交互良方

    我们大都倾向于对观点进行主观表述,而不是对事实进行客观陈述,为了减少主客观的分歧,设计师应该利用好研究分析对交互工作的“润滑”作用。

    2017-04-30
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • 选择爱情与用户体验

    用计算机思维的视角来看爱情和用户体验。一、做结婚教练的互联网产品经理最近发现一个心理咨询师现在转型做了一个结婚教练。她是我的一个心理咨询师朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。那么这个结婚教练以前是干什么的呢?她以前也是做过一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何...

    2018-02-03
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 为什么交互设计师注定是一个走向没落的职业?

    当技术发展发现一定程度, 你会发现,没有什么东西是永恒的。

    2017-05-10