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

相关推荐

  • 译文 | 微交互:设计优秀app的秘密

    好的产品往往做好了两点:功能和细节设计。功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

    2017-05-26
  • 困扰多年的选择困难症,居然让交互设计给我治好了...

    觉得自己患上了选择困难症?也许这并不是你的错,而是对方给予的选项太多。 Hick’s Law(席克法则)中说道:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n…

    2015-09-10
  • 交互设计的未来:技术的改变使交互设计的可能性愈加丰富

    Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及其他诸多公司的30多余交互案例。“Modality Interactivity对用户来说更有说服力。因为这使用户在浏览网站的时候更有趣,更吸引他们,并且帮助用户对网站信息产生更积极的态度。” 一位来自罗伯特·莫里斯大学的通讯系助理教授Jeeyun Oh如是说,“交互(Interactivity)通过让用户更深层次地理解网站信息而更具说服力。”欲更多地了解现代交互设计的艺术,可以阅读《Interaction Design Best Practices》一书。

    2017-06-02
  • 为什么蓝色会成为UI设计中最常用的色彩?

    蓝色依然是一种安全的色彩,当你的产品或者网站契合蓝色的气质的时候,不妨选择它,但是始终记住一点:选择适合自己的产品的色彩,才是正确的选择。

    2017-06-08
  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • 交互设计如何影响公司的发展

    在我的工作体验里,交互设计在公司,尤其是软件公司、互联网、智能家居/硬件公司里是非常非常重要的。好的交互设计师在公司里不仅会得到其他人的尊重和肯定,也会影响公司的重大决策。1.交互设计帮助留住用户交互设计的出发点是满足目标用户的需求、解决他们遇到的问题。它可以增加产品的易学性和易用性,提高效率。它使产品架构更合理,减少用户操作步骤,提高效率。同时,好的交互设计可以增强产品的趣味性,强化体验,帮助树立品牌形象。交互设计对于留住用户、增强用...

    2018-03-09
  • 产品需求分析——《破茧成蝶》读书笔记

    这是一本很实在的书,没有很虚的理论,而是结合了国内互联网实际的案例,清晰明了地道出现实情况跟理想状态的不同,并且给出了很好的解决建议。适合刚入行的交互设计师以及产品经理阅读。 进入研究生阶段,大大小小…

    2015-03-05
  • 交互设计工作记录(二)

    作者:飞阿婷的交互设计生活 系列:交互设计工作记录 互联网热点引发的思考 对百度用户体验总监刘超事件,怎么看? 首先,他此次的表现的确挺让人失望的,主要是态度问题,不够尊重台下好学且交了学费的设计师们,…

    2016-07-06
  • 三种方法,使用鲜艳的配色来制作WEB/APP界面

    无论是Web还是APP,鲜艳的配色已开始逐渐具有人气。为了将人们的注意力集中于要素之上,让设计能给用户带来深刻的印象,就让我们来使用鲜艳的配色吧。

    2017-05-09
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04