设计资讯干货之优秀动态设计的6个特征

创新互联跟您聊一聊优秀动态设计的6个特征：

功用性动画是具有明确的、合乎逻辑的意图的奇妙动画。它可以下降用户在认知上的负担，阻止毫无预兆的改动呈现，并在不相同页面、元素、层级间建立起一套非常好的空间关系。还有主要的一点便是，动画运用户界面更契合实在。

经过在用户界面间游刃有余的呈现，并改动它们的形状和巨细，动画可以运用户界面散发出生气。你应当在具有导航含义的上下文间切换时、在解释页面元素的状况改动时、在强化元素的层级关系时思考运用合理的动画来完结这时期平滑的过渡。

成功的动态规划具有以下六个特征：

1、应对式的

在UI规划领域，视觉上的反应是极其主要的，好的视觉反应之所以起到作用是因为它契合了大家在认知上的天然预期。想想看，在实在日子中，按钮，控件和别的物品大都可以关于咱们的操作做出友爱的呼应，而这种实在的体验也应当迁移到界面规划中。

用户界面应当精确的在用户触发动作的当地及时呼应，并显示出触发的动作或元素本身跟新界面间的联络。对用户来讲，可以在应用程序中触发必定操作后意识到发作了啥是非常棒的感受。

2、相关的

相关性是以新的办法创建出那些在元素或动作的作用下所触发的新界面。相关性背面的逻辑是协助用户了解刚刚在视图规划中发作的改动以及触发的源头。

下面可以看到两个关于菜单改变的比如。例1中，菜单呈现在远离触发点的方位，这种办法打破了两者间的相关性。

在例2中，菜单便是从触发点方位呈现，好似菜单和触发点绑定在一同，其相关项显而易见。

另一个比如是在特定条件下功用改动的操作按钮。“播映” 和 ”暂停” 可能是最遍及的一个比如。 将播映按钮变换为暂停按钮意味着两个动作是相关的，在操作时按压一个按钮后就将闪现别的一个。你应当在一个动作的不相同状况间测验运用这种过渡动画，使它看起来平滑而不失连续性。

3、天然的

防止呈现意外的改变。每一个动作都应当能映射到实在国际中。在实在国际，一个物体加快或减速要首要取决于本身的分量和接触面的摩擦力巨细。类似的，在一个用户友爱的界面中，开始和结束都不要是出人意料的。

下面是一个极好的比如，用户挑选一个列表项后扩大检查其详细信息，在卡片的拓展进程中，本来的小卡片遵从了一条面向结尾的弧线型轨迹。

4、 有意的

用户引导应当在适宜的时刻呈现在适宜的地址。动态改动，因其实质影响，在一个用户界面中具有高的吸引力。文本阶段和静态图像都无法与其比较。一个规划优异的转场能带领用户从一个交互到另一个交互。

关于一个菜鸟用户，他常常不能猜测一个即将发作的交互动作会是如何的，而适宜的动画则可以指引用户且不会让用户觉得内容的改动太过俄然。

Mac OS在最小化窗口的时分运用一个功用性的动画作用。这个动画将窗口的两个状况连接在了一同。

另一个极好的案例是下面这种父子层级间的转场，用户挑选了一个列表项或者卡片元素，然后经由动画办法打开其详细信息的视图。这么的转场作用答应了用户在改动前后坚持上下文联络。

5、迅速的

元素在不相同的方位或状况间改变时，其运动应当满足快到不用让用户等候，但一起也要满足缓慢好让用户可以了解这个进程(迅速的一起确保用户了解)。

不要让动画太慢，好像是产生了不用要的延迟得让用户等候相同。

减缓许多元素的改动速度会延伸全体动态改动的时刻。

让你的动画满足快确保用户不用等候这个进程的逐步完结。

想想看，许多转场用户是会频繁看到的，你必定要让这个进程够快，别让用户总是等。这个时刻应当控制在300ms以下。

6、洁净的

转场动画应当防止一次性做太多工作，试想在有多个项目需求朝不相同方向或不相同途径移动时，看上去不紊乱才怪。

转场应当明晰、简略而连接共同。关于动画而言，少便是多。因而咱们应当重视于对用户起到实用性作用的动画作用。

定论

最终主要的一点是，动态改动绝不是随机的，每一个动作的背面必定有其实践意图。它协助指引用户重视于那些主要的当地而不至于迷失自个。不论你的应用程序是风趣好玩的仍是严厉直接的，运用适宜的动态规划设计准则必将可以帮你向用户供给一个洁净而富粘性的用户体验。

网站标题：设计资讯干货之优秀动态设计的6个特征
本文路径：https://www.cdcxhl.com/news8/171908.html

成都网站建设公司_创新互联，为您提供网站策划、自适应网站、服务器托管、App开发、面包屑导航、网站制作

广告

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