设计师们,停止不必要的UI动效设计吧!

这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。我们将在下文中,简单探讨如何改善下面的这个交互。


这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有效的GUI动效设计的建议。我们将在下文中,简单探讨如何改善下面的这个交互。

设计师们,停止不必要的UI动效设计吧!

这个反面案例并非假设,而是来自近期的真实客户案例。

设计师们,停止不必要的UI动效设计吧!

UI动效设计的反面案例(线上Demo

自从 70、80 年代首个光栅图像在CRT屏幕出现以来,人们对于(数字)视觉设计的态度一直在不断进化。与其他艺术领域不同,在数字设计领域显露的趋势,与使用设备的发展史紧密相关。

设备能力的提升有目共睹,显示器技术使分辨率从CGA320*200,到VGA的640*480,然后到SVGA的800*600,到现在已快速提升至4k及以上。

类比视觉设计发展历程

动效设计正在经历成长的疼痛,正如在当年90年代和21世纪初的视觉设计。追溯视觉设计进化发展的过程,有助于我们去理解现阶段的动效设计。

设计师们,停止不必要的UI动效设计吧!

(21世纪初期的网页设计)

在更精妙的设计语言出现之前,设计师们在初期阶段容易滥用新功能,这是正常的。90年代末和21世纪初的界面设计师,应该还记得以阴影、斜角、高光,无留白这特征的过度设计。

当设计师们着迷于新媒体,并陶醉于像素的奇妙时,这一结果再自然不过了。

扁平化设计

设计师们,停止不必要的UI动效设计吧!

(扁平化设计示例)

不管你喜欢与否,扁平化设计在设计圈中已成为主流思想。所有的主要系统平台(Android、iOS、OSX、Windows、Windows phone)都已经开始拥抱这种极简设计语言。同时,它还主宰着高速发展的网页设计。

扁平化设计是视觉设计思考成熟的体现。它是一个自然的进程,一方面是被潮流和时尚驱使,另一方面折射出业内人士终于逐渐掌握了数字媒体 。

动效设计

现阶段的动效设计,可以类比视觉设计史的“阴影阶段”。

网页动效能力有了显著提升,得益于CSS中的过渡属性(transition)和被硬件加速支持的变形属性(transform),以及正在发展的标准,如JS动效(JS Web Animations)。

另外,现在的移动设备由于其不断精进的性能,以及多核、多存储、高dpi等优越的特性,可以流畅地输出60fps动画效果。

设计师们,停止不必要的UI动效设计吧!

让所有东西都动起来!这样的动效仿佛让人回到了1999年。

考虑到现在是UI动效的早期设计阶段,设计师试图通过增加动效来增强视觉亮点,和曾经的阴影和斜角没什么不同。

但是我很确信,与视觉设计不同,动效设计的成熟不需要耗时15年。

过度的动效使用

无意义的动效随处可见,它们也不仅出自业余设计师之手。

作为用户,我们可以很轻易地发现这种妨碍着你的动画,它阻隔着你和你的目标,令你困扰皱眉。作为设计师,你需要意识到你的UI设计并非什么娱乐。没有人只为看着酷炫的动效爽,就使用你的app或者网页。

UI动画的使用反例

OS X的全屏动画

桌面端和移动端都有无数的糟糕UI动画示例,其中之一,就是OS X的窗口切换到全屏模式的过渡动画。因为它来自因前沿的设计感著称的苹果公司,且是旗舰产品的主要特点,所以格外令人困惑。

这个UI动画有以下几个问题:

  • 缓慢
  • 非必要
  • 不可设置(除非通过命令行修改)

如何知道你的UI动效使人厌烦?人们会在博客上写文抱怨。无数探讨如何加速或禁用动效的博文和论坛问题帖,都很有力地说明这个转场动效除了让用户烦恼,毫无作用,这是UI动效设计的一个大忌。

动效设计案例研究

我们使用一个简单设计做示例,它来自我最近为客户进行的工作。这个交互包含了一些糟糕的设计决策。

设计师们,停止不必要的UI动效设计吧!

UI动效设计的反面案例(线上demo

这个设计包括如下问题

  • 遮挡了界面的蒙层
  • 缺少后台正在执行操作的指示
  • 动画缓慢
  • 动画非必要

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

动画是否必要?

首要问题理应为:这个动画提升了用户体验吗?

上述交互案例中,出现了正确使用UI动画的绝佳时机。考虑到这一交互需要一个耗时100-500毫秒的网络请求,这是个利用动画来掩盖请求耗时的绝好机会。

设计改进

设计师们,停止不必要的UI动效设计吧!

改进1(线上Demo

这是很小的一个改进,增加一个加载指示器,告诉用户正在等待额外的数据。然而,弹出动画是多余的,减缓了用户流程。

设计师们,停止不必要的UI动效设计吧!

改进2(线上Demo

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

动画——障眼法

延迟,即使是网络应用的延迟,通过缓存和预读取资源,也可以减少甚至消除。然而这种方式也有其问题。使用流量有限的移动网络的用户,并不愿意应用预读取大量可能根本不不需要的数据。

考虑到延迟并不总能完全避免,我们可以使用动画制造更利落的错觉。这种情况下,使用分层动画尤其有效。

设计师们,停止不必要的UI动效设计吧!

改进3(线上Demo

改进如下:

  • 使用了不遮挡界面的加载指示。
  • 重叠的动画分散了用户对数据读取延迟的注意力。

渐进式加载

渐进式加载可用来进一步减少可感知的数据加载时间。用户基本不可能立刻用到应用展示的所有数据。通过分块下载、数据可用后再显示信息的方法,用户会产生应用比实际上响应更及时的错觉。

设计师们,停止不必要的UI动效设计吧!

改进4(线上Demo)

很多留言的人,包括来自用户体验社区的Isak Falch,推荐我使用“扩展式卡片”,这个方法最切实的好处是保持了用户对上下文环境的感知。

作为另一种备选方案,也已经实现如下:

设计师们,停止不必要的UI动效设计吧!

改进5(线上Demo

感谢大家的建设性意见!

结论

我们要注意,不要重复过去形式超越功能的错误。动画可以且应该应用于加强网站或应用的用户体验,而纯装饰性的动画效果,不太可能有助于产品变得更好。

长时间的网络请求,是使用动画障眼法,缩短等待时间感知的好机会。

注:如果你对这篇文章感兴趣的话,你应该也会对《有效的原型设计》感兴趣。

 

译文来自:Stop Gratuitous UI Animation 。百度MUX的译文仅作学习用途

本文系人人都是产品经理团队@百度MUX  翻译发布,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26482/

(0)
CatherineCatherine
上一篇 2017-05-14 17:50
下一篇 2017-05-14 20:48

相关推荐

  • 设计师如何具有工程师思维?

    常常在提 design thinking, 让工程师有设计思维,但作为一个设计师,很多时候工作处理的都是交互层的东西,那如何像一个工程师一样理解一个项目呢?或者说如何具有工程师思维? 这个问题的简单回答是:根本没有“工…

    2015-05-24
  • Axure神器:用母版打造模块化设计【UXRen原创】

    作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师) Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大…

    2017-08-04
  • 从9个方面聊聊用户体验设计的发展

    今天饿了么UED的小满同学给大家翻译了一篇国外的用户体验 设计回顾总结文,里边提到的9个观点都特别有前瞻性,剥离开细枝末节的视觉风格和交互原则,这些很有可能成为未来优秀设计师必备的硬能力。在甲方的阴沟里待久了,来仰头展望下真正「以人为本」的设计思考。

    2017-05-29
  • 当我们爱上宜家的时候,我们在爱什么?

    第一次去宜家是在2007年。那年大三,学校组织在上海为期一周的参观和考察,除了各大博物馆、美术馆,宜家是我们这帮学设计的人必须去的地方。那时候逛宜家没有用户体验的概念,只感觉我能想到的家居宜家都有,我没想到的宜家也有,每一个样板间都很有格调,很有家的感觉,让人忍不住想赶紧结婚,赶紧买房子,然后照着宜家的样板间好好装修一把。

    2017-06-03
  • 当卡片式UI不再流行,列表式UI将是王牌

    作为设计师,虽然我们都喜欢最新的流行趋势,额外的白色空间和大图像,但对于新闻和数据,列表式是更好地解决基本的用户目标的方法。卡片是提供详细信息的入口。——来源:Google Material DesignGoogle的搜索结果可能会更加丰富多彩,但每页提供的信息较少。——来自:GreenBot

    2017-05-13
  • 美团外卖前端可视化界面组装平台 —— 乐高

    1 简介 乐高,是美团点评一个快速搭建后台系统页面的平台。名称来源于大家熟悉的丹麦知名玩具品牌,他们的玩具都是通过组合易拆卸、装配的零件,形成最终的作品。经过长期的发展,乐高品牌渐渐有了“快乐、想象、创…

    2017-06-12
  • 实例解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,姑本文将分为上下两篇来发~一、费茨定律(Fitts’ Law)费茨定律指的是:使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(...

    2018-03-16
  • 实例分析:运营活动项目中交互设计的4大维度

    文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。我:这是什么个需求?
    pm:一个会员卡激活绑定的流程页。
    我:会员卡是什么东西?
    pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层我:这卡是怎么来的?
    pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
    我:会员卡有什么用?
    pm:激活后可以将帐号升级为会员(类似qq会员那种)
    我:用户要怎么才能激活?
    pm:通过扫描会员卡后面的二维码来进行激活。
    我:激活后又会怎样?
    pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。
    我:为什么要做这个需求?
    pm:让我们平台用户能够升级为会员,然后就…….
    我:额……

    2017-04-30
  • 史上最完整交互设计基本原则|推荐收藏

    下面的原则对于有效的用户界面的设计和实现都是最基本的,不管是针对传统的图形用户界面还是针对任意的可联网的智能电子设备都是有用的。有效的用户界面是视觉明显的并且宽容的,会带给用户一种控制感。用户能很快…

    2017-08-01
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04