动态设计并不难！本文简单带您入门

1 容器本身的动态效果使用材质中的标准缓动（此缓动动画加速，加速度快，然后速率逐渐减慢）。在此示例中，容器的大小和形状发生了变化，从圆形按钮变为满屏幕的矩形。

2  UI元素在容器内缩放，并在处理过程中根据宽度自适应调整。容器中的元件固定在容器的顶部，随着顶部延伸而自然延伸，并且所有元件都被容器覆盖。这种设计使元素和容器之间的关系更加清晰。

3 在动画改变的前一阶段，变化的速度逐渐增加。以最快的容器更改速率，容器中包含的UI元素淡入，并且变化率开始减慢。当整个动作足够快时，整个变化过程将是无缝且自然的。

此动态设计规则非常清晰，如果将其应用于整个界面的不同控件，则可以建立一致的动态样式。而且，这种动态在开始和结束之间具有非常明确的逻辑关系。整体变化依赖于容器链接。为了演示此模型的灵活性，我们将其应用于五个不同的控件：

许多这些容器仅使用Material Design中的标准缓动动画来呈现从屏幕外部滑动的效果。它滑动的方向取决于该容器与相关组件之间的位置关系。例如，如果单击左上角的导航菜单按钮，则会从屏幕左侧输入菜单扩展的滑动效果。

如果容器从屏幕边缘进入，它将逐渐淡入并放大。但是，动画渲染的元素大小不是从0％开始，而是从95％开始。这与大化macOS窗口大小的神奇效果完全不同。这是为了防止用户过多地关注动画。此缩放动画使用材质设计的减速缓动效果，这意味着运动的速度在开始时达到峰值，然后减慢。在退出时，容器淡出，几乎没有缩放。退出动画将比输入动画更加微妙，因此用户将比将要消失的信息更多地关注新内容。

没有容器的过渡效果

在没有容器负载的情况下构建了许多动画效果。例如，单击APP界面底部的导航按钮，将用户完全带到新界面。在许多情况下，此活动将遵循以下两个步骤：1 前一个组件或元素开始淡出，新组件或元素开始淡入。

2 当前一部分消失时，后一个组件将使用Material Design中的减速缓动效果进行微妙扩展。同样，明显的缩放应该只应用于新输入的部分，而不是缺少的部分。

注意：为了让您更容易看到，动画显示速度变慢，实际上速度会快得多。

如果开始和结束具有明确的空间关系和逻辑顺序，则可以使用类似的 共享效果来增强设计一致性。例如，在以下两种情况下，当在左侧执行导航操作时，当最终淡入时，所产生的运动将在垂直方向上具有微妙的运动。在右侧的情况下，在新用户中进入过程中，所有操作开关都有一个水平缓和。所有这些只是使用Material Design中的标准缓动，这足以创造这种一致性。

最佳实践

把事情简单化

考虑到运动的高频率使用，它与设计的可用性密切相关，导航过渡的功能比风格更受欢迎。当然，这并不是说它不应该是程式化的，只是它足以确保品牌的整体风格是一致的。引人注目的效果通常更适合小图标  LOGO 加载器和空状态等元素或接口。在以下示例中，动态设计相对简单。这些设计可能不会在Dribbble上得到很多赞誉，但它们是更具动态性的设计，可以适应各种应用。

选择合适的长度和节奏

例如，导航开关的运动转换的转换应该优先于其功能，要整洁，但不能太快。太快会让用户感到困惑。可以基于用户在界面上停留多长时间来估计动态效果的持续时间。根据导航过程的持续时间，用户导航页面的持续时间为300毫秒。这是一段值得参考和使用的时间。相反，在较小的UI控件中，效果的持续时间较短，通常100毫秒就足够了。如果您觉得运动设计得太快或太慢，请在25毫秒内调整速度或减速度，直到达到您期望的视觉和体验。

缓和本身描述了动态加速和减速的速率特性。材料设计中的标准缓和可以直接采用大多数动力学效应。这是一种不对称的缓和类型。该功能是开始加速更快，然后更慢地减速，这使用户更容易注意到整个变化的结果。这种缓和使元素具有更自然的身体感觉。因为现实世界中的物体通常不会以恒定速度移动，所以它们不会立即开始和结束，并且缓和不会使过渡和移动看起来很僵硬。

本文中描述的设计模式和最佳实践旨在创建适用于大多数应用程序和网页的真正实用的 微妙效果。当然，有些品牌可能需要更强烈的表达方式。

完成基本过渡动画设计后，您就可以开始考虑更详细，更个性化的设计和挑战。此时，它是不能满足这些简单效果的地方。这更有趣，可变的效果是它此时应该发光。

分享标题：动态设计并不难！本文简单带您入门
文章链接：https://www.cdcxhl.com/news36/325136.html

成都网站建设公司_创新互联，为您提供营销型网站建设、网站策划、网页设计公司、面包屑导航、网站排名、品牌网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联