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

相关推荐

  • Android界面设计视觉规范

    当你拿到Android的设计需求后,开始着手进行界面的设计,却不知道如何设计才能让用户对界面感到满意,设计出来的界面差强人意,返稿无数以至于一遍遍的修改?如果这就是你现在的状况,那么先别急着重新进行界面的设计,因为你首先得静下心来看一看这篇Android的界面设计规范。

    2017-05-31
  • 用好的交互设计来管理复杂-“个人中心”

    “复杂是世界的一部分,但它不应该令人困惑,好的设计能够帮助我们驯服复杂,不是让事物变得简单(如果复杂是符合需求的),而是去管理复杂”。复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。

    2017-05-19
  • 成都UI-UE交互设计免费试听课了解一下!

    周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需求大,要求也越来越高,所以,培训,是提高水平...

    2018-04-17
  • 图形界面的末路?聊聊未来可能会流行的「对话式交互」

    人类花费数十年才将计算机交互从以命令行为代表的文字界面(TUI)发展到以用户界面为核心的图形界面(GUI),然而这显然不是终点。图形界面之后会出现什么?我们已经隐隐可以窥探到其身影。一起来看看未来流行的交互方式是什么。

    2017-05-20
  • 交互设计9种交互状态的设计

    现在的UI设计团队通常先设计组件,多数界面几乎就是各种组件的结合。这会在用户的“异常路径”上留下不容小觑的断档。由于我们构建的是整个系统,而非几个页面,我们必须投入精力打磨这些常常被忽略的状态的设计,创…

    2015-11-09
  • Designing in color

    色彩是设计师手中强大的力量,它吸引你的眼球,调动你的情绪,让沟通更为有效。为了让你能够认识到色彩是多么重要,在一篇广泛被引用研究的报告-“The Impact of Color on Marketing”,研究者们发现对一些产品来说,90%的人仅仅基于它的颜色对一款产品下决定。

    2016-07-11
  • 【新锐玉商风云榜】颜传赞:以‘用户体验’为支点 撬动家装行业“一键式”转型升级

    在父辈创造的奇迹上,是传承、是创新、是开拓,每一位新生代年轻玉商都在给出自己的答案。——“新锐玉商”专栏总题记新锐玉商风云榜他是“2016浙商年度创新人物”;他提出“构家”如“构车”的“一键式”整体家装新理念,推动家装行业从传统的手工作业升级为家装工业4.0;他的公司“构家”获得复星集团数亿A轮投资。他就是坊间广称为“船长”——杭州构家创始人兼CEO颜传赞。在经济创新这条漫长的大道上,颜传赞以玉环人海派的作风和追求卓越品质的韧性,谱写“...

    2018-02-03
  • 【交互新人】交互设计面试,常见问题汇总

    作者:高杰   今天给大家分享面试交互设计岗时面试官常问的问题、分析目的和建议回答!但这并不表示你在面试时一定会遇到这些问题。任何一个问题,都不存在绝对正确的标准唯一答案。仅供参考!   1、自我介绍 分析…

    交互专题 2017-08-17
  • 轮播图这样的交互方式,真的有效吗?

    轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
    固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。
    —— 电商专家 Depesh Mandalia

    2017-05-15
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20