打造有温度的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

相关推荐

  • 用好的交互设计来管理复杂-“Tab”

    标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。

    2017-05-18
  • 微交互:如何塑造优质的产品细节?

    本文作者将与大家探讨微交互是如何塑造优质的产品细节的,一起来看看吧~“最好的产品通常会做好两件事情:功能和细节。功能能够吸引用户关注这个产品,而细节则能够让关注的用户留下来。”

    2017-05-01
  • Smartisan OS v3.1.0 功能列表(M1 / M1L),创新交互设计“One Step”与“Big Bang”变革安卓阵营。

    本次更新主要增加了两大重磅功能“One Step”与“Big Bang”,前者将常用的点击与分享操作放置于边栏,快捷切换与分享,快人岂止一步;后者可以将大面积按压下的文字区域,智能拆成字和词,你可以自由选择与搭配,同时…

    2016-10-19
  • 大屏时代,如何做好电视端交互设计?

    在过去一年多的时间里,笔者有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。-硬件+远距离操控——基本交互-基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一 、遥控器输入当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥...

    2018-04-01
  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • 按钮体验设计:最佳的感受,形式和状态

      按钮体验设计:最佳的感受,形式和状态 按钮是一个普通的,几乎我们每天都要接触的设计元素.除了这个,由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元…

    2016-03-24
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08
  • 「Sketch」在Sketch中创建设计系统 | 第一章

    原文作者:Marc Andrew原文来自:Medium阅读全文大概需要10分钟相信大家都做过自己的设计规范,无论在个人项目还是团队项目中,设计规范的重要性不言自明,但很多人(不仅是初级UI设计师,也包括很多工作多年的UI设计师们)都有很多困惑,比如,做好的设计规范如何维护?设计规范到底能给项目带来哪些更具体的帮助?在很多人看来似乎设计规范成为了一个“无用的”标配,很多设计规范慢慢被封尘在项目文档中的某个角落里,从此不见天日。实际上我们整...

    2018-04-19
  • Excel 实现微信动态图表的交互体验

    昨天说的干货贴,文末有下载方法。微信后台有一个不错的动态图表,可以借鉴到我们周报月报的制作中运用:它的交互特征:①鼠标单击上方的扁平化指标选项卡,切换下方的动态图表。②鼠标悬停下方的折线图,会出现小圆点、竖线和提示框突出显示当前数据点。如果用 Excel 仿制,通常是使用窗体控件来制作动态图表,交互效果如下:需要用到的知识点,窗体控件用单选按钮或下拉框,函数用 index 或 offset,这个我们在《让你的图表动起来》课程里已经有专题...

    2018-01-30
  • 用户界面缓解曲线

    由于采用扁平设计,动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计,可以影响产品的整体体验,并从市场上把它分开。动画可以使复杂的相互作用简单,把好设计成令人难忘的用户体验。但是,我们如何创…

    2015-05-26