Tdstone:在设计开发的过程中,当设计师做好了一套静态页面而且设想出N种有趣的交互动画,再交付重构还原页面的时候,由于无法提供精确的动态参数,导致沟通和制作的成本增加,而且最终的测试demo也差强人意。因此,我们通过研究当下的动态设计趋势以及PC端的交互特征,在QQ空间V8新版中做了动态创新探索,同时总结归纳出一套适于设计师表达设计概念的设计方法和流程。
这是QQ空间团队开发V8新版后总结的文章,对动态设计的总结详实且条理性强,配图也很形象,是一篇难得的好文,相信设计师们阅读完会相当受益 : )
同时,也推荐大家阅读: 《IOS7视觉/交互设计测试讲解》
一、流动的趋势
众所周知,早些年流行的flash主页因其酷炫的效果风靡一时。如今随着html5和css3的发展,在配合高端浏览器的使用环境下,用户可以体验到更流畅顺滑的动画效果。
同时,手机端的动态设计效果也提升了用户感知度、提高了产品的易用性;考虑到体验设计的一致性,动态设计还应兼顾跨平台和终端的拓展效果。
动态表现对传达产品功能、拓展用户的感官体验等方面起着举足轻重的作用。如:进程类演示类动画,内容不再是从0到1的跳转,加入了动画过渡,让复杂的程序语言转化为动态视觉语言“我正在处理你的内容,请稍等”。一方面可以带给用户安全感,另外也缓解了因等待而产生的焦躁感。
二、动态设计探索
动画不只是依赖于沉重的flash效果,或是装备精良的终端设备,我们通过探索浏览器性能和用户对PC的使用习惯去探索动画的可拓展性,让用户体验更加顺畅。 首先我们对鼠标不同行为状态进行分解,以拓展在网页中可能产生的交互行为。
通过对比分析我们发现,在PC端用户通过鼠标的经过、单击、拖动等交互方式来触发事件,与目标对象产生互动。移动端自身的硬件可以支持包括手势操作、重力、光线、距离感应器等功能,人机互动的形式也变得更加有趣,拓展了用户的操作维度。
我们将交互过程拆分为:交互对象+交互行为+交互反馈。在结合PC端的自身特点的基础上,对QQ空间做了如下动态创新探索:
A、可视化你的操作
将操作行为与页面反馈结合在一起,以增强用户对操作行为的感知度。以feed中点“赞”的操作为例。
同时,我们将动画内容做了数据转化,用于解释不同属性在对应时间内的参数变化。便于重构和开发理解动画内容,以保证动画效果可以完美还原。
点“赞”速度变化:启动时有一定的初始速度,陡升曲线表明迅速到达最高峰,在到达结束点的过程中,速度逐渐放缓。不透明度变化:初始时为0,目标不可见,随着速度到达顶峰时变为100,此时目标完整可见。 恰到好处的动态效果可以给用户带来更平滑、柔和的体验。我们应洞察用户心理的细微变化,让切换效果更符合用户预期。
B、访客与主人间的动态互动方式
访客登陆好友主页后,通常只能通过留言或回复好友动态的形式互动。简单的文字或表情类的交流过于乏味,缺少贴近生活化的肢体性的互动方式。我们的设计方案旨在丰富用户间的交流方式,促使用户产生更生活化的话题。
B-1 访客与主人的趣味互动“捏耳朵”
当用户进入主人页面时,可以看到头像上有一个耳朵形态的帽子,用户可以将鼠标滑到帽子上进行拉伸耳朵的操作。
主人会看到一条信息:XXX捏了我的耳朵。