情感化设计之移动动效设计

情感化设计三大载体:界面,交互,动效。本文阐述其三——动效的作用及其设计要点,并以等待的动效设计为例辅助说明。

动效作用

过渡流畅:通过界面及其元素的出现和消失,以及大小、位置和透明度的变化,使用户和产品的交互过程更流畅。

高效反馈:通过动效让用户了解程序当前状态,同时对用户操作(平移、放大、缩小、删除)做出及时反馈。

引导操作:通过动效对功能的方向、位置、唤出操作、路径等进行暗示和指导,以便用户在有限的移动屏幕内发现更多功能。

层级展现:通过焦点缩放、覆盖、滑出等动效帮助用户构建空间感受。就像iOS7一样,通过动效上来构建了整个系统的空间结构。

增强操纵:一些动效通过动效对现实世界的模拟并且不需要任何提示,迎合用户的意识认知。使产品的交互方式更接近真实世界。用户通过对现实世界的认知来理解动效,增强了用户对应用的操纵感和带入感。

创新体验:在可用性良好的前提下,通过细节设计和交互方式创新为产品增加亮点,可以带来更惊喜的体验和表达产品的气质与态度(X格)。

动效设计要点

有度:不要让设计使用户忽略你本来想表达度内容和作用(不增加操作;不干扰用户;不超过1秒)

考量实现,平衡设备和方案:不卡,不跳,不闪;做出优秀且绝大多数设备流畅运行度动效

自然,符合现实运动规律

整体编排,循序教育:1个好的欢迎界面+0-2个细节动效+不多于6个说明动效。

举例:等待的设计

界面先行:在业务动作未真实完成之前,界面先进入到完成/进行状态,以弱化用户的等待和烦躁。进度条。

资源代替:比如先加载出低质量的图片,再加载清晰资源。

趣味吸引:通过有趣的内容分散用户注意力。

Thanks!