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

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

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

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

  可用性

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

  Pinterest(图钉)

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


  下划返回


  左划查看下一张


  上划加载新内容

  Circa App(Circa 新闻)

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


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

  个性

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

  Path & Tumblr

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


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


  Tweetbot

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

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


  喜悦

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

  Flickr

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


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

  结论

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

时间: 2024-10-30 08:16:37

如何从3个方面判断是否做交互动画的相关文章

使用一元二次方程做实时动画

使用一元二次方程做实时动画 效果: 原理(图中坐标略有错误,仅供参考-_-!!):   YXMath.h + YXMath.m // // YXMath.h // // http://home.cnblogs.com/u/YouXianMing/ // // Copyright (c) 2014年 Y.X. All rights reserved. // #import <Foundation/Foundation.h> @interface YXMath : NSObject /*----

canvas做loading动画

由于公司最近项目不是很忙,所以,自己利用闲暇的时间来研究了一阵子的htm5和css3,正巧,公司最近要对以前的项目进行一次统一的升级,而我被告知时,主要是在以前的版本中加入一些页面动画.有4人参与了动画特效的编写,我很幸运自己也被选中. 第一次做动效还是用css3,心里好激动.虽然自己对css3不是很了解,但是,我还是有信心自己能够胜任这次的任务.接下来近2个月的时间里,我 都在做css3动效,由于自己只是擅长javascript和JQuery,对css了解也不是很熟悉,所以,做css3动画上还

bbqi教你做Flash动画:头,正面说话,大笑

flash动画 头部动画是我们最常遇到的课题,这里包括各种表情.讲话等等.一般来讲,头部都是作为单独一个s来运用的,即:做出整个影片中需要的所有头部,再和另外制作的身体联结.组合成完整的身体.可以说,头部的组合集中体现了Flash动画充分利用symbol的特色. 我们分析,在脸部的五官中,耳朵和鼻子是不动的.因此我们可以把它和"光秃的头部"连在一起制作.先建立一个3帧的s,根据造型原则,是一个蛋形,带有耳朵和鼻子,命名为"head_00",见图5.1.1-1. 图5

谁说SKETCH不能做交互设计?

  今天抽空看了下Silver这款插件,这是首款内置于Sketch的交互插件,通过它,你可以不用再依赖其它软件,就可以在Sketch中完成交互方案的设计和展示工作,听起来还是很酷的.现在Silver还没有面世,先看看这篇介绍Silver特性的文章吧. 最近交互工具可真是风生水起不断涌现,从原生的Xcode,还有这几个号称不用写代码的的Hype3,Pixate,再到Principle,还有Flinto,还有这个正在开发过程中的Silver.不知道大家是不是已经挑花眼了呢? 不管你是哪个工具的粉,我

PowerPoint做交互课件 不用VBA照样搞定

要想用PowerPoint做交互课件,就必须会VBA编程,这是大家普遍的认识.其实,在用PowerPoint做教学课件时,即使不会VBA,也有许多方法可以做出动感十足的交互效果. 一.用"超链接"的方法 第一步:新建一文档,输入题目.选项.为设计方便,在这里选项设置为三个.设置文本内容的字体.字号.颜色.位置等属性. 第二步:连续复制当前页(根据选项个数,在这里复制三次),然后分别在每个复制页的一个选项的旁边加上评语,如"正确"或"错误".具体设

交互设计师如何做交互?

交互设计师到底是需要做什么? 尽管很多谈及交互的书上都已经回答过了: 发现用户需要,建立明确需求 提出设计方案 制作设计原型 用户测试和评估 还是有很多对交互设计有兴趣的朋友会问我这个问题,并希望我能回答得详细,具体到我工作中的每个细节. 其实交互设计需要做什么,会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别. 下面分享下我是怎样做交互,方式不一定是最合适,希望大家多指点,共同学习进步. 发现用户而要,建立明确需求 发现用户需要的方式有很多种,我们可以在用户反馈里收集到许多用户

几个做交互设计的误区

  传统的设计,主要走的是视觉路子,这块儿东西挖得很深;讲究传达,把设计师想表达的东西.情感.境界通过设计的内容传达给用户;而现代设计,除了表达这些元素之外,更讲究"用户体验""沉浸式""用户行为和操作",这些元素都必须综合的加以考虑,才能得到用户的认可. 简单来说,主要就是加入了"交互"概念.现在各种概念有很多,简单来说,就是这个设计好的东西,对用户操作,"有反应",这种"反应"将赋予

在状态栏上做渐变动画效果

在状态栏上做渐变动画效果   效果   说明 1. 在状态栏上显示信息并覆盖状态栏信息需要技巧 2. 本设计支持外部消息view的定制,只需要实现规定的协议方法即可   源码 https://github.com/YouXianMing/StatusBarMessage // // StatusMessage.h // StatusBarView // // Created by YouXianMing on 15/7/24. // Copyright (c) 2015年 YouXianMing

for语句-c#winform做一个动画()来监视for循环

问题描述 c#winform做一个动画()来监视for循环 类似看视频加载时的加载圈,当for执行的时候开始转动 当for语句结束时 停止转动 能不能做?求大神解惑?怎么做,求资料方法链接 解决方案 在for循环开始前加上 this.Cursor = Cursors.WaitCursor; 在For循环最后加上 this.Cursor = Cursors.Default; 如果是win7以上,会显示滚动的圈,xp以前是沙漏. 解决方案二: 如果不要鼠标效果,就自己做一个panel啥的显示,完了隐