停止不必要的UI动效设计.pdfVIP

停止不必要的 UI 动效设计 前言：这篇短文将会探讨 UI设计中动画的过度使用，并将其与早期的视觉设计进行对比，提出一些 对于有效的 GUI 动效设计的建议。我们将在下文中，简单探讨如何改善下面的这个交互。 UI动效设计的反面案例（线上 Demo ） 注：这个反面案例并非假设，而是来自近期的真实客户案例。 概述 自从 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动效设计的一个 大忌。 动效设计案例研究 我们使用一个简单设计做示例，它来自我最近为客户进行的工作