《微交互：高大上的动效设计方法及流程总结》.pdf

微交互：高大上的动效设计方法及流程总结 /s?__biz=MjM5NjA3ODI3Ng==m... 微微交交互互：：高高大大上上的的动动效效设设计计方方法法及及流流程程总总结结 2014-02-19 微交互 一一、、流流动动的的趋趋势势 众所周知，早些年流行的flash主页因其酷炫的效果风靡一时。如今随着 html5和css3 的发展，在配合高端浏览器的使用环境下，用户可以体验到 更流畅顺滑的动画效果。 同时，手机端的动态设计效果也提升了用户感知度、提高了产品的易用 性;考虑到体验设计的一致性，动态设计还应兼顾跨平台和终端的拓展效 果。 第1页共10页 14-2-20 上午8:57 微交互：高大上的动效设计方法及流程总结 /s?__biz=MjM5NjA3ODI3Ng==m... 动态表现对传达产品功能、拓展用户的感官体验等方面起着举足轻重的 作用。如：进程类演示类动画，内容不再是从0到1的跳转，加入了动画 过渡，让复杂的程序语言转化为动态视觉语言“我正在处理你的内容，请 稍等”。一方面可以带给用户安全感，另外也缓解了因等待而产生的焦躁 感。 二二、、动动态态设设计计探探索索 动画不只是依赖于沉重的flash效果，或是装备精良的终端设备，我们通 过探索浏览器性能和用户对PC的使用习惯去探索动画的可拓展性，让用 户体验更加顺畅。 首先我们对鼠标不同行为状态进行分解，以拓展在网 页中可能产生的交互行为。 第2页共10页 14-2-20 上午8:57 微交互：高大上的动效设计方法及流程总结 /s?__biz=MjM5NjA3ODI3Ng==m... 通过对比分析我们发现，在PC端用户通过鼠标的经过、单击、拖动等交 互方式来触发事件，与目标对象产生互动。移动端自身的硬件可以支持 包括手势操作、重力、光线、距离感应器等功能，人机互动的形式也变 得更加有趣，拓展了用户的操作维度。 我们将交互过程拆分为：交互对象+交互行为+交互反馈。在结合PC端的 自身特点的基础上，对QQ空间做了如下动态创新探索： A 、、可可视视化化你你的的操操作作 将操作行为与页面反馈结合在一起，以增强用户对操作行为的感知度。 以feed 中点“ 赞”的操作为例。 第3页共10页 14-2-20 上午8:57 微交互：高大上的动效设计方法及流程总结 /s?__biz=MjM5NjA3ODI3Ng==m... 同时，我们将动画内容做了数据转化，用于解释不同属性在对应时间内 的参数变化。便于重构和开发理解动画内容，以保证动画效果可以完美 还原。 点“ 赞”速度变化：启动时有一定的初始速度，陡升曲线表明迅速到达最高 峰，在到达结束点的过程中，速度逐渐放缓。不透明度变化：初始时为 0，目标不可见，随着速度到达顶峰时变为100，此时目标完整可见。恰 到好处的动态效果可以给用户带来更平滑、柔和的体验。我们应洞察用 户心理的细微变化，让切换效果更符合用户预期。 第4页共10页 14-2-20 上午8:57 微交互：高大上的动效设计方法及流程总结 /s?__biz=MjM5NjA3ODI3Ng==m... B、、访访客客与与主主人人间间的的动动态态互互动动方方式式 访客登陆好友主页