火星网校
动效探讨：UI动效，灵魂还是篡改？
发布时间：2024-08-31 10:15:57 浏览量：103次
文 | Sophie Paxton
译 | Vin
校 | 莫小贝
本文将探究UI设计中动画效果的过度应用，通过对比早期的视觉设计，为UI动画的有效设计提供一些建议。
我们也会简要涉及如何改进下文中案例的交互。
（遗憾的是，这并非某个做作的反面案例——而是某个近期客户处拿来的实例。）
简介
自70-80年代CRT屏幕上映第一幅光栅图形以来，人们对数字视觉设计的态度便不断进化。与其他艺术领域不同，数字设计的潮流始终随可用工具的进化而变化。
我们已经见证了设备显示能力的不断进步——从有限的CGA分辨率 (320 x 200) 到VGA(640 x 480)，再到SVGA (800 x 600)，直至今日显示技术已迅速迈向4K分辨率乃至更高。
视觉设计的相似性
（2000年前后的典型网页设计）
在90年代至2000年前后，动态设计经历过与视觉设计相似的成长瓶颈期。因而回顾视觉设计的发展历程对于我们理解动态设计的现状具有重要的借鉴意义。
在新的设计语言形成并进化之前，设计师往往会滥用新技术，这是很自然的现象。在90年代后期到2010年间（互联网初期、CD-ROM时代），为显示媒介做过设计的人，必然牢记那些不厌其烦被使用的设计方式和元素—阴影、倒角、光效以及地不考虑留白。这些都是设计师驾驭新型媒介并醉心于崭新像素中的自然产物。
扁平化设计
（扁平化设计范例）
无论你喜爱与否，时下扁平化设计风格正风靡设计圈。所有主流系统都十分青睐各式各样的极简主义扁平化设计语言（Android, iOS, OSX, Windows, Windows Mobile）。它甚至在高速变化的网页设计领域也占据主导。
扁平化设计是视觉设计思维的成熟化体现。这一自然进化不仅源自时尚潮流的驱动，同时也反映了这一行业专业人员已逐渐掌握数字媒介的核心。
动态设计
当前动态设计的形势，可与视觉设计的下拉阴影时代相提并论。
网页动画的潜力在CSS过渡效果、由硬件加速的变形效果以及即将到来的标准（如JS Web Animations）的驱动下得到了巨大提升。
（像1999年那样使用动画吧！）
此外，运算能力更强的多核、大容量、高DPI设备，现在已经可以完美输出60帧的UI动画。
鉴于UI动效设计才刚刚兴起，设计师被导向以动画作为视觉吸引是很自然的事，这与当年阴影、倒角盛行的时代相似。
我确信，与视觉设计不同的是，动态设计不需要15年之久才能变得成熟。
无用的动画在设计中比比皆是，且并不仅限于设计新手。作为用户，你可以轻易地发现这种动画——它挡住了你与既定目标之间的路，使你因无法完整地诠释意图而万分沮丧。作为设计师，你必须明白UI绝不等于娱乐。没有人会打开你的app或网站，然后赞叹弹出的动画做得有多赞！
失败的动画案例设计
（OS X 全屏动画）
无论是桌面还是移动端，UI动画的反面案例数不胜数。Mac OS X由窗口转换到全屏的动画就是一个例子。作为以前沿设计感知名的公司推出的主打产品中的核心功能，这一转化的失败着实令人费解。
该动画存在的问题包括：
- 速度缓慢
- 无存在必要性
- 除非使用命令行，否则无法修改
如何知道自己的UI动画令人反感呢？那就是当有人开始写文章来吐槽这个问题的时候。无数的博客文章和论坛回复都关于如何加速或取消这个效果，这很好地说明了这种设计除了刺激用户以外几乎没有任何作用，而这正是UI动态设计的大忌。
动态设计案例分析
（反面教材）
- 彻底挡住UI的蒙版
- 缺少后台操作正在执行的指示
- 动态效果缓慢
- 无用的动画
最令人厌烦的是它出现在耗时最长的网络请求完成以后，从而为用户增加了额外的等待时间。
动画效果是否必要？
首先考虑一个问题：动画是否提升了用户体验？
上文的交互是正确使用UI动画的完美案例。这个交互需要一个100-500毫秒的请求才能完成，正是采用动画填补这一等待时长的良好机会。
改进设计
（第一次迭代）
这是一个细节性的提升，增加了一个载入指示以告诉用户他们正在等待额外的数据，但是，弹出的动画过于多余，只起到了降低用户效率的作用。
（第二次迭代）
用户不希望在阅读信息时看到任何多余的动画。使用蒙版遮住用户视图是一种不必要的入侵式行为。
魔术般的动画
即使对于网页App，使用缓存和主动预载机制，延迟也是可以减少甚至去除的。但是，这种做法自身也存在问题。有流量限制的移动端用户并不希望预加载大量可能不需要的数据。
既然延迟不是总能完全避免，动画就可使之变得更加流畅。此时层级动画会非常有效。
（第三次迭代）
改进功能包括：
- 非阻碍性的载入指示
- 层叠动画，分散用户对延迟的注意力
渐进式载入
渐进式的载入方式可进一步减少用户所感知的数据载入时间。几乎可以确定，用户不会立即使用程序将提供给他们的全部数据。通过给数据下载分块，并随数据的载入来显示信息，用户感受到的将是一个交互性更强的App。
（第四次迭代）
相当数量的评论都推荐了卡片式扩张的交互方式，在此列出，作为替代方案。
感谢你们建设性的建议！
结论
我们必须十分谨慎，让形式重于实用性的历史不再重演。动画可以也理应被用在你的网站或App上以强化用户体验，但纯粹装饰性的动画效果，很难令产品变的更好。
冗长的网络请求提供了使用动画的绝好机会——如同魔术一般，降低用户所感知的等候时长。
来源 | 微信公众号：特赞Tezign
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
