如何利用动效提升用户体验,让你的动效从优秀

微交互是明年流行的设计趋势,至于原因,来看这4个用动效完成微交互的设计实例你就懂了。

图片 1

如何利用动效提升用户体验

作者:潇潇潇潇
链接:

动效可以告诉我们一些故事。例如「现在就让我看看吧。」、「操作已经完成了。」等等,像这样既不会很长,又不会很复杂的故事。

图片来源:Barthelemy Chalvet

动画可以讲述故事。不是很长很复杂而是很简单的故事,而像是 "嘿,你现在要看看这个!" 或 "哇,你竞争成功了!"。然而,动效的目的不是娱乐用户,而是帮助他们理解发什么什么事,或者如何有效的使用你的软件。在Zurb的叙述中很清晰的表明了:

本文介绍了多种制作UI动效的小技巧,以及提高UI微交互的使用小建议。

动效的目的,并不是为了娱乐用户,而是为了让用户理解现在所发生的事情,更有效的说明他们的使用方法。

如何利用动效提升用户体验

我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

图片 2

我们不再只是去设计一个静态的画面。去思考怎样才能将用户从单纯的画面,引导到实际操作的内容对设计来说是非常重要的。

动画可以讲述故事。不是很长很复杂而是很简单的故事,而像是 "嘿,你现在要看看这个!" 或 "哇,你竞争成功了!"。然而,动效的目的不是娱乐用户,而是帮助他们理解发什么什么事,或者如何有效的使用你的软件。在Zurb的叙述中很清晰的表明了:

动效可以广泛用于统一美感和功能的平衡,它可以影响行为、沟通状态、引导用户和帮助他们查看自己行为的结果。下面是一些例子,是在一些方面可以增加动效改进UI的经验:

让我们来看一些UI动画从优秀到卓越的例子,通过一点点的调整,你可以用动画来提升你的UI水平。

为了让动效变得好看,功能统一,可以广泛的应用于内容之中。用户的行为和条件状况,被用户注意的地方、或者成功的传达执行动作所得到的结果这样各种各样的要素影响着。

我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

加载不再无聊

交互表现了状态的连续性,明确公共元素之间的关系,并且将用户的注意力引导到他们应该注意的和操作的地方上。

这一次,为了改善UI设计的体验。让我们用一些具体的实例来一起看看可以添加动效的位置和情况吧。

动效可以广泛用于统一美感和功能的平衡,它可以影响行为、沟通状态、引导用户和帮助他们查看自己行为的结果。下面是一些例子,是在一些方面可以增加动效改进UI的经验:

如果你不能缩短加载时间和无聊的旋转图标(基本上只是提醒用户正在等待),那么可以用动效代替等待的时间,应该尽力让等待变得更加愉快。几乎任何网站或者app会利用屏幕的线框图上微妙的动效让用户在等待期间参与进来。

这些动画,遵循了Material Motion的指导原则、IBM的动画原则和UX运动理念。( Material Motion, IBM’s Animation Principles, and The UX in Motion Manifesto.)

  1. 不要让载入时间变得又长又无聊

加载不再无聊

图片 3

1、使标签里的内容滑动起来

图片 4

左侧的标签下面的内容淡入淡出,右侧的可以随标签共同滑动

一个优秀的标签切换动效,淡化一个标签下的内容,过渡到另一个标签下的内容。

一个卓越的标签切换动效,通过多个标签下的内容进行移动,从而强调标签转换的连续性。

当你设计可交互的选项卡式标签,或者弹出式的菜单时,请尝试将下级内容与上级主操作相关联。通过这种方式,你不仅可以保证动效中内容的可见性,还可以将元素运动的起止位置用动效表示出来。制作时,记得添加一个滑动手势,让内容从一个页面顺滑的过渡到另一个页面。

如果无论如何打开网页都需要很长的时间的话,就想办法让用户在等待的时候感受到乐趣吧。动效可以作为能够消除用户的无聊感的代替(让用户不会感觉到一直在等待)。通过利用几个连续的动画,让用户感觉到并不是一直在等待,这在绝大多数网站都是十分管用的方法。

如果你不能缩短加载时间和无聊的旋转图标(基本上只是提醒用户正在等待),那么可以用动效代替等待的时间,应该尽力让等待变得更加愉快。几乎任何网站或者app会利用屏幕的线框图上微妙的动效让用户在等待期间参与进来。

屏幕线框图在内容完全加载之前完成UI。图片来源:tandemseven

2、链接卡片内的共享元素

图片 5

左侧的卡片展开时想上弹出一个新的页面。右侧的卡片内容扩展并填充屏幕。

一个优秀的卡片切换动效,使用向左或向上滑动的过渡来打开卡片,展示详细信息。

一个卓越的卡片切换动效,通过展开卡片的共享内容来建立两个页面的紧密的联系。

当在设计不同状态之间进行动画时,请注意它们之间是否有共享元素并将它们连接起来。使用invision studio时,在创建运动转换时,在两个链接屏幕之间重复的组件会自动连接。这使原型动画变得轻而易举。

图片 6

屏幕线框图在内容完全加载之前完成UI。

不能削减设计状态的变化

3、利用层级效果来展开目录

图片 7

左侧的卡片通过滑动和淡入来切换目录。右侧的卡片具有相同的动画,并且卡片层叠的出现延迟。

一个优秀的动效进入下级页面时,通过屏幕的位置和不透明度变化来过渡。

一个卓越的动效可以使每一个组或元素有序的出现,并错开层级逐个延迟展示出来。

要实现这种瀑布效果,请尝试对每一个元素或每一个组进行逐个延迟,保持相同的过度和持续时间,是他们的运动一致。尽管如此,不要每一个小元素都有不同的运动,将元素分组操作,才能展现好的效果。制作动效不要拖沓,Google建议每组元素运动间隔不超过20毫秒。

例如左侧的列表型屏幕,在内容完全载入之前,我们可以看到,UI是一点一点分开显示出来的。

图片 8

动效可以使转换更加明显,用户明确知道开始到结束发生了什么。一个好的过渡设计会让用户清楚的理解他们的注意力应该在什么地方。

4、让新页面的内容将上级页面的元素推出屏幕之外

图片 9

左侧新页面展开时原有元素淡出。右侧原有元素随着新页面的出现被推出屏幕之外。

一个优秀的页面切换只有元素的移动和显示。

一个卓越的页面切换新元素出现时会影响原有的元素,产生移动。

在设计过程中时刻注意元素和周围环境之间的关系。这意味着新页面的内容可以将周围的元素吸引或推出屏幕。

02.不要让页面切换变得生硬

图片来源:tandemseven

Adrian Zumbrunnen上有个很好的滚动动画的例子,当用户点击一个链接时,帮助用户联系上下文。只是一个普通的静态页面感觉会很生硬:

5、让菜单按正确的运动轨迹出现在页面中

图片 10

左侧的菜单从下面飞入。右侧的菜单从触发点的方向延展开来。

一个优秀的菜单动效,菜单是从触发它的按钮的方向出现。

一个卓越的菜单动效,菜单是从触发它的这一个点开始,慢慢的浮动和延展开来。

利用动画效果,可以在切换页面(英: Transition)的时候,让用户清楚的看到什么时候在哪里开始,又是在哪里结束。精心设计你的转场,不仅可以吸引用户的注意,还能让他们很快理解现在所发生事情。

不能削减设计状态的变化

图片 11

6、使用按钮来显示不同的状态

图片 12

左侧的按钮用文本来显示加载状态。右侧将按钮自身延展成进度条来显示加载状态。

一个优秀的动效用文本来展示事件。

一个卓越的动效使用按钮本身不同的状态来展示事件。

尝试使用按钮本身的变化来提供重要的视觉反馈。例如,你可以用加载动画或诱导性动画来替代CTA按钮。或者你可以在背景增加动效来展示过程。解决办法取决于你,但都是是利用了用户正在进行操作但空间来进行交互。如果你能用按钮的颜色来定义成功状态,那就更好了。

当点击链接的时候,滚动可以很好的帮助用户来理解当前所发生的事情。首先让我们来看看下面这个例子,瞬间的切换页面能让人感受到僵硬和牵强的感觉。

动效可以使转换更加明显,用户明确知道开始到结束发生了什么。一个好的过渡设计会让用户清楚的理解他们的注意力应该在什么地方。

直接切换感觉很不自然,用户很难接受这种变化。图片来源:smashingmagazine

7、在重要的事情上拉回注意力

图片 13

左侧利用颜色和位置使元素突出。右侧利用微妙的动效吸引用户的注意力。

一个优秀的设计利用颜色、尺寸、位置来使用户需要注意和操作的重要的信息突出。

一个卓越的设计利用动效来吸引用户进行重要操作,而不是破坏设计。

当用户需要有重要操作时,尝试用动效来获取他们的注意力。从一个微动效开始着手,然后根据这个操作的重要性来增加动效的强烈程度(变化尺寸、颜色和速度)。慎重的使用动效,因为使用的动效越多,它的重要性会越低,甚至会干扰用户的注意力,适得其反。

图片 14

Adrian Zumbrunnen上有个很好的滚动动画的例子,当用户点击一个链接时,帮助用户联系上下文。只是一个普通的静态页面感觉会很生硬:

带有动效的行为:

总结

我希望当你在想交互中增加动效的时候,这些案例能帮助你作出更好的决策。挑选一款你喜欢使用的工具,我相信你会创造出更加出色的动效。

我们需要利用动效来展示不同状态的变化,将注意力集中在必要的操作上,确定元素之间的关系,为我们的产品增加一些趣味性和识别性。遵循以上这些规则,我们将把动效做到从优秀到卓越。

原文链接:https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

突然的切换让人感到强烈的不适感,让用户在接下来的操作上会感到困惑。

图片 15

图片 16

然后让我们来看下面这个案例,追加了滑动的动画效果。

图片来源:smashingmagazine

动效就是贴近生活。图片来源:smashingmagazine

图片 17

直接切换感觉很不自然,用户很难接受这种变化。

如你所见,转换帮助用户加快理解界面。它还可以引导用户下一步的交互。

通过添加了滑动的动效,让页面的切换变得流畅顺滑。

带有动效的行为:

智加设计一家专注设计的公司,我们秉承服务第一,质量第一的理念。我们双手实现您的想法。设计来智加,助您事业更成功。

如你所见,通过这样动态的切换界面,可以帮助用户理解当前状态,也可以很好的诱导用户,再衔接到下面的页面。

图片 18

智加官方联系方式:010-8270-8680:www.zcodesign.com:www.zcobrand.com

  1. 说明各个要素之间的关联性

图片来源:smashingmagazine

解释元素之间的关系

动画,可以直接的提高操作感。

动效就是贴近生活。

动效可以增强直接操纵的感觉。

例如通常在导航栏菜单,可以添加平滑的动画来使操作更流畅平稳。利用这种效果,可以让用户轻松的明白按钮有着怎样的功能。

如你所见,转换帮助用户加快理解界面。它还可以引导用户下一步的交互。

例如,一个菜单图标和一个播放控制图标可以来回切换。这种动效应该在添加交互时通知用户按钮的功能。转换播放图标到暂停,意味着这两个图标是连接着的,当一个存在时另一个不存在。

在下面这个例子中,播放按钮和停止按钮这两个图标在切换的过程中添加了使他们具有关联性的动效,意味着当你使用其中一个的时候,另一个将不能被使用。

解释元素之间的关系

图片 19

图片 20

动效可以增强直接操纵的感觉。

在这个情况中,屏幕中控制音乐的位置的动效很吸引眼球。图片来源:Material Design

在这种情况下,通过利用动效,屏幕上的音乐播放器变得能吸引用户注意而展现在了屏幕中央。

例如,一个菜单图标和一个播放控制图标可以来回切换。这种动效应该在添加交互时通知用户按钮的功能。转换播放图标到暂停,意味着这两个图标是连接着的,当一个存在时另一个不存在。

另一个例子,当按下浮动按钮时,加号变成一支铅笔。这表明了铅笔是主要的操作。这个小细节在猜测接下来发生什么和图标在不同状态下的含义总是不同的。

让我们再来看另一个案例。在材料设计中我们可以看到,当我们点击浮动的图标时,加号的图标变换成了铅笔。通过这样的一个小细节,我们可以知道每个图标会有什么作用,接下来又会发生些什么。

图片 21

图片 22

图片 23

图片来源:Material Design

图片来源:Material Design

为了强调一些有趣的事情,让我们来利用反馈吧

在这个情况中,屏幕中控制音乐的位置的动效很吸引眼球。

用动效反馈来说明问题

动效,可以为用户的操作进行一些辅助。

另一个例子,当按下浮动按钮时,加号变成一支铅笔。这表明了铅笔是主要的操作。这个小细节在猜测接下来发生什么和图标在不同状态下的含义总是不同的。

动效可以增强用户的操作。

例如这个登录框,通过添加一些动效,便可以极大的引起重视。如果他输入的是正确的内容,我们可以通过添加一个简单的「点头效果(英: Nod)」的动画,来表示输入完成。另一方面,我们可以通过添加水平方向的震动来表示输入错误的效果。当用户看到这样的动画时,便可以立刻明白其中的含义。

图片 24

例如,表单输入可以用动效进行增强。如果输入正确可以用一个简单的点头动效。而当输入不正确则水平摇晃。当用户注意到这个动效就会立刻理解行为。

图片 25

图片来源:Material Design

图片 26

利用上面所介绍的这种动效,可以很方面的让用户理解你还没有输入这样的意思。

用动效反馈来说明问题

形式上在在向你摇头。图片来源:Michaël Villar

  1. 为了表示已经完成,让我们给用户一个反馈

动效可以增强用户的操作。

用动效反馈老展示已经完成

动效,在给用户的行为动作的结果一个视觉化的反馈时也是非常有用的。「去表现,而不是说。(英: Show, dont tell)」基于这样的动效设计原则,为了让用户明白,他们做了些什么,是否已经完成,你可以使用动效来给用户一个反馈。

例如,表单输入可以用动效进行增强。如果输入正确可以用一个简单的点头动效。而当输入不正确则水平摇晃。当用户注意到这个动效就会立刻理解行为。

动画可以帮助人们理解他们行为的结果。遵循的原则:"展示,而不是说。",你可以用动效反馈已经完成。

在下面的设计案例中,当用户点击付款按钮之后,便可以插入一个支付完成的小动画。对号这样的动效,可以告诉用户支付已经完成,这样的细节对用户体验来说也是非常重要的。

图片 27

在下面的例子,当用户点击"支付",一个短暂的转轮显示成功的状态。检查动效让用户觉得他们容易的进行了支付,他们希望有这样重要的细节。

图片 28

图片来源:Michaël Villar

图片 29

最后

形式上在在向你摇头。

图片来源:Michaël Villar

通过不断的摸索与使用,动效也会成为你一个非常强大的工具。怎样的动效是必须的,怎样又是不需要的,通过不断的反思,总结经验对于设计这来说是非常必要的。

用动效反馈老展示已经完成

总结

在网页设计的开始阶段,首先来好好考虑一下接下来会用到哪些动效吧。像这样来完成设计,可以将内容以视觉性的效果呈现出来。

动画可以帮助人们理解他们行为的结果。遵循的原则:"展示,而不是说。",你可以用动效反馈已经完成。

   在一个复杂的情况下动效是很强大的。花时间考虑动效的存在是很重要的。我们需要从研究运动开始,考虑设计中必须的动效,因为设计不仅仅是视觉的呈现。就像Steve Jobs 说过关于设计的一句话:

在下面的例子,当用户点击"支付",一个短暂的转轮显示成功的状态。检查动效让用户觉得他们容易的进行了支付,他们希望有这样重要的细节。

设计并非外观怎样或者感觉如何。设计是解决它是怎样工作的。

图片 30

生活就是我们的老师,它会告诉我们很多的东西。

图片来源:Michaël Villar

灵感源于生活,生活也带给我们更多的创新,智加设计做懂你的设计。

总结

在一个复杂的情况下动效是很强大的。花时间考虑动效的存在是很重要的。我们需要从研究运动开始,考虑设计中必须的动效,因为设计不仅仅是视觉的呈现。就像Steve Jobs 说过关于设计的一句话:

设计并非外观怎样或者感觉如何。设计是解决它是怎样工作的。

作者:Nick Babich

原文链接:https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.8z12f07cx

本文由官方彩票手机投注网站发布于摄影资讯,转载请注明出处:如何利用动效提升用户体验,让你的动效从优秀

您可能还会对下面的文章感兴趣: