APP动效交互|切换动画设计

功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

动画通过改变切分元素,改变它们的形状和大小赋予页面活力。你应该利用功能性动画来让切换变得更加流畅自然,把切换更加合理,帮助用户理解内容层次。

成功的动画设计应该具备以下几个特质:

1.响应式的

视觉反馈在界面设计中非常重要,因为对于用户来说这符合他们的心理预期。在现实生活中,按钮,开关都是会给出相应反馈的,这是他们所期待的事物运行的模式。

1468453690-4378-ndiaBkBzKd9lXicRCv725HiasdmQ
用户界面应该快速准确地响应用户输入,并且展示新页面或者新元素和触发它们的元素之间的关系。

1468453688-6226-gT74wkyBmLTGv3ibyPz8u25eianQ

2.关联的

将引起变化的按钮或元件与变化之后的界面联系起来。这种关联背后的逻辑是为了让用户能够更好地理解页面布局上发生的变化以及变化的原因。

下面是两种菜单呼出动画。在第一个例子中,菜单的出现离触发按钮很远,打破了这种关联关系。

1468453691-5393-gKs3S5CJJazC9NvzUBplLKjHiagQ

在第二个例子中,菜单从按钮的右上角弹出,直接与触发点联系起来了。

1468453694-6733-uL3cxsCZEsfzicNybUU4EwEict1Q

另一个例子是,按钮在点击之后发生了功能变化。“播放”按钮点击之后变成“暂停”就是一个很常见的例子,这种变化让用户很容易理解两个功能之间的关联性:点击“播放”功能之后“暂停”功能启用。但这种切换必须是连续的才有意义。

1468453693-5389-jPZZHpdb60mNhY6zZ2CfmOTmuf1A

3.自然的

避免突然的切换。任何一个动画都应该是自然的。在物理世界中,一个物体的加速和减速是受它的质量和表面摩擦力影响。同样,开始或停止在界面上也不会自动发生,而是需要某种力量去推动。

下面这个例子中,用户点击了列表中的一个项目来放大查看它的详细信息。在展开的过程中,小卡片通过一个弧线运动到它的目的地,在上升的过程中,慢慢减速直到停下来,这个交互过程是自然的。

1468453695-2538-K8r5qibcOKURo8zlNEy4xQsspkqQ

4.有目的的

动画的特殊性决定它通常都是交互过程中的焦点,没有任何静态的图片或者文字可以跟它媲美。一个好的动画可以帮助用户顺畅地衔接到下一个页面。

在用户无法判断下一步将发生什么的时候,动画可以很好地缓解这个盲区,至少可以指出即将发生事情的方向,让用户觉得新内容的出现不至于那么突兀。

Mac系统在最小化窗口的时候用了“神奇效果”的动画,把窗口的两种状态很好地衔接在一起。

1468453696-6078-sFGID8bpTZia70nz2O4q52CibW5g
另一个很好的例子是父页面和子页面之间的切换。当用户选择列表或者卡片中的一个项目放大查看它的详细信息的时候,让用户可以保留父页面的情况下查看子页面信息。

1468453697-4414-IjoZzMkEu52UrMNzdiaYkiamcHPQ

5.快速的

当页面元素在不同位置之间移动或者切换自身状态的时候,变化的速度要足够快,让用户感觉不到等待,但是也要足够慢让用户完全理解。所以这个时间尺度要把握好。

不能让动画速度过慢导致一些不必要的延迟。

1468453698-6877-mM54GXJYj5icbqXTZA7J5Dt2olLQ

动画速度要快让用户感觉不到等待。

1468453699-5998-fc7Uiau2icgVAdBTQWBgTicDHGPA

让切换时间缩短,因为用户会经常看到这些切换。保证切换动画时间在300ms以下。

1468453701-3823-sEJ3BTYnCaqjW2SE1Wfs95UnIu3Q

6.清晰的

切换动画不宜在同一个APP中做太多,因为当很多元素都在界面上移动的时候用户会晕。

切换动画应该要清晰,简单,连续。切换动画的原则就是“少即是多”。我们应该聚焦于切换动画对用户来说的实际意义来设计。

总结

综上所述,动画不是随机的,每一个动画背后都应该有特定的目的。不管你的APP事趣味型的,游戏型的,还是严肃的,使用动画的时候都请注意以上几个原则,它可以帮助你提供一个清晰快速流畅的用户体验。

用心设计,对每一个细节都保持敏锐是你取得成功的关键。

本文由stella投稿发布

微信号:SS工作室

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

(0)
iouedioued
上一篇 2016-07-13 09:20
下一篇 2016-07-14 08:01

相关推荐

  • 超实用的响应式排版快速指南

    译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

    2017-06-02
  • 你离用户的距离,只差一个好的体验

    研究表明,90%的用户下载的App只使用一次,然后就会删除。

    2017-05-18
  • IxD交互设计工作中的关注重点

    一、IxD交互设计工作中的关注重点 1. 情景(Context) 皮特•杨•斯塔皮尔斯(Pieter Jan Stappers)认为情景指人与产品交互的环境。情景具体包括的内容取决于设计要解决的问题、设计目标和设计产出。 为什么要研究情…

    交互设计 2015-06-13
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30
  • 动态响应-应用程序的身体语言设计

    引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

    2014-12-30
  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 小欣浅谈 | 用户体验为什么如此重要

    前言说到我们日常所使用的那些产品和服务,我们对它们的情感可谓爱恨交织。它时而让我们为之欢呼雀跃,时而让我们感到挫败沮丧。时而让生活变得简单明了,时而使生活复杂无常。即使这样,我们每天还要和不计其数的产品打交道。而我们的产品开发人员,注意力的重点往往在95%以上都放在产品本身,而用户使用过程中的体验却常常被忽视。而这部分,常常成为一个产品投入市场后的隐形“杀手”。|糟糕的用户体验以我们办公室的饮水机为例:加水的按键分为“高\中\低”三档,...

    2018-04-16
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法 - 聚类 智能推荐大都基于海量数据的计算和处理,然而我们发现在海量数据上高效的运行协同过滤算法以及其他推荐策略这样高复杂的…

    2015-12-22
  • 交互设计攻略之“竞品分析”上

    前言:无论一个产品是从0到1,还是从1到2,我们需要对自身产品有一个清晰的认知与定位,最快的方式就是竞品调研。知己知彼,取长补短。(这里针对自家产品做的一个竞品调研分享,请勿商用。)首先,我们要确定竞品调研的目的是什么?很简单:为了选取同类型产品功能,可供学习与借鉴的地方,从而对本产品平台进行迭代优化。运用金字塔原理自上而下的方法解决“竞品分析的目的”是找出【同类竞品学习与借鉴】,那么引申的问题如下:一、同类型产品有哪些?想知道同类型产...

    2018-03-16
  • 在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?

    锤子新品发布会上,一句“在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?”的话,带来了一个疑问,就是怎么在艰难的情况下进行颠覆性创新! 新增: 1.内置网络免费电话功…

    交互设计 2015-08-26