欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

发布时间:2017:03:21 05:05:52 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1309个文字,预计阅读时间4分钟
导语
2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空

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

  今年最值得观看的HTML 5案例:

  《人气超高的HTML5特效排行榜TOP 10(附经典案例)》

  《2016年惊艳朋友圈的十大H5,你被几个刷过屏?》

推荐阅读:刷爆网络的「薛之谦憋大招H5」 设计师是这么做出来的!

  1. 给2016的故事加点温度

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

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

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

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

  2. 营造温暖的视频基调

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

  1、以“时钟”的滴答转动掀开2016空间扉页

  2、用“书”喻人,沉淀过往,叙说你的2016空间故事

  3、精美的日历与你的第一条说说结合,完美的诠释了何谓“历历在目”

  4、木质音乐盒与旋转移动的木偶相得益彰的展现了每一份礼物的美好,代表着每一个倾注真心的私人订制

  5、拍立得拍出空间精彩瞬间,记录“第一个空间访客”,延续“瞬间感动”,让友谊触手可及

  6、集成“智能回忆优质相片”,镌刻于木质相框,给每个人独一无二的“拾光集”

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

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

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

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

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

  

火遍QQ空间的「拾光」H5 是如何从零开始打造的?

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

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:待你验证!2017年最值得关注的7个网页设计趋势

下一篇:2016年最受关注的10个LOGO改版 你错过了哪些?

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信