怎样提升界面动效设计的效果？

界面动效设计 2020年11月25日

界面动效设计是提升用户体验度的重要环节，能否把握住这个点，就看我们UI设计师的基础功底是否到位了。今天小编就来给大家分享一下我的一些能够提升界面动效设计效果的技巧，大家可以互相借鉴参考。

1、页面展开扩展动效

界面中所有的元素都应该是有「重量」的，某个 UI 控件随着动效变化的时候，和周围的元素发生互动，则能够强化这种实体感。

2、按钮点击动效

尝试使用加载指示器来指示状态的变化和进度，类似的方式有很多，重点是在于视觉化的、自然的呈现状态的变化过程，如果搭配上色彩的变化，那么就更好了。

3、提示感叹动效

对于一些重要的组件、事件或者信息，使用类似呼吸式的动效来强化效果是自然且干扰性较低的，这样的界面动效设计让元素的重要性得到凸显，还不会让用户感到反感。

UI界面动效设计

4、标签页切换动效

当你在设计诸如标签页或者弹出菜单这样的控件的时候，尽量借助动效让内容的位置变化关系呈现出来，这样不仅确保了内容的可见性，而且能够让用户不迷惑。这个时候，滑动手势交互和位移动效是不错的搭配，非常符合此处内容切换的语境。

5、卡片的展开动效

最好的动效往往能够通过变化让人明白两种状态之间的内在关联。在制作不同状态之间变化的动效的时候，注意两个界面中共享的元素，并且将它作为桥梁，将两个界面状态连接到一起。在使用 InVision Studio 创建原型的时候，这种同时存在前后两屏中的控件会自动连接起来，构成动效。这一功能使得动效的构建更加便捷。

6、在列表中使用瀑布式展开动效

瀑布式的展开动效只需要通过明显的延时就能够实现，适当地控制节奏，让整个加载速度适当的减缓而不会太慢，让用户能够感知到这个过程即可。谷歌建议每个元素的延时不超过20毫秒。你可以在 Material Motion 中看到设计的原理和更多的实例。

以上就是小编给出的界面动效设计建议，如果大家还有其他解决不了的UI设计问题，可以来咨询我们蓝橙互动网站客服，这里有专业UI设计师，成熟的UI设计团队，相信能够为你解答任何问题，并且也能为你定制设计UI界面。

ui设计资讯

NEWS

让您了解更多关于ui设计信息

海报设计|裂变营销的形式和方法

现在做营销，有一个词汇是比较流行的——裂变营销，这种营销方式其实指的就是终端市场的裂变，其核心内容就是：市场开始不要全面摊开，急速发展，而要精耕细作，全力以赴进行单点突破。

2021年02月26日

朋友圈宣传海报设计如何吸引用户

我们时常见到的朋友圈宣传海报，总是脱离不了海报的性质，总是为了宣传而宣传，不能够把最直观的内容传递到用户那里，而且在设计上，总是会有一些瑕疵，导致吸引用户的效果也大大降低。

2021年02月25日

产品图标设计的方法和绘制技巧

现在是一个看脸的时代，不论是您的人，还是您的产品，都需要高颜值，这样人们在您身上（产品上）的关注度才会更高，就拿产品图标设计来讲，一个好的产品图标设计能够吸引更多用户的关注，

2021年02月24日

常见的海报设计九大类型汇总

海报，对于商家而言，主要是用于产品宣传推广，它最突出的特点就是吸引用户群体的注意，从而进一步了解产品特征。而针对不同的行业，海报设计的类型也会有所不同，

2021年02月23日

产品图标设计的规范和尺寸

企业在进行产品图标设计的时候，往往不知道产品图标设计的规范和尺寸。为了让大家对此有更深入地了解，下面我将会为大家介绍产品图标设计的规范和尺寸。

2021年02月22日

商业产品界面图标设计的方法

图标作为商业型产品界面的一个重要组成部分，是整个产品的视觉符号。图标设计是体现专业水平的重要方面，一个好的图标设计能够为产品带来更佳地视觉效果，但由于很多人缺乏这方面的技术。

2021年02月22日

常见的banner设计风格汇总

现在的banner设计可以说是设计中比较重要的一环了，但banner设计毕竟不是一个大项目，因此留给设计师设计的时间并不是很多，所以我们就需要在效率上有所提高，而除了效率，其设计风格也是非常重要的。

2021年02月21日

新年电影海报设计要如何吸引用户

马上就是新年了，在新年里，有几部即将上映的电影，比如《你好，李焕英》、《刺杀小说家》等都会在春节期间上映，这对于很多喜欢看电影的用户而言，无疑是一个令人欣喜的消息，而在此期间，如果商家要为这些新年电

2021年02月08日

商业图标设计如何为商家获客引流

现在的商业图标对于商家而言有着重要的品牌宣传作用，因此商业图标设计的好坏将会直接影响商家品牌在大众心里的第一印象。而作为商家，又该如何利用商业图标设计来为自己的品牌获客引流呢？

2021年02月08日