动效的几种方式在medium上的设计师Issara Willenskomer,进行了很好总结,引用他总结的提升可用性的十二条动效设计。他们分别是 缓动、偏移&延迟、父子、变形、变值、遮罩、叠加、生成、凝固时间、视差、多维度、推进&缩放;

 

原则1:缓动

 

当动效发生时,请使用“缓动”使对象行为与用户期望一致。所有产生动效的界面对象都应自然的缓动(缓动即所有运动都是逐渐加速或逐渐停止的,不会发生完全匀速的运动)。

 

原则2:偏移和延迟

当引入新元素和场景时,请使用“偏移和延迟”来定义对象关系和层次结构;

 

这条准则通过传达给用户关于界面中对象的“性质的东西”,预先有意识的使用户正确理解界面可用性;

 

原则3:父子动效(继承动效、跟随动效)

当操作与多个对象产生交互时,请使用(父子动效)创建他们在空间和时间的层次等级关系;

 

父子动效是一种强大的手段,可以在用户界面中“关联”对象。

 

例如在上图中,’face’元素的’y轴’属性是圆指标父级的’x轴’属性的’子’。当圆形指示元素沿水平轴移动时,其“子”元素随水平和垂直移动(同时被屏蔽 – 另一个原则)。

 

原则4:变形

当对象效用发生变化时,请通过“变形”创建连续的叙事流程状态。

 

在某些方面,变形是提升可用性动效中最明显和最具穿透力的。

 

动效设计

 

变形的作用是将用户无缝转换到不同的UX状态,最终达到预期的结果。用户已经通过这些功能空间被吸引到最终目的地而不被干扰打断和分散注意力。

 

原则5:值变

当价值主体发生变化时,请使用变化数值来创造一种动态和链接的叙事关系;

 

界面中的文本和数字的变化很常见,但也需要我们为他们带来区别和评估他们在支持可用性方面的作用;当数值发生变化时,可以从下面三点进行动效设计:将用户与数据背后的现实世界状态,代表的概念以及数值动态本身联系起来。

 

当基于值的对象没有发生“数值更改”时,传达给用户的是静态数字。而现实中的数字和值,可能是时间、收入、游戏积分、商业指标等处在不断变化的过程中,因此用动效来示意可以更好地说明。

 

原则6:遮盖/蒙版

 

当功能由元素的某个部分显示或隐藏来实现时,请使用蒙板来创造连续性效果;

 

遮罩行为可以被认为是对象的形状与其实用性之间的关系,设计师通过动效设计,揭示展示对象和隐藏对象的区域,将使用程序以连续且无缝的方式进行转换,从而保持叙事流程的连贯。

 

APP动效设计

 

原则7:覆盖(Overlay)

 

当不同层级对象的位置相关联时,建议使用叠加,在视觉平面中创建叙事性和对象间的空间关系;

 

设计师通过设计在“Z轴”定位层之间的动效转换,从而促进用户对产品体验的的空间定位。

 

原则8:生成(Cloning)

 

当新物体产生时,请使用”生成动画”创造连续性,关联性和叙事性;

 

这种动画能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。“生成动效”可以引导用户注意力从现有的队形到创建新的对象上,让用户不会被打断或迷失,并且帮助用户清晰且明确的理解整个事件过程,和一系列事件的关系;

 

原则9: 朦胧(Obscuration)

 

当用户在空间上定位自己与(非当前视觉层级中的)交互对象或场景的关系时,请使朦胧动画(上帝视角,或平行宇宙空间),使之了解前因后果及空间关系;

 

与覆盖有些相似,在没有纵深概念的扁平化设计中表现纵深,它并不完全将处于下方的元素遮盖住,而通常是通过高斯模糊和不透明度的减少,让下方的元素保留一定的可视性。

 

原则10:视差(Parallax)

 

当用户滚动界面时,请使用视差在视觉平面中创建空间层次;

 

视差帮助用户专注于主要的操作和内容,同时保持设计完整性。它通过设计界面各种元素和交互持续时间的关系来辅助用户对界面层级的理解。

 

“更快”移动的对象对用户来说“更近”。移动“较慢”的背景物体被视为“更远”。在视差动画发生的过程中,移动“较慢”的背景元素会在用户的感知上“后退”。

 

原则11:维度化(Dimensionality)

 

当新元素产生或消失时,请使用纬度化,提供元素连续性 叙事 和位置感。

 

用户体验很关键的一部分就是连续性和位置感。

 

维度度化提供了一种克服用户体验平面性和非逻辑性的有效方法。人类非常擅长利用空间框架在现实世界中进行导航,同样我们可以使用维度化在UX体验中进行导航;通过维度化提供元素在空间产生和消失的动画,有助于用户理解和加强UX空间心理模型。

 

维度的三种呈现方式 :折纸维度 Origami Dimensionality,浮动维度 Floating Dimensionality、对象维度Object Dimensionality。

 

原则12:镜头平移与缩放(Dolly&Zoom )

 

当对界面元素和空间关系进行引导时,请使用镜头平移和缩放,保持连续性,和空间叙述;

 

交互设计中,这种动效可以暗示观察者视角的变化,也可以暗示静止的视角下对象改变位置。通过连续性和叙述来支持可用性,帮助用户在界面对象和目的地之间无缝转换。

 

还可以结合维度原则,产生更多空间体验,更深入像用户传达当前视图”在前面”或”后面”的其他区域或内容,以帮助用户创建空间心理模型。

 

通过以上12点动效设计方式,可以帮助我们更好地理解APP动效设计中单一元素的变化方式。我们在实际工作中可以进行不同的组合,来衍生出各类复杂并变化丰富的动效,提升功能可用性,强化情感触达。

 

青岛青设网络科技有限公司是国内领先设计团队和营销策划服务商,专注于5G技术下平面设计,UI设计,BS系统设计,网站开发,SEO,自媒体,百度百科知道、知乎等百家号,排行榜,删除负面,媒体发文等营销宣传。帮助企业解决5G时代三维动态化站点的设计改造,为客户提供网站一站式解决方案。

 

**本文内容来源网络,经AI自动调整,信息仅供参考**


暂无评论



发表评论

电子邮件地址不会被公开。 必填项已用*标注