揭秘腾讯：触动未来的QQ概念版设计

网站工作室

　QQ概念版经过一年的秘密研发，终于掀开了她的神秘面纱，向世人展现了她的真实面目，做为一个全新的产品，以及内部封闭秘密研发的众多因素，可能很多人想了解这个QQ概念版的研发设计过程以及产品的设计理念，在这里我们将带你全面的了解QQ概念版这款产品的研发设计过程，也和大家一起分享我们项目团队的研发设计经验。

网站工作室

触摸未来的QQ概念版设计

　　1.项目背景

　　QQ同时在线过“亿”，腾讯开始正式步入“亿”时代，正在大家沉浸在喜悦以及自豪的同时，我们一款全新的概念产品将破茧而出，因为我们知道过“亿”，互联网对我们来说意味了更大的期望，也给我们更大的责任，在这里我们会去探索未来QQ的概念模型：

　　未来IM会发展成什么样？

　　未来用户的沟通会呈现什么样？

　　什么样的体验设计能更便捷地满足用户的沟通以及交流？

　　触摸时代已经到来，我们如何提供用户更好的体验设计？

　　……

　　其实对于QQ 的探索，我们从来没有停，前期的My QQ概念视频的展示以及QQ搜索应用等概念视频，都已经在网上风靡一时，而如何真正在概念设计的基础上，结合即时通讯强大的技术力量孵化出一个真正能让用户体验的产品，是大家最为期待的。

　　2.研发设计过程

　　QQ概念版在研发设计之初，由于投入开发资源比较少，项目战线拉得比较长，虽然前阶段没有产品经理的参与，但是只有设计师及开发人员的团队，或许是让设计师能更好的发挥想象力的机遇，虽然流程没有如研发QQ时的规范，但这样能采用更加敏捷的开发方式。从秘密研发到最终亮相，期间诞生了很多富有创新性的设计体验，在产品成型后我们也积累沉淀了很多有价值的经验、技术及创新点，这也是腾讯首款NUI(自然用户交互)产品，结合了人机工学知识，实现了多点触摸操作。在实现IM(即时通讯)的基础功能之外，QQ 概念版还推出了动感相框、动态背景、多Tab聊天窗口、3D交互、矢量界面、桌面好友等一系列新功能、新体验以及Windows7的重要新特性。相信大家更关注QQ 概念版研发的过程以及细节，在这里我将简单对QQ 概念版的研发设计过程跟大家分享。

　　QQ概念版团队在一开始设计之初就定下了自己的设计目标：

　　创新性的界面能让人眼前一亮，需要承载用户更多的情感，让用户感受到界面的生命力，更需要传递一个时间和空间上的应用，带给用户更多想象的空间，让界面的表现更加丰富多彩，通过对人机工学的知识运用，更好的支持鼠标操作及多点触摸操作。

　　我们在设计过程中提炼了两个未来趋势设计：拟人化和拟物化，其中涉及到的核心关键词为：生命力、时间感和空间感，生命力就是通过拟人化的情感沟通，是产品更具有亲和力，简单来说就是在交互的操作上有呼吸效果，在视觉的感受上有更贴近人的实际生活场景，而时间感和空间感就是通过拟物化的产品界面，是用户更贴切生活，让用户在使用过程更好与产品进行互动。

　　体现在设计会随着时间的变化而产生不同的界面效果，而空间感则是通过wpf的新技术，体现出多维的空间表现力。

　　而我们研发的一个重要的目的就是开始研究多点触摸对界面带来的革新及挑战。

　　整个设计的过程将有以下几个步骤：

　　A.概念IM的创意脑暴：

　　当然，看到如此光鲜的界面并不是一朝一夕能出来的，期间经过了反复的脑暴，有来自CDC内部的设计火花的碰撞，也有平时项目积累的的创意，更有来自技术团队对前沿技术的探索和分享，所有的一切才成就了目前的界面，看下我们部分脑暴在白板上留下的一次次天马行空的概念火花：

网站工作室

　B.交互流程、线框图及纸面原型

　　从五花八门的脑暴以及天马行空的概念脑暴图中可看出，有些可能并不实用或符合我们的版本需要，我们会集中起来对脑暴概念图进行筛选，将有发展空间的图进行更加细致的交互流程设计，即具体的概念线框图设计，以此来确定用户使用场景及具体功能的交互操作。对于筛选掉的脑暴图，我们不会丢弃，所有的创意点我们都储备保存，因为这些很可能是下一个新的创意设计。当然，更加需要考虑的就是我们的产品是既适应于鼠标也适用于手的触摸操作的，因此将给我们带来更大的挑战。

　　我们通过手绘线框图的方式来展示产品中的某些功能是如何操作和使用的，鼠标交互操作方式则是沿用了多年的经验及规范来制定，在这里不加赘述，而触摸则需要用户更多的以指尖的动作来达到操作的目的。

　　具体的触摸操作在我们产品中的体现有：单击、滑动(滚屏)、拖放(选中、按住、移动)、两指拉伸(缩放)、长按等。这些都将在我们的QQ概念版中有所体现。对于平板电脑触摸方式及应用场景我们都在进一步的研究当中，包括结合人机工学等知识，结合使用平板电脑的使用场景，如何让人能更加舒适的进行操作，都是我们的研究方向。 触摸方式设计思路

　　在流程图及线框图出来之后，我们会开始进行纸面原型的设计，这个过程可以帮助我们模拟使用时的具体场景，更完善操作时的交互流程。在此过程中我们会发现之前的线框图上设计不合理的地方，从而加以改进。通过这样的纸面原型的方式，更能体现在使用触摸操作时所遇到的问题，从而产生更加完善的设计。当然，这样的方式也体现了设计师的一个思考过程，更直观、方便的实现我们的目的，以更大的视野提供解决问题的思路，完成了最初的原型设计。 触摸原型

　　为了体现QQ 概念版触摸的特性，我们也对用户界面也进行了前所未有的调整，对界面的控件进行了拓展，控件的尺寸大小进行了调整，使之既能满足鼠标操作也能适应触摸的操作方式，在期间寻找平衡点，这个协调过程相当困难，业界也没有相关的指引和类似案例，全都需要设计师自己来整理和解决这些矛盾的问题，我们已在整理触摸和鼠标操作的规范，让其做出更详细的区分和融合。希望通过梳理，能解决触摸对于面板的尺寸大小要求和视觉感受的冲突，使得产品的使用、操作及视觉感受更加合理、舒适和美观。

　　这个过程会出一些Blend或Flash交互原型概念模型，这些高仿真的原型在交互设计概念阶段讨论是非常有必要的，他可以最直观地感受到体验创新带来的操作变化，也为后期的原型设计节省很多时间，不至于会大部分的返工和修改，这里以表情界面的一些最初的原型给大家简单展示下，也因为有这一步储备，我们沉淀很多很有价值的创新demo： 表情