优界网

首页 > 教程经验 > DO OR DO NOT?如何从3个方面判断是否做交互动画

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

35

0

0

2015-04-23 16:15:52

〆色計ㄕ╄

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

design-animation-3-judgment-1

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

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

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

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

可用性

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

Pinterest(图钉)

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

02

下划返回

wd-14-9-24-1

左划查看下一张

wd-14-9-24-2

上划加载新内容

Circa App(Circa 新闻)

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

04

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

个性

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

Path & Tumblr

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

06

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

03

Tweetbot

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

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

07

喜悦

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

Flickr

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

05

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

结论

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

已有0人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×