Download - Apple和它的设计-文字注释版-v0.2

Transcript
Page 1: Apple和它的设计-文字注释版-v0.2

Apple和它的设计

Felix Dingheartstringz.net

2008-03-03

Page 2: Apple和它的设计-文字注释版-v0.2

写在前面的话

08年4月我还在支付宝工作时,在用户体验部的“设计沙龙”上做了一次名为“Apple和

它的设计”的知识分享。结束后同事反映不错,希望我能把幻灯片分享出来,但由于

文件格式(Keynote)和大小(接近200M)的缘故,我当时没办法使其如愿。从那以

后我便开始陆陆续续地修改这个幻灯片,一是使其便于分享,二是让那些当时没能在

场的朋友也可以对演讲的内容大致了解。

没想到这一改就是半年多。改完了以后发现,基本上所有幻灯片都重新做了一遍,无

论是内容还是排版,都经过了大幅度的调整,现在的这个PDF与其称之为幻灯片,不

如说是一个电子读物更为合适。

当然,相比较于PC,我使用Mac的时间并不长,对Apple及围绕在其周围的社区的认

识实在算不上深刻,所以本文的内容免不了偏颇甚至错误,还望各位海涵。

最后,本文中所引用的所有图片、视频和其它资料的版权属于各自的作者所有。

Page 3: Apple和它的设计-文字注释版-v0.2

作者简介

丁宇(Felix Ding),自90年代初的WPS和CCED始接触并使用

PC,没事儿就喜欢摆弄这些东西。99年迷上网页设计和开

发,并从此一发不可收。曾创建过“Quake Bird”(1999)、“心

弦”(2000)、“Web Dev China”(2001)……“PearPC中文

站”(2004)等一系列网站,以及首个专门讨论Mac OS X UI设

计的“Mac OS X可用性实验室”。现就职于上海的一家设计咨

询公司。

我的Email:[email protected]

个人网站:http://heartstringz.net

Page 4: Apple和它的设计-文字注释版-v0.2

内容索引

1. Apple的诞生

2. 独特的精神理念:从1984到Think Different

3. Mac OS的UI的演进

4. Apple的设计方法和过程

Page 5: Apple和它的设计-文字注释版-v0.2

1. Apple的诞生众所周知,Apple电脑公司诞生于1976年。传说当年两位创始人Steve Jobs和Steve Wozniak在Jobs家的车库里搞出了Apple I型主机板,并由此创立了改写人类历史的

Apple电脑公司。

然而,被称为硅谷老好人的

Wozniak(以下简称Woz)却在其自传《我是沃兹》中,以翔

实生动的笔墨描述了他单枪匹

马在HP公司的办公室中搞出了Apple I原型的整个过程。Jobs在技术上的贡献,只限于帮

Woz搞到了Intel产的内存一类的事情上。Jobs虽然对Woz的描述不置可否,但从他们各自的一贯表现来看(Jobs曾在Atari游戏机的事情上欺骗过Woz,而天性善良的后者几乎没有负面新闻),事实或

许就是如此。

无论怎样,Apple通过Apple I型主机板和后来大红大紫的Apple II机型,迅速成为了知名的个人电脑厂商,并由此展开了一段波

澜壮阔的历史。

Page 6: Apple和它的设计-文字注释版-v0.2

2. 独特的精神理念Apple的产品的为何具有强烈且独特的特点?这是由于它具有一般公司所没有的独特的精神、理念甚至信仰,这是其设计风格得以产生和延续的根基,反映在产品上,就

表现出了非同一般的特质。

在Apple的历史上,有两次明确地表明了自己的这种精神、理念和信仰,我分别称之为“1984精神”和“Think Different”。我们先看看“1984精神”。

1976 2008

1984

“1984精神”

1997

“Think Different”

Page 7: Apple和它的设计-文字注释版-v0.2

Xerox PARC提到1984,有一个地方不能不提,这就是施乐Palo Alto研究中心(简称XPARC)。这

是GUI、鼠标、彩色电脑图像、所见即所得编辑器、以太网、SmallTalk、激光打印

机、InterPress等等一系列伟大发明的诞生地。XPARC是我一生为之向往的地方,我

觉得要是有幸能在当时的XPARC工作,这辈子就没什么遗憾了……Jobs当年带了一群

人去XPARC参观以后,把GUI和鼠标等概念带回了Apple,并将其用在了Apple的新产

品Lisa电脑中。

GUI 鼠标

彩色电脑图像

所见即所得编辑器 以太网

SmallTalk激光打印机

InterPress

Page 8: Apple和它的设计-文字注释版-v0.2

Lisa是Apple在GUI方面的第一次尝试,Jobs

对这部电脑给予了很大的希望,可惜事与

愿违,由于技术不成熟和售价高昂,Lisa的

销售状况非常不理想,Jobs本人也因为种

种原因被迫退出了Lisa开发组。

虽然尚显稚嫩,但LisaOS奠定了Apple在

GUI设计上的基础,现代GUI所具有的

WIMP(Window, Icon, Menu, Pointing

device)等因素都已具备。

此外,不同于现在“以应用程序为中心”的

设计,LisaOS是“以文档为中心”的,用户

首先要考虑的是文档,而不是处理它的应

用程序,这和“Mac之父”Jef Raskin的Canon

Cat系统有点像。

Page 9: Apple和它的设计-文字注释版-v0.2

正当Apple被Lisa和Apple III的失败搞得焦头烂

额之际,IBM于1981年正式推出了其个人电脑

-IBM PC,并非常明智的开放了除了BIOS以

外的全部技术方案和生产授权,这促使市场

上一时间诞生(或兴起)了很多按照上述技

术方案生产IBM PC兼容机的厂商,比如我们

熟知的Compaq和AST等(记得AST在8、90年

代的国内蛮普遍的),IBM PC及其兼容机在

市场上大受欢迎,这一下子给了Apple巨大的

压力。

必须指出的是,千万不要以现状去推测当年

IBM的盛况。在上个世纪的7、80年代,IBM在

任何涉足的领域都是垄断地位。一个颇有趣

的例证就是,它每次的员工大会都会引来各

种媒体的争相报道。关于IBM公司当时的情

况,推荐阅读创始人沃森及其儿子小沃森的

自传。

Page 10: Apple和它的设计-文字注释版-v0.2

离开Lisa开发组后,Jobs利用种种手段,挤掉了Macintosh开发组的领导者Jef Raskin,并成

功接管了该开发组。他把他的全部精力都投入了Apple的新产品Macintosh(简称Mac)

上,立志要作出一个比Lisa更好的产品。

面对IBM PC带来的压力,他购买了1984年初“超级碗”橄榄球比赛决赛时段的广告,“超级

碗”决赛是当时全美收视率最高的节目,

广告效果自不待言,价格也是十分的昂

贵。Jobs同广告公司一起,精心地制作了

一则广告片,并把它投放在上述比赛

中。

广告播出后引起了广泛、持久而又强烈

的反响,成百上千家各类媒体都在重复

的免费播放和讨论这则广告所要传达的

寓意和精神内涵。Jobs的宝贝Mac一时间造成了轰动效果。

我给这则广告片翻译并添加了中文字幕,并上传至Youtube上:http://www.youtube.com/watch?v=IaWCayR-Rls

Page 11: Apple和它的设计-文字注释版-v0.2

这则电视广告看了以后有什么感觉?反正我第一次看的

时候没搞懂,直到我查阅了Wikipedia后才明白是怎么回

事。

原来,Jobs是借用了英国作家乔治奥威尔的代表作《一

九八四》中的思想,将IBM比作书中统治人民思想和行

动的“老大哥”(Big Brother),将即将到来的、被IBM主

宰的个人电脑领域比作书中那个黑暗、压抑的世界;而

片中打碎老大哥意象的女郎,显然就是他所领导的

Apple和将要发布的Mac。

这则广告被很多媒体评为近50年来的最佳电视广告,受

到了广泛的评论甚至研究。

说来也巧,我曾经遍寻《一九八四》不到,却无意中走

进马上打烊的“枫林晚”书店,习惯性地买了《读书》

后,随口一问,就买到了此书。

Page 12: Apple和它的设计-文字注释版-v0.2

从Mac开始,Apple就明确了“易于使用”这个特点,

这可以通过当时拍摄的一组5则广告片看出来。

首先,Mac具有在当时来讲绚丽且简单易用的

GUI,用户终于可以不再通过记忆命令和敲击键盘

来操作电脑了;

其次,Mac在顶部有一个硬件提手,可以非常方便

地用单手将其提起并搬运,这一设计在当时也是独

一无二的。

易于使用

Page 13: Apple和它的设计-文字注释版-v0.2

那么,“1984精神”到底指什么呢?在上面提及的5则广告片中,每一则结尾都有

一句广告语,即“The computer for the rest of us”, 我觉得这句话很好的表明了“1984

精神”的实质:

叛逆、前卫、非主流甚至反主流文化,崇尚嬉皮士风格。

1984精神的实质

右图是当年悬挂在Mac开发组办公楼上的海盗旗,

它很形象地展示了Jobs所带领的Apple对主流文化的态度。

Page 14: Apple和它的设计-文字注释版-v0.2

1976 2008

1984

“1984精神”

1997

“Think Different”

现在我们来看看1997年的“Think Different”

Page 15: Apple和它的设计-文字注释版-v0.2

Jobs和他的NeXT 在成功地发布了Mac之后,Jobs由于一系列不当的言行,被迫离开了由他一手创建的Apple。之

后他创建了一家名为NeXT的公司,这为Apple日后的衰落和兴起,打下了伏笔。

顺便说一句,NeXTStep系统的UI实在太棒了!在Linux上,我最喜欢的Window Manager既不是

Gnome也不是KDE,而是继承了NeXTStep风格的Window Maker-可惜它几乎已经无人问津了。

Page 16: Apple和它的设计-文字注释版-v0.2

进入90年代,Apple开始大幅度衰落从上世纪90年代开始,由于硬件产品线混乱、软件更新缓慢(当时MacOS的死机频繁到了连Apple内部的员工都在抱怨的程度)以及研发投入产出比极低,Apple业绩惨淡,公司未来前景也令人堪忧。人们都在讨论Apple倒闭或是被收购一类的新闻。

左图显示的是Apple从上市伊始到现在股价的变化。可以非常清楚的看到,从1993年中期开始,它的股价开始出现大幅度的下滑,虽然

1995年下半年时股价又重新回归到了一个短期的高位,但此后便持续下降,到了1997、1998年前后,Apple可以说已经是在死亡线上挣扎了。

吉尔·阿米里奥(Gil Amelio),这位美国国家半导体公司的前任CEO(记得Cyrix吗?),在执掌Apple帅印17个月后,终因无法撼动其独特的工程师文化而抱憾离任,他后来写下的著名

的《甜苹果?酸苹果?》(On the Firing Line: My 500 Days at Apple)一书,是Apple当年每况愈下的真实写照。

推荐去Roughly Drafted网站详细了解一下这段历史。

Page 17: Apple和它的设计-文字注释版-v0.2

1997年Jobs回到Apple后,开始着手实行一系

列的改革措施,包括大幅度缩减研究项目、

将原来混乱的产品线精简为著名的“产品矩

阵”、全力研发Mac OS X等等。为了重新塑

造Apple反主流文化、别具一格的形象,他

重新找到当年制作“1984”广告片的公司,开

始了名为“Think Different”广告片的制作。

这则广告中使用了大量对人类社会产生重大

影响、或者说推动了人类社会向前发展的一

系列名人,如爱因斯坦、甘地、拳王阿里等

等。旨在引起人们对Apple的特立独行、以

及人们自身特立独行可能性的思考。

虽然影响远不及“1984” ,但这则广告也获得

了广泛的关注。

Think Different广告战役

我发布在Youtube上的“苹果Think Different电视广告

(Apple Think Different Televison Ad)中文字幕版”:

http://www.youtube.com/watch?v=_fylsa5bgIU

Page 18: Apple和它的设计-文字注释版-v0.2

3. Mac OS的UI的演进作为世界上可用性及用户体验最好的操作系统之

一,Mac OS一直深受其用户的赞誉。它的很多设计都成为了其它软件和系统所模仿和借鉴的对象,

对全世界人机界面及其相关行业的影响极其深远。

在诸多版本的Mac OS中,MacOS 9及以前的Mac操作系统通常被称为古典系统(Classic OS),从2000年开始,Mac OS进入了全新的Mac OS X时代。

我们将简要地介绍古典系统,把重点放在Mac OS X上。

古典系统 Mac OS X

Page 19: Apple和它的设计-文字注释版-v0.2

这就是1984年在Mac上跑的操作系统,它继承了LisaOS的大部分因

素。当时的MacOS有一个匪夷所思的设计:把磁盘图标拖入废纸

篓等于把磁盘从电脑中弹出。这当然收到了广泛的批评。

此外,曾经有人问过我一个让我哭笑不得的问题:Apple是不是为

了故意显得与众不同,才把菜单栏放在屏幕顶部、和Windows的

任务栏相反的?搞UI的都应该听说过Fitts’ Law-鼠标光标指向某

一物体的时间,受物体大小和光标距离其远近这两个因素所决

定。位于顶部的菜单栏其实是对Fitts’ Law的灵活运用-由于光标

不会跑到屏幕外面去,因此你尽可以随便把鼠标往上甩,光标肯

定位于菜单栏上,这降低了光标指向的难度。

然而时过境迁,在大屏幕、多显示器越来越普及的今天,这个设

计逐渐受到了挑战:在某些极端的情况下(比如主窗口位于最右

面的显示器上),用户不得不移动鼠标横跨数台显示器、几千个

像素去操作菜单。

古典系统的UI设计

Page 20: Apple和它的设计-文字注释版-v0.2

System 6, 1988 System 7, 1991 MacOS 8, 1997 MacOS 9, 1999

上面显示了从1988年的System 6到1999年的MacOS 9在界面和功能上的变化。可以管窥到Apple

在界面设计上所进行的一系列探索。

值得注意的是1991年的System 7中出现的快捷工具条(屏幕底部),在某种程度上,这可以被

看成是Mac OS X中Dock的前身(也有人认为Dock的前身是NextStep操作系统中出现的

Dock)。

我个人认为古典系统已经把可用性做到了极致,虽然其界面看起来貌似简陋,但简单、干净

的界面却对用户的干扰很小,长时间使用时不会像Mac OS X那样产生或多或少的疲劳感。记

得早年买的网页设计类书籍中,大部分截图都来自于Mac,当时便对这些设计师很是艳羡。

Page 21: Apple和它的设计-文字注释版-v0.2

System 7, 1991 MacOS 8, 1997

仔细观察上面两张图片,你会发现其中的浏览器由Netscape换成了IE。这是因为1997年Jobs重

新回到Apple时,与Microsoft签订了一个协议,协议中的一个条款就是把Mac上预装的浏览器

由Netscape更换为IE。这项举措也是Jobs当时一项颇为无奈之举,举措本身也受到了Mac爱好

者的嘘声和抵制-如前文所说,在一些比较老的网页设计类图书中,我们还是常常可以看到

运行着Netscape的Mac。

当然现在Netscape已经以Firefox的形式重新绽放了新生,这的确是让我们这些老网虫感到欣慰

的一点(怀念那些个使用Netscape和GetRight的日子)。

Page 22: Apple和它的设计-文字注释版-v0.2

还记得Windows 3系列的“窗子”和Windows 95的“蓝天白云”吗?

MacOS则以笑脸来迎接它的用户,让人不由会心一笑

Page 23: Apple和它的设计-文字注释版-v0.2

古典系统 Mac OS X

现在我们来看看划时代的Mac OS X

Page 24: Apple和它的设计-文字注释版-v0.2

UNIX

AQUA

Mac OS X是传统UNIX和现代用户界面的完美结合。它既继承了所有UNIX的优良传

统,如稳定、安全和强大的用户及权限管理等,又有一个无以伦比的用户界面。

我曾经花了很长时间去试用各种操作系统(包括UNIX/Linux的各种发行版、窗口管理器

和桌面环境、BeOS及其各类衍生版、以及诸如SkyOS的一些比较偏门的系统),希望能

够找出一个能够替代Windows的选择,最终发现只有Mac OS X能满足我的需求。

在Jobs第一次公开介绍Mac OS X的用户界面时,他宣称不仅要作出一个高可用性的用户

界面,更重要的是,Mac OS X将具备一个名为AQUA的“Dream User Interface”。AQUA

一方面保留有古典系统高度易用的特点;另一方面,通过各种视觉特效的引入,AQUA

将带来前所未有的用户体验。

Page 25: Apple和它的设计-文字注释版-v0.2

Mac OS X一共经历了五个主要的版本(其实在Puma之前还有一个代号为Cheetah的版本,奇怪的

是现在却被Apple官方的忽略掉了),每个版本都有一个以大型猫科动物命名的代号。这在开始

时可能是无意之举,但现在却成了Apple在市场营销方面的一个成功案例-相比较于冰冷的版本

号,用户更喜欢亲切地以代号相称。

有趣的是,上图包装盒的5个标志清晰地展现出了AQUA在设计风格上的诸多变化:从最开始的

清澈、鲜亮,到活泼、时尚,再慢慢地朝着后工业时代冷峻、内敛的方向发展。材质上逐渐由水

(AQUA),过渡到拉丝金属及现在的磨砂合金。

实际上,这种变化同样体现在Apple硬件产品的工业设计上。仔细观察早期的G3、中期的G3/

G4、后期的G5和现在的Intel Mac,会发现它们在工业设计上的转变和用户界面上的是一脉相承

的。这应该是Jobs年龄和阅历增长的必然结果。

Puma Jaguar Panther Tiger Leopard

Page 26: Apple和它的设计-文字注释版-v0.2

Mac OS X Public Beta, 2000

这是2000年发布的Mac OS X Public Beta版的截图,有几个方面值得注意:一是位于菜单栏正

中的Apple菜单按钮,这个设计遭到了用户批评,后来改到了左上角;二是Finder中诸

如“Computer”、“Home”……这样的按钮显然是从NextStep系统传承下来的。

Page 27: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.0 Cheetah, 2001

相比前一个Beta版,Cheetah在UI上的变化并不十分明显(刚才提到的Finder上的按钮位置和外

形略有变化),这个版本主要大幅度提升了系统的稳定性和运行速度。

Page 28: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.1 Puma, 2001

从Puma开始,拉丝金属被应用到了UI中。另外以后大获成功的iTunes也开始展露头角。

Page 29: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.2 Jaguar, 2002

从上图可见,从Jaguar开始拉丝金属已经得到广泛的应用。Jaguar引入了好几项非常好用的功

能,如Spring-loaded Folders、Quartz Extreme和Rendezvous / Bonjour等,我接下来对后两者分

别介绍一下。

Page 30: Apple和它的设计-文字注释版-v0.2

Quartz Extreme

Mac OS X 10.2 Jaguar中的新功能特性

这项被简称为QE的新技术给UI设计带来了新的可能性。简单地说,它就是利用了

显卡的强劲性能,为UI提供硬件加速。对于现代的显卡来说,给界面的种种特效

提供加速支持简直就是小菜一碟。这样进一步解除了机器性能对UI设计的限制,

设计师可以充分发挥自己的创造力。由此可见,想要产出或保持一个高水平的UI

设计,先进的底层技术是重要基础。

Rendezvous / Bonjour

记得在2006年于杭州召开的“User Friendly”大会中,曾有人提到说最好的

界面应该是“没有界面”,我同事笑称“没有界面”就等于我们全下岗。其

实在很多情况下,这个“没有界面”的观点和做法都是更好的。Apple提出

的Rendezvous(现在叫Bonjour),就是这一观点的成功实践。

Rendezvous可以看成是电脑之间、电脑和外设之间的全自动发现和配置

(Zero Configuration),比如你把一台打印机接入网络,电脑就会和这

台打印机进行对话,无需作任何的设置和干预,等上几秒钟,你就可以

用它来打印了!不妨试想一下如果我不告诉你有这项技术,在接到“利用

网络打印机打印”的产品需求时,你会如何设计用户界面?

Page 31: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.3 Panther, 2003

Panther在材质上比以前有很大不同,逐步向深沉内敛的方向转变。除此之外,Panther在UI上

最大的革新就属Exposé和Finder了。

Page 32: Apple和它的设计-文字注释版-v0.2

Fast User Switching

Mac OS X 10.3 Panther中的新功能特性

这是一个凭借用户体验取胜的绝佳例子!Jobs在Macworld上展示此功能

时,台下的观众不由得发出了惊叹的叫声-原来切换不同的用户可以做

到如此酷的效果:整个屏幕如同立方体一样旋转到另外一个用户的桌面

上!

User Centric Finder

在Windows XP的资源管理器中选中一个文件,其左面的侧边栏中会出现诸如“复

制”、“粘贴”一类的快捷方式,这其实是以文档为中心的-你选择一个文档,与其

相关的操作便显现。这是个不错的设计,可当我使用了Finder以后,我更喜欢

Finder中以我为中心的侧边栏,默认的分类适用于绝大部分情况,节约了很多给

文件分类的时间和精力;并且查找起来也是十分方便:我可以很容易快速地转到

另外一个文件分类。此外,我还可以根据自己的需要自定义侧边栏中的项目。使

用起来方便极了!

Exposé

作为全新概念的窗口管理器,Exposé受到了Mac用户广泛的好评。Exposé可

以迅速平铺屏幕上的所有窗口,以方便用户在应用或窗口间切换。我个人没

觉得Exposé有多好用,还写了好几篇文章批评Exposé和Dock的设计。

Page 33: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.4 Tiger, 2005

由于新功能Spotlight及由此而来的“智能文件夹”的引入,10.4中Finder变得更好用了,我个人觉

得这是Mac OS X历史中最好用的Finder,10.5中Finder的侧边栏变小了很多,点起来难度很大

(Fitts’ Law)。

Page 34: Apple和它的设计-文字注释版-v0.2

Spotlight

Mac OS X 10.4 Tiger中的新功能特性

前面提到的Raskin认为,用户是不应该为文件其名字、并只靠短短几个字的名字

硬性记忆或识别文件内容的。多年前MS提出的WinFS让人看到了解决这一问题的

一线希望,然而我们都看到了其令人失望的结果。Spotlight的出现大大降低了用

户的记忆负担,找到想要的文件变得易如反掌-只要你记得关于这一文件的哪

怕一条信息。此外,从某种程度上说,目前层出不穷的基于Tag的文件管理软

件,可以说是对WinFS和Spotlight理念的进一步发展。

Dashboard

一键呼出,快速找到信息,继续工作。这句话可以高度

概括Dashboard的精髓。其实达到类似目的的软件早已有

之,常见的做法是在桌面上放一些小的Widgets,或者把

软件集成到系统中(比如Windows中窗口标题栏上)。

但它们的缺点都太过明显,以至于很难成为主流应

用。Dashboard则通过另外一种形式的“虚拟桌面”,漂亮

地解决了这一问题。此外,其让人惊讶的水波纹特效一

时成为了争相效仿的对象。

Page 35: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.5 Leopard, 2007

Page 36: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.5 Tiger - Time Machine

在10.5中推出的几百个新功能中,有两个是必须要大书

特书的。其一便是Time Machine(TM)。

虽然此前有不计其数的数据备份软件,但TM让它们黯然

失色。TM的出色之处恰恰在于极其出色的UI,它真的让

备份成为了一件轻松惬意的事情-只要接上第二块硬盘

并打开TM,软件就会在后台默默地实时工作。恢复操作

则更让人惊艳:我的天,TM的主界面居然是一个时间隧

道!你可以查看或恢复任何一个时间点上的文件,就好

像真的在时间隧道中穿行一样!当Apple的VP Scoot在

WWDC上第一次展示这个界面时,全场都沸腾了!

TM出现以后,Linux上迅速出现了类似的软件(名字倒是

记不得了,Digg和LDCN上都有过报道)。可是这些软件

无一例外地都只能做到实时监视文件系统的变化并备份

或恢复,而在UI设计上与TM相距甚远。原因?这就是接

下来要说的TM背后的秘密武器:Core Animation。

Page 37: Apple和它的设计-文字注释版-v0.2

Mac OS X 10.5 Tiger - Core AnimationCore Animation是一个面向程序员的动画开发框架,它旨在统一、规范并简化程序员在UI设计上

的编码工作,并通过提供一系列预定义好的API,让开发者可以轻松地实现各种视觉特效。

Core Animation把UI设计向前推进了一大步,是它加速了直接操纵(Direct Manipulation,详见我

写的介绍性文章)这种交互方式的普及。在10.5中,它作为一个重要的基础框架被提出,奠定了

未来几年Apple在其各个产品上UI设计的基础。 我们目前常见的最典型的应用就是iPhone,可以

说,Core Animation是iPhone易用且绚烂多姿的UI的最大功臣。

下面是此技术在iPhone上的几个直接操纵的例子:

Coverflow Pinch Shake Wave在3D界面上滑动并选

择项目用手指缩放来调整图

片大小通过晃动-而非常见

的“Undo/Redo”操作-来放弃更改

通过舞动手机来调整方向。后来的Wii Fit有异曲同

工之妙

Page 38: Apple和它的设计-文字注释版-v0.2

4. Apple的设计方法和过程

Page 39: Apple和它的设计-文字注释版-v0.2

欣赏了半天Apple精湛的设计,是不是不由得想知道它们是怎样被

制作出来的呢?遗憾的是,除了Apple自己,没人真正清楚Apple的

设计方法和过程。这是因为:

1. Apple从不参加任何设计行业会议

2. Apple对其所有的设计方法和过程都守口如瓶

3. 一旦有幸进入了Apple的核心设计团队,你就基本上得放弃

公开发言的机会了(比如写blog)

4. Apple在产品研发过程中极其变态的保密措施(去看看

iPhone的研发过程)。由于太过变态,猜测Apple会发布何种

新产品甚至成为了其用户的一种乐趣

所以,虽然接下来的内容都是我长期的积累、搜集和整理的结

果,但你仍可以对其采取将信将疑的态度。

写在前面

Page 40: Apple和它的设计-文字注释版-v0.2

传统的产品设计思路是什么?对,以用户为中心,也就是常说的UCD-先去了解用户和他们的需

求,然后再根据得到的结果去设计产品。 如下图:

1. 与众不同的产品设计思路

可是Apple不这样。它根据自己的特点和需要,为自己设计产品,然后让被极度细分人群去认可和

追随。

Page 41: Apple和它的设计-文字注释版-v0.2

上述观点是我自行杜撰的吗?当然不是,这是Steve

Jobs自己说的:

“你没法走大街上去问别人,你说,下一件牛叉

的事情会是什么?亨利·福特曾经有过一句经典名

言,他说:如果我当年去问顾客他们想要什么,他

们肯定会告诉我'一匹更快的马'。”

他接着说:

“这事儿和流行文化无关,和坑蒙拐骗无关,和

说服人们接受一件他们压根儿不需要的东西也无

关。我们只是在搞明白我们自己需要什么。

而且我认为,我们已经建立了一套良好的思维

体系,以确保其他许多人都会需要这么个东西。我

们收了钱就是来做这事儿的。”

1. 与众不同的产品设计思路

注:这几段话的中文翻译不是我做的,可是我找不到原作者了,这里标明一下,算是对原始翻译者的尊重。

Page 42: Apple和它的设计-文字注释版-v0.2

如果你还不明白他的意思,下面这句话一定能让你

醍醐灌顶:

“我们之所以去做 iTunes ,是因为我们都热爱音

乐。iTunes是最好的音乐播放器,我们又都希望随身

携带全部的音乐。产品团队展开了非常艰辛的工

作。它们之所以这么卖命,就是因为我们都需要一

个这样的产品。你知道吗?我的意思是,我们自己

就是最早期的那几百个用户。”

看了这段话,你还会觉得UCD是产品设计唯一正确

的路吗?说句题外话,我本来觉得豆瓣是最有希望

成为独具自我风格的、类似Apple这样的公司的,可

似乎阿北身上所具备的独特的个人理念正被越来越

多的用户所消磨殆尽,对比一下早期和现在的豆

瓣,不能不说这或多或少是一种遗憾。

1. 与众不同的产品设计思路

Page 43: Apple和它的设计-文字注释版-v0.2

还记得前面花了大篇幅讲到的“1984精神”和“Think Different”吗?我觉得之所以Apple及其产品和设

计让大家觉得与众不同、特立独行,是和他们所一贯奉行和崇尚的明确独特的精神理念所分不开

的。

在“Think Different”中,Apple发出了响亮的宣言:

“People who are crazy enough to think they can change the world, are the ones who do!”

这段话现已成为我的座右铭。有趣的是,我此前自己写下的座右铭是“To be a man who can change

the world, no matter what he does.”

2. 明确独特的精神理念

Page 44: Apple和它的设计-文字注释版-v0.2

Apple的设计师的岗位,是世界上几乎所有从事这个行业的人所梦寐以求的。那么,究竟怎样才能

进入它核心的设计团队,成为这个星球上最牛逼的设计师之一呢?不妨看看Apple对ITMS UI设计师

的要求:

3. 设计师的通才要求

• 对优雅的设计有热情

• 愿意并能够使用最新的科技实施设计

• 有美感,深入理解视觉设计和人本界面

设计间的依赖关系

• 深入了解色彩、一致性和字体的关系,

追求细节完美

• 可以创建Aqua风格的widgets

ITMS UI Designer

我不止一次地公开反对国内互联网公司内徒有其表的分工方式。网页设计明明就是一种艺术和技术

相结合的工作,一个或几个页面上的事情,非得还要分出来什么研究视觉交互代码,听起来像回事

儿似的,实际操作起来能把人累死,效果还不一定好。这个问题我不在这里展开了,详见我blog上

的专门讨论。

Page 45: Apple和它的设计-文字注释版-v0.2

4. 简洁有效的流程

这是Apple的常用语,我在它的招聘网页上看到过几次,很是感叹他

们精益求精的精神。据称这样做是因为:虽然前期花了不少时间制作

原型,但减少了不确定性因素和沟通成本,总体上看反倒有利。

下面这一流程来自于前不久披露的Apple设计流程。

Pixel Perfect Mockups

10 to 3 to 1这是说,Apple往往为某个产品设计众多的原型,然后从中挑选10个

最好的,继而从这10个中选出3个,最后则从3个中确定最终设计。这

样的方法很酷,不过对于分秒必争的互联网公司来说似乎不适用。

Paired Design

Meetings

设计师有大概的想法后,便和工程师结对,一边展示自己的设计,一

边请工程师做可行性的分析,并听听对方有没有更好的建议。我觉得

软件UI的实现确实比较复杂,但对于网站来说,设计师完全应承担前

端编码的工作。当然与后台相关的还是要请工程师来评估。

Page 46: Apple和它的设计-文字注释版-v0.2

内容回顾

1. Apple的诞生

2. 独特的精神理念:从1984到Think Different

3. Mac OS的UI的演进

4. Apple的设计方法和过程

Page 47: Apple和它的设计-文字注释版-v0.2

“one more thing”

Page 48: Apple和它的设计-文字注释版-v0.2

我搜集了1983-2008年间Apple的各类视频,包括各年度Macworld和WWDC的Keynote、广告、产品介绍和Special Events等等,一共有30多个G。

并且……

WWDC

MacworldApple Ads

Special Events1983-2008

Page 49: Apple和它的设计-文字注释版-v0.2

我很乐意与你分享!

Page 50: Apple和它的设计-文字注释版-v0.2

全文完Felix Ding

heartstringz.net2008-10-6

Page 51: Apple和它的设计-文字注释版-v0.2

写在后面的话

前看后看,左改右改,终于把这个幻灯片的“文字注释版”写完了。可输出了PDF再打

开一看,还是有很多不满意的地方,什么用词不当阿、引用图片没有标注来源阿、排

版不够漂亮阿等等等等不一而足。然而丑媳妇还是要见公婆的,硬着头皮还是把它放

了出来。希望能够抛砖引玉、借此广交朋友吧。

本文的第一个读者是苏州的michelle,作为一个对计算机不那么精通的普通人,她给

我提了很多的意见和建议,使本文的可读性有了不小的提高,谢谢这个满脑子古灵精

怪的小朋友。

最后呼吁一下:希望像我一样的IT民工珍爱生命,远离电脑,花更多的时间和家人朋

友一起去户外转转,感受一下这个世界的丰富多彩。

就现在,去吧!