交互设计

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

0
登录或者登记去做吧。

上次有简单介绍迪士尼十二原则的基本概念,这篇文章则是韩国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

【Mockplus教程】怎样在Mockplus中使用图片轮播?
UI设计师需要了解的开发中常用的UI控件(ios篇)