坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研 ...
坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。 明确价值:动效设计能解决什么问题?设计的本质是解决问题,动效设计自然也不例外,当打算在界面中加入动效元素时,我们应该先明确清楚动效设计的价值所在,而不只是出于对「酷炫」或者「潮流」的盲目追求。从商业价值和体验价值两个角度,大概总结如下: 1. 商业价值通过动效设计可以更好地吸引用户注意力,提升用户对内容的点击探索欲。比如说,当我们在业务上非常希望用户去触发某个互动入口时,除了在视觉上进行强调,也可以给这个互动入口在合适的时机加上合适的动画(比如从屏幕边缘飞入、旋转出现、发光闪烁等),使之更容易被用户注意到、产生可交互的认知,进而触发交互行为。案例:以下 App 里图片上标签的圆点有扩散动效,点击可以查看所有相关的聚合内容。 App名称:nice
通过动效设计可以提升用户使用时的舒适度,或者制造一些「小惊喜」让用户产生快感和满足感,使用户感到不那么枯燥,从而达到提升用户使用黏性,更好地留住用户的目的,甚至还可以吸引用户主动进行传播,扩大产品影响力。案例:下面这个 App 中,当完成一件任务的时候,会出现满屏彩纸片飞舞的动效,带给用户惊喜和成就感。 App名称:微习惯
通过动效设计可以辅助视觉元素更好地传达产品品牌味道,成为产品设计语言的重要构成之一,加强与竞品的差异化,强化用户对产品品牌的感知。案例:Google 的 Material Design。 图片来源:The New Material Design Motion Guidelines
具体到指标上,可以通过 UV 点击率、留存率、满意度、认知度、舆情反馈等来进行综合验证和衡量,评估动效设计是否达到了效果。
2. 体验价值动效设计可以描述当前情境,更清晰地体现内容元素之间的逻辑和层级关系,帮助用户理解上下文、知道当前所在位置。
动效设计可以引导用户的操作浏览,给用户以明确的方向感,而不是对下一步该看什么、做什么感到不知所措。 图片来源:Material Design – The Morphing FAB
动效设计可以促进用户的情感体验,缓解用户的焦虑情绪(比如等待期间)、制造惊喜等。
动效设计提供当前的状态反馈,加强用户对操作行为的感知,给用户以可控的感觉。
遵循原则:动效应该是自然、和谐、可用的不是简单地动起来、或者凭感觉调两下就叫动效设计,动效设计应该有其基础原则。在此主要从物理规律、品牌调性、可用性三方面进行总结。 1. 物理规律动效设计应该是自然的、贴近现实生活的,元素的运动轨迹应该符合真实世界的物理规律,这样能让用户更快地认知、理解和接受,而不是感到突兀和不协调。比如元素从可视区域外进场是逐渐减速的 ease out 曲线,从可视区域内离场是逐渐加速的 ease in 曲线,都是符合我们的物理常识的(想象一下一个元素从界面中向下掉到界面外,是不是像真实世界里的自由落体运动),在决定一个元素的运动曲线时,不妨从物理世界中寻找隐喻,比如设计一个元素点击出现、然后上升消失的过程,可以参考氢气球的上浮使用加速运动曲线。 |
请发表评论