如何从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元件下载:Axure 7.0 ios8元件库1.2最新版

    axure 元件下载 注意事项: 1、本元件库中的字体图标以及部分元件使用时,需要双击安装1.2版本的压缩包中的TFF字体文件,并重新启动Axure,否则拖进编辑区不能正常显示。 2、如果在本机演示原型,无需进行其他设置…

    2015-07-20
  • axure实例教程 鼠标悬停+动态面板结合使用

    鼠标悬念时改变原状态,如加底色/字体颜色改变等交互在axure中是非常容易实现的,本原型中结合了鼠标悬念和动态面板的使用。上图片啦:
    1.鼠标悬停前效果

    2.鼠标悬停后的效果:字体低色为粉色

    2014-12-31
  • [Mockplus教程]重命名

    对页面和分组的重命名可以选中单个页面,然后使用F2进入名字修改状态,改完之后鼠标随便 点击其它地方即可完成修改。 对于选中页面也可以双击页面节点进入修改状态。 完整演示如下:

    Mockplus 2015-09-18
  • Justinmind权威指南:​基础-Justinmind基本元件的使用-2

    ​上一节说了文本、多行文本、图片、线段元件的使用方式,这一节会讲解最常用的矩形、椭圆、三角形、标注 矩形 这个是最常用的没有之一,原因是因为我们设计产品的基本架构都是方形的,这个大概与硬件的制约有关系,…

    2015-08-31
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23
  • 10个在线原型设计软件推荐

    现在,基于云端的软件渐渐成为主流,而网站原型设计工具当然也不例外。在线原型工具相比于桌面版有得天独厚的优势,它不需要安装、不限制地点、不限制操作系统,无论你使用的Linux,Solaris, Mac 还是Windows,你都…

    原型设计教程 2015-08-25
  • 在熟练使用2B铅笔前,请不要打开Axure

    在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了“无Axure不设计”的恶习,忽略了用户故事、功能规格和信息架构,甚至走入“为了用Axure而用的误区”,导致了资源的大量浪费和产品的硬伤。因此,提醒为Axure着迷的产品经理:在熟练使用2B铅笔前,请不要打开Axure。

    2015-01-01
  • 020.树——axure线框图部件库介绍

    终于到最后一个组件的介绍了!到这里基础的应用应该算完成了!  1. 拖动树组件,到页面编辑区域 2.添加节点,可以添加子节点也可以在该节点的前后添加平级节点  3. 编辑节点图标 做好上面的那一步,图标还不会显示…

    2014-09-12
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • Justinmind权威指南:基础-Justinmind需求面板的使用

    Justinmind权威指南 之 基础-Justinmind需求面板的使用 ​根据Justinmind 中国官方合作机构hansky的介绍:Justinmind是“需求可视化工具”,能够为使用者提供全面的原型建模解决方案,通过该方案,用户可以在正式进行…

    2015-08-10