互联网 频道

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

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

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

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

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


触摸方式设计思路

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


触摸原型

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

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


表情

0
相关文章