疯狂流行的动效!究竟是交互设计还是视觉设计?

 

  @可风f (金山网络交互设计师):自从iOS7发布后UI圈就开始疯狂流行起动画效果,尤其是在Facebook Home之后,大家觉得如果没有酷炫转场、扭来扭去元素,产品就好像上个世纪的老古董一样。但是让整个圈子争相学习的风尚背后却还仍然有一个争议:动效是交互设计还是视觉设计?

  在很多外行人眼中,看到一个App动画不错,往往脱口而出的是“哇,这个App交互好棒!”。或者老板觉得产品太死板了,会对着大家说“我们的产品交互还需要再打磨一下”。其实从严格意义上来说,动效作为交互反馈的一部分也属于交互设计的范畴,但是大部分交互设计师既没有动效设计的能力,也一般不会去做这种事情,而现在努力学习动效的往往又是那些视觉大牛们。那做动效设计的工作流程到底是如何开展的呢?


  要了解这个问题,我们先要看动效设计的目的是什么?

  1,在用户体验上为了达到某种目标的引导

  早期互联网产品动画较少时,大部分动效都是为了解决某个具体的交互问题而存在的,有很强的目标性。比如iOS上book的翻页效果,因为用户对手势翻页没有很好的认知也不会很快适应,所以需要模拟真实的翻书效果让用户适应。


  又或者在Safari下载文件后,文件的进度和管理会在Dock的下载文件夹下,用户不容易发现和注意到,这时会有一个图标飞入到下载文件夹的动画,告诉用户下载的文件已经到这里了。


  2,让界面更灵动活泼

  因为现在越来越流行扁平化,所以设计师都开始用更简单的元素尽量去突出内容。但是如果只是纯粹的扁平的话就未免有点太粗糙了,给人一种界面很死板、没怎么设计的感觉。所以为了泥补这个问题,动效可以让扁平的界面更活泼起来。


  比如Skype将普通的菜单弹出过程加上了果冻效果,让整个界面可爱了许多。类似于这样的动效有很多其实只是为了好看而制作的,他们属于视觉设计的部分,是为了让界面视觉更优秀。

  所以可以看出动效即兼顾了交互的功能性,还具有美观性的特征,应该是交互设计师和视觉设计师互相合作的结果。

  我们团队在具体开展动效设计的过程中,交互设计师会扮演导演的角色,视觉设计师扮演摄影师的角色。在设计动效时,交互设计师要先想明白动效所能解决的问题是什么,需要应用在什么场景下,以及把控动效的实现自然柔和不要过度。而视觉设计师不但要负责动效的制作,还会根据产品的特点加上很多风格化的效果。


  交互设计师并不是动效的制作者,相比较而言视觉设计师不但更方便修改产品的素材,而且对产品的视觉把控能力也更强一些,所以更适合成为制作者。所以我觉得交互设计师要多了解动效的实现原理,学会运用动效解决问题,思考动效的概念。但是鼓励视觉设计师尽量多的掌握动效制作技术,让自己的效果图动起来。

  视觉设计师在动效设计上需要交互设计师的把控,避免成为花瓶。和界面一样,动效在实现过程中也会影响到用户体验,比如过渡的并不自然,或者虽然很好看但是太花哨反而影响信息的阅读等,这些都可以让交互设计师帮忙check一下。

  最后希望各位UI和UE同学,在面对新的流行趋势下能够更多的理解和认识它,不盲从,一起探索更好的工作方法。

时间: 2025-01-02 10:36:24

疯狂流行的动效!究竟是交互设计还是视觉设计?的相关文章

产品需求设计(以迅雷看产品为例)交互设计与视觉设计

文章描述:从产品到设计. 很多网页设计师认为自己做好设计就可以,其他的事可不用理会和学习,那就大错特错了!一个优秀的设计师,必须深入了解产品本身.相关交互结构及用户体验等常识!这样设计师设计的东西才能深入产品中去,避免不犯错误!设计来源生活和思考,同样作为一个网页设计师,要不断地学习.思考.分析产品才能设计出更好的作品! 这里主要以迅雷看看产品为例,谈设计及用户体验的点点滴滴!希望对刚跨入网页设计这行的童鞋们有所帮助! 主要两个方面讲: 1.了解产品需求设计(以迅雷看产品为例) 2.交互设计与视

交互设计与视觉设计在国内的区分

设计都是相通的,http://www.aliyun.com/zixun/aggregation/39.html">视觉设计比较笼统,是最基本的设计需求,包含的各方面设计知识,作品要要让人赏心悦目,过目不忘,满足各种人群的需求: 交互设计会需要的是一种对人心理分析判断的设计,简单来讲,就是我在网页上设计了一个按钮,我不仅要让按钮设计得好看,更重要的是要让人看到这个按钮有点击的欲望,并且会去点击,让使用者和我设计的按钮有交流互动的行为,这才是交互设计的目的,从这点上来看如果非要说区别,交互设计

页面动效能否拯救扁平设计?

  动效现在是扁平化身边的大红人,哪里都有它的身影,动效能否为扁平化增光?设计师有什么利器可以绘制动效?昨天发现一篇好文,关于这两方面都有实在的干货分享,建议同学们当机立断,先转后赞,特别要记得看. 作为一个网页设计师,我们需要努力让我们的技术与技巧与时俱进.我们不用追随每一个时代潮流(比如长投影),但是我们的确需要随着网络的发展与成熟,不断学习并提高我们的技巧. 网页设计产业最近开始火热的新发展之一便是动效,越来越多的公司在他们的应用和网站中放入动效以取悦用户,从竞争对手中脱颖而出以及提升产品

用动效创建的可用性:动效中的用户体验宣言

本文讲的是用动效创建的可用性:动效中的用户体验宣言, 原文作者:Issara Willenskomer 译文出自:掘金翻译计划 译者:Ruixi 校对者:cdpath,osirism 用动效创建的可用性:动效中的用户体验宣言 下面这段宣言即是我对这个问题的回答--"作为一个UX或者UI设计师,在界面中,如何在合适的时间和位置通过动效的使用来支持可用性呢?" 在过去的5年中,我有幸指导过来自40多个国家的 UX 和 UI 设计师,而且我为这些顶级品牌和设计咨询公司带来的建议和指导基本上都

超实用的动效设计入门小手册

  这篇小册子的目的不是手把手教你如何做出一个动效,而是从基础动效.动效曲线.动效软件等方面从头梳理相关的知识点,串成一片,帮助你从整体轮廓上认识动效,适合零基础及新手阅读. 最近几年UI设计领域最大的变化便是越来越强调用户体验设计,而在Web或者App中使用动效也就成了一大趋势.这种趋势是如此强烈,以至于我看到越来越多的应用中所使用的那些动效已经不再是为了提升用户体验,而更多是为了强调动效本身了. 设计师 Pasquale D'Silva 在 Web Direction South 大会上曾这

Google发布了新版Material Design动效指南

  Material Motion 在Material Design的世界中,动效用一种优雅.流动的方式来描述空间关系.功能.和意向. 为什么说动效很重要? 动效可以向我们展示一个app是如何构成和用途. 动效可以做到: ● 不同视图之间的焦点引导 ● 当用户完成了一个手势后,提示用户将会发生什么 ● 明确元素之间的层级和空间关系 ● 当程序在后台运行时,分散用户的注意力(例如获取内容或载入下一个视图) ● 润色整个app:个性化.令人愉悦 如何制作材料设计的动效? 材料设计的运动吸取了一些真实

如何做好产品动效系列:动效与品牌设计原则

如 何做好产品动效系列:动效与品牌设计原则 时间:2014-11-14 09:46 来源:设计达人 作者:佚名 一个新的设计风格的确立一定会提出他特 有的设计原则.而如今设计原则越来越多的关注到了动效的定义.甚至在Android L的Material Design中直接将动效写入的设计原则中:Motion provides meaning (动画表达含义).这里我们就通过一些业界成熟案例来简单说明下动效是怎么在设计原则的基础上定义出来的. 首先,我们看下iOS7上的案例.众所周知,iOS7相对于

移动应用交互设计趋势:潮流元素的创新设计

文章描述:移动应用交互设计趋势:潮流元素的创新设计. 这两个月在忙产品2012的交互设计,很是感触.记得IM组大家在为2012忙得焦头烂额的时候,产品总监说过一句话:"你看每年的时装发布会,衣服都很夸张,但用到市场时,只会看到发布会上的一两个时尚的小元素--"交互设计也是这个样子吧,每年优秀应用所带来的新的流行趋势,总能把交互设计提升到一个新的高度,站在巨人的肩膀上看得更高望得更远--囧,这里说的并不是贬义的"微创新.纳米级微创新.像素级copy--" 虽然自己能力

APPLE WATCH揭秘四个全然不同以往的交互设计经验

  今天仍是Watch应用设计案例.我很喜欢案例学习,所以不会介意连续三周来做相同的话题.下面进入译文. Wallaby是一款个人财务app,可以在你购物时根据不同的场所帮你选择最适合的信用卡进行付款,以最大程度的获取优惠或积分.不过根据我们的了解,在实际当中,很多用户在结账时常常忘记或懒得把手机拿出来使用Wallaby提供的功能. 我们希望Apple Watch版本的Wallaby能从一定程度上解决这一问题.其实在这之前,我们已经打造过Pebbel.Android Wear.Samsung G