求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
     
   
分享到
四季更迭,爱你不变:QQ情侣官网项目小结
 
火龙果软件    发布于 2014-01-02
 

QQ情侣——腾讯首款专属于情侣用户的私密社交应用。在这里,你可以和另一半进行聊天、交换日记等日常互动,也可以玩些有爱的小环节,比如:互发情侣专属表情、DIY心情状态、轻摇手机传出代表想念的爱心等,点滴间增进恋人的交流沉淀,让爱意更清晰、感情更甜蜜。

目前QQ情侣已经成为国内最受用户青睐的情侣必备恋爱神器。趁热打铁下QQ情侣团队推出全新官网 love.qq.com,用来推广新上线的手机版APP,并承载QQ情侣各平台产品,从而更好的方便用户使用和传播产品。官网上线后以有爱的视觉体验赢得不少用户的好评,在此我们将官网设计背后的故事分享给大家:

视觉阶段

前期思路 :

一个产品的官网,对用户而言最大的价值是什么?

需求最初,产品经理给到参考案例和基本信息,希望能小步快跑快速上线。目前多数移动产品的官网都采用手机界面+介绍文字+下载按钮的结构,简洁轻量、主次清晰。但是,做为一款有爱的产品,官网页面对用户的价值是什么?只是快速下载的承载吗?我们想做的不仅于此:一个产品的官网是用户对产品的第一印象,最好一眼就能看到产品特质,并被吸引。QQ情侣作为一个全新的APP,官网设计应该更加吸引眼球。

通过对QQ情侣的产品分析以及同类型产品的参考,总结出基本设计方向:

1. 传达QQ情侣有爱、甜蜜的产品特质。

2. 统一腾讯出品的金字招牌,注意细节元素与腾讯品牌的一致性。

3. 合理承载QQ情侣其他版本和内容,具有良好的扩展性。

4. 区别其他同类产品官网,确保独特性。

设计规划:

QQ情侣作为一款全新应用,对用户而言是陌生的,仅靠应用界面和介绍文字,不足以对用户产生吸引。加上QQ情侣官网更希望营造给用户的是甜蜜有爱的印象,而非主打强大功能的工具,所以未采用常见的功能介绍方式,而是从页面氛围着手,主打视觉渲染力,主打“爱”的关键点。并结合产品定位,官网确定为甜蜜、有爱、明亮的基调。

情侣用户中Chrome等高端浏览器较为普及,本次设计从前期规划就结合CSS3等页面脚本效果,以动态故事细节来丰富页面的整体体验,并考虑响应化设计,兼容官网在各终端下的浏览体验。

目前QQ情侣中情侣专属表情在用户中获得良好口碑:霸道的妞妞和温厚的仔仔引起很多用户的共鸣和讨论。逗趣的形象能快速拉近产品和用户的距离,所以官网的设计自然也着手于此:由男女主角仔仔和妞妞领衔主演一出清新的爱情小品,通过插画式的气氛营造,增加对用户的吸引和共鸣。

说到卡通风格的爱情小品…立马联想到Pixar在09年推出的《飞屋环游记》,这也是设计师本人很爱的一部电影。其中的一组蒙太奇画面更是印象深刻:短短几分钟里,Carl和Ellie从相遇到相伴再到分离,随着时间的推进和场景的切换慢慢变化,他们从羞涩的情侣变成沉稳的夫妻,从饱满的年华变成温暖的黄昏,从鲜活的雀跃变成悲伤的衰老…简单几帧图,传递出动人的感情,击中无数人的泪点…

本次官网设计亦希望用蒙太奇语言,讲述仔仔和妞妞的感情,从而带给用户感动和共鸣:恋人间都有心照不宣的默契,就像每次见面仔仔都要带给妞妞一枝玫瑰花。妞妞红着脸,仔仔浅浅的笑。不论炎炎夏日还是下雪起风,约会时的玫瑰从未间断。他们的故事也是所有情侣的缩影,QQ情侣有各种类型的情侣用户:年少青涩的学生、辛勤打拼的白领、历经患难的老夫老妻…等等等等,他们每对情侣都有属于自己的爱情故事,大家的爱都在季节的变幻里历久弥新。

网页实现

CSS3动画营造气氛

之前的网页动画基本上有3种实现方法:Flash、JS、GIF。Flash动画强大,可与视频媲美,但制作复杂并脱离了浏览器平台,与网页内容的融合比较麻烦,JS动画表现力很强,但对网页性能的影响也较大,而GIF动画过于简单且不易维护。

CSS3的出现使网页动画的实现变得简单,并有很高的易维护性。但由于浏览器兼容性,一般采用渐进增强的方式,在兼容旧版浏览器的前提下,只有支持CSS3的浏览器才会有差异效果。因此目前在PC侧大多数网站都用CSS3来点缀页面。

DEMO 秋叶飘零

DEMO 爱意绵绵

QQ情侣官网就采用CSS3动画来营造春夏秋冬浪漫的故事氛围。CSS3动画虽能够给页面耳目一新的感觉,绚丽效果也能让人印象深刻,但建议不能滥用,否则就是一个纯技术demo。总结了几点在写CSS3动画的感触:

1. 做”导演”,严格安排出场、表演、退场,过程中仔细控制每一祯;

2. 主配角应该一目了然。每个动画都可能抢戏,导致重点被忽略,需要小心验证。

3. 先完成,再美化。写CSS3动画比较费时间,必须先保证完成需求,再考虑锦上添花。

4. 合作。与视觉设计密切配合,让动画与页面整体设计自然融合。

场景切换

由CSS3实现官网的动画后,Javascript的作用主要用于春、夏、秋、冬四个场景的切换(通过改变类名)和功能的管理。区别于常见的图片轮换方法,尝试创新的加入场景的进入和退出效果,如:树的长大和变小,岛的升起和沉下等,大概归纳如下:

1. 四个场景分别加上各自的进入和退出动画,当进入场景后,才开始该场景内的动画。

2. 每个场景进入和退出的时间可能不同,且场景间的切换顺序是随意的。

3. 除了鼠标点击进行场景切换外,也可通过键盘进行切换。

4. 当场景在进入或切换过程中,禁止再进行切换.

如果脚本采用简单的过程式编写,必将交织处理大量的逻辑和功能,不利于维护和扩展。于是抽象出两个功能类来实现需求。

Theme类

Theme(theme, appear, disappear); 用于记录每个场景的参数和管理场景的切换(通过对body元素类名的切换)

#Dom 需要被操作的dom元素

+name 场景的名称,spring/summer/autumn/winter

+appear 进入该场景所需的时间

+disappear 退出该场景所需的时间

+go() 进入该场景的操作函数

+remove() 退出该场景的操作函数

NumArea类

NumArea(domObj, themeObj, index); 用于轮换的点击管理和场景切换的时间控制,通过调用绑定进来的Theme类的方法实现场景的切换.

#Arr 被实例化的NumArea对象集合

#Index 当前是第几个场景

#canClick 是否能继续进行场景切换

#Auto 是否需要自动轮换

#Timer 计时器

#Interval 场景轮换的时间间隔

+domObj 被点击的序号dom元素

+themeObj 绑定在该序号类的场景类

#reset(index) 将按钮的当前态切换到第index个

#go(index) 进入第几个场景

#run(interval, delay) 根据传入的时间间隔执行自动轮换

#stop() 停止自动轮换

通过两个类的组合使用,将逻辑分离出来.并使脚本的维护和扩展变得更容易.最终也很轻松地实现了上述的功能需求.

后记

本次官网设计延续QQ情侣一贯的有爱风格,虽在最后实现阶段由于网页性能等限制,忍痛放弃了不少动态效果…但清新甜蜜的视觉体验仍打动了不少用户。亲,你是不是也被感动了呢?那就果断拿起手机扫描二维码下载吧~~我和我的小伙伴们都觉得:不敢用QQ情侣的情侣不是真情侣~3~如果在使用中有任何建议,欢迎随时交流讨论喔 ~

相关文章

用户故事与用例
交互设计师之精益画布篇
数据分析之用户画像方法与实践
如何快速建立用户模型?
 
相关文档

用户界面设计
给企业做大数据精准用户画像
用户体验和交互设计
大数据下的用户画像
相关课程

用户体验&界面设计
用户体验、易用性测试与评估
用户研究与用户建模
用户体验的软件UI设计最佳实践
 
分享到
 
 

从手机登录页面设计想到的
如何把无意识引入交互设计中
交互设计的真相
当视觉设计师遇上产品经理
手机交互设计原则
用户体验之网页板块设计
更多...   

以用户为中心的设计
可用性评估
Desktop及Web-based视觉设计
认知原理与设计应用
手机用户界面设计

北京 以用户为中心的界面设计
北京 用户体验& 界面设计
上海 华为 用户体验& 界面设计
深圳 用户体验& 界面设计
爱立信 以用户为中心的设计
北京 用户体验与界面设计
福州 以用户为中心的界面设计
更多...