020-29815005
预约专线时间:09:00-23:59

UI设计中动效的主要类型有哪些?

新闻来源:本站 日期:2022-04-01
所有设计师都应该懂的动效设计,无论是点击、长按、拖拽、滑动等交互行为,都应该得到系统的即时反馈,将其以视觉或动效的方式展现,帮助用户了解当前系统对交互过程的响应情况,为用户带来安全感。

  UI设计中动效的主要类型有哪些?结合uec的实际案例介绍并分析几种常见的动效类型。


UI设计中动效的主要类型有哪些?


  (1)衔接动效


  在我们平常看到影视节目中,大部分镜头采用跳切的形式(画面直接切换没有任何衔接形式),这是因为影视作品的内容直观,主线明确,且观众与用户的之间存在巨大差别,前者大部分处于被动,而用户则会带着目标和任务进行操作,此时应用只要跟用户有互动,就会有状态的变化,而绝大多数的变化都是由界面视觉展示的。这时,界面上的状态变化,是否有过渡,过渡的是否流畅,动效本身承载的信息是否清晰,就直接的影响着用户的感受。在内容优先的设计趋势下,用户界面变的更加简洁。这将给用户带来操作上的认知障碍,动效则可以在不打破界面美感的前提下,弥补认知的损失。

  衔接动画主要分为页面间的衔接以及同一页面下不同元素/状态的衔接。

  页面间的衔接-传递层级信息

  所有设计师都应该懂的动效设计

  转场动效的应用最多,用来向用户传达层级信息,告知用户界面前后变化,帮助用户理解产品结构(当呈现模型与用户心理模型重合度越高,产品功能就越容易被用户理解)。

  所有设计师都应该懂的动效设计

  错误:页面出现的形式与当前页面关联性不强,也无法正确引导用户的手势操作

  所有设计师都应该懂的动效设计

  正确:明确传达产品的结构,深化层级关系

  页面内的动效-传达界面内元素的变化

  所有设计师都应该懂的动效设计

  页面内的动效主要用来阐述内容的展示以及状态的变化,给予用户反馈:

  1.强调空间感(x·y·z轴的空间扩展,阐述功能)

  2.引导视觉焦点(吸引功能)

  所有设计师都应该懂的动效设计

  错误:元素的改变过于生硬,从属关系不明确

  所有设计师都应该懂的动效设计

  (2)响应动效

  所有设计师都应该懂的动效设计

  无论是点击、长按、拖拽、滑动等交互行为,都应该得到系统的即时反馈,将其以视觉或动效的方式展现,帮助用户了解当前系统对交互过程的响应情况,为用户带来安全感。

  所有设计师都应该懂的动效设计

  错误:操作无反馈,可能造成用户任务的多次提交

  所有设计师都应该懂的动效设计

  正确:第一时间反馈用户的操作,告知用户操作是否有效

 (3)演示动效

  多用于动态引导页,旨在吸引用户注意力,帮助用户理解产品功能或展示作者想法

  案例来自WPSMail4.0的启动动画,将产品功能以抽象的动画形式表现,在思路上有以下几个重点:

  三要素的体现

  所有设计师都应该懂的动效设计

  请注意左图中物体通过使用不同运动曲线和形状变化手段所呈现的重力感,惯性,以及弹性,这使得动画更加生动

  通过观察生活得到的灵感

  所有设计师都应该懂的动效设计

  通过观察生活,我们能够得到一些启示,并从中找到联系和设计依据

  (4)加载动效

  所有设计师都应该懂的动效设计

  众所周知,app服务器在加载数据的时候需要用户等待一段时间,为了缓解用户等待过程中的焦虑情绪,设计者可以采用加载动画的方式来缓解用户的等待时间,使整个等待过程变得更加友好、流畅。

  一个好的加载动画分为两个层次,第一个层次是满足用户的基本心理预期,缓解等待的焦虑;第二个层次是要给出用户一定的惊喜,加载动画的常见使用场景一共分为以下几种:

  下拉刷新加载

  下拉刷新可以让用户在看到本地数据的同时去重新加载数据,以确保用户可以看到最新的内容。

  下拉加载一般分为两种形式:

  图文结合

  所有设计师都应该懂的动效设计

  动画加文字的形式相对简单,因为有辅助文字,所以对于“达意”这一项原则的把握不难。

  示例是WPSCalendar的列表加载动画,在这个动画有一个细节:上拉加载未来事项的时候出现的时钟为顺时针旋转;下拉加载过往事项的时候则是逆时针旋转,在实际案例中我们往往需要结合现实生活中的规律进行设计,使得作品的体验更优。

  单一的动画形式

  所有设计师都应该懂的动效设计

  动画形式相对复杂,对设计师的图形表现能力要求更高,示例是WPSMail的列表加载动画,在产品中,下拉刷新=收取新邮件,邮件则在原有的版本中以纸飞机表示,相应的,收取新邮件可以认为是飞机飞入,于是延续飞机的设计,围绕着邮件与飞机的思路,以飞入邮箱的形式来展现“收取新邮件”的主题。

  自此确定了动画的方向:纸飞机与邮箱。

  页面数据加载

  所有设计师都应该懂的动效设计

  当切换到新页面时,常常会有加载数据的时候,这也是加载动画使用最多的场景,市面上的加载样式也是多种多样,如:toast加载、进度条加载等。

  预加载

  为了缓解用户启动app时的等待时间,有些app会将启动页设计成一个加载动画,如京东、百度贴吧等,不仅使等待时间变得有趣,并且增加了品牌记忆,达到了一箭双雕的效果。

  所有设计师都应该懂的动效设计

  (5)logo动效

  所有设计师都应该懂的动效设计

  一个设计足够优秀突出的LOGO,能够和用户建立联系,能够帮助企业建立起品牌形象。而动态LOGO是一种更为现代、更为动态的品牌呈现方式。能够更好的吸引用户注意力,提升品牌认知,让logo利用方式更加多元化。

  更高的品牌识别度

  动态图形比静态的图像更容易为用户所理解,也更容易被记住。

  更好地呈现故事

  和静态的LOGO不同,动态LOGO可以呈现的不仅仅是视觉效果,甚至一个简短的故事。它可以成为产品或者公司的独有故事的载体,也能同用户更好地建立情感联系。  

  以上就是优漫教育小编为大家介绍的“【UI设计培训】UI设计中动效的主要类型有哪些?”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !