推广 热搜: 大学生  怎么写  怎么使用  作用  高的  时间  原理  金鱼  怎么分类  较好 

产品如何快速构建ui动效 产品如何快速构建ui动效策略

   2023-02-01 勤学网4365
核心提示:如果容器从屏幕边界进入,它会淡入并放大。它不从0%开始制作动画,而是从95%开始,以避免元素之间过渡太多。下面来讲讲产品如何快速构建ui动效,希望对你有帮助。移动性有助于使ui更具表现力,更易于使用。尽管它有很大的潜力,但它可能是ui设计家

产品如何快速构建ui动效 产品如何快速构建ui动效策略

如果容器从屏幕边界进入,它会淡入并放大。它不从0%开始制作动画,而是从95%开始,以避免元素之间过渡太多。下面来讲讲产品如何快速构建ui动效,希望对你有帮助。


移动性有助于使ui更具表现力,更易于使用。尽管它有很大的潜力,但它可能是ui设计家族中最新的成员之一,所以它可能是所有设计学科中最少的。为公众所知。视觉设计和交互设计可以追溯到早期的Gui,但是由于动画必须由现代硬件平滑地呈现,而且ui运动和传统动画之间的重叠使得两者之间的区别更加复杂。传统动画需要掌握迪士尼的12条基本原则。这是否意味着ui动画和传统动画一样复杂?我经常听到人们说动效设计很复杂,我不知道如何选择相应的动画模式,但我认为至少在ui领域,动效设计可以很简单。

动效设计主要作用是帮助用户浏览应用程序,通过ui元素之间的关系过渡。当然,你也可以通过使用图标、奖章和插图效果为应用程序添加颜色,但是构建产品可用性应该优先于添加动态性能。在展示你的动效设计技能之前,让我们先设计一个基本的运动,即产品导航之间的转换。

过渡模式

在设计导航之间进行转换时,简单性和一致性是最关键的。为此,我们将在以两种动画模式进行选择:

1. 基于容器的过渡

2. 没有到容器的转换

如果动画包含按钮、卡片或列表等内容,那么使用基于容器的动画设计,容器通常有明显的边界。这个模式分为三个步骤:

1. 使用材质的标准缓动使容器具有动画效果(这意味着它可以快速加速,然后缓慢减速)。

2. 缩放容器中的元素以适应宽度,将元素固定在顶部,但仍然在容器中,在容器和内部元素之间创建一个清晰的关系链。

3.当容器加速时,它会在转换期间淡出。随着容器变慢,输入元素逐渐淡入。当元素快速移动时,元素被淡入替换。

将此模式应用于所有涉及容器转换的效果,这些转换建立一致的运动规则。这也使得开始和结束之间的关系更加清晰,因为它们由两个动画容器连接。为了展示这个模型的灵活性,它被分为五个不同的使用场景:

有些容器只是使用材质的标准缓动功能从屏幕上滑动进来,它滑动的方向取决于与之关联的组件位置。例如,单击左上角的折叠项导航,图标将从左侧滑动容器。

如果容器从屏幕边界进入,它会淡入并放大。它不从0%开始制作动画,而是从95%开始,以避免元素之间过渡太多。变焦动画使用了材质的减速,这意味着它从峰值速度开始,然后逐渐减速。当元素退出时,容器将在没有缩放动画的情况下淡出。

过渡没有容器

有些作品会使用没有容器的转换来构建动态设计,例如点击底部导航栏中的图标,将用户带到一个新的页面,在这种情况下,将使用以下两个步骤:

1. 开始的元素通过淡入消失,然后最后的元素通过淡入进入。

2. 当最后一个元素出现时,使用材料的减速运动来微妙地显示。但同时缩放只适用于新旧内容的替换。

 
反对 0举报 0 收藏 0 打赏 0
 
更多>同类开店资讯
网站排行
推荐网站
网站首页  |  你好 测试  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  网站留言  |  违规举报