UI动效设计这些到底该不该继续？

这篇短文将会评论UI方案中动画的过度运用，并将其与前期的视觉方案进行对比，提出一些对于有用的GUI动效方案的建议。

创新互联将在下文中，简略评论怎样改进下面的这个交互。

UI动效方案的不好案例

注：这个不好案例并非假定，而是来自近期的真实客户案例。

概述

自从 70、80 时代首个光栅图像在CRT屏幕出现以来，我们对于(数字)视觉方案的心情一直在不断进化。与其他艺术领域不一样，在数字方案领域暴露的趋势，与运用设备的展开史紧密有关。

设备才干的进步众所周知，闪现器技能使分辨率从CGA320*200，到VGA的640*480，然后到SVGA的800*600，到现在已敏捷进步至4k及以上。

类比视觉方案展开进程

动效方案正在履历生长的苦楚，正如在当年90时代和21世纪初的视觉方案。追溯视觉方案进化展开的进程，有助于我们去理解现时期的动效方案。

21世纪前期的页面方案

在更精妙的方案言语出现之前，方案师们在前期时期简略乱用新功用，这是正常的。90时代末和21世纪初的界面方案师，应当还记得以暗影、斜角、高光，无留白这特征的过度方案。当方案师们着迷于新媒体，并沉醉于像素的美好时，这一成果再天然不过了。

扁平化方案

扁平化方案示例

不论你喜欢与否，扁平化方案在方案圈中已成为干流思想。全部的首要系统渠道(Android、iOS、OSX、Windows、Windows phone)都现已初步拥抱这种极简方案言语。同时，它还操作着高速展开的页面方案。

扁平化方案是视觉方案考虑老到的体现。它是一个天然的进程，一方面是被潮流和时尚唆使，另一方面折射出业内人士总算逐渐掌握了数字媒体 。

动效方案

现时期的动效方案，可以类比视觉方案史的“暗影时期”。

页面动效才干有了明显进步，得益于CSS中的过渡特色(transition)和被硬件加速支撑的变形特色(transform)，以及正在展开的标准，如JS动效(JS Web Animations)。

另外，现在的移动设备因为其不断精进的功用，以及多核、多存储、高dpi等优胜的特性，可以流畅地输出60fps动画效果。

让全部东西都动起来!这么的动效似乎让人回到了1999年。

考虑到现在是UI动效的前期方案时期，方案师企图通过增加动效来增强视觉亮点，和从前的暗影和斜角没什么不一样。

可是我很深信，与视觉方案不一样，动效方案的老到不需要耗时15年。

过度的动效运用

无意义的动效随处可见，它们也不只出自业余方案师之手。作为用户，我们可以很轻易地发现这种阻止着你的动画，它阻隔着你和你的政策，令你迷惑皱眉。作为方案师，你需要认识到你的UI方案并非什么文娱。没有人只为看着酷炫的动效爽，就运用你的app或许页面。

UI动画的运用反例

OS X的全屏动画

桌面端和移动端都有很多的差劲UI动画示例，其中之一，便是OS X的窗口切换到全屏方法的过渡动画。因为它来自因前沿的方案感著称的苹果公司，且是旗舰产品的首要特色，所以格外令人迷惑。

(视频：5-yosemite fullscreen.mp4)

这个UI动画有以下几个疑问：

缓慢

非必要

不可设置(除非通过命令行修正)

怎样知道你的UI动效使人厌烦?我们会在博客上写文抱怨。很多评论怎样加速或禁用动效的博文和论坛疑问帖，都很有力地阐明这个转场动效除了让用户烦恼，毫无效果，这是UI动效方案的一个大忌。

动效方案案例研讨

我们运用一个简略方案做示例，它来自我近期为客户进行的工作。这个交互包括了一些差劲的方案决议方案。

UI动效方案的不好案例(线上demo)

这个方案包括如下疑问：

遮挡了界面的蒙层

缺少后台正在实行操作的指示

动画缓慢

动画非必要

这个动画最烦人的一点，是在耗时间的网络央求完成后，这个动画才发生，致使增加用户额定的等待时间。

动画是不是必要?

首要疑问理应为：这个动画进步了用户领会吗?

上述交互案例中，出现了精确运用UI动画的好时机。考虑到这一交互需要一个耗时100-500毫秒的网络央求，这是个运用动画来掩盖央求耗时的绝好时机。

方案改进

改进1(线上Demo)

这是很小的一个改进，增加一个加载指示器，告诉用户正在等待额定的数据。可是，弹出动画是剩下的，减缓了用户流程。

改进2

删减了不必要的滑出动画，运用户在操作后即可看到所需数据。蒙层的运用阻挡了用户视图，是剩下的打扰。

动画——障眼法

推延，即使是网络运用的推延，通过缓存和预读取本钱，也可以减少甚至消除。可是这种方法也有其疑问。运用流量有限的移动网络的用户，并不情愿运用预读取很多或许底子不不需要的数据。

考虑到推延并不总能完全避免，我们可以运用动画制造更妥当的错觉。这种情况下，运用分层动画格外有用。

改进3

改进如下：

运用了不遮挡界面的加载指示。

堆叠的动画分散了用户对数据读取推延的注意力。

渐进式加载

渐进式加载可用来进一步减少可感知的数据加载时间。用户底子不可能立刻用到运用展现的全部数据。通过分块下载、数据可用后再闪现信息的方法，用户会发生运用比实际上呼应更及时的错觉。

改进4

很多留言的人，包括来自用户领会社区的Isak Falch，举荐我运用“拓宽式卡片”，这个方法最真实的优点是坚持了用户对上下文环境的感知。

作为另一种备选方案，也现已完成如下：

改进5

结论

我们要注意，不要重复方法跨越功用的过错。动画可以且应当运用于加强网站或运用的用户领会，而纯装饰性的动画效果设计，不太或许有助于产品变得非常好。

当前文章：UI动效设计这些到底该不该继续？
链接分享：https://www.cdcxhl.com/news/169599.html

成都网站建设公司_创新互联，为您提供微信公众号、面包屑导航、域名注册、网站制作、网站内链、网站设计

广告

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