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

相关推荐

  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27
  • 【面试】不吹牛13,我是如何7天拿到百度&网易&创新工厂等6个实习offer的...

      “不卑不吭,保持谦逊”,这是管静总结的与HR和面试官打交道的八字法典。 又是一个40度的夏天,没有喧闹,只有窗外吱吱的蝉鸣。刚过完大三的同学,都开始了寻找实习的路程,有人欢喜有人愁。就读于贵州一所普…

    交互设计 2015-08-17
  • 孙一民:一幅上世纪的图景,一段广州建设的“芳华” | UED设计年会

    2018年伊始,“设计·文化·艺术引领下的城市发展和乡村振兴高峰论坛”在江苏宿迁成功召开。在本次论坛上,众多先进的设计思想汇聚于此,我们不仅看到了设计师眼中的城市发展、乡村振兴脉络,更从城市管理者的角度了解到如何展开以人为本的设计。论坛上,长江学者特聘教授,华南理工大学建筑学院院长、博士生导师孙一民发表了以“设计改变广州”为主题的演讲。从华南中心城市到国家中心城市,伴随着经济的迅猛发展,广州的城市建设也在进行着大步飞跃。常人所见,城市的...

    2018-02-26
  • 交互设计中几个要注意的关键词

    作者:Guibin@DesignGB   sprint “罗马不是一天建成的。” “千里之行,始于足下。” 将一个大问题,拆解成很多小问题,一点一点实现并验证可行性,一个版本一个版本改善,用迭代的思想输出成果。越早交付价值,就越早…

    交互专题 2017-08-07
  • APP界面设计:如何选符合产品气质的字体

    不管是中文还是英文,文字不仅是传达信息的载体,也是设计中的重要元素,设计过程中尽量保证文字的阅读性,在严谨中寻求突破。经过艺术设计的字体,可以使信息更形象、更美感的铭记于你心中。

    2017-05-14
  • 如何向面试官介绍「交互设计」作品?这篇绝对是最全面的!

    招聘季,无论新人还是交互老鸟,都将在「互联网公司鄙视链」上挣扎翻滚。面试官常会要求:介绍一下你的作品…..如何展示交互作品这件事,这篇文章系统总结一下。

    2017-05-25
  • 交互体验设计的新思路——聊天机器人(Chatbot)

    本文作者将阐述了他眼中聊天机器人的优势所在。用户将更多的时间放在通信app中(比如微信),而不是社交app中(比如微博)。通信app逐渐变成一个平台,聊天机器人的介入则帮助聊天用户触达更多的服务。

    2017-04-30
  • 译文|为未来的SaaS应用,提供新的交互及视觉设计

    本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

    2017-05-20
  • 独家UED手机端 保险投注

    活动时间:2018年3月1日中午12:00至2018年3月31日上午11:59 (北京时间)针对于优惠期间内第一次使用头头移动平台的会员50%本金返还,高达RMB 88手机保险投注!活动详情:1.头头移动平台包括手机网页版版平(m.toutou158.com),UED手机端安卓版和iOS版;2.没有下载头头手机端安卓版和iOS版的会员可以进入官网www.toutou158.com下载;3.头头会员需在优惠期间通过头头手移动平台投注第一笔...

    2018-03-29
  • 网页设计中视频运用的7个技巧

    随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

    2017-05-08