如何从3个方面判断是否做交互动画

1

IOS 7出来后,交互动画立刻成为设计师的抢手货,有关动效设计的教程都趁势火了一把,但是很少有人讨论到底该不该做交互动画,如果做,为什么?今天终于有同学分享了他的观点,一旦符合文中提到的3个方面,那死心塌地动手吧!

作为设计师,相比以前死板的体验,我们越来越看重APP的交互性。这种心态的转变很大程度上可以归因于IOS 7的大换脸。IOS 7过度动画强调物理变化。从这以后,我们可以看到有很多热门APP上都有非常出色的动效。

令人激动的动效很容易让人着迷,从而让用户忘记机会成本的衡量。另一方面,花费额外的时间,在恰当的时机,使用恰当的动效,可以增加易用性,还可以帮助树立品牌个性,为用户带来愉悦的体验。在这篇文章中,我会告诉你费尽心思给产品添加交互性强的动效对于提升品牌价值是否有意义。

先不谈意义,光看这些动效的奢华程度就心痒痒啊!《最近这个超火!23个FACEBOOK PAPER中的设计细节》

2

可用性

有些APP把交互动效作为工作的核心部分。在下面的实例中,我们可以看到动效可以让人纵览全局,轻松的找到当前在APP中所处的位置。

Pinterest(图钉)

Pinterest是我最喜欢的APP之一,它可以通过手势滑动在列表和详细内容之间自如切换,这比传统笨笨的切换方式好太多。

3

下划返回

5

左划查看下一张

4

上划加载新内容

Circa App(Circa 新闻)

这是另一个使用动效来联系上下文的好例子,Circa 把一篇长文章分为很多小段,在右侧可以看到每个圆点代表一段,上下滑动查看每段的内容。

6

在上面两个例子中,动画不但没有成为浪费时间的累赘,而是真真切切的提升了APP的可用性。

个性

很多APP把交互作为传达品牌个性和内涵的重要途径。在下面的例子中,独特的交互动效已经成为了APP的标志。你的APP动效是滑稽的还是严肃的?是机械的还是柔和的?为你的APP选择恰当的交互和动效会把品牌深深印在用户脑中。

Path & Tumblr

移动终端是Path的唯一平台,在单一平台下创建统一的交互体验是Path的优势。可以看到Path独特的交互理念深入人心,给人亲和、有趣的印象。

7

Tumblr安卓版也在试图给用户创建类似的体验。

8

Tweetbot

Tweetbot是通过创造独特交互体验让用户记住它们品牌的又一个例子。与Path和Tumblr相比,它给人一种机械的,反馈有力的感觉。

Tweetbot的交互动效就像一个具有鲜明特点的机器人一样生动。

9

喜悦

你会发现很多APP的动画来自于UI的变化,这是因为它们设计的文字很少或者不适合做动画。然而,花费大量时间精力去制作吸引眼球的动画代价很大。也正因如此,我们很少看到资金短缺的公司在动画上大做文章。总的来说,做UI变化的动画是为了做动画而做动画,不一定是为了达成某个目的。

Flickr

当你浏览Flickr的引导页也许不会发现什么特别之处,但是当你慢慢滑动屏幕就会发现很美妙的3D动画,利用视差滚动和元素屏蔽就可以达到如下的效果。

10

就算APP的动画做的异常精良美妙,从商业角度看却没有太大意义,尤其是在资源有限的公司。Flickr就是在获得大量融资之后才去投入人力和财力后,才去考虑交互的细节。

结论

选择投入的金钱还是提高用户体验,会决定你的APP未来能否获得成功。所以你要慎重考虑,为什么要制作动画,投入的花费究竟值不值得。你可以通过评价以上三点:可用性、个性、喜悦来做决定。如果你做的动画连一点都没有达到,那么这肯定是不值得的。

 

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

(0)
iouedioued
上一篇 2014-09-28
下一篇 2014-09-30

相关推荐

  • axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11
  • 【Mockplus教程】Windows上安装Mockplus

    进入摩客官网桌面端下载页面,选择对应的版本(windows/MAC)下载。 下载完成后,即可按照向导开始安装。 windows安装的整个过程见下方视频:  

    2015-08-12
  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05
  • Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框(Toast)

    从现在做,跟我一起来认识Mockplus的交互。 Mockplus的交互,非常简单、直观、容易上手。你所需要做的,只是拖一拖鼠标,然后几步设置而已。 当然,只要你愿意,还可以实现强大的交互效果。 不废话,先来做一个,试…

    2016-01-18
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 013. 图片热区——axure线框图部件库介绍

    首先,我们将图片热区组建拖动到axure页面编辑区域 1. 图片热区为页面图片或者其他部件添加热区,添加交互 我们一般在做专题的时候,会遇到一些组合商品,但是又需要单独分别设置连接,如果是2张图片还好办点,可是…

    2014-09-12
  • Justinmind6.8汉化包下载以及Justinmind6.8新功能新增苹果手表部件库

    Justinmind6.8汉化包已经出来了,您如果更新到最新版本截至2015年9月11日 可以下载本汉化包,汉化包来自QQ群:156360020 邀请码iamue 安装汉化的方法压缩包里都有,还有你还可以参考历史版本的汉化包: Justinmind6…

    2015-09-11
  • Axure中文教程:注释功能

    AxureRP将交互与注释说明功能放在了一个面版上,同时又针对整个页面有一个交互与注释说明。交互功能设置的是用户通过不同方式触发页面中元素或者载入页面时,发生的交互动作。而注释说明则用文字详细说明对应元素的细节或页面的说明。由于针对整个页面的说明和交互,与针对页面中某个元素的说明与交互在文档表现和生成的不同,而被分开,但是他们的实际功能是一致的,可以一起来说。这里主要讲述annotations,即注释说明,这个部分主要应用于后期的产品规格说明书的生成,详细可参见《AxureRP教程–生成规格说明书》。

    2015-01-01
  • 【Mockplus教程】复制/克隆

    复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在需要粘贴的位置鼠标右击,在弹出的菜单中选择“粘贴”。 2. …

    Mockplus 2015-09-10
  • Justinmind v6.7新功能:直接调用 ILLustrator 修改 SVG 格式的矢量图形

    原文标题:利用Justinmind 6.7 新功能编辑、制作、使用矢量图标 Justinmind 6.7 提供了对 ILLustrator 矢量图形编辑、复制粘贴的支持,便得在Justinmind中使用高保真图标成为很容易的事情。下面,介绍如何利用网上…

    JustinMind 2015-08-25