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

用户界面动画趋势

新闻来源:本站 日期:2021-07-12
由于手机端的不断发展,用户对更加前卫的、独特的界面的需求比以增加,并且在过去的几年中,UI设计已经在动画领域取得了显著的进步。
  若能为大家添加UI动画的设计,不仅能体现您对UI潮流的理解,更能让教授们眼前一亮。

  本文总结了最新UI动画的所有前沿趋势,希望能给大家带来一些启发,把它们用到自己的作品集上。

  让我们从五种高关注度的动画趋势开始:

  三维动态图形。

  3Dmotiongraphics。

  近几年,3D动态图形与UI界面的结合应用正在迅猛发展。尽管制作3D动画比其它动画效果需要更多的时间技巧和协作,但是它的优势是无法替代的。

  与2D图形相比,3D动画更具真实感,其提供的用户体验更具有吸引力和交互性。

  他们不仅通过更具真实感的图片来提升网站或应用的质量,还可以有效地提升app品牌的个性。

  悬停效应。

  Hover effects。

  当前UI动画最常用的技术是悬停效果,而且其使用率有增无减,可以说UI设计者必学动画效果。

  悬浮效果指的是当用户把鼠标悬停在UI元素(比如按钮或者文字)上时所产生的动画效果。悬停的效果有多种花样的表现。

  举例来说,将鼠标悬停在某个单词上会使其颜色改变,或将鼠标悬停在按钮上,或将鼠标悬停在某个菜单项上,会使整个网站改变主题。

  这个让人上瘾的网站导航成为一种有趣的游戏,能够提高用户对它的兴趣,从而增加在网页上停留的时间。

  SebastianJungbluth的这款超酷的悬停效果显示了当它与光标接触时会扭曲海洋。

  使用者把光标悬停在其他元素上时,会情不自禁地探索哪些元素会扭曲,甚至可以变成一个有趣的互动游戏。

  这样的动作动画给使用者一种控制感,增加了在网页上停留的时间。

  变形。

  Morphing。

  形变是一种基于过渡的动画技术,它能使多种形状或图像无缝地融合。作为一种背景效果,这种迷人的变形常常会吸引用户在网页上停留更久。

  这不仅仅是一种简单而有效的在页面中添加艺术元素的方式,而且还可以增加用户的使用时间。

  Simple动画。

  Anthropomorphicanimations。

  拟人是指非人类事物(物体、植物、动物)表现出人的属性。近几年来,人形动画在UI设计中的使用有了很大的提高。

  拟人化动画的本质通常表现在一些细微的地方,比如一个小图标在一段时间静止后由于厌倦而上下摆动,或者角色从眼睛上梳理头发。

  活动范围虽小,但这种效果往往更为生动,使用户更能身临其境,与用户产生共鸣,增加对网站浏览的兴趣。

  TarasMigulko设计的这些可爱的3D棉花糖角色完美地展示了拟人化的动画。

  具有人类特征的设计往往会吸引人,甚至如闭上眼睛或双手摇摆等细微的动作,也能创造出极佳的互动效果。棉花糖呈现出前景,还提高了整体3D效果,使页面更有深度。


UI设计培训


  动态排版

  Kinetictypography。

  基本上,动态排版就是一个移动的文本。而若使用巧妙,则能创造特殊的视觉效果。

  有经验的UI设计者可以通过动态的排版来为文字或句子增加生动的元素、营造气氛和基调,以及吸引用户的注意力。

  动态化的排版可以有很多种方法,挤拉一个字可以让人产生俏皮的感觉,而连续的重复这个词则更具催眠的作用。

  动态排版是目前最受欢迎的,无论是界面、电视广告还是音乐视频。

  设计AtanasGiew在这个“curl”的动画里,设计人员AtanasGiew巧妙地把单词卷曲成螺旋,赋予单词双重含义。添加另一种颜色来增加单词内部的色彩,使其更具有3D效果。扭曲拉伸将所有元素整合到一起。

  在总结了5个备受关注的动画趋势后,让我们再来看看其它网页中一些优秀的例子,希望能给你一些灵感。

  程序动画—OlegFrolov。

  等候页面加载和处理过程是用户最大的痛点之一。有了一个进程或者载入时间的可视化表示,可以让用户了解情况,增强他们前进的感觉。

  OlegFrolov公司推出的这种时钟式动画通过巧妙地旋转经典进度条来吸引用户的注意力,从而容易被方块的运动吸引。

  转换页-AryoPamungas。

  该动画采用了跟踪和重叠动作的原则。每一个UI元素都会以不同的速度到达最终的目的地,背景的形状在你的静止位置之前会变得更大。

  每一个元素在速度和运动上的细微差别让页面感觉更自然。

  动画404-Mochiburen。

  有时候404页面的内容会破坏用户体验。Mochiburon的这个动画把404的错误页面转变成积极的内容。

  一位女士看着表四处张望,好像她和你一样迷惑不解,向用户表明公司在这一问题上与你一致。轻轻摇动的树叶也能引起一种宁静的感觉。

  雪景动画-Outcrowd。

  良好的UI设计是为了吸引用户,并创造一个欢迎的环境,鼓励他们去探索。该主页上唯一的动画元素是雪,背景插图的其他部分都是静态的。

  不过,仅仅加入飘落的雪花就能使画面栩栩如生,仿佛你到了瑞士小屋而非网页主页。这并没有分散页面的功能,而是为用户体验添加了引人注目的生活元素。