设计师们,停止不必要的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

相关推荐

  • 四个步骤,完成一个APP的LOGO设计需求

    希望这篇文章,能够在你做LOGO设计时,提供一些方向和思路。

    2017-05-01
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 视频平台VS网络电视:内容营销提升用户体验是硬道理

    近年来,视频平台发展迅速,视网同步、网络独播等不断满足观众的各种需求。在“马太效应”(即强者愈强、弱者愈弱的现象)愈发明显的行业环境下,各大视频平台领跑行业,但版权购买、会员抢夺、内容营销等现象导致行业竞争持续加剧,视频网站将迎来升级。同时,随着互联网发展,“互联网+电视”的形式也在逐渐普遍,对于观众而言,足不出户便可以通过科技满足观看喜好已成为现代生活的标志之一。那么,视频平台与互联网电视有何区别呢?它们在内容选择和盈利方式上又有何不...

    2018-02-12
  • 【译文】”移动优先”的设计理念已过时了吗

    【译者注】Mobile First(移动优先)大概是移动设计师听到最多的设计理念之一,2011年Luke Wroblewski大神提出它时,打破了原来“先完成web设计再移植移动设计”的常规方式,为移动设计注入了一针强心剂,一时各大企…

    2016-02-19
  • Axure软件实现登录界面交互小教程

    先上效果图先首先在Axure里面布局好登录页面以及登录成功的页面(也就是红色的那个页面),在布局的过程中请输入账号以及请输入密码两个元件选择使用文本框元件。并编组好整个登录成功页。在布局好界面之后选中请输入账号的元件进行命,请输入密码的文本框也是一样的需要进行命名如图,将登陆成功页面进行编组命名,并且进行隐藏。然后选中账号输入框进行用例设置,选择获取焦点用例进行设置,选择用例动作中的设置文本如图步骤所示进行设置。同样的针对密码输入框进行...

    2018-04-07
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04
  • AR与用户体验简析

    说道AR想必大家都不陌生,所谓AR就是增强现实技术,现在普遍的应用是在移动端,通过相机拍摄现实场景,并通过AR技术在屏幕上生成想要的图案,使能够栩栩如生的浮现在屏幕上,好似实物就在眼前一样。首先我们值得注意的是个人电脑和智能手机是所有人都想要拥有和使用的产品,一旦产品价格进入消费者能够承受的价位,爆发是完全没有问题的;其次,两者的核心技术其实都集中在CPU、显示屏等电子元件相关领域,这些产品的发展基本上都遵循摩尔定律,即18-24月性能...

    2018-02-27
  • UI设计实例:如何将功能性动画完美融入设计以提升用户体验

    来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。

    2017-05-10
  • 五大新玩法和新设计方向,教你设计出不一样的年货节页面

    年关将近,今天就主要分享一下我对这些年的年货节页面看到的一些现象,发表一些自己的看法和思考。“天哪,怎么几乎所有的年货节页面都是红红火火毛笔字,高高兴兴过大年的手绘风格啊?这让我们这些不会写毛笔字也不会手绘的人怎么活?”“抢年货”
    “钜惠来袭”
    “有礼贺新年“
    “贺岁狂欢“
    “年货盛典”
    “年味中国”
    “春节不打烊”
    ………………..

    2017-05-10