私人情人网站，情人网站(四季变换，爱你不变:QQ情人官网项目总结)
Chrome等高端浏览器在情侣中很受欢迎。该设计从前期策划就结合了CSS3等页面脚本效果，以动态的故事细节丰富页面整体体验，并考虑响应式设计，兼容官网在各种终端下的浏览体验。官网的这个设计也是希望用蒙太奇的语言来讲述仔仔和牛牛之间的感情，让用户产生感动和共鸣:恋人有默契，就像每次和仔仔见面都要给牛牛带一朵玫瑰。牛红的脸通红，蔡子笑的很浅。不管是夏天热还是下雪刮风，约会的玫瑰都不会停。他们的故事也是所有情侣的缩影。QQ情侣有各种类型的恋人:年轻的学生，努力的白领，历尽艰辛的老夫老妻……等等。他们每个人都有自己的爱情故事，每个人的爱情都在四季变换中经久不衰。
QQ情侣——腾讯第一款针对情侣的私人社交应用。在这里，你可以和另一半聊天，交换日记等日常互动，或者玩一些有爱的小环节，比如:交换恋人专属表情，DIY心情状态，晃动手机发出代表你思念的爱意等。，可以增进恋人之间的交流和沉淀，让你们的爱情更清晰，感情更甜蜜。
目前，QQ情侣已经成为国内最受情侣欢迎的恋爱神器。趁热打铁，QQ情侣团队在官网推出了全新的love.qq.com，用于推广新推出的手机APP，承载QQ情侣在各平台的产品，更方便用户使用和传播产品。官网上线后，她以充满爱的视觉体验赢得了众多用户的好评。在此，我们与你分享官网设计背后的故事:
视觉阶段
早期思考:
一个产品的官网对用户最大的价值是什么？
需求之初，产品经理给出了参考案例和基础资料，希望能小步快走上线。目前大部分移动产品的官网都采用手机界面+介绍文字+下载按钮的结构，简洁轻巧，优先级清晰。但是，作为一款有爱的产品，官网页面对用户的价值是什么？仅仅是一个快速下载载体吗？我们想做的还不止这些:一个产品的官网是用户对产品的第一印象。最好能一眼看到产品的特点，被吸引。作为一款全新的APP，QQ情侣的官网设计应该更吸引眼球。
通过对QQ爱好者的产品分析和对同类产品的参考，基本设计方向总结如下:
1.传达出QQ情侣有爱有甜的产品特性。
2.统一腾讯出品的金字招牌，注重细节元素与腾讯品牌的一致性。
3.合理承载QQ爱好者的其他版本和内容，扩展性好。
4.区分官网和其他同类产品，保证唯一性。
规划:
QQ情侣作为一个全新的应用，对于用户来说是陌生的，仅仅靠应用界面和介绍文字是不足以吸引用户的。另外，官网这种QQ情侣，是想给用户营造一种甜蜜有爱的印象，而不是一个功能强大的工具。所以她没有采用常见的功能介绍方式，而是从页面氛围入手，注重视觉渲染，聚焦“爱”这个关键点。结合产品定位，官网确定为甜美、有爱、明亮的基调。
目前QQ情侣专属表情已经在用户中获得了不错的口碑:霸道的妞妞和温柔的仔仔引起了很多用户的共鸣和讨论。搞笑的图像可以迅速拉近产品与用户的距离，所以官网的设计自然从这里开始:男女主角仔仔和妞妞引出一段清新的爱情小品，营造插画氛围，增加对用户的吸引力和共鸣。
说到卡通风格的爱情速写……我马上想到皮克斯2009年的《周游列国》，这也是设计师本人非常喜爱的一部电影。其中一个蒙太奇画面更是让人印象深刻:短短几分钟，卡尔和艾莉从见面到陪伴再到分离。随着时间的推移和场景的切换，他们慢慢地发生了变化，从害羞的情侣到稳定的情侣，从充实的岁月到温暖的黄昏，从热闹的欢腾到悲伤的衰老...几张简单的图片传达了人们的感受，击中了无数人的泪点...
QQ情侣love.qq.com，官方网站
网页实现
CSS3动画营造氛围。
之前的网页动画实现方式基本有三种:Flash、JS、GIF。Flash动画功能强大，堪比视频，但制作复杂且脱离浏览器平台，与网页内容的整合麻烦。JS动画表现力很强，但对web性能也有很大影响，而GIF动画过于简单，维护困难。
CSS3的出现使得网页动画的实现变得简单，可维护性高。但由于浏览器兼容性问题，一般采用逐步增强的方式。在兼容旧版浏览器的前提下，只有支持CSS3的浏览器才会有不同的效果。所以目前PC端的网站大多使用CSS3来装饰页面。
详细演示请阅读原文。
QQ情侣官网用CSS3动画营造春夏秋冬的浪漫故事氛围。虽然CSS3动画能给页面耳目一新的感觉，其华丽的效果也能给人留下深刻印象，但建议不要滥用，否则就是纯粹的技术演示。总结一下写CSS3动画的一些感受:
1.当好“导演”，严格安排出场、演出、退场，过程中精心把控每一个镜头；
2.主配角要一目了然。每部动画都有可能抢镜头，导致重点被忽略，需要仔细求证。
3.先完成，再美化。编写CSS3动画需要花费大量的时间，所以一定要保证完成需求后再考虑锦上添花。
4.合作。紧密配合视觉设计，让动画与页面整体设计自然融合。
场景切换
官网动画用CSS3实现后，主要用Javascript来切换春夏秋冬四个场景(通过改变类名)和管理功能。不同于常见的图像旋转方式，尝试在场景中加入创新的进出效果，如:树的生长和变小，岛屿的上升和下沉等。，大致可以概括如下:
1.四个场景添加了各自的进入和退出动画，场景内的动画只有在进入场景后才开始。
2.每个场景的进出时间可能不同，场景之间的切换顺序也是任意的。
3.除了点击鼠标切换场景，还可以通过键盘切换。
4.当现场正在进入或切换过程中时，禁止再次切换。
如果用简单的流程编写脚本，会交织很多逻辑和功能，不利于维护和扩展。因此抽象出两个功能类来实现需求。
主题类
主题(主题，出现，消失)；用于记录每个场景的参数和管理场景切换(通过切换body元素的类名)#要操作的Dom元素+name场景名称，春夏秋冬所需时间+服装进入场景所需时间+消失退出场景所需时间+go()进入场景的操作函数+remove()退出场景的操作函数。
NumArea级
NumArea(domObj，themeObj，index)；用于旋转的点击管理和场景切换的时间控制，场景切换是通过调用绑定的主题类的方法实现的。# Arr instantiated NumArea object set # Index是当前场景# Can #canClick继续场景切换# Auto需要自动旋转#Timer timer # Interval场景旋转时间间隔+domObj点击的序列号dom元素+序列号类中绑定的themeObj场景类#reset(index)将按钮的当前状态切换到index #go(index)进入场景#run(interval，Delay)根据进入的时间间隔执行自动旋转#stop()停止自动旋转。通过两个类的结合，逻辑分离，脚本的维护和扩展变得更加容易。最后，上述功能需求很容易实现。
附言
官网的这个设计延续了QQ情侣的恩爱风格。虽然在最终实现阶段，由于网页性能的限制，很多动态效果都忍痛放弃了……但清新甜美的视觉体验还是打动了不少用户。亲爱的，你是不是也感动了？然后果断拿起手机扫二维码下载~ ~我和我的朋友都觉得不敢用QQ的情侣不是真正的情侣~3~如果在使用上有什么建议，欢迎随时交流讨论~
视觉作者:小明
网页实现阶段作者:CT炸鱼
感谢您的阅读。本文版权归腾讯ISUX所有。转载请注明出处。违者将被起诉。谢谢你的合作。
注明来源格式:腾讯ISUX
转载请注明原文地址:https://juke.outofmemory.cn/read/220282.html
