产品的肢体语言–交互动画

标签: 视觉设计 | 发表时间:2012-04-13 16:03 | 作者:Gucs3
出处:http://mux.baidu.com

随着体验经济时代的到来,人们对产品界面的期待值也越来越高,交互动画在手机领域的应用已经非常普遍,例如Iphone充分发挥了动画在交互易用性方面的优势。 而交互动画会给用户带来一种舒适、自然和流畅的感觉。 交互动画逐渐成为了产品与用户之间的沟通方式,成为产品的肢体语言。尤其是目前高端机的性能提升迅速,也为交互动画的执行效率提供了有效的硬件保证。




Google地图的让工具化与拟物化结合,不论是翻起页面的效果,还是图钉的效果,都是还原真实场景中的操作,通过动画的表现,让其更加逼真。也使界面更加的有层次。
在产品设计过程中,合理运用交互动画让产品与用户更好的互动,让产品变的更具情感,合理的动画运用可以:


提高用户操作流畅性
随着移动终端设备硬件以及软件的不断强大,带给用户的选择也会越来越丰富,用户在使用产品功能的同时,也追求完美的操作,与产品产生良好的互动。
目前app以及wap站的视觉效果绚丽完美的同时,同时带有很多的复杂视觉元素,处理好每个视觉元素的关系,以及有效的传达用户操作后元素之间的关系变化,就需要设计交互动画,阐述其变化的逻辑与过程,让操作更合理,更流畅。




提高用户兴趣,降低学习成本
通过巧妙的交互动画让用户理解产品功能,进而让用户产生良好的心理感受。让用户更容易了解功能,更好的方便的使用产品。有时详细功能的讲解,往往不如一个简单的交互动画效果更具吸引力。目前在游戏中广泛应用。



强化品牌一致性
弹出层,界面滑动,分屏,返回,前进等等,这些交互动画无不流露出品牌的特性与情感
一个标志性的动画效果,往往也会是一个产品的代言。


交互动画设计法则

传达有价值的信息
在用户完成行为之前把结果展示给他们,使他们能更确定自己的行为,避免出错。帮助用户预见自己的行为将造成的结果。
在iphone的屏幕上移动应用图标时,当你把一个图标拖动到一个位置时,旁边的图标会向后或向两侧移动告诉你当你松开手时这个图标将要停放的位置。
以下是总结的交互动画的一些设计原则:

阐述清晰,精确引导
动画是可以清晰阐述产品功能间的切换过程的。当用户进入一个不同的交互模式时,比如两个应用程序之间的切换,动画可以提供一个指引,告诉用户已进入另一个场景。
当我们最大化窗口的时候,这个窗口不是简单的直接放大,而是平滑地向四周展开。这样我们就可以清晰地知道这个窗口被放大了。


动画时长巧妙掌控
在设计动画时,注意动画执行的时间,并且在一些较高频率操作的功能中的动画,是要可以通过操作(点击两次此操作,或是其他操作,点击空白处或是目标区域等等)跳过的。

执行效率需多考虑
目前交互动画在高端机方面应用越来越多,但是各个机型的配置不尽相同,在考虑动画时,需注意各个机型的执行效率,如果覆盖面较广的产品,需要设定一个合理的可支持最低配置以及搭建测试环境,以便确保动画在执行时不会给机器带来过大的压力。

尊重现实规律,或让用户具有“超能力”
就是要符合逻辑规律与自然规律。比如动画中如有位移,应与指向目标位置方向移动;拟物化的设计,就需要真实的动画去模拟还原真实的过程。有时也可以在真实的场景中,让用户完成真实场景中人类不能完成的事情同样也会跟用户满足感。

点到为止,过犹不及
动画的使用犹如双刃剑,顺其势可披荆斩棘,塑造更完美的产品,如使用不当或是滥用,则往往适得其反。

使用频率较高的功能,慎用交互动画
如果是用户使用率非常高的功能,交互动画时一定要慎重。动画执行次数过多也会让用户反感,并延长操作时间。

用户输入,请勿打扰
用户在专注于内容的创建或是填写信息时,动画会分散用户的注意力,甚至让用户产生坏心情。但是信息提交,信息发送等操作,设计巧妙的动画,往往会增加用户的成就感。

尊重用户习惯,“标新立异”不可取
我们要避免触及系统的标准行为,尽量尊重用户习惯。在iPhone中,动画式响应方式是标准的界面风格,比如窗口内容的上下卷滚、元素的出现和消失,以及内容的放大、缩小等等。
用户清楚这些常见的界面元素是如何工作的,他们不愿在每次点击按钮的时候,被迫花费多余的时间去看一些不必要的动画。

相关 [产品 肢体语言 互动] 推荐:

产品的肢体语言–交互动画

- - 百度MUX
随着体验经济时代的到来,人们对产品界面的期待值也越来越高,交互动画在手机领域的应用已经非常普遍,例如Iphone充分发挥了动画在交互易用性方面的优势. 而交互动画会给用户带来一种舒适、自然和流畅的感觉. 交互动画逐渐成为了产品与用户之间的沟通方式,成为产品的肢体语言. 尤其是目前高端机的性能提升迅速,也为交互动画的执行效率提供了有效的硬件保证.

为什么说设计是网站的肢体语言?

- Marshall - 所有文章 - UCD大社区
好的网页不仅仅是有一个好的外表,它还要将信息传达给用户,这可能要比起好看的外表重要得多. 设计视觉信息包括文本内容,它们可使你想要传达信息更容易理解. 考虑到这些,对于来访问你网站的人,你需要掌握链接的方法,除了知道他们想要什么,和他们正在找什么,你还要知道如何让他们更方便地找到这些需要的信息. 不管我们的服务对象是网络达人还是网络文盲你都要找到一种方法去符合这两类人的搜索.

多米DJ: 社会化音乐推荐与互动产品

- imx - 分享网络2.0
多米DJ 是一个新的音乐发现网站,以图形化、社交化以及模拟DJ现场的方式帮助人们找到好听的音乐. 多米DJ 是一个新的音乐发现网站,以图形化、社交化以及模拟DJ现场的方式帮助人们找到好听的音乐. 在这里,每个人都可以成为真正的DJ,由用户自己来决定这场派对中播放的曲目. 你可以通过播放自己共享的音乐,结识到志同道合的朋友,大家畅聊音乐体验以及感受.

产品

- - 人月神话的BLOG
最近一直在思考产品规划和产品设计研发的事情,原来谈的比较多的都是关于咨询和实施方面的内容,而对于软件和信息化行业来说,真正可持续的盈利模式仍然是有核心竞争力的产品,能够在垂直细分领域具备有定价权解决实际业务核心问题的产品. 有时候我们在考虑类似ERP类综合管理软件产品化的困难,但是实际在某个垂直细分领域,进行核心产品开发并实现产品化是完全可行的思路.

产品五问

- xiangqian - 阮一峰的网络日志
开发一个产品的时候,应该问自己五个问题:.   2、他们用这个产品来解决什么问题.   3、这个问题对他们而言有多重要.   4、我们的方法是否足够简单方便.   5、他们要付出的代价与所得是否匹配. 当我们对市场进展不够满意时,检视这5个问题比检视广告更有效. (上面这段话是白鸦在新浪微博里转发的,太重要太正确了.

产品三俗

- - 所有文章 - UCD大社区
有三种流行的产品要素“动态流、瀑布流、奖章”,我称之为产品三俗,容易因其流行而被滥用. PM选择它们有可能是因为“时髦”“标配”“别人都在用”,这很糟糕. 恰好动态流和奖章我都折腾过,多多少少吃过一点亏,总结如下. 动态流给产品带来的好处很多,比如以用户为节点来实现近乎于完美的信息分发网络. 但在采用这个设计之前,首先要理解,在用户层面上其本质是“订阅”,而用户接受动态流的根本原因是,订阅的方式提高了他获取优质内容的效率.

产品经理

- - 人月神话的BLOG
再谈下怎样能够算得上一个合格的产品经理,一个人不是说你能够有产品构思,能够画点原型,能够做团队和项目管理就是产品经理. 苏杰原来有本书叫《人人都是产品经理》,看了后大家可能会觉得做一个产品经理是挺容易的一件事情,但是自互联网提供和设置了大量的产品经理岗位后,产品经理这个词基本就烂大街了. 我们如何来界定一个产品经理,如果简单点来讲可以理解为 根据自己长期的项目和运营实践,通过自己的敏捷洞悉能力和分析能力,能够将当前的市场需求或潜在的市场需求转化为具体的产品需求,并能够核心的定义产品功能模型和价值输出,同时能够通过项目和团队管理的能力,凝聚一个小组形成一个真正的团队,将自己的产品构思付诸于最终产品实现的人.

产品原则和产品评审团

- - 技术改变世界 创新驱动中国 - 《程序员》官网
文 / Marty Cagan  译 / 黄捷文,唐丰能. Marty Cagan是享有世界声誉的产品管理专家,曾经担任网景副总裁、eBay产品管理及设计高级副总裁. 本文是他回顾自己二十多年来从事软件产品管理工作的总结和经验分享,描述了产品开发需要遵循的产品原则以及成立产品评审团的必要性. 产品原则是对团队信仰和价值观的总结,用来指导产品团队作出正确的决策和取舍.

Weico :从产品到产品族

- whale - 爱范儿 · Beats of Bits
eico design 的名字,正被越来越多的手机玩家所熟知,我们曾经在一年前就做过深入的访谈 ,而从 eico 延伸出来的 Weico 品牌,则是他们团队的一次战略突破. 今年 7 月我们对 Weico 的产品化探索作了思考和评论. 时隔 4 个月,他们在产品化道路上走得更远,推出了 WeicoPro(收费版 Weico)、WeicoGIF(声控相机)、WeicoMe(“心情微博”)等新产品,设计系出身的 Weico 正在转变为一个平台品牌.

爱电子产品

- 三天 - 地球没有好朋友
喜欢黑莓手机,因为它输入体验天下无二. 我给自己和小花一共买过6只黑莓手机,型号我全都记得,按时间顺序是7290, 8700,8300,9700 和8520. 我大学时候曾获得手机打字比赛第一名,速度领先第2名二倍,是用8700. 只可惜工作之后,几乎没有人发短信了,输出体验的优势也就随风而逝了. PSP是大四的时候,小花用她的奖学金买给我作礼物,花了1700,当时是很大一笔数字.