向UXD转型

前言:UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?
三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

汪方进
阿里巴巴BBC UED总监
主题:UXD make designer valuable again(设计增值再现)

前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:Make America great again。他竞选成功,有一部分原因是美国崛起的隐藏势力给了他很大的支持,这股隐藏势力的能量是极强的。在美国崛起的过程中,这股新势力蛰伏尚未爆发。这正类似于我们UED,在互联网崛起过程中,虽然它非常重要,属于企业不可或缺的刚需,但难进入企业战略层。从某种意义来讲,UED也是一股“隐藏势力”,当潜能被开发出来的那一天,这股“隐藏势力”所迸发出来的新能量,也一定能再次为企业增值。所以这次谈UX,我把主题定成了UXD make designer valuable again。

下面这张图,基本上就是我们UED同学的现状,左边是梦想,我们希望用设计驱动创新,做出有情怀、有B格,还能驱动产品改变世界的设计…
1
但现实很骨感,我们当下情况很可能就是苦逼加班的设计师,需求方让改不能不改,不改人家会投诉你,但改来改去可能还是第一稿好——这是我们的状态。我本人也做了十几年设计,设计师的一些现状我非常清楚。

我们当下最大的问题,是理想和现实是有落差。在用研、交互、视觉等不同岗位的设计师,成就感并没有我们所想象的那么强。在阿里这样体量的公司,UED作为业务刚需的技术岗,情况可能相对好一些。但在一些小型公司和初创型公司,以及其他的三线公司,设计师的成就感可能会更弱一些。

第二个是设计师的角色分工问题。我们现在工作分工和以前是不一样的,互联网从萌发到现在,也就十几年的时间,那时候最早一批设计师的Title是“美工”,他们把策划、交互以及视觉的工作都做了。从马斯洛需求分析来看,设计师那时候处于满足产品“生理层”需要的阶段。当时设计师缺乏专业细分,随着国外用户体验全行业纵深化的发展,专业细分开始形成,国内最开始做这块的是CDC,包括百度用户体验部,还有网易的用户体验部,我在网易用户体验部呆了八年,网易用户体验部算是我陪伴着做起来的。这个时候,互联网用户体验形成了专业细分,专业细分其实是一次有重大意义的探索,这种探索推动着“美工时代”向“专业细分时代”转型,这种探索也折射出我们这层人正在思索,思索行业何去何从的问题,即从何而来,又到哪里去。而当下的我们,正在经历这个过程。

目前,我们有用研、交互、视觉三大块的专业分工,但这种分工同时也给我们带来了一些问题。比如交互岗位,如果对接的是一位能力较强的PD,他们可能把交互稿定了七八成,交互设计师完善后交付给视觉设计师,而对接的视觉设计师又有一些交互Sense,他也许把交互稿又改了改,那么这个过程下来,交互设计师的内容,还能保留多少呢?我所说的这种情况,可能也是当下我们交互设计师同学所面临的痛;而视觉设计师又是怎样的现状呢?视觉设计师拿到交互稿后,在交互稿的基础上美化润色一下,自主发挥空间不太大。从我们集团总体情况来看,视觉设计师的(P级)成长是比较慢的,因为我们讲求论述自身设计的价值是什么,但把视觉从整体中剥离出来,视觉设计师设计的某一个页面,具体能带来多少商业价值?视觉设计师很难去论述这点。

这是我们当下状态的一个缩影,那我们该何去何从呢?将来会是什么样子呢?
%e6%96%87%e7%ab%a0_02
将来是什么样子,还是取决于我们对自己的认知和定位。UED同学具有什么样的特色,每位设计师可以先研究自己。每个人研究角度不一样,从我这个角度来看,我觉得这个研究可从两方面进行:

第一个方面,认知设计师价值实现的方式。
香港理工大学教授约翰-赫斯科特(John Heskett)提出设计师有三层价值:
1.设计师作为修饰者。比如美化页面,这是最底层的基础价值;
2.设计师作为区分者。比如根据不同产品,来打造不同调性,把它和同类产品区分开来;
3.设计师作为驱动者。这一点是非常核心的,当设计师作为计划者、驱动者时,类似于我们工作场景中所说的“设计驱动产品”,能够在战略层去提需求,这应该是我们从业者的一种终极梦想,也是价值感非常强的一个阶段。

下图是我们UED工作沉淀下来的价值模型,此处不妨来和大家分享一下。这个沉淀的价值模型,正好与约翰-赫斯科特提出的设计师价值模型相对应,我把整个理论映射到当下我们UED现状,进行理论平层的转移和对照。
%e6%96%87%e7%ab%a0_03
第一层就是UED业务协同的价值。
业务协同是我们的刚性需求,我们必须按质按量去完成业务方的需求。这一点不做到,就失去了UED在业务体系中的位置。第一阶段我们最重要的价值表现,就是让产品好看好用,讲求规范的统一性。当UED价值实现停留在这一层时,其规模一般不太大,或散落在各个业务团队和产品团队,成为一个资源来协同业务。因为在这个阶段,它最重要的功能就是业务协同。

第二层需求则是业务增值。
第一层所讲的是完成,那么完成之后呢?基于我们对用户的判断,形成一些创新点、价值点。比如我们B2B前期摸索出来一些B类特色的东西,我相信其他伙伴也做了类似的事情。在业务协同过程中,我们用自身专业去做创新,这是第二个阶段。第二阶段,UED需要站在用户的角度去发现一些问题,才有机会去发现一些创新点。这时候用户体验的团队规模相对会更大,也更专业,相应地会产生一些工具化、方法论,比如我们团队李龙牵头梳理的“五导家”设计方法论。最典型的就是数据介入协助衡量,比如我们做一个设计创新,改进一个功能,怎么来判定这个的转化率呢?所以这种时候出现了很多数据的工具,比如我们用到的有A plus、回声等工具。

第三层需求则是价值放大。
这是一个了不起的阶段,也是约翰-赫斯科特所说的设计师作为驱动者的那个阶段,这个阶段就是大家心中所梦想的设计驱动产品的阶段。互联网公司中,UED要驱动产品是比较难的,并不代表我们没有机会。为什么说难?因为我们不像苹果、小米,包括像有情怀的老罗所做的公司,他们公司CEO本身就是设计师,公司整个链路都是以设计作为驱动,并由此来确定公司产品研发的方向。在这样的公司,设计师自然而然处在“第三阶段”,设计就是其产品核心的竞争力,设计的价值非常高,产品卖的就是设计。 但当下,我们所处的环境是不一样的。商业公司里的UED设计师更多时候是帮助业务来成功,我们不能打造自己的业务,所以只能在协同业务的全流程中去利用体验的视角洞见机会,这是最本质的区别,这让我们“非常艰难”。不过,认识到这个本质区别后,大家心里其实也就放松了——因为我们选择了这里,那就必须在这种环境中去找寻自身的价值。价值放大的具体案例,今天暂时不作分享。我个人认为,向 UXD转型,而我们即将拥有的UXD能力可能会将这种价值实现变为可能,所以今天聊的话题落在UXD上面。

以上是研究我们未来向何处去的第一个研究角度,即设计师价值实现分哪几种阶段。第二个研究角度,则是回归自身——我们到底是一群什么样的人?把自己当作一个产品去经营,了解自己则是很重要的问题,只有了解自己,才能知道自己的优势和劣势,更好地经营自己的一生。

我取了感性和理性的维度来认知我们UXD同学的思维,主要可分为这三种风格:1.感性和理性均开;2.理性大于感性;3.感性大于理性。
%e6%96%87%e7%ab%a0_04
我们身边也多是这几种类的人,但UED同学可能感性成份更大一些。 第一种感性和理性均开的同学,可能是比较适合做PL,这类同学情商、沟通能力、职业能力都比较综合完善,适合做交互及综合性设计人才;第二类是理性非常多,感性则相对少一些。具有结构化思维,这类人才相对更适合做交互,理性多一些,擅长推导、逻辑思维;第三类则是感性多一些,理性相对少一些。这种相对应的就是艺术家风范、“大师风范”。

三类人才自身发展路径可以归为三种,第一种综合类,可能是理性、感性双重递进,全面深入;第二类理性人才趋向于遵循理性占比更重的思维模型继续深入。第一二类人才具备一定的共性,可以往UXD方向发展。

第三类感性人才趋向于让感性向更极致的方向发展。我们需要将他们从UXD范畴中剥离出来。这类人才往往没有兴趣去把控全链路的工作内容,他们更希望把时间用在设计上。比如插画设计师,淘公仔的设计师、营销设计师、品牌创意设计师。这类人的能力和思维模型,我们定义为“Visual Designer”——创意型设计师(VD)。

目前,我们集团很多设计师都从第三类向第一二类转变。这种现状让我有了一个反思,这其实是我们的一个选择,身处互联网公司,UED天然不是产品,它是产品的刚需,也是提供产品附加值的职能岗。我们要用设计去解决业务问题,业务变现才能体现UED的价值。我们是基于这个土壤,才发现全链路的价值才是最大的,站在用户的角度思辨业务问题,去寻求一些解决方案,这种情况下,业务对我们的要求恰恰就是我们所说的UXD具备的素质。而我们目前已有的专业细分方式,并非一条好的出路,那是我们十余年探索,阶段性需要完成的一个东西。但在未来,当我们专业很强的同时,我们也要把专业揉在一起,解决业务问题,赋能业务,这种状态,才是我所理解的真正的UXD。

UXD是“User experience design”的缩写,全称为“用户体验设计”或“体验设计”,是UED团队中一种设计岗位,是全链路的设计师。其主要特点是具备多样化的专业能力,工作流程覆盖度广,综合素质高,岗位价值大,发展瓶颈小。其核心价值在于为全能型设计师提供明确的发展路径,能产生项目效率提升和体验设计的完整性。

我们理想中的UXD的能力模型,是对用研、交互、视觉都应该是要掌握的。但并不是说要做到样样精通,因为UXD是以理性为主导,兼备感性的能力以及视觉表达的能力。P9的UXD设计师,可能具备P6+或P7的视觉能力,P7的用研能力就OK,更核心的是中坚的交互能力。传统的交互是缺乏用研和视觉能力的,我们认为未来的UXD要做好的话,仍需要补这两方面的能力。
%e6%96%87%e7%ab%a0_05
一旦UXD具备了我们理想中的能力模型(图右),可能大部分视觉设计师没什么事可做了,因为UXD兼备出视觉的能力。加之目前我们建设中台,未来可能都是智能化的设计,视觉设计师发挥的空间就更小了。这种让视觉设计师最痛的时候,便是驱动其转型的时候,催生真正的视觉设计师的时候,我们称之为“创意型”视觉设计师(VD)。这类视觉设计师,越往上走,其创意理念和意识都是特别强的,后面我会和大家一同畅想VD的能力模型。

VD和UXD对比来看,UXD能力范围更广,这将激发优秀视觉设计师无可替代的特殊能力,成为视觉设计师向上发展的核心竞争力。这些便是UXD真正为公司带来的核心价值。

那推行这两种设计师发展路径分类,能解决什么问题呢?

第一是对于交互设计师的意义:
协同上下游时,工作成就感不强,如:思维深入度不够,常受限于PD的思维,部分PD甚至自己画交互稿;之后视觉设计师再出视觉稿的同时,会对交互稿优化甚至修改,此时有些直接和PD单线协同了;高level的交互设计师一般不能出视觉稿,常需要一些视觉设计师与之搭配,项目执行效率不高。
如果成长为全能型设计师,个人价值实现会放大,且更从容自信。

第二是对于视觉设计师的意义:
基本上完成对交互设计稿的视觉表现,对项目的深入度、后期的迭代、数据化掌握不够深入,且说不清楚自身起到的价值。被产品的人一问,很多问题反应不过来,这种状态可能就会比较被动;在年度晋升答辩时刻,评委一般都希望视觉设计师能有体系化思维、结构化表达方式,但平时这方面练习较少,所以视觉的高P一般成长较慢;大部分视觉设计师都承担了交互之后的视觉设计还原工作,如果单从视觉设计这个岗位来讲,视觉设计师从早期互联网时代的“美工”进化并不显著,平时绝大部分精力做了“美化”之工作,对视觉设计本来可以延伸“创意、品牌”等范畴涉猎不深。
将VD作为一个设计师发展方向提出来,让“创意”型的视觉设计师,用艺术和品味塑造个人风格,成就业务品牌!

目前,我们大部分同学分别是交互、视觉、用研,岗位分类现状已经存在十多年时间了,我们不可能一夜之间把这种Title改了,况且每位同学能力模型也有差别。

我们理想状态是顺着当下状态,先设立UXD岗位,唤起一部分人先尝试转型,比如对UXD感兴趣的交互同学会先过去;部分视觉根基还不错的同学,但又不愿意在视觉上纵深发展,也可以转过去;用研也可以转过去。之后通过两三年的沉淀,团队UXD可能越来越多,慢慢成熟了,会自然催生一个新的岗位,就是之前讲的VD。这是我们理想中的转化状态,并不会打乱大家目前的节奏。目前,在我们1688UED,P7以上已有二十余位设计师报名,等他们能力模型成长到了,我们给予转型认证。

今天在一起交流,就是希望把这种理念在滨江园区的UED同学间先分享出来,大家一同往这个方向去走。

接下来和大家具体来讲Job model。这也是去年我们思考梳理出来的观点,UXD是从P5这个级别开始培养,还是从P7开始培养呢?经过三四次的碰撞,集团委员会觉得从P7开始培养更合适,目前UED集团内网就有UXD的Title,集中在P7-P9的设计师。
%e6%96%87%e7%ab%a0_06
为什么这样设定呢?我们认为UXD的能力,是全链路的能力,他们是拥有了交互、视觉和用研的能力之后,进行的一次聚合,这要求他们基础的能力是要兼备的。而设计师处于P5的阶段时,其基础的设计能力还不太强,这种情况下,引导他向全链路方向走,不一定能达到我们预期的效果,所以我们建议P7先向UXD方向转,从集团Title设定的规则来看,也是P7的设计师才能向UXD这个岗位去转,但并不代表P5、P6的设计师没有机会,这一阶段的设计师,可以按照UXD的方向去规划自己的职业,晋升也可以走这个通道。

Job model内容就是以上,包含两个内核,一个内核就是我们设计师的专业能力,第二个内核则是我们的职业能力。大家都明白,具备专业能力,缺乏职业能力,专业能力会难以发挥出来。个人能力再强,但低情商和较弱的沟通能力和项目推动能力,会让设计师再好的设计沦为自己电脑中的一张图形稿。我们认为,在UXD岗位中,职业能力可能是更为重要的,但自身的专业能力是不能少的。

这里所说的专业能力,并不是指传统意义上设计师手头功夫,比如色彩感觉、造型能力、软件熟练度等,我们衡量这个专业能力,是设计师为业务带来的价值。从这个角度来出发,设计师个人能力主要两个方向,一个是设计过程,第二个是设计结果。有了好的过程才会结出好的结果,好的结果不一定需要好的过程。但我们希望UXD是一个扎实的全能设计师,我们会对他的过程和结果都进行评估。
%e6%96%87%e7%ab%a0_07
UXD的设计过程,需要哪些方法,可能会有很多方法论。这次课程结束之后,接下来会有一些课程来分享这些内容,比如数据化驱动、Persona建立、五导家等设计方法等内容。通过这些课程,去协助大家掌握更多思考过程的方法。而结果则主要在业务上体现,这跟我们的KPI就差不多了,比如我们设计师做某一个设计,这个设计能够为业务带来怎样的结果呢?这些结果都是很清晰的。

而职业能力是非常重要的,也是很多视觉设计师尚不够重视的一块内容。往往没看重这块的设计师,设计的过程会变得更艰难,在做设计的过程中,很难和周围人保持节奏上的一致,会觉得自己想的设计方案很完美,而推动实施起来会比较慢。什么原因呢?因为缺乏这块“职业能力”。职业能力最外围的东西就是“自驱力”,UXD作为全链路的设计岗,自驱力是重要的心力支撑,比起沉在做方案、PPT等细处环节性东西,更核心的是推动整体项目落地,UXD最重要的是要做出落地的东西。自驱力作为心力,在此基础上发挥计划执行能力,以及学习分享能力,这是UXD设计师的基本状态。
%e6%96%87%e7%ab%a0_08
这里是我们抽象出来的能力模型的完整图,我们做设计的基础要求就是心力、脑力、体力。在阿里巴巴,这三力也是较为重要的。在我们这一行,从P5到P9的UED同学,是从对技能的要求,到做计划的要求,以至到行业影响的要求。但目前现状,很多设计师会集中在技能这一块,就是图中所示的过程方法和设计输出,这就是技能输出的模块。但专在这一块,是难成为大师的——我之前就讲到,我们并非产品的制造者,所以我们要在计划执行、影响力,增强自身推动力,才有可能拿结果,将自己的专业能力极限放大,最终打造个人品牌。和业务方对接,甚至也可以介入到他们的决策,这些才是我们要的感觉。

以上一直在谈UXD,那么问题来了,有了UXD,还要视觉设计师吗?

毫无疑问,我们是需要这群人存在的,也希望这群人能出现。那么我们所认为的真正的创意型视觉设计师,其能力模型是什么样的呢?我认为主要具备以下几点特征:第一点是他的手活儿特别好,就是其设计输出让人惊叹、称赞,这是作为VD的基本要求——手活儿极佳,输出的东西都不用解释,(需要解释的视觉就不算好视觉了);第二点就是在拥有好的视觉表达能力基础上,还有巧妙的创意。巧妙的创意结合优秀的视觉表达能力,这时候功力才会大增。就像一位侠客,拥有一把宝刀,如果不知道自己目标在哪里,不明白对手是谁,乱砍,那是很尴尬的。创意就是让我们找到对的痛点和目标,一刀下去,能落到实处。

当视觉设计师做到这两点之后,就没什么可以挑剔的,去到任何环境都是有价值发挥点的。但只具备这两点,还不能成为真正意义上的大师,那大师是什么呢?大师要有自己的品牌,打造个人品牌价值。比如原研哉,一提到这个人,我们就自然想到《设计中的设计》。他那一整套设计理念才是改变格局的东西,他以这套设计心法行走江湖,而且带来很多价值,也可直接变现。
%e6%96%87%e7%ab%a0_09
我们整个一千多号UED同学中,有多少“大师”出现呢?而这种大师的出现,将直接影响到我们当下电商整体的感觉,我们拼的到底是什么?我们(阿里巴巴)拼的是运营的能力,对货的能力,渠道的能力,后续的服务能力,包括我们马总的个人的影响力,我们设计师做了什么?这个真的很难讲。当下我们一定要认清自己的价值,才会更好地塑造自己。所以说,只有真正创意型的设计师,才有可能改变这种格局,我们一直期待这样的人出现——当我们UXD成熟的那一天,就是VD出现的那一天。

这是我关于VD的Job Model的一些较为大胆的见解,有待进一步修整。
%e6%96%87%e7%ab%a0_10
从理想步向现实的时候,我们所提的UXD要做的事情便和我们现状有一些本质的区别:第一方面就是从P7-P8的层级,输出体验策略方案,并激活上下游推行,促进业务转化,从这个角度定位自己,而不是做一个交互稿这么简单。这个定位是提供解决方案的,而不是被动地把自己当作一个资源方,去接收业务方的需求,并且将之完成。而UXD刚好可以让自己反位,变被动为主动。UXD拿着自己的方案去提,陈述方案对业务有什么增值,因为UXD的方案是帮助业务成功的,业务方会为之买单的。如果说今天我们的方案,不能为业务买单,说白了就是我们的方案不靠谱。因为业务非常清楚,他们控制资源,技术开发,我们必须争取他们,才能争取到开发。所以说我们的方案,要推行起来是很艰难的。但正是如此,才能更好地显现我们的价值。如果我们的体验方案是卓越的,以一小点去撬动一大点数据的转化,我们的业务方没有理由不为之买单。

P9是输出体验策略方案和思想,并引领行业趋势,制定战略。比如我们未来在整个C2B生产重构,转型新制造的过程中,我们UED在里面的价值是什么?我们可以立足在业务,你可以发现中外设计师几百万人,这几百万的设计师,究竟能不能和工厂结合,催生一个新的行业产生,这是P9、P10要做的事情。

关于VD,这部分我们可以畅想一下,这和UXD是不一样的方向,P5、P6大部分是做营销设计、DPL搭建。P7、P8更重要的把控主视觉风格、调性,他们并不是搬运工,其它稿不需要出太多,但他们应该出一个主视觉稿,就能改变很多东西。他们就是创意型的,创意型的要精修,不能把时间花在做重复工作上。P9、P10则是设计语言的创造者,产品语言和调性的缔造者。研究这些东西,才能说引领行业趋势,把用户体验的拉到一个档次上去了。一旦成为P9、P10级别,设计师个人的品牌就是公司的品牌,设计师个人创造的理念就是公司的理念,个人风格就是公司产品的风格,这些东西才是我们真正要体现的。个人的品牌价值与公司产品的品牌完美地重合了,这才是真正的视觉大牛。

今天的分享进入尾声了,当下我们推行的中台是孵化UXD诞生的最佳契机,未来机器会比人聪明,很多东西都会智能化。设计也不例外,当下我们设计师要认识到自己并没那么伟大,设计师当下所做的很多工作,未来都可能被机器替代。比如网页设计,可能在未来两三年内,大部分实现机器化,我们中台就是瞄准这个方向去的。想一想那个时代的到来,我们在座的设计师,到底能做些什么呢?

我希望在整个UED被中台推到“行至水穷处”的那一天,UXD作为探索者,可以为我们带来新的出路,一同坐看云起时。
UXD make designer valuable again!谢谢大家!

接下来阿里巴巴国际UED B2B总监高峰、阿里巴巴国际UED AliExpress总监周敏青作为重要出场嘉宾,分别从自身角度出发,分享了他们对于UXD的一些观点。

高峰提到,UX是趋势。阿里集团当下大环境,为设计师转型UX提供了很好的基础,B2B UED团队也做了对有关UX设计师的引导。

“很多年前,设计师各种工作都要做,职能很丰富。但当年的设计师和今天所说的UX并不相同。阿里主要做平台,团队到一定规模后,平台的视觉规范很难靠设计师”人肉”来把控。2013年无线All in,安卓和ios各有一套设计规范,我们认识到规范的重要性。通过这些年的积累,用户对产品的认知和使用逻辑慢慢沉淀,我们也理清了用户的认知逻辑,那么很多东西是可以被工具化的。比如美图秀秀这样的产品,其实就是一种工具化,这种工具化的东西降低了专业门槛。

当下集团推行中台,将很多东西规范化,中台也是一种基础工具。在工具化趋势的背景下,设计师应向何处去?其实公司推行中台,恰好给设计师向前跨提供了好的契机,让大家可以空出一些时间,去了解客户,上数据大学,向UX转型。

在B2B UED,我有意识让Leader根据项目的特性来安排不同设计师去执行,让大家在这个转型过程更容易。UX并不意味着只是交互+视觉+用研,但我希望这两年,我们能尽量让设计师融交互与视觉于一体”。

周敏青认同UX是行业趋势。

“专业精深还是UX?这是行业讨论多年的一个课题。当下技术和工具的升级,将设计师从部分劳力工作中解放出来,让他们有更多时间和精力关注End-To-End用户体验,从而为业务带来更多价值。 这几年,UX的概念在国内外提得越来越多,行业对于有全局观的综合性设计人才的需求也更多了,国外设计教育也开始注重学生相关能力的培养。对公司和设计师而言, UX不止是对人才效能的提升,也是对这个行业使命的明确态度。面对这一趋势,AliEpxress UED除了为希望转型的设计师提供相关培训机会之外,更注重理论和实践相结合。通过mentor的指导, 让设计师在具体项目中充分领悟UX的方式方法。”

周敏青特别指出在强调UX综合能力的同时,也要平衡专业精深的发展。一个复杂的系统需要卓越的信息架构、交互模式、视觉和文案体系。要想一个职能就能面面俱到是不太现实的,设计师本身也会有各自的特质和理想。 在UX趋势中大家要明确自己的特长,找到最能发挥潜力的方向, 例如视觉精深可以体现在产品的视觉框架、图形逻辑、感情表达或营销的品牌传达等等。团队leader要结合业务需要和个人特性找到最合理的职能结构和员工发展方向。

现场精彩视频回顾,请扫描二维码H5观看:
%e5%90%91ux%e8%bd%ac%e5%9e%8bh5%e4%ba%8c%e7%bb%b4%e7%a0%81

有优秀课程请联系我们:
何成龙 yuchan.heyc@alibaba-inc.com

16年9月8日的拿货节是1688全年所有行业和业务参与度最高的一次大促,“打造一个完整B2B供应链的营销大促”是98大促设计的核心思路。刚接到这个任务时,有一点君也是惊!呆!了!300多个会场,几千个外投资源位,还要打造1688的营销品牌,一个B类大促,在服务透传、商家浮现、市场放声的基础上,还要玩出设计的特色,要促销氛围,也要高效导购。HolyHigh!在UED资源非常有限的情况下,该如何在短短一个月的时间内搞定体量如此巨大的一次大促呢?

有一点君将从以下几个部分分别阐述如何用产品思维做大促: PART 01 拿货节品牌标志定义 PART 02 整体页面框架&导流策略 PART 03 会场设计策略 PART 04 会场动效设计方案 PART 05 组件&外投资源位设计方案 PART 06 自动化设计&流程标准化 PART 07 买家调研&数据衡量模型 PART 08 小结&未来方向

1

海量的会场、资源位和组件需求,不同垂直行业和横向业务的运营策略,如何在一个活动中进行统一呢?我们需要定义一个具有广泛适用性的图形化品牌标志,来代表1688拿货节这个大活动。结合1688的阿牛形象,最终采用了牛头作为统一的大促形象塑造,复用到了大促的各个角落。

2

在以往大促中,由于爆发日流量巨大,很多时候大促主会场成为了各个项目组划分势力范围的对象,对于B类买家这样一个行业特色明显的群体来说,并不是最优的用户体验。本次大促ued在整体导流的设计策略上提出新的思路:将所有分会场打散,重新按行业聚合各个(横向业务、场景导购、垂直行业的)分会场。从买家视角,按行业组织好货、尖货等各具特色的货源,形成丰富的行业一盘货特色导购,缩短买家寻找、浏览的操作路径,提升分会场的曝光率和到达率;

3

4

在不断地与整个大促项目组的同学沟通过程中,逐渐确定了以B类买家视角为主要设计方针98主会场框架: 原来大促导流上的问题: 部分相关、相近会场之间割据,流量没有形成良性流动; 花钱导入的流量最后形成的浏览路径不深; 各个会场曝光机会相差悬殊; 加剧各横向业务争着独立去外面投放争流量资源;

新的导流思路改进: 主会场和行业首页按行业聚合所有相关垂直和横向会场为主,以按业务聚合为辅,方便行业用户看全某行业的一盘货; 促使运营挖掘各个分会场的特色,作出会场差异; 强化相近分会场之间互链,给用户更多连续逛的机会; 最终新导流思路落地在主会场页面上进行试点,行业主会场还是由垂直行业自运营:

5

制定了页面整体框架&流量策略后,会场的设计开始执行“打造一个完整B2B供应链的营销大促”的思路方针,通过牛头的营销图形化品牌标志,复用到了各个垂直行业&横向业务会场中。

6

主会场视觉主要围绕以下三个方面来凸显 -文案:突出“1688拿货节主文案”辅助展现“金秋备货季”副文案,同时突出利益点; -品牌:增加新版“牛头”图形化设计元素,与本次98大促的二级、三级会场形成联动,打造1688全网品牌化大促方案; -场景:供应链场景围绕“1688拿货节”主文案,设定从源头原材料->工厂->分销商->物流->线下档口&零售店的完整供应链通路,打通完善整个B类链路的视觉 呈现,同时主会场选择了3D建模的手法,将整个场景围绕拿货节和牛头的主文案进行渲染。

7

8

9

10

11

12

主会场的楼层设计

13

新导流思路在主会场上执行后,以女装楼层为例,集中导购后用户的人均浏览会场数相比女装整体的会场曝光效果有大幅提升,高出15%以上。

14

以牛头作为核心视觉元素进行分会场拓展,在风格上做到百花齐放的同时也保证了很强的活动统一性。

15

16

17

18

19

20

21

分会场视觉设计则着重考虑以下三个方面: -品牌统一性:为与主会场及二级分会场保持统一,深化1688的全网品牌化,分会场设计中采用“牛头”图形化设计元素,并将主会场3D建模的视觉效果延展其中。 -行业丰富性:为凸显行业差异化,行业分会场与伙拼、代销、进口横向分会场在构图方式、背景氛围渲染上有一定区别,在辅助图形元素及配色方式等方面可融入行业独有特性。 -设计效率与成本:在短短两周时间内,输出300+个页面,在保证页面质量的同时,设计效率尤为重要,分会场设计需考虑模板的修改成本,通过清晰明了的模板规范、一键修改背景色、多种文案排版参照等等方式,提高页面产出效率。

22

23

24

以往大促中,当设计师设计了复杂题图动效的时候,往往会占用较多前端资源,但动效一般上线时间较短(爆发期1~3天),同时技术手段实现的动画效果有限,为了彻底释放前端资源,同时减少设计师做动效时所受的限制,进而通过更加酷炫的效果来烘托大促氛围、突出利益点,在98大促中整个主会场题图使用视频方式进行展示。

25

综合选定的视频技术实现方式和各个技术手段对比如下——

26

主会场线上效果均以Webm技术手段实现——

27

28

29

banner资源位根据大促各个阶段的不同分为要求来进行打造

30

1688首页氛围

31

搜索LOGO动效

32

红包宝箱

33

34

流程标准化: 大促全角色工作流程作为营销体系策略的重要一环,涉及到外部角色及UED内部角色较多,流程的标准化可使大型促销活动组织更有序,减少沟通成本,提升质量及效率。例如UED内部全角色工作流,包含设计接口、交互设计、主会场设计、横向主会场设计、分会场设计、组件及氛围设计、买家调研等9个主要角色,从大促KICK OFF到返场结束,分为10个时间段,其中包括需求评审、设计初稿及组件评审、设计评审、开发评审、页面上线5个关键节点,每个时间段的工作事宜,关键节点的输入输出都进行了具体的细分,各角色可快速找到工作重点,紧紧围绕业务制定工作计划,提高工作效率。

35

36

自动化设计中心,利用优质的模板和外包计件平台帮助运营快速搭建页面

37

38

39

建立大促数据指标衡量模型:积累历次数据

40

划分大促买家调研的重点用户群体为其中3类人,样本提取逻辑如下:

41

汇总用户群买家问题,并归类总结反馈。

42

总结一下,每年1688全站大促有4-5次,其中穿插各个垂直&横向业务的大促活动更是数不胜数,在如此密集的活动需求情况下,用产品化的思维做大促在品牌传递、大促体系化设计、项目组提效、大促玩法&组件复用等方面都起到很好的作用。未来的B2B营销设计一定是走向更加的智能化和个性化,流量的分配导流也会更加合理和高效,这也是我们B类营销设计师未来研究的方向。

BY 阿里巴巴_B2B_UED 营销设计组

我们在生活中或网络商经常能看到一些使用心理学小技巧去设计一个东西,去引导用户的行为,例如:
– 在男性小便池里印一只逼真的苍蝇图形,就能大大减少尿液溅到小便池的外面;
– 在超市商场收银处顾客手边的货架放置休闲食品、新促销品等顾客不会太需要思考的商品能提高这类商品的销量;
– 在一些价格不高昂的服务推销电话上,推销员会跳过询问被访用户是否需要新的服务,而直问A服务和B服务哪个更符合您目前的需求,用户往往会下意识的选其一,从而大大提高新服务的开通率。

这种利用心理学小技巧是人不自觉的按照设想者的意愿方向行动,不需要强迫用户,也不需要高的教育成本,只是利用了人的心理弱点,或者说是心理特征,引导你按照设计者的方向做事,看似用户没有压力,设计者没有成本,然后用户高高兴兴的按设计者的想法把事情给做了。 这个“心理学技巧”的门派的名字就叫做“行为设计学(Behaviour Design)” 由斯坦福大学的B.J.Fogg所提出。

根据行为设计学对上述的几个心理学小案例分析,这里面暗藏3个关键因素:
1. 这个人必须自己想做这件事(意愿/动机) —— 如果一个人对这件事没有做的意愿,是不会去做的。
2. 这个人要能做到这件事(能力/成本)—— 也就是说这件事付出的成本越少越好,执行起来越简单越好。这里说的成本包括时间、物质、体力、心理、社会意识等各种形式的“成本”
3. 适当的时候要提醒他做这件事 —— 你得提醒他做这件事。但只有满足了以上两点,你的提醒才有意义。我们的文案,广告以及各种营销活动目的就是提醒消费者。 我们所设计的提醒要达到目的,前面两项的存在是前提。如果用户根本没有意愿,你所做的提醒则会视为骚扰,如果用户有意愿,但是达成这个目的的流程难度复杂,成本太高,他也会感到困扰而放弃。

这3个关键因素的前两个前提,对所要“设计”的行为能否达成所产生的影响,我们可以用一个简单模型图来看:

从上图可以清晰的了解:动机越强,难度成本越低,目标越容易达成。这3个关键因素我们来具体深入分析:

1. 意愿/动机 包括:直接动机、间接动机;
举个例子,在心理学上有一个对人“敬畏感”的研究,心理学上对“敬畏”的定义是:人们看到一种比自身伟大得多的实物,所产生的情绪。“敬畏”情绪的作用能让人更迷信、能加强人的集体认同感、能让人更好的合作等等。我们可以看到很多宗教场所设计建造得异常的精美华丽、高耸巨大,是为了营造一种超自然的,常人难以企及和掌控的感觉,使信众产生出“敬畏”的情绪,来对信众进行精神控制和加强群体认同,从而实现引导和掌控信众的行为。
church

除宗教外,当我们看到自然界比如广袤辽阔的草原,浩瀚无垠的大海同样会对大自然产生出“敬畏”的情绪,感受到自身的渺小。很多产品品牌也会借助这种人对自然的“敬畏”感来做文章,例如大家熟悉的原研哉03年为无印良品设计的“地平线”系列平面广告。 他把无印良品追求自然、极致简洁的产品理念和真实自然的博大、致简进行移情,意在把人们对自然的敬畏心转移至无印良品品牌理念的认同上来。
mujiAD
这种利用如“敬畏”情绪等心理学手段,可以潜移默化的影响受众的意愿或动机,让人心甘情愿地,不知不觉地跟随策划者的思路引导。当然影响人们意愿与动机的因素和方法还有很多。

2. 能力/成本 包括:时间成本、金钱成本、体力脑力付出、社会压力、习惯惯性等;
这里举一个反例:某地的一所幼儿园,老师最头疼的一件事是每到放学点,很多家长是迟迟不来接小孩,有的甚至经常晚一两个小时,这可苦了幼儿园的老师园长了。延迟的时间增加了幼儿园的运营成本,于是园长决定通过小额罚款的方式刺激一下经常迟到的家长,晚来十五分钟以上的均罚款20元,想借此办法缓解放学时间迟接孩子的问题。但措施出来后让幼儿园所有人大跌眼镜,不仅经常迟接小孩的家长没有太大改观,原来不怎么迟来的家长还增加了,幼儿园因为这一措施此状况反而更加雪上加霜。
为什么会出现这样的问题,根据行为设计学的三个关键要素分析,家长的“迟到”这里不说是意愿强,也是各有其原因。而这件事情的“难度”在于家长对于迟到,会有“惭愧“和”面子“的代价。然而幼儿园提出的罚款则一下子把“惭愧”和“面子”的这一“难度”完全去除了,同时甚至在提醒家长可以通过交钱的方式心安理得的“完成迟到”这件事情,结果可想而知。

3. 提醒/触发 包括:信号、刺激、辅助行为或服务。
例如用户不知道该如何做时,刚好旁边就出现了帮助功能或人工支持,或者拿文章最开始那个例子来说,小便池里印上那只苍蝇从而引导使用者下意识的去瞄准它,就是行为设计里因素3一个非常有创意的形式。 在对于某一特定领域或场景,如何应用行为设计学。比方说有一个商家,他在想应该把主要精力放在提升购买者意愿上还是放在简化流程上,让人家更容易下单呢? 作为老司机B.J.Fogg明确告诉我们:简化流程才是他最应该做的

微信红包能够在短时间内爆发的原因,也是因为它足够简单,抢红包手指按一下就行,发红包也很简单,以至于很多人都不会用微信转账,但是可以用发红包的方式来达到付款的目的。 又例如,有报道说美国的总统竞选的投票率其实很低,很多人懒得花时间、精力去投票站投票,与其花很多钱做广告,跑各地去演讲,很多政客倒不如在投票日这天直接派大巴把选民接到到投票站去效果好。

以上是分析讲的是在一件事情上,或者说一次“行为的设计”上如何让你所期望的行为会被达成的可能性更大。那如果在一个事情上,用户意愿很强,他做这件事情有很简单,而你的提醒又恰到好处,这样就会产生一个非常好的效果,用户会养成做这件事的习惯。这可以理解为——“长期行为的设计” 我们经常听说的培养用户习惯,说白了就是让他上瘾。 这方面行为设计学上给出了两条:
1.是让用户第一次接触的时候留下一个很好的印象;
2.是让用户常能获得一些成就感。

给用户好的第一印象,这好理解。第2点——“让用户常常能获得一些成就感” 有可能大家知道一个心理学实验:一只被装在透明盒子里的老鼠,盒壁上有个控制杆,只要老鼠一推控制杆,上面就会有食物掉下来。但如果它每次“操作”都有食物掉下,而且掉下的食物每次都一样多,那这只老鼠去推控制杆的积极性会很很快减小。而如果对这个实验稍做调整,设定老鼠推控制杆不一定每次都会有食物掉下来,而且掉下来食物的量每次都不一样。结果这只老鼠对推控制杆这件事情立即就“上瘾”了,积极性会有巨大的提高。

了解完这个实验,再会过来看现在的社交网络,我们在微博、微信上你发的消息、动态,都有可能获得朋友的点赞或回复,别人的每一个点赞或回复,都能给你带来一次很愉悦的心理感受。 但是这里“常给用户一些成就感” 行为学上提到的“培养用户习惯”还需要用到一个心理学原则就是“变换奖励原则” 通俗的说就是把给用户的”成就感随机化,而不能规律到让用户早就能预知你会什么时候,要给他什么样的“惊喜” 。 比如说游戏室里的老虎机,总让你觉得“差一点”就中。又如你在朋友圈里发一条动态之后你会想知道谁会点赞,谁评论了。这么久了有没有新的点赞,赶紧拿起手机去看一眼。这就是为什么我们平均每人每天看150次手机的原因。
FQ

“行为设计”的中的门道其实在商业,甚至我们生活所接触的各个领域都已广泛使用。我们在作为顾客、消费者、产品用户等等角色时候的行为,可以说无时无刻不处在被“设计”之中。 那回过来想,我们所处的狭义上的设计工作领域里, 比如产品体验设计上,是否能从“设计行为学”中获取到可用的灵感,从正面、积极的角度,通过提升产品流程、布局或感官设计, 从而使用户达成我们的某预设目标成功率、愉悦度更高。通过适当的“成就感”的设置,来提升用户活跃度与粘性等等,我想答案是肯定的。

【译者注】Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。阿里巴巴也有自己的零售通业务,我们UED团队会探索各种方式通过体验为业务赋能,其中就有一些产品页面插画设计的使用场景与本文描述内容有关。本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。无线U递组以往更多选择产品设计与交互设计方面文章翻译,之后也会适当触及视觉设计领域的优质内容。

在产品插画中合理使用比喻既不是在插画中使用比喻的修辞方式,也不是在把比喻内容用插画表现出来这么简单。

最近我被问到蛮多的一个问题是:在招聘插画师时你主要考核什么方面?

既不是拥有独特的个人特质,也不是深谙多种风格,更不是曾服务过的知名客户列表或者作品出展过的地方,当然拥有这些资质也挺不错的。我的答案是:设计师对比喻的使用程度。为团队招聘插画师的时候,我最想了解候选人是否理解如何通过愉悦轻松易懂的方式,借助比喻来传递复杂的想法。

对使用比喻的能力如此看重使得我的学生及同事们都很惊讶,那么我还是解释一下在Shopify插画团队里我们如何使用和理解比喻

除了铅笔、手写笔或者咖啡,比喻叙词表(更实在点说,我们电脑里保留了一份比喻使用的参照文档)也是是插画师经常使用的工具。冒着“插画师有一定的创作套路”被外人熟知的风险,我们在辅助设计师进行插画设计关键创意时也使用这种方法。插画设计的确有一种捷径。尽管立场坚定的站在设计阵营,顶着设计师的尊敬称呼,我也得承认:插画本身就是一种内容表达。正如作家撰写的故事里,产品是如何无缝融入我们生活的,插画师使用比喻这类文学工具将复杂的想法与背后相关体验连接起来,努力挖掘深层原因,使得用户被产品的无形利益吸引。

在产品设计中熟练有效的使用比喻,首先得找到需要传递的核心信息。常见的错误包括:在图形中传递了多重目标或信息;允许一个图标包含两个物体而不是一个;允许一个背景物品吸引了场景中大量的注意力(因为大部分设计师偏爱这样)。从16像素的图标设计到精致入微的场景设计,比喻都可以作为一个优秀工具。但无论如何都要通过比喻赋予图形具体意义,以帮助用户更方便的进行产品导航。随着插画复杂度的增加,我们需要定义视觉层级,其中每个层级的元素为插画传递核心信息的整体故事服务。当你为插画添加元素时,必须反问自己“这个元素对整个画面表达的故事有帮助么?”“这部分有益于核心信息传递么?”,如果答案为否,请准备好删掉它们。

产品设计比喻的类型

好吧,在没有理解什么是比喻之前,我不确定大家能读懂后文。在未说明定义之前就谈论分类听起来很怪,以防万一我还是解释一下。比喻(隐喻或明喻)是文学中以非字面意思连接两个想法的修辞方式,而不是单纯的夸大想法本身或者夸大表现互动方式。

一、标准比喻

这个元素与那个元素在某刻具备相似性。如下图所示,它不需要展示实际产品就能让用户理解。图中并不是真正在讨论冰激凌,而是通过插画以比喻的方式传递了“正如用户能够按口味喜好用配料调制成个人专属的冰激凌一样,你也能根据自己的需要为利用我们提供的服务(App)来打造你的专属店铺”的理念。

这招在产品设计中特别管用,尤其是那种无形、复杂的数字产品。 1

二、融合比喻

这个元素与那个元素融合,就能表达我们想要传递的内容。可能这类比喻使用起来需要更老道的经验,但在产品插画里的确更受重视,或者说一般设计都会考虑它,因为它是让用户获知你的产品或功能卖点的捷径。如下图所示,没错,你知道我们提供了“购买”的按钮,但瞧瞧旁边摆放的画笔,基于对画笔的了解,你就会明白你能定制“购买”按钮的颜色。将刷子的功能与按钮的功能混合起来,刷子可以自定义颜色,因此我们的按钮也可以。与品牌和营销设计一样,这种比喻在图标设计中也时常出现。 2

三、相似类比

这个元素在线上和线下有相似之处。尽管我不认为它是一类比喻,但在产品设计中我还是将它单独拿出来说。比喻常用来展现触动人心的部分,那是一件事情或者一个行动产生的积极感觉。不过,对于内容传递给用户的方式,团队更倾向于中立精确的写实表达。不必告诉用户我们的感受如何,只需简洁传达信息。用插画的专业术语来表达则是:我们只愿意通过绘制写实状态下的物品,来帮助用户理解线上的内容。当然,谈到产品时,我们大多是在电脑上作画,比如,你可以绘制20多个互相连接的空状态页面,来表达重复性。这也是我们在为用户传达内容时增加的一种类比方式。比如下图的例子,线上电子商务可以让用户通过优惠码输入实现折扣,那么线下实体销售折扣该如何表达呢?可能是一堆贴纸和带着折扣价格的红色标记。我们能借助全新怀旧风格的插画为用户带来愉悦,同时还能保持中立,只是简单清晰的表达信息。 3 提醒:使用陈旧或过时的物品做相似类比时,信息会有误传风险。

在产品设计中使用比喻

当有了新想法,试图找到合适的切入点来讲个好故事时,我们通常问自己“为什么商家在乎?”,接着就是“这种无形的体验究竟是什么?”“如何把故事讲好?”这些问题。

【案例:用插画表达用户能够购买自定义域名的功能】

备注:这些想法来自我们极具才华的插画实习生Erin,他现在负责通过插画宣传自定义域名的功能。早上我们有过交流,我认为与其绞尽脑汁编一个,还不如直接用身边这个触动我的完美案例。

Q:为什么商家在乎?

他们在乎该功能因为他们不再愿意告诉用户他们的冗长域名breadpoetsociety.myshopify.com。像他们承诺提供稞麦粉出售、松脆饼打包、甜甜圈贩卖服务一样,商家希望购买自定义域名也能被认真对待。

Q:这种无形的体验究竟是什么?

插画要能体现用户以下感受:他们已经为“打造面包诗人公社”的目标做好一切准备,这不再是周末萌发的天真想法,而是一个成熟的业务,包括随之而来的激情与期待。

Q:如何把故事讲好?从哪里切入?

1、标准比喻。

首先绘制一个小屋或店面,因为线上与线下类似。一个设计概念能以多种方式传达,取决于你打算聚焦于哪些元素,以及你如何从宏观和微观角度表达它们。

例如,对整个店面,经纪人标识,店铺里的装修的视觉表达。

2、融合比喻。

将“家/店铺”与“域名/线上”的概念以任何穷举组合的方式融合起来。

例如,将家与路由器、店铺与一系列结点、符号与网络的特点进行融合。

3、相似类比。

可以从名片切入,模拟现实里将承诺的个性化名称与有形物品的结合实现。无论是线下打印出来还是线上展示,尝试用插画去捕捉和表达“客户看到定制的业务名字被写出来,初次被当做自己的生意提及时的那种激动感受”。

用户通过我们的产品,基于数据对定价策略、销售渠道和潜在买家行为进行有形决策。而我们则使用插画来表达那份无形的体验:用户掌控日程的自由,打造专属物品的满足,初次销售后发自内心的喜悦。这些无形的体验或许不会成为用户界面的一部分,也不会成为对老板汇报的内容,更不容易以实打实的可见产品价值论证自身的设计价值,但它们不仅是产品设计的重要内容,也是我们所倡导的设计方式。产品插画中的比喻逐渐成为这部分从未尝试过的触动人心体验的代表,超越了那些使得用户爱上产品的有形功能内核,升华了整个故事。

原文地址:

https://medium.com/shopify-ux/effectively-using-metaphor-in-product-illustration-62bdccbe14e4#.ljarg9a16

译者:

阿里巴巴/1688UED/无线交互/舒舟

写在前面:视觉宝宝们,在设计界全民视频化,VR,动效满天飞,每天都在创新的互联网设计新时代浪潮下,你还在为自己精心堆砌出的完美像素沾沾自喜么?

残忍的告诉你,这已经远远不够了,得让你的设计动起来!不仅能让前端工程师更清楚的理解你脑中的呈现效果,减少沟通及返工成本,同时也能让我们的设计输出更加完整专业并且B格满满。

然而传统的用Photoshop时间线来制作动效的方法,过于复杂,并且不够灵活,在需要做到位移和缩放效果并行的时候就显得尤为笨拙,往往需要一帧一帧的设置并不断调试,太耗费精力,并且呈现效果还不一定顺畅, 而能够做出细腻动效的像AfterEffects等专业动效软件学习成本又过高,让人望而却步…

不要蓝瘦,不要香菇,这个时候其实我们完全可以偷个懒,弯道超车!

来,先看张图:

如此流畅细腻的动效当然不是用Photoshop一帧帧做出来的~ 我们用Keynote,3分钟就能实现,快来一起get这个技能吧!

首先,你的电脑里需要安装以下2个软件:

Step 1,先将你需要制作动效的源文件在Photoshop里分好层,并导出png文件(以进口无线伙拼题图动效为例);

Step 2,再拖移至Keynote里,并将分层的图片按照设计稿中的最终位置及图层顺序排列;

Step 3,为每个需要动态效果的图层设置动作,可以是位移并同时缩小; 操作:动画效果 > 动作 > 添加效果 > 移到,然后鼠标拖动图层至需要移到的位置及尺寸

同时可以分别针对每个图层动作设置 “持续时间”,使动作呈现效果更有层次;

Step 4,全部设置完成后,点击右下角 “动作顺序” , 将构件顺序全部设置为 “与构件1一起”,至此你的动效设计已经完成一大半了!点击预览,查看呈现效果,如不够完美,可回到Step 3,继续对每个图层动作进行微调。

Step 5,预览确认视频效果ok后导出MP4,保存; 操作:文件 > 导出到 > Quicktime

将等待时间全部设置为0秒,如需小尺寸输出可将格式设置为720P,导出尺寸会更小。

Step 6,将导出的视频文件在MAC系统自带的Quicktime Player中打开,快速剪辑(如不在意动效前后停顿时间过长可省略此步骤); 操作:编辑 > 修剪,此时可以看到播放窗口中的视频文件部分出现了一个黄色的边框,拖动黄色边框两端部分,裁切掉视频前后部分的空白内容,保留中间动作部分,并储存;

Step 7,在Photoshop中打开剪辑好的视频文件(如需要,可在Photoshop中对视频尺寸进行裁切),输出gif格式; 操作:文件 > 储存为web所用格式,选择Gif格式,并将动画循环选项设置为永远;

至此,祝贺你,动效已经完美生成,预览一下看看,是否足够顺滑流畅。

写这么多,其实就是抛个砖,大家可以发挥想象力,开大脑洞,制作出更为精细顺滑的动态效果。

附:操作演示视频链接,有兴趣的同学可移步优酷 http://v.youku.com/v_show/id_XMTgzMTYyNjM5Ng==.html