Tag Archives: Prezi

“所想即所得” – Cooper Design讲演设计点评

这周参加了几个SF Design week(三藩设计周)的活动。其中一个活动的名称直译成中文应该是叫“爬大街” (-_-!!!) 因为大多三藩城里的设计公司都在商业区的几个街区内,所以活动旨在鼓励大家步行从一家公司“爬”到另一家,这样下来,两三个小时可以逛个三四个design studio。如果我之前多受了点设计方面的科班训练,听到这些design studio的名字的时候,应该会多点“如雷贯耳”的感觉吧。但可惜我没有,所以只能听xiaohan姐姐在我耳边旁白说“哇,这个是业界大牛啊!”,“哇,他就是Allen Cooper”,我仍然是一副“有眼不识泰山”的状态 T_T… 不过也好,索性没了什么preconceptions了。

Chris Noessel就是在这种“如雷贯耳”的设计公司(Cooper Design)工作的首席交互设计师,在“爬”他们公司的studio的时候,有听到他做的一个30分钟的讲演“Make it so”(所想即所得)。主要内容是科幻小说是如何影响设计的(最近刚看完“三体”,对科幻还算是重拾了一点点兴趣… )。如果你有在follow我的blog的话,那你应该就不会奇怪,我整个30分钟我都在想这家伙怎么把presentation slides做得这么牛了。更好玩的是,在演讲结束时,观众提的第一个问题也是:你是用什么软件做的这个presentation啊?我当时就在想,业界大牛应该不会和我们这些凡夫俗子一样吧,果然,他说是仅供内部使用的工具… 不过他有说用Prezi也可以做出类似效果。

回家后,我试着上网搜了一下他的讲演视频,只找到一个2010年的版本。而且2010年版本的内容和幻灯片,都和我所听到的2011年版本的有所不同。不过好在,讲演的主题是一致的,还是设计与科幻小说,而且整个幻灯片的设计风格也是一致的,所以我想,试着分析一下2010年的视频,还是有些参考意义的吧。由于下面大部分的截图都来自于视频,所以,大家就忍一下low resolution吧 >_<

——

所以这就是整场演讲的第一张幻灯片了,风格果然很科幻… 好像是宇宙飞船上的显示屏:一个蔚蓝色的圆环,只有讲演的题目和讲演者的名字。圆环暗示着“初始”,所有演讲的内容都将从这里延伸开来(哇,这句话也好科幻…)。

——

接下来,讲演者展示了下面几张幻灯片,作用类似于一本书的目录页,或者是普通演讲中的“Content”页。不同之处在于,这的确是几张颇具设计风格的“目录页”:中央仍然是讲演的题目,左右两边分别出现了设计科幻这两个概念,一圈一圈的圆环连接起左右两端的概念,代表在接下来的时间里,讲演者将要仔细阐述的内容。当然,讲演者不是一下子把整个“目录页”都展现给听众,下图中左下方的四个小图,就是讲演者一步一步的将“目录图”填补完整的过程,先上半环,再下半环。即使对我这种非科幻爱好者而言,这样概述的方式也是易于接受的。至少我很明确的知道了在接下来30分钟里,我所要听到的的讲演内容是什么。

——

接下来就是所谓的cool part了。在这30分钟里,其实讲演者只做了两件事,那就是放大(Zoom in)和缩小(Zoom out)。他们不断放大“目录图”中的某些部分,仔细讲解每一个设计和科幻之间的联系,接着再缩小那些局部,回退到全局,让观众明白每一个联系在全局中所处的位置。在下图里,我试着将从视频中的截图组合了一下,所以我们可以清晰的看到每一张单独的幻灯片是如何fit in with the big picture的。在内环(深色)上,每一张幻灯片都是“目录图”被放大的局部。这其实和Prezi的概念非常相似,时时提醒观众们对整体讲演结构的理解,不让他们“迷失”在单幅幻灯片中。在外环(浅色)上,则是每一张局部图延伸出来的一个或者多个例子:讲演者用很多科幻电影中的片段来体现,很多设计师的灵感都来自于科幻电影,或者说,科幻电影预示了很多未来的设计风格。

简而言之,整场讲演就在这样一个顺序中来回循环:整体图 -> 局部图 -> 例子 -> 整体图。有这样的顺序里,观众想“走丢”都难吧 🙂

下面是整场讲演中的最后一张幻灯片。当所有的局部都已经被放大过,整个圆环也被所有的例子和细节所填充,现在看起来,就更像是宇宙飞船上的dashboard了 🙂 我想这可能是Cooper Design的这场演讲和Prezi很大的一个区别所在吧:在Prezi中,整体图可能不会包含这么丰富完整的信息量。Prezi的关键在于带领观众从一个信息点到另一个信息点,给观众一张地图,所以放大和缩小的过程发生在每一个单独的信息点;这个”Make it so”的讲演,可以算得上是一个Prezi Presentation的特例吧,也就是这张地图不是线性的,而是“高度集成”的,所以缩小和放大的过程发生在这张“整体图”的局部。讲演者一直在设计科幻中来回切换,一个一个的展现这两个概念之间的区别和联系,所体现的也是这种非线性信息量的特征。

所以其实这场演讲更大的意义其实在于,如果你想要呈现的是一个完整的知识体系,或者说,当你的Presentation没有一个明晰的“故事线”(storyline)来引导的时候,Cooper Design所用的这种用信息图来引导整场讲演的方式,可能是一个可以参考的例子。

——

如果你将自己的讲演幻灯片做成这样,你应该可以rock your audience in a sci fi way吧。然后,你就离Cooper Design的首席交互设计师职位,one step closer了(口水ing)。

UX Week 2010 | Chris Noessel & Nathan Shedroff | Make It So: Learning From SciFi Interfaces from Adaptive Path on Vimeo.

这篇的英文版在这里

是讲演 还是电影?- Presentation的图像化演义


电影 = 图画

昨天晚上在看Departed.  电影的主线是在,在警方的卧底(Matt Damon),和在卧底的警方(Leonardo Dicaprio)之间的交叉对比,镜片开始是两人在警校的对比,警校毕业加入警察局的对比,接着是警察生活的对比和卧底的对比,两人同时泡一个妞的对比… 互相查内鬼的对比,直到最后两条线交叉,卧底被警察局的内鬼干掉,内鬼又被警察干掉,结构和情节都是紧凑而有力。

当然,如果你看的不是导演点评版,在每一个镜头播放的时候,没有人会在你耳边告诉你说,“快看,现在开始演内鬼的生活了”,“好,现在开始演卧底的生活了”,“现在铺垫了”,“现在快到高潮了”。但你会通过镜头语言告诉自己,在你的心理有意识无意识的 慢慢“描画”关于电影情节的这整幅图画,从开始到结尾,两条线索如何开始,平行,交叉,继而终结。

有时候,这副图画是写实的,好比Departed这样的电影,线索清晰而真实,不难理解;有时候, 图画是抽象而晦涩难懂的,好比上周五看的”Beginners“,时空交错的叙事风格,导演还动不动就来几个“小清新”类型的镜头,看得我前一分钟跟着装成熟,后一分钟跟着装嫩,这幅“成熟版小清新”的画作,看懂了的地方我得感激涕零,看不懂的我也只能认了。

图画 > 文字

回到这篇日志的主题上来,so what about presentation? 很显然,presentation不能和电影比,你要想给你的听众,观众们跳一下tone,那他们多半是要走人的。毕竟presentation是一个信息传递过程,观众们不是想来“清新”的,是想来“清醒”的。所以,画风,还是写实的好。

但多少年来Presentation的主导都是“白纸黑字”的MS PowerPoint和“标题党”的bullet points,这种以文字主导的讲演风格,固然好,但是仔细想想,对文字的阅读和理解更多的是一个“个人行为”,读书,读杂志,读报纸,是一个更适合单独进行的活动。每个人的阅读速度不一样,对信息的处理和理解速度也不一样,把两个人,甚至更多的人凑到一起,让他们“读”同一段文字的过程是“极不人道” 的。我记得以前中学上语文或者英语课的时候,有时候忘记带书了,要和同桌共读一本课本,每次读完想要翻页的时候,都非常纠结,她/他念完了吗,她/他念懂 了吗,我自己念懂了吗,他/她是不是也想翻页了… 但图像(Picture)不一样,对图像的理解是人类更本能的一种反应,不管是看原始人的壁画,还是看毕加索的油画,不管看画的是芙蓉姐姐还是爱因斯坦, 对“图像处理”的过程(非常初步和general的)可以在几秒中内完成(虽然背后的思考可以很多)。上语文课时,阅读理解总是一个安静的个体活动,但看 图说话却是热闹的一个群体活动。这源于对文字和图像理解的速度的差别,人们参与度的区别。影像(Motion Picture)也是类似,你会邀请一堆朋友一起去看电影,但是我想很少有人会说,“嘿,周末来我家一起读一本书吧”( 想泡mm的除外…)

讲演 >> 文字 ; 讲演 = 图画 + ?

我想,这可能就是为什么近年来“图像派”的讲演风格逐渐成为了主导。

前面提到的,PowerPoint的信息组织方式是:bullet point。首先是一个大的要点,下面有几个的分论点,分论点下面又有分分论点,分分分论点… 这很好,因为这至少是一个structured的presentation。但难点在于,在presentation中,人们在对信息的接收是“分页” 的,所以很有可能在接收“分分分论点”的时候,他们早已经忘了什么是“分论点”了。

文字当然是有价值的,但在presentation这样一种特定的信息传递方式中,图像则是更为合适和更有效率的信息形式。首先,对图像信息的 (简要粗略的)处理要比对文字的处理快得多,所以,每一个被缩放的局部都可以快速的back up到全局的图像,而每一个全局的图像,也可以快速的放大(focus)到局部上。前面写过的TED Commentary 03TED Commentary 04都是很好的例子。

这好比是电影(Motion Picture )对传统印刷业的冲击,当图片,动画,电视,电影出现之后,转移了一大部分传统图书的读者。人都是懒的, 当另一种更不费力的信息接受方式出现的时候,读者变成了观众(坐着不如躺着嘛)。而当图片和影像被大幅度的引入presentation后,文字于是就理 所应当的成为了“弃儿”。

而图像要主宰不仅仅是单张的幻灯片而已,下面要提到的Prezi这个公司试图将整个讲演都围绕图像进行,正如前文提到的:电影为观众描绘图画,Prezi也希望将演讲变成一副图画。

讲演 = 电影 ?

Prezi是从匈牙利首都布达佩斯开始的一家小型软件公司。与传统软件公司所提供的服务不一样,他们的产品是想与Powerpoint和Keynote竞争的presentation设计软件。那么,他们凭什么与人们用了十几年的“标题党”presentation软件竞争呢?

属于Prezi的edge在于“图像化”的presentation风格。Prezi的概念(至少 在我看来),在于让图片变成presentation的主线。整个讲演就是演讲者在为观众描绘一大副图画的过程。如果从论点1,深入至论点1.1,甚至到 1.1.1太难,那么我们换一种方式,我们从蒙娜丽莎开始,先看到她的脸部,再到她的眼睛,再回到全画,这个容易多了吧?

之前在TED Commentary 03中 提到的Presentation就是用Prezi完成的。下面要举的这个例子,则是TED的创始人Chris Anderson在2010年的全球TED 峰会上发表的演讲,题目是“网络视频如何激发全球范围的创新”。 身为TED的创始人,他也对Prezi情有独钟。下面的图片和视频就来自于他在峰会上的演讲,应该能让你对Prezi的image-driven的幻灯片 设计方式有一个感性的认识。下面是Prezi网站上的幻灯片示例:

下面是完整版演讲的视频:

之前简单对文字的拼凑,在Prezi的帮助下,成为了对信息有机的整合,以至于以图片的方式来组织的信息,看上去就好像是电影的分镜头脚本一样。作为“导演”的Chris Anderson,带领观众们从一个镜头转移到另一个镜头,从一处信息转移到另一处信息,但整个讲演的脉络都始终在一副完整的图画的范围中。也正是由于这样的“分镜头讲演脚本”的出现,不管是从单个幻灯片看来,还是从整场讲演看来,都为观众们在理解上降低了好几个难度。

这样看来,好像离presentation最后变成一场电影的那一天,也不远了 🙂

(等以后稍有时间了再来慢慢写关于Prezi slides的分析文章吧)