有效地运用UI动效的4种方法

约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。设计不仅是外形和感觉,设计关乎如何运作。


约在10年之前,在用户界面使用的动效,大部分是一些广告和闪烁的弹窗。然而到了今天,已经发生了翻天覆地的变化。

有效地运用UI动效的4种方法

交互设计和动态效果的详情,带来的是网站或APP的根本改变。这种思维方法,在下面有详细的描述。

有效地运用UI动效的4种方法

为了设计出更好的数字产品,从一开始网页或APP就要有良好的交互性质是非常有必要的。这一次,就将如何有效的运用UI动效的方法详细介绍给大家。

使用动效的理由

动态(英: Motion)在从他的性质上来说,就是用户界面上最突出的元素。相较于文字文本和静止的图像,动态的更容易被发觉。我们的视线会不由自主的追寻着动态的物体,这也可以说是一种条件反射。试着将这个利用在功能性的动效上吧。

功能性的动效是?

功能性动效,指的是在UI设计中作为功能的一部分被采用的小动效,有着非常明确和合理的目的。

  • 为了减轻认知的负担。
  • 防止发生变化时看漏(英: Change Blindness)。
  • 在空间关系中确立良好的层级关系。

以用户为中心的设计方法,直观的用户界面,响应性,人性化等等都是必须的。功能性动效,将有助于你实现这些目标。那么,就让我们详细的来看一看功能性动效吧。

用功能性动效完善UX

对APP或网站的体验或印象,通过在好的地方使用动效,会更易于使用,让功能性更加完善。

通过仔细研究测试,功能性动效,都包含以下的功能、要点。

01. 可视化的反馈

舒适的交互设计可以提供更好的反馈。无论是否成功,反馈能告诉用户系统已经识别到了你的操作。显示出相互作用的结果。这组动效应特别注意控制。

有效地运用UI动效的4种方法

反馈按钮

在我们的生活中,对按钮会有按下去的反应。进行会有怎样的反应的预测是十分重要的。

有效地运用UI动效的4种方法

操作结果的可视化

按照基本规则,使用动画进行反馈,你可以很好的强调什么操作是错误的。

例如,如果你输入密码错误,让我们添加一个左右抖动的视觉动画吧。像出错啦,请再试一次这样,左右摇头的效果。当用户看到这些动效后,可以立即了解当前的状况。

有效地运用UI动效的4种方法

​另外,您还可以强化用户当前正在运行的动作。在下面的例子中,当用户点击提交按钮,在成功之前通过一点点加载动画来显示。加载的动效使用户感觉过程已经成功完成。

02. 抑制状态的变化

至于添加动效最好的地方,就是让变化的瞬间变得引人注目。用户界面状态的变化,特别是网站上突然的变化,很难让用户理解当前究竟发生了什么。在这变化的瞬间,就可以在UI中添加动效进行缓和。

(1)建立连接

动画的变化,能向用户界面展示各种各样的状态,作为一个如同中介一样的角色,帮助用户理解当前正在发生着什么。用户只需跟随动效,就能够理解2个UI状态之间究竟有着怎样的联系。

有效地运用UI动效的4种方法

另外,也可以显示缩略图和详细信息。

有效地运用UI动效的4种方法

​这张动画卡片,是通过点击将重叠的详细信息进行展示,它清楚地表明了是同一个项目。

(2)注意变化

当一个新的对象已经公开时,动效有助于我们在被掩盖的信息中清楚的找到它。比如通过滑动打开内容来隐藏信息,你可以在需要关注时用到这种变化效果。

在下面的案例中,当您单击汉堡包图标时,导航菜单用幻灯片展示。通过这种动作,用户就可以明白,导航菜单不会消失。

有效地运用UI动效的4种方法

03. 系统状态的可视化

作为Jakob Nielsen为了可用性推导出来的答案之一,系统状态的可见性仍然是用户界面设计中最重要的原则之一。对于用户来说,把握理解系统当前的状况,是非常重要的。

(1)进度条

上传和下载数据的过程是采用功能性动效的一个很好的机会。有动效的加载栏,可以直观的看到动作加载完成预计还要多少时间。

另外,当操作未能成功进行时,动效也很有用。例如在下载失败的时候,你就需要考虑如何让失败画面看起来比较舒服。

有效地运用UI动效的4种方法

(2)下拉刷新

用户的等待时间是从动作开始的瞬间开始,最糟糕的情况是不知道系统是否收到指示。

下拉刷新这一技术,让我们尝试在操作瞬间作出反应。告诉用户你的进程已经开始,最重要的是给与用户视觉反馈,在这里使用动画将非常有帮助。

有效地运用UI动效的4种方法

04. 解说动画

有时,用户需要一些额外的帮助来了解用户流程或如何与某些界面元素进行交互。对于包含用户的新的或不熟悉的功能或交互的用户界面尤其如此。

(1)新手上路

用户入门需要一个完美的UX,第一次看到的操作动画对于首次使用者如何与应用程序进行互动有着巨大的影响。无论多么复杂的东西,动画都能通过有趣的方法传达出来。他有着无限的可能性。

有效地运用UI动效的4种方法

(2)视觉提示

动画可以提供一些易于理解的视觉线索。解说动画,通常是在网页第一次被打开时看到,通过动画可以表现页面上特定的要素在什么情况下可以使用。

这种类型的动画,通过故事的进行渐渐的看到全体的效果,在游戏中经常被利用。只有当用户自己的经验到达一个点的时候,才会触发这个提示。

总结

动画是一个复杂而强有力的工具。

我们需要从一开始就采纳这种效果,并将其视为我们设计的自然部分,因为设计不仅仅是视觉呈现。正如史蒂夫·乔布斯谈到设计时所说的:

设计不仅是外形和感觉,设计关乎如何运作。

 

原文地址: photoshopvip

译者:@喪心病狂十六夜貓

译文地址:http://www.uisdc.com/functional-motion-design-method

本文由 @丧心病狂十六夜猫 授权发布于人人都是产品经理,未经作者许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-08-04 11:26
下一篇 2017-08-04 12:13

相关推荐

  • 在设计过程中,6种心理学原理被有效应用

    有些人习惯于将设计视为一种纯艺术的工作,但它背后却有更多的东西。美感和灵感不足以创造精湛的设计,这就是为什么设计师们应该拥有不同领域的一些科学知识和技能来完成他们自己的工作。它不仅是设计的艺术,而且还涉及各种知识和实践领域,这些可以帮助他们高效地工作。帮助设计师了解用户的基础研究之一是心理学。今天,我们将了解心理学在设计中扮演的重要角色,以及哪些心理学原理在设计过程中是必不可少的。

    2017-04-28
  • 3分钟带你掌握11个最常用的交互控件

    本文作者将来总结一下各个控件的特点,方便各位更好的理解这些控件。(更具体的说明请参考:iOS和Android规范解析——警告框(Alerts)对比)(更具体的说明请参考:iOS和Android规范解析——简易菜单、简易对话框和弹出框 )(更具体的说明请参考: iOS和Android规范解析——简易菜单、简易对话框和弹出框 )
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(上))
    (更具体的说明请参考: iOS和Android规范解析——底部浮层(下))(更具体的说明请参考: iOS和Android规范解析——确认弹框、全屏弹框和模态视图)

    2017-04-30
  • 论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03
  • 超实用!3分钟带你掌握11个最常用的交互控件

    之前的一系列文章,为大家介绍了iOS和Android规范中,各种弹出物的用法,罗列如下:

    2017-05-31
  • 同一个人的微博,首页连续出现48条是怎样的体验?

    如果你是微博的轻度用户,可能偶尔觉得刷出来的内容有些不对劲;而如果你是微博的重度用户,那你很可能觉得微博的 timeline 有时候刷的很不爽。

    2017-05-14
  • 在做交互设计时,你需要知道这几大定律

    形式是跟随功能的,功能是满足用户需求的。尊重你的用户,让每个产品的细节都是合情合理的,然每一寸体验是“走心”的!

    2017-05-20
  • 你的APP引导页,为啥用户会忽略?【UXRen译#159】

    作者:Anthony  |  翻译:冬柏,校审:小四   对于一个新的App产品来说引导页就是它的说明书。当新用户第一次使用时,就可以通过引导页简要的了解到整个App的特征,所以这对新用户来说是很必要的。 但是如果引导页…

    交互专题 2017-08-07
  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • 2018用户体验趋势报告

    在2017年我们看到了很多用户体验的进步和优秀的产品。在与来自全世界的189489名设计师分享学习了1926篇优秀文章之后,我们(uxdesign.cc)分析得到了2018年的一些用户体验趋势。1 用户体验的死亡与重生作为用户体验设计师,我们一直都在争取尽早地参与战略决策,现在,设计师在项目中的地位越来越重要,那么我们要如何应对呢?你的app的用户引导页使用体验如何呢?下面是最佳的自查表;不确定哪种导航最适合你的网站?去看看网站设计样例...

    2018-02-03
  • 移动端文字与排版设计的六个原则

    .space-betw {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    - (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    2017-05-31