【原译】迪士尼中的UX(下篇)

上次有简单介绍迪士尼十二原则的基本概念,这篇文章则是韩国pxd设计小组与迪士尼设计大师Glen Keane先生的一次更加深入的访谈与讨论。

在正式开始这篇文章之前,先给大家稍微展示动画《Duet》中的一个小片段。《Duet》是访谈中主要人物Glen Keane的一个小作品,也是本文的一个重要主线。这个小短片是Glen先生为了Google’s Spotlight Stories制作的短篇。链接附在了文章的最后。

02f2a2562d710a000001c75b044535

《Duet》

Glen先生提到,迪士尼动画设计的12项原则,实际上是关于动画和感情如何融合扩散的说明,这一点是十分重要的。

迪士尼对于事物实际上怎么运动有着很深的理解。他们很了解观众看屏幕时对自然运动的期待,也很了解要抓住观众,需要什么样的感情浸入。这是为什么迪士尼在初创期可以抓住观众内心的原因,也是他们能够创作出写实可信的动画人物,让它们在长篇动画里登场的原因。在极限情况里诠释着事实感,动感,感情和没入,就那样,所有的事物都开始了。

 

02d358562d7163000001c75b2df68f

如果UX是一个戏台,我们要考虑UX演出是怎么样,什么时候还有为什么交合的。适用于动作的技术以及虏获听众的方法,它们中UX的大致部分如果融合在一起,便可以使得使用者可以参与双向对话交流。

UX演出的五种原则

对于UX和视觉设计师两者来说,脑海里首要重要的念头,是把一些经验和技能粘贴到角色要素里,然而这并不是完全正确的。因为我们同时要把使用者经验变得更加愉悦,所以比起其他的东西,我们也要为了在这连续的体验里,怎么样传达故事而努力。

虽然我已经知道动作设计和数字媒体设计技术怎么样可以一起适用,但我也渐渐开始深入观察,在认真把握的基础上,重新准备了一下这五个原则。这五项原则在ux里,被作为重要传达点呈现,在不同使用状态的间隙中填满,更加完全地传达着洗练过的经验。如果可以适宜地发现这样的细节的话,产品的目标用户不仅会更加认识和信赖,也会更加肯定,有着更加愉悦的经验。

1) Feedback 反馈

反馈,可以帮助了解使用者的交互过程是否成功。在《Duet》中,小时候的男主一直下落,之后地板上的倒影告诉观众,他已经到达地面。

 

025490562d71b8000001c75b14b201

在无声的反馈中,对的错的选择,登录中的状态,或者某个过程进行中状态的选择,还有单纯的选择,这些使用者都能看到。反馈进行的过程中,不仅使用者的信赖感,用户粘性很重要,对于设计方而言,看到使用者的反馈也会有巨大的满足感,也会感到高兴。而且如果反馈中加入触觉要素的话,使用者便会忘记自己是在玻璃表面上触摸,也可以和画面上元素更加真实地交互,心情也会感觉很好。无言中,每一个动作里都有着反馈,我们的心情也会感觉很好。让反馈对于使用者来说“易于明白”,这对于设计来说也是很重要的。还有就是,一个动作里不同层次的元素一起反应的时候,也会有不同的效果。

那么,从迪士尼开始,可以学到的东西是什么呢?那便是夸张原则

在采访中得知,Glen先生不是看单纯的夸张元素,而是要说明从夸张中感知到的东西。这样我们在种种人物的大登场中,才能作出切实的反应。

 

022276562d71c9000001c75be05eca

美女与野兽动画中,野兽失望和惊喜的场面。

Glen先生提到的美女与野兽中,场面的举例。Belle(女主人公)不能赴约晚餐,与野兽对话的场面中,野兽的脸一直是很震惊的,并且两眼睁得很大。在那之后他的脸垂下,眼睫毛看着很不安的样子。在观察到这个夸张场面的瞬间,虽然不能详细知道什么事情将要发生,但是还是明白野兽那似乎受到了冲击一样的感觉。

 

02ec5f562d71e4000001c75bf8eb0d

024227562d71f9000001c75b8f48ca

Feedback的例示(上图从左到右)。

IOS中输入密码错误的时候,上端的四个提示点会产生振动。虽然只是单纯的振动,确实在与我们的现实生活相互作用,产生直接关联。Dots(游戏):虽然很简单,真的是一个使人愉悦的交互。很多的要素都融合在了一个动作里面。Yahoo News:各个等距点顺时针逐渐填满,数字依次增加,之后是一个大的俯冲,所有点往中心集聚,加载结束时候在整个屏幕铺满扩散。Beats:点击类型标签的时候,可以看到进程加载的进度条。

2) Feedforward 前馈

视觉一致性对于使用者来说,是相互作用的可能,是他们期待的暗示,可以帮助他们理解各个动作怎么样可以成功运用。前馈(feedforward)可以引导用户以正确的顺序操作,使得他们在复杂的情况也可以成功达到目标。《Duet》中另一个画面,男主与女主刚刚见面,可是不识时务的小狗一直拖着男主往画面左边移动,给予观众男主要离开的暗示。

 

028cd2562d727d000001c75b9f5ff8

之后无论什么情况发生,有着什么样的对比,用户也会收到提示,“请到这里来!”,“请拖拽到这里”,或者可以给出“再多下拉一点”这样类似的提示。因为这些提示太过于微小,以至于人们很多时候甚至不会意识到它们的存在。尽管很微小,效果是很显著的。前馈被正确使用的话,效果可以是很大的。

迪士尼的期待原则里面也有类似的目的:在即将发生的事件中创立联系与动因。

 

02a534562d7291000001c75b1b46f0

图画中是米奇张开的手,之后这只手会慢慢展开去抓住球,形成了动作的提示。

为了说明这个原则,Glen先生举了一个非常简单的例子,那便是米奇去抓住桌子另外一边的球。

在之前的场面里,米奇的手离身体很近,眼睛紧盯着桌子的另外一边。在这个场面里米奇的手已经在球的上方了。这两个场面好像已经很充分地说明这个原则了,难道不是吗?问题是,这里其实还是有观众不能意识的点,那便是可以愉悦观众的趣味要素。观众还没意识到的时候,前一个动作已经结束了。这场面里的画面虽然已经全部展示给观众了,可是观众对于即将发生的时候还是没有准备。

为了形成观众的期待感,(设计中)米奇外面那只手张开的那几帧就先忍痛割爱,粗略用线框表示,越过桌子的那只手则详细地画出来,这样便对接下来发生的事情起到了暗示的作用。

“观众只是(随着剧情)反应,而不用担心接下来发生的事情。”

——Glen先生

02513e562d7325000001c75b0168540236c8562d7341000001c75b1cb8ab

前馈的例子。

Clear:下拉画面时,可以创建新的项,这呈现了微小的提示。Moldiv:Home后面稍微藏着菜单,给使用者提示。Yummly:顶端栏,白板上的“Yummly”文字根据进入的模块变化。Snapchat:下拉刷新的时候,会出现颜色变化的动画,给予了提示。

3)Spatial awareness 空间认识

空间认识在使用者的环境认知,还有明确把握各个要素间关系的时候起到帮助的作用。仔细想想,我们假想出来的数字媒体环境里,本质上是存在着无限可能性的。Duet动画里面,Mia跑到池里,在水中到处游动,再从水中出来翻跟斗,形成了美丽的场面。

02dead562d73af000001c75b5e3527

 

Glen通过Mia动作里的反应,还有Mia的其他动作告诉我们,他的场面里有着“磁石一样的力量”。在例子里,Mia第一次触摸水的时候,泡沫在她的周围爆发生成。“如果没有很大的冲突造成影响力,场面便不能很好地转换。”Mia周围的泡沫告诉我们Mia在哪里,之后包围在Mia周围的鱼也告诉了我们Mia的位置。就如同这个场面是从另外一个场面中挤出来的效果。我喜欢这个场面,是因为这个场面被赋予了逻辑,从而生成了场面的关系和联结,因而可以诱导观众的注意。

Glen先生告诉了我们如何配置动画人物以形成用户的期待心理。例子:主人公最初在画面左边,右边的留白引起了心理上会觉得,好像缺漏了什么该发生的事情。“那样的缺乏产生的时候,也是我们的共鸣发生的时候。”旁边的空间与即将展开的事情有着同样的紧张感。

020a07562d73ab000001c75b5000b8

我们产生的所有经验,可以在固有的某个领域分布。在屏幕后面,左边或者右边的某个要素,小小的间距里,拉出菜单里都可以“有着鲜活的动感”。不管在哪里,都需要我们设计师经过慎重考虑,再让它们出现在意想中的地方。深入了解那个情况下的逻辑论理,那是我们设计师的责任。画面的每一个尺寸里,小部分工作的空间怎么好好利用,怎么样减少复杂性带来的烦恼,这些也是很重要的。

以这样的可能性展开,画布上的画面便多了可以设计的点,不仅仅对于设计师来说是非常帅气的,同时对于使用者来说,也可以使得他们理解学习其中的意义。使用者需要一些时间来理解关系以及现有的环境,也需要时间来适应某种情况。如果某个要素从哪里来,之后又要移动到哪个地方去,往后他们便可以知道在哪个地方可以把那个元素找回来。因此,当要素突然发生变化的时候,在转化中给予确切的提示,可以让使用者安心。其实在现实世界里突然发生的转化是不存在的!空间认识的主要目的。是将使用者们往正确的方向引导,在那个情况下赋予妥当性,并且说明清楚。

025081562d7448000001c75b9bfee7

02394d562d746f000001c75b4fb5cc

 

 

空间认识的例示。

Calendar:日期如果从旁边移动的话,中间的空间给予了使用者便利。Stellar:一个用来讲故事的app,在UI主题里的交接页面创造了一种书本翻页,空间交接的效果。VSCO:点击下方略缩图button,操作栏会从下方拉出。Nike Making:类别列表中,如果上滑,类别icon就会同时扩大,继续滑动则继续展开详细的列表。下滑的时候则是一个反过程。

4)User focus 使用者注意力

使用者注意力,是给观众视线上的引导,以及给予观众各个阶段的明确说明。Glen在《Duet》中就用简单的背景空间要素,为观众进行视线上的引导,呈现男主往树上攀爬的流动感。

 

02e70b562d74cf000001c75bcdc494

画面阶层之间的联结瞬间,我们要清楚,会存在什么样的问题。它的目的是,探索我们需要跟随什么样的准则,以求在合适的要素中放入着重要表达的点。当然要达到这样的效果,需要很多的元素一起进行动作。在那个情况下必要的那个元素全面统领,而背景的其他元素有时也会一起反应。举个例子,为了使得成为注意重心的元素可以更好地突出,背景的元素有时候会变得模糊一点暗一点。还有一个例子,有时候隐藏的button会跟着菜单一起出现。我们有时候虽然想打开特定的菜单,也知道在某些地方可以有这样的功能,但是有时候看着菜单里的button却无所适从。如果只在我们要使用这个功能的时候,button才出现,这个问题便可以解决。

使用者注意力是用来明确目标的。“明确”这样的要素虽然不是迪士尼的公式原则,但是我们就把它当做是十二条原则中的第十三项来说明吧。Glen先生在迪士尼学到的很重要的技术便是这个了。一位叫Eric Larson的迪士尼动画制作人强调,绝对要给观众的思维留白。

 

02c2f9562d7500000001c75bdd7e20

米奇与“不可能”的锤子

“我就这样不管对错地进入迪士尼“似是而非的理论(Plausible impossible)”之中。”Glen先生说到。我们非常疯狂地,不顾其他人的疑虑去做着这件事情。举个例子,动画制作人Freddie Moore在Little Whirlwind(1941)里描绘了这样的画面,即使在旋风里重复翻飞,旁边的篮子和米奇还是纹丝不动。

突然间米奇的手从裤腰里掏出一把巨大的锤子。那锤子一在那个场面里面出现,变成了最为重要的物品。因为那个锤子在场面里是切实的需要,所以观众们不会疑心这个锤子是哪里来的,怎么出现的,这样的问题。

如果跟随‘似是而非’原则,即使稍微打破了世界上的一些切实的规律,也可以使场面变得有道理起来。

“当你和大家一起的时候,大家都很高兴。

但是万一你不在,大家就再也无法高兴了。”

——Glen先生

02f032562d7572000001c75bb01b55

02ad51562d7581000001c75b219d3f

使用者注意力例示。

Pinterest:与情况相关的button在必要的时候出现。Paper Notification:引导视线的多层动画-地球模样的icon在运动,弹出窗展开之后标题部分轻微闪烁。Peek:时间选择领域会出现全屏画面,只有被选中的数字会比其他数字更大更亮。选择结束之后相关数字就会回到原处。Yahoo Weather:运动的动画元素会首先出现在视线里。

5)品牌的声调 Tone of brand

这个理论与迪士尼动画中的吸引力原则呼应。要让人物自身产生一种自然的魅力与呼诉力,使得观众可以被人物的鲜明个性渐渐吸引住。《Duet》中用了两次转场镜头来描述主人公Mia的成长,每次都是与舞蹈有关,逐渐地,女主优雅的舞蹈家基调便铺陈开去。

02818e562d75cf000001c75bf3d5fb

023a3c562d75d7000001c75b98fb33

拿种种广告撰稿作为比喻来说说这个想法吧。

在所有的项目里面,有时候会说“如果这个品牌可以说话的话,它会说什么呢?”,而与广告相似对应的,我们会说“如果这个品牌会动的话,他会怎么样动呢?”,有这样的想法是很必要的。有什么夸张的奇想呢?每个部分有什么力量点呢?是否可以帮助使用者尽可能地追加微小的动感呢?

如果你可以很好地确认品牌声调的话,在某个很短的瞬间会有一种,它想要说话的感觉。可以产生“好像可以听到这个品牌的想法一样!”这样的想法,那是因为它相当妥当,适切地被展现。

回忆一下日常中有的应用,网站,还有很多经验的话,不妨想想,为什么它们可以持续与使用者互动?我们对于周围那些无数的,执行着相同任务的,似乎完全一样的应用,应该时时留意,作好准备。这样便可以抓住所有好的使用者经验了。

我每天都会仔细观察日常生活中那些可用性很强的应用,网站,回顾很多的经验。我们周围即使有着无数执行着相同任务,似乎完全一样的应用,为什么特定的产品会继续被使用者使用呢?那便是因为,即使那些呈现给用户的使用经验已经全是很好的,但是对于人们来说,似乎还有更加可以捉住内心的无言之歌。不管你是否会更加愉悦,不管无言之歌是否给予了更多的可能,能够被接受的,便是使用者经验理想中的东西。那便是感性的呼诉。“呼诉力”是我们最后参考的迪士尼原则。虽然是最具有魔力的要素,但是设计起来是非常困难的。

“即使很神奇,即使呼诉力的存在与否很容易被知道,怎么样的事物可以具体体现这种呼诉力是很难知道的。”

——Glen先生

Glen先生告诉我们制作人Freddie Moore承担着迪斯尼动画里观感的责任。在Freddie Moore出现之前,米奇老鼠只是一个概念性的存在,与我们今天认识的米奇老鼠是不同。Freddie的米奇老鼠开始展现要素之间的关系。Frank Thomas和Ollie Johnston这样对米奇的绘画者说到:“所有的线和其他线都有着不同的关系。”

在画米奇的时候,所有的事物都是跟随着一个主题完成的。

首先用圆画米奇的头后,便用曲线把向上看的鼻子与头连起来,米奇两只眼睛,在离鼻子很近的地方联结着,眉毛和嘴巴那里两边脸蛋向上方鼓起。这样画出来的米奇有着特有的东西。米奇可以拉住观众的,是某种“呼诉力”。我们可以在所有Glen先生画的人物中找到他的创作理念。如果可以理解透的话,那个动画人物便是世上独一无二的了。如果可以表现那样的“呼诉力”的话,这所有的事物都可以被设计,被调和成为美丽的体验。

那便是呼诉力的关键。

要素的调和,完美结合成和音,大概是会让人忍不住发出“正是这个啊!”的感叹。

——Glen先生

 

 

 

0261e4562d7651000001c75b2ff3fc

023e11562d765d000001c75b0fcb27

品牌音调的例示。

Snapchat : 幽灵般的象征让人期待接下来会发生什么。Flicker:尽管微小,却很有用,如果有人更新了头像的话,象征Flicker的粉红色与蓝色圆圈便会回转。Nike+:标题是跑步累计的公里数。Zappos: 人们很喜欢复活节彩蛋(因为很惊喜),同样的原理,要是出现一个披着斗篷的小猫的话就会很有萌点。

小结:

动画人物不只是存在于画面里面,也存在于我们人间的元素里面。主要的动画人物就是我们使用者本身。

电影等,应用等,网站等,不然就是书籍,某种脉络,情况,媒介,某种环境,与我们的目标都是相通的。我与Glen先生的对话里讨论着,如果将动画人物和关系绑定,那么我们对各个动画人物的登场,演绎,退场,都有着监督的责任。我们形成的界面,只不过是相比于动画窗口来说更大的更宽广的界面罢了。

“motion(动作)”这样的事物,大概可以对设计有着这个作用:即使它对于用户来说是新的,陌生的,也可以在面对新问题的时候,在用户不知道如何解决问题的那个瞬间,不会让人感到绝对的陌生。Glen先生在一开始制作《Duet》这部动画的时候面对着多么大的难题。他到现在还有时候在纸上绘画。他说道,如果摆脱白纸的话,动画人物就从画面里消失了。在那多样化的角度里面,动画人物的动作就好像可以在画布里无限化延伸一样。将这些说明性的原则深深刻在脑海里,这样的话大概,以后不管发生什么样的问题,都可以从中找到解决的线索。

最后附上《Duet》原版视频,因为只在youtube上找到,所以我就偷偷又传到了vimeo上,在这个网站应该是可以看到的:

https://vimeo.com/143560323  密码:1234

译者:Chlyang

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/10232/

(0)
TinadminTinadmin
上一篇 2015-10-27
下一篇 2015-10-28

相关推荐

  • 译|构建用户体验地图的时机和方法

    用户体验地图结合了两个强大的工具—讲故事和可视化 ,以帮助团队了解和解决用户需求。 虽然体验地图会根据不同的场景和商业目标采取各种各样的形式,但通常都包含一些元素,并且有很多可以遵循的潜在基本规则,使得用户体验地图为设计提供帮助。定义:用户为了实现目标而经历的过程的可视化,它用于了解和解决用户的需求和痛点。

    2017-04-29
  • 译文|为未来的SaaS应用,提供新的交互及视觉设计

    本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

    2017-05-20
  • 常见的App应用界面交互框架

    掌握常见的APP应用界面交互框架,了解他们各自的优缺点,使用时才能游刃有余。你还在等什么呢?赶快去学习吧。标签式、跳板式、列表式和旋转木马等在等着你。 1>标签式 优点: 1、当前位置入口清晰   2、轻松在…

    2014-11-19
  • Axure小白,快速做出冲顶大会高保真原型,全靠它(附源文件下载)

    Hi,大家好我是Axure实战班萌萌哒的班主任Sara(*^▽^*)这是一篇很有内容的Axure班介绍文章如果你被Axure困扰想快速玩转Axure,做出标准的原型图想写出规范的原型说明,掌握产品交互那么花3-5分钟了解下这个实战班吧,2000多位同学报名学习了,不会错的~先给大家看看我们班liwen同学,做的冲顶大会gif图喔,真的很棒棒耶(*╹▽╹*)(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文...

    2018-03-26
  • [梁宁·产品思维30讲] 02 用户体验与结婚教练

    案例:用户体验与结婚教练来自梦马旅游MENGMATOURISM00:0018:30用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观...

    2018-04-06
  • 对于交互、视觉设计师来说,至少要了解的产品知识

    之前在设计体系规划里面有提到过,产品常识也是我们需要了解的内容,其中产品定位就是最基础,也是最重要的一个概念,因为项目后期的所有工作都是围绕产品定位所展开的。比如还是上面那个例子,使用人群是单身男女,我们将使用人群细分为:18-25岁、25-35岁、35-45岁和45岁以上的单身男女。最后将目标用户定为25-35岁的单身男女,当然为什么选取这部分人群需要一些理由,比如这部分群体的经济比较独立,年龄更适合步入婚姻的殿堂等等。比如我们的主要功能是即时通讯,那即时通讯会分为很多使用场景,比如上下班的路上、睡觉前,起床后等等。比如产品的特色是“更容易约会成功”,那为了达成这个大的产品目标,我们需要细化,将其分解成多个小的用户目标,如快速看到周围单身异性的信息状态、快速了解周围哪些异性对自己有兴趣等等。

    2017-05-09
  • iOS和Android规范解析——标签导航和分段控件

    从今天开始,将介绍iOS和Android设计规范中关于导航的部分。今天要介绍的两个控件,经常容易混淆以至于用错。请各位读者仔细阅读,防止以后用错。

    2017-08-04
  • 破局在即,用户体验将成银行翻盘利器?

    今年,BATJ纷纷与国有四大行牵手,这种破冰式的历史性合作传递了两个信息,一是专注线上的互联网巨头们开始重视线下场景的价值,这也表明在未来的金融行业中,我们将能看到更多线上线下相结合的产品和服务场景;二是在与互联网巨头的磨合中,银行的角色即将产生质的突破,也彰显了银行在当前金融局势下的求变决心。当然,银行们寻求自我突破的决定必然不是空穴来风。众所周知,在互联网+潮流下,以线下为主的银行们失去了对部分年轻用户的影响力,而且银行基因中强大的...

    2018-03-03
  • 怎么策划一个成功的活动——线上篇

    怎么策划一个牛逼哄哄的线上活动?大家都说网络营销火爆,都在搞线上活动,那么,一份完整的线上策划案,应该怎么准备呢?知乎用户柒石二为我们提供了一份可行的回答。 始。 先问度娘: “线上活动是指依托于网络的…

    交互设计 2014-12-13
  • 无框界面的四大优势,为你演绎一种新的设计风格

    无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

    2017-05-10