如何设计出色的动效?最近越来越多公司开始做动效设计，也有不少团队意识到动效对产品的重要性。作为设计家族的新成员，动效在网页设计中拥有巨大的潜力，能让网页设计更具有表现力和易用性。
很多人说UI动效设计很复杂，参数的选取也非常模棱两可。但其实只要看完以下的内容，你会发现动效设计其实可以很简单。
网页设计技巧
制作动效设计，要从哪里开始?
要制作动效设计，我们先了解一下动效的主要作用-用於呈现网页中不同元素间的关系，帮助用户在界面间进行导航;或加持到图标、Logo、插画等元素，给UI赋予个性，加深用户对产品的印象。
在探讨动效如何给网页设计拓展调性和个性之前，首先我们应该关注如何藉助动效优化过渡，构建强大的动效基础。
如何设计出色的动效?
一、关於转场过渡的设计模式
在考虑网页设计的过渡效果时，简单性和一致性都是两大关键属性。为了做好这两点，通常会根据以下两种不同情况来设计：
1.基於某个容器的转场动效
在网页设计中，如果转场动效牵涉到按钮、卡片或列表等元素，通常会基於这些容器进行设计。
网页设计技巧
大多容器空间都会有着清晰的边缘，但在动效出现之前，边缘可以是不可见的。
【运用方式】
网页设计技巧
① 容器动效使用Material 中的标准缓动。
网页设计技巧
② UI元素在容器内缩放过程中，会基於宽度自适应调整，使元素和容器之间的相互关系更加清晰。
网页设计技巧
③ 动画变化前阶段，变化速度逐渐加快。当整个动效足够快时，整个过程都显得无缝而自然。
【特点】
这种动效设计规则非常清晰，如果将它应用到整个界面的不同控件上，能建立出一致的动效样式。加之，整体动效设计的变化都是依靠容器连结，无论是开始还是结束的过程中，界面都有着非常清晰的逻辑关系。
2.不存在容器情况下的转场动效
很多动效都是在没有容器的承载下构建的，比如点击APP设计中置於底部的导航按钮，将会让用户进入一个全新的界面中。
网页设计技巧
【运用方式】
①前一个组件或元素开始淡出消失，随後新的组件或元素开始淡入。
②随着前一个组件消失，後一组件会使用Material Design的减速换减速缓动动效，巧妙呈现。
网页设计技巧
【特点】
如果网页设计开始和结束的过程中，都有着清晰的空间关系和逻辑顺序，那麽选用这种过渡转场方式，能强化设计的一致性。
二、关於转场过渡的设计案例
1.保持简约
鉴於动效的使用频率非常高，加上和设计的可用性有密切相关，所以导航过渡效果的功能性应更加优先，而非风格。
通常，引人瞩目的动效并不一定需要风格化(具体视实际情况而定)，反而和小图标、Logo、加载器和空状态等元素或界面搭配会更加适合，所以这类动效确保品牌整体风格一致就可以了。
网页设计技巧
2.选择合适的时长和节奏
进行网页设计的时候，要注意动效转场所持续的时长，这应该是考虑到它的功能性。转场速度太快会让用户感到迷惑，太慢则会让用户产生厌烦的情绪。
网页设计技巧
这可以根据用户在界面停留的时长来估算动效的持续时长。
按照以往导航过程中，用户在导航中所驻留的时长进行判断，300s的动效时长是个值得参考的数据。而其他更小的UI空间，动效持续时长需要缩短，通常100ms就足够了。
* 如果以上参考数据无法套用到你的某个动效设计中，可以25ms为单位调整动效速度，直到它达到你的预期效果。
看完以上内容，如果你还是觉得运用动效设计有难度，可直接采用Material Design中的标准缓动。这种动效能让元素具备更加自然的物理质感，让用户更容易注意到整个变化的结果。
完成基本的转场动效设计後，就可以考虑更加细化和个性化的设计和挑战。到这时简单的动效不能满足的地方，你可添加生动多变的动效，让你的网页设计更加有趣。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/42754.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
