停止不必要的UI动械魔设计.pdf

停止不必要的U I动效设计 前言 ：这篇短文将会探讨UI设计中动画的过度使用 ，并将其与 期的视觉设计进行对比 ，提出一些 对于有效的GUI动效设计的建议。我们将在下文中 ，简单探讨如何改善下面的这个交互。 UI动效设计的反面案例 （线上Demo ） 注 ：这个反面案例并非假设 ，而是来自近期的真实客户案例。 概述 自从 70、80 年代首个光栅图像在CRT 屏幕出现以来 ，人们对于 （数字 ）视觉设计的态度一直在不 断进化。与其他艺术领域不同 ，在数字设计领域显露的趋势 ，与使用设备的发展史紧密相关。 设备能力的提升有目共睹 ，显示器技术使分辨率从CGA 320*200 ，到V GA 的64 0*4 80 ，然后 到SV GA 的800*600 ，到现在已快速提升至4 k及以上。 类比视觉设计发展历程 动效设计正在经历成长的疼痛 ，正如在当年90年代和21世纪初的视觉设计。追溯视觉设计进化发展 的过程 ，有助于我们去理解现阶段的动效设计。 21世纪初期的网页设计 在更精妙的设计语言出现之前 ，设计师们在初期阶段容易滥用新功能 ，这是正常的。90年代末和21 世纪初的界面设计师 ，应该还记得以阴影、斜角、高光 ，无留白这特征的过度设计。当设计师们着 迷于新媒体 ，并陶醉于像素的奇妙时 ，这一结果再自然不过了。 扁平化设计 扁平化设计示例 不管你喜欢与否 ，扁平化设计在设计圈中已成为主流思想。所有的主要系统平台 （A ndro id、iO S、 O SX 、 indows、 indows pho ne ）都已经开始拥抱这种极简设计语言。同时 ，它还主宰着高速 发展的网页设计。 扁平化设计是视觉设计思考成熟的体现。它是一个自然的进程 ，一方面是被潮流和时尚驱使 ，另一 方面折射出业内人士终于逐渐掌握了数字媒体 。 动效设计 现阶段的动效设计 ，可以类比视觉设计史的“阴影阶段”。 网页动效能力有了显著提升 ，得益于CSS中的过渡属性 （t ransit io n ）和被硬件加速支持的变形属 性 （t ransf o rm ），以及正在发展的标准 ，如JS动效 （JS eb A nimat io ns ）。 另外 ，现在的移动设备由于其不断精进的性能 ，以及多核、多存储、高dpi等优越的特性 ，可以流畅 地输出60f ps动画效果。 让所有东西都动起来 ！这样的动效仿佛让人回到了1999年。 考虑到现在是UI动效的 期设计阶段 ，设计师试图通过增加动效来增强视觉亮点 ，和曾经的阴影和 斜角没什么不同。 但是我很确信 ，与视觉设计不同 ，动效设计的成熟不需要耗时15年。 过度的动效使用 无意义的动效随处可见 ，它们也不仅出自业余设计师之手。作为用户 ，我们可以很轻易地发现这种 妨碍着你的动画 ，它阻隔着你和你的目标 ，令你困扰皱眉。作为设计师 ，你需要意识到你的UI设计 并非什么娱乐。没有人只为看着酷炫的动效爽 ，就使用你的app或者网页。 UI动画的使用反例 O S X 的全屏动画 桌面端和移动端都有无数的糟糕UI动画示例 ，其中之一 ，就是O S X 的窗口切换到全屏模式的过渡 动画。因为它来自因前沿的设计感著称的苹果公司 ，且是旗舰产品的主要特点 ，所以格外令人困惑 。 （视频 ：5-yosemit e f ullscreen.mp4 ） 这个UI动画有以下几个问题 ： 缓慢 非必要 不可设置 （除非通过命令行修改 ） 如何知道你的UI动效使人厌烦 ？人们会在博客上写文抱怨。无数探讨如何加速或禁用动效的博文和 论坛问题帖 ，都很有力地说明这个转场动效除了让用户烦恼 ，毫无作用 ，这是UI动效设计的一个 大忌。 动效设计案例研究 我们使用一个简单设计做示例 ，它来自我最近为客户进行的工作。这个交互包含了一些糟糕的设计 决策。 UI动效设计的反面案例 （线上demo ） 这个设计包括如下问题 ： 遮挡了界面的蒙层 缺少后台正在执行操作的指示 动画缓慢 动画非必要 这个动画最烦人的一点 ，是在耗时间的网络请求完成后 ，这个动画才发生 ，导致增加用户额外的等 待时间。 动画是否必要 ？ 首要问题理应为 ：这个动画提升了用户体验吗 ？ 上述交互案例中 ，出现了正确使用UI动画的绝佳时机。考虑到这一交互需要一个耗时100-500毫