有效地运用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

相关推荐

  • 一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

    在我们常规意义上组成一个APP的视觉风格有几大元素——颜色、交互元素、字体、阴影、ICON的图形等,但是有一个总容易被设计师们忽略的元素,它能给与用户一个非常直观的视觉记忆,大家却总是忽略,甚至做的很糟糕。那就是APP里面的配图。

    2017-05-12
  • 如何入手书写产品体验报告

    体验产品是PM工作中经常做的事情,企业也常留一些这样的实习作业给面试者,是因为产品体验报告一定程度上直观的反映了面试者的专业水平。求职过程中,如果能提交一份专业的体验报告,将大大提升简历通过率,获得面…

    2015-03-05
  • Axure如何制作圆形加载效果?

    01新建一个矩形,去掉底部边框02调整矩形的圆角半径03设置颜色,命名为“半圆1”04复制半圆,垂直翻转,命名“半圆2”05新建矩形,命名“矩形遮挡”06设置“半圆1”的交互样式07“矩形遮挡”遮挡“半圆1”,“半圆2”隐藏08设置“矩形遮挡”交互样式09点击预览

    2018-03-29
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 你不知道的交互验收:定义、问题和如何解决

    工作中才发现,交互设计师的职责,不仅是在前期的产出物交付完成即可,更多的任务是在后期的交互验收和优化推动截断。

    2017-05-15
  • 尼尔森十大交互设计原则的实际应用解析

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法。Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术大学的人机交互博士,他拥有79项美国专利,专利主要涉及让互联...

    2018-02-16
  • 互联网+时代,让用户体验到你的专业性

    物质种类丰富之后,市场要面对的新重点就成了“用户体验”。只有“功能”的商品即使做成百宝箱也只能昙花一现,能够让客户用得舒心用得愉悦才是现代产品的应有魅力。在企业竞相提升体验的大潮中,“别让我等、别让我想、别让我烦”的用户三大心态仍然是大部分厂商的改良依据,然而总有一些人可以在这一基础上做得更加精细周到,成为“体验战”的大赢家。01曾经被无视的用户体验如今是神兵利器在计划经济时代,消费者的选择余地很小,导致了厂商只注重“功能”不注重“体验...

    2018-05-07
  • 18清美考研交叉学科交互设计高分学员黎娜经验分享

    Dream Big,Work Hard黎娜本科广州美术学院  工业设计我的一些基本情况:我本科毕业于广州美术学院工业产品设计系。大学期间由服装设计转为产品设计,产品设计主要是偏向于生活家居类小产品。我大概是在去年快毕业的那段时间第一次从考研的同学那里了解到“信息艺术设计交叉学科”,2018年6月底就决定报考这个专业。7月到10月:7月刚刚来北京备考时的状态大概处于仅仅很想考“信息艺术设计”这个专业,但是根本不知道考试内容是什么,更不用说...

    2018-04-17
  • 交互设计申请关注度最高的5个问题,第一个就头疼.. | 大咖说

    说到交互设计很多同学的第一反应就交互思维、交互体验...准备申请交互专业的同学也是非常心焦!说起来容易做起来难,我们还是多和专业老师取取经。伦艺学姐回答的5个交互专业问题,收好哦~Q1:转专业学生申请应该注意什么?我觉得需要看这个问题怎么定义转专业,因为在一个设计类的学科,很多设计的思维方式和实践能力是共同的,我们可以通过设计的方式去解决问题。如果想要转到交互或者用户体验的专业,其实提供的是一种用交互的方式和研究结果解决现有用户的问题。...

    2018-04-26
  • 用户体验设计师如何构建设计知识体系

    -全文共2469个字,阅读时间大约3~6分钟-开 篇这几天在看一位腾讯大师的产品思维,今天是重复第二遍,她所讲的产品观中的微观、中观、宏观、用户增长的峰值、终值、点线面体思维等等,这一系列课程让我茅塞顿开。当下的确是一个很好的时代—体验经济时代,英雄不论出处,不谈产品的背后是何方神圣,一切都是用户说了算,一个产品准确找到用户痛点,只要用户喜欢,有足够的用户价值,就能转化一定的商业价值。最近处于风头浪尖的两家公司—某团与某滴,互相做起了对...

    2018-04-06