原文地址:http://www.programmer.com.cn/9016/
Aqua是Mac OS X Public Beta全新用户界面的名字,英文中为水的词根,寓意以水为灵感,精心设计。Steve Jobs曾介绍说,Aqua的设计是如此之美好,初次见它甚至有想亲吻的冲动。本篇Cordell Ratzlaff 引发的 Aqua 革命(上)介绍的是Aqua的起源和来历,在下篇中,我们将展示Aqua的具体设计过程。

“Mac OS的图形界面就是你们那么业余的人设计的吗?”Steve Jobs开门见山地问。

包括Cordell Ratzlaff在内的设计师们怯怯地点头称是。“你们就是一群白痴!”Steve Jobs骂道。

这个场景发生在Steve Jobs回归不久的图形界面组组会上,前文提到的骂人的话,是他送给图形界面设计组的见面礼。【注:参见http://www.cultofmac.com/how-mac-os-x-came-to-be-exclusive-10th-anniversary-story/87889,How Mac OS X Came To Be,Leander Kahney】

不进则退的局面

Mac OS曾是图形界面设计的先驱。

从System 1开始,Mac就打破了字符终端的模式,使用图形界面和用户交互设计。但自System 1到System 7,10年过去了,界面却始终没有显著的变化。设计组一直认为,为尊重用户的习惯,定下的规矩不要轻易改动。但同时,Microsoft的变化可以说是天翻地覆,从黑屏的DOS,到全屏幕的Windows 1,再到成熟的Windows 3,最后演变到奠定当今Windows界面基础的炫丽多彩的Windows 95。用当时的眼光来看,这个变化是相当惊人的。由于因循守旧,Mac OS在界面设计上从领先掉到了最后。旧的界面原语,一成不变的界面风格,让Mac OS的图形界面在Windows前显得黯然无光。【注:参见http://vimeo.com/21742166】

于是,在图形界面组的组会上,Steve Jobs 抨击了老Mac OS界面的各种不是——几乎所有的地方都被骂了一遍。众矢之的是各种打开窗口和文件夹的方式。在Mac OS中有至少8种打开窗口和访问文件夹的方式,如弹出菜单、下拉菜单、DragStrip、Launcher、Finder等不同的程序。

Cordell Ratzlaff作为主管,他一开始担心是不是会被Steve Jobs炒掉(传闻说Steve Jobs刚进入苹果时最爱炒人,经常会发生一些“神奇”的情况,比如有员工和他一同进了电梯,等一同出电梯时,该员工已被炒掉)。不过批评大会进行到第20分钟时,Cordell Ratzlaff转为淡定,因为他意识到如果Steve Jobs要炒他,不用废那么多话,早就可以动手了。

其实Cardell Ratzlaff是Apple内部较早意识到小组设计不思进取的人之一。他意识到苹果有三个重要的设计问题【注:参见Designing Interactions 第二章My PC 附录访谈】。第一、Apple的很多界面语言不明确。例如,在老Mac OS中,删除文件的动作是把文件图标拖到废纸篓里,但当磁盘和光盘弹出时,居然也是把图标拖到废纸篓里。第二、老Mac OS不会对问题进行变通,如果有几个图标同时显示,窗口还容易操作,但如果有几十个图标或窗口,以相同的方式显示出来,那么在繁杂的页面中找寻所需内容,对使用者则是巨大的挑战。第三、Mac OS的界面过于古板,看上去还是停留在Windows 3.0阶段。总之,当时的Mac OS已经不能代表先进的生产力,也不能代表科技的前进方向,更不能让广大用户得到更多的利益。在Cardell Ratzlaff看来, Mac OS的界面面临不进则退的重大困局,非改不可。

Cordell Ratzlaff的试水

收购NeXT以后,Apple开始考虑如何把NeXTSTEP作业系统变为下一代的Apple操作系统,但界面设计组的倦怠又浮出水面。设计组认为,这是一个浩大的工程,所以他们决定照着Mac OS 8的样子改NeXTSTEP的代码,把NeXTSTEP改成System 8的样子。这并不困难,组里只需一个人就能完成这项任务,这人的工作极其无聊——像小孩子描红模,把新界面的样子临摹得和老界面一模一样。事实上,当Apple 释出Rhapsody和Mac OS X Server初版时,经典Mac OS的界面已经被学得惟妙惟肖了。

Cordell Ratzlaff认为这种混搭,是一个极其让苹果丢颜面的事情。所以,除了那个搞山寨的人以外,他召集其他人做新界面设计的图样。而由于NeXTSTEP具有强大的图形处理和动画能力,因此很多新的图样是在新系统上完成的。

Apple将“What's not a computer!”(看起来不是电脑的电脑)的 概念应用在硬件外观上,设计出具有浪漫主义气质,半透明“果冻” 式且具有艺术美感的iMac,这成了Aqua设计灵感的来源

20世纪90年代初,Apple和Microsoft的操作系统都素面朝天,色调简单,统一的矩形窗口。到1997~1998年,Apple的硬件外观设计取得重大进展:由后来成为金牌设计师的 Jonathan Ive领衔,设计出具有浪漫主义气质、五彩斑澜的、半透明外壳、具有曲线美感的iMac,这个设计成为Cordell Ratzlaff和他的同事们设计的灵感,他们马上就作出了一个全新的界面图样来。【注:参见http://en.wikipedia.org/wiki/IMac_G3】

与此同时,Cordell Ratzlaff 着手解决前文提到的三个设计问题。第一、他提出了一个叫“实时状态”的概念。当用户拖动文件时,废纸保持原样,而如果拖动的是磁盘,那废纸篓的图标变成“弹出”的图标。第二、窗口的问题统一采用动画加以解决。比如窗口的最小化和还原都配有动画,告诉用户窗口的来去方向。当Dock项目有所增减时,项目长度和元素也会随之改变。第三、Mac OS一改死板面孔,呈现多彩的、小清新的图形界面,所有尖锐的直角都被打磨成圆弧,并且有像iMac外壳一样半透明的菜单。当时有评论指责Apple的设计太卡通缺乏权威感,其变化之大可见一斑。【注:参见http://www.aresluna.org/attached/files/usability/papers/onethousandsquarepixelsofcanvas.pdf,One thousand square pixels of canvas On evolution of icons in graphical interfaces by Marcin Wichary 第五页】

Cocoa之父Bertrand Serlet,作为Cordell Ratzlaff的上司,对新界面很满意。但当时,他们认为这个新界面实现起来难度很大,既没有时间也没有资源把这个想法在Mac OS X中付诸实现。于是先前那位孤独的照葫芦画瓢的设计者只好继续工作。

Aqua只是个设想(PS出来的图样+模拟出来的视频),还不是能用的代码。

Steve Jobs的怒火和Aqua的源头

几个月以后,Apple举办了一个所有开发小组参加的长达两天的汇报大会。Cordell Ratzlaff汇报的时间被排在两天的最后压轴出场。大多数工程师对这长达两天的大会报告早已疲倦,感叹Mac OS X剩下的的工作很艰巨,认为发布遥遥无期。于是,Cordell Ratzlaff报告成了整个报告会的最大笑场,所有工程师使出咆哮体来评价这个工作——“啊!!!你看这新界面多出位啊!!!有没有有没有!!!居然用的透明通道!!!还搞个实时的动画!!!你难道不知道你这些永远是天方夜谭不可能完成吗???我们工程师伤不起啊伤不起!!!”这个新设计就这样在所有Apple顶级工程师的鄙视下被废了。

无奈于此,只好无聊地让那位开发者继续复制全套经典Mac OS界面,而当Steve Jobs召集所有设计组负责人时,这个山寨版Mac OS的展示把Steve Jobs看得情绪激动,就发生了文章开头的那一幕。

Cordell Ratzlaff前来解释压轴报告的尴尬局面,暗示千里马常有而伯乐不常有的处境,还让Steve Jobs观摩了他的杰作。果然Steve Jobs看了这几张图例后大为惊异,拍着Cordell Ratzlaff的肩说:“很好!很强大!”然后让设计组不惜一切代价做成试验品。

在加班奋战的三周后,设计组用Macromedia Director完成了一个试验品。Steve Jobs亲自来Cordell Ratzlaff办公室视察了一下午。结果是他激动地握着Cordell Ratzlaff的手,吐露心声:“你是苹果里我见到的第一个智商是三位数字的人。”得到了Steve Jobs的支持,Apple的Mac OS X开发团队,更加紧密地围绕在以Cordell Ratzlaff为核心的界面设计概念周围,开发操作系统。

有缘千里来相会,无缘对面不相识。Steve Jobs和Cordell Ratzlaff算是相见恨晚。这样由Cordell Ratzlaff主导的新界面,在Steve Jobs的支持下,横扫一切困难,成为新版操作系统界面的最大亮点。

从这时到Steve Jobs正式在舞台上秀他的Mac OS X Public Beta,还有18个月。此时,系统界面革命的旅程已经开始,一道神秘的天光射向Infinity Loop,千古杰作Aqua就要在这里诞生,其光辉历程。

Cordell Ratzlaff新界面方案得到Steve Jobs的高度肯定,Steve Jobs让各开发组紧紧围绕在界面设计组周围,共同建造Mac OS X。此时,离Mac OS X第一个公共测试版的发布,仅有一年半时间。这时苹果的设计构想,还仅仅是个概念,在本篇中我们将展示Aqua的具体设计过程。

设计与软件的融合

开发分设计和软件两条路并行走,“两手抓,两手都要硬”。

设计是个有趣的领域。有些人认为,设计就是产品的外观看上去什么样。但其实,如果细想一下,你会发现设计其实是有关产品如何工作的学问。
——Steve Jobs

首先,苹果定下计划,并规划整个界面设计元素的方案,把设想通过可操作性强的材料让工程师来实现。

Cordell Ratzlaff每周都要和Steve Jobs开会,向他展示界面设计小组最新成果。任何大家现在见到的各界面控件,如菜单、按钮、进度条、Steve Jobs都一一过目,毫不马虎。针对每一个控件,Cordell Ratzlaff会要求拿出多套方案来,让Steve Jobs选出他中意的。Steve Jobs也会提出各种他自己的见解和改进建议,而Cordell Ratzlaff则会根据这些回馈不断修改,直到Steve Jobs满意为止。

与此同时,软件工程师也以越来越重的比例加入到这个设计行列中。

图形界面设计小组使用的设计软件是Macromedia Director。它能做出演示用的动画,可以演示打开、关闭窗口、下拉菜单等模拟效果,但这些并不是可供用户使用的最终软件。软件工程师需要把图形界面设计师的设计,变为一行行代码,运用到Mac OS X中。所以每次会议的Macromedia Director动画演示机旁,还会有一台计算机,预装了软件工程师转换的代码。当工程师们向Steve Jobs展示最新代码如何工作时,Steve Jobs会身体前倾,鼻子快贴到荧幕上,观察细微到“像素级别”来比较软件的表现和之前的设计是否完全一致。如果他有发现任何细微的差错,一阵类似“你们全是一帮白痴”的腥风血雨就会在办公室中展开。

设计整套方案是一个令人难以置信的漫长过程,尤其是遇到追求完美的Steve Jobs。Mac OS X中有一个控件叫滚动条(NSScroller)。当需要显示的内容长于当前控件大小时就会出现滚动条,可上下翻阅内容。这是一个非常不起眼的控件,大多数时间,用户甚至注意不到它的存在,甚至在十年后的今天它都被默认不显示了(关于Lion图形界面的改动受iOS思潮的影响我们今后会提到)。但哪怕是这种不起眼的细节,Steve Jobs都偏执地当个大项目来做。Mac OS X的界面设计是有史以来最复杂的一个,需要考虑诸多因素——比如所在窗口的活动与否,都会影响这个控件的颜色等属性。就滚动条而言,箭头的大小、位置的变化、颜色的启用等全都是活动的属性,牵一发而动全身。一根看似简单得不能再简单的滚动条,设计组花了整整六个月来修改。

当时,Mac OS X的用户界面有两个重大的设计目标:第一是让老用户没有压力地迁移过来,且倍感新界面的好用;第二是让那些从未摸过Mac的人尽快上手,并称赞这界面很好很强大。所以,整个界面设计保留了老Mac OS界面元素的设计理念,但同时又对很多有问题的老设计进行了革新。比如,在老版Mac OS中,各种系统设置选项是隐藏在不计其数的系统扩展、控制面板,以及很多系统组件中的。用户要想联个网,要去五六个地方设网络、设IP、设连接设密码,而在Mac OS X中,所有这些设置都被分门别类地规类到一个单一的程序——系统首选项(System Preferences),让用户“足不出户”,就能进行一切相关设置。

精简的狂热追求和大胆的设计创新

Apple偏爱最简化的设计,而往往满屏的窗口让Steve Jobs忍无可忍。又酷又炫的Dock横空出世,巧妙地解决了这个问题。Dock的设计源于Mac OS X的前身NeXTSTEP,但在Mac OS X中完全被重写,并重定义了它的功能。Dock提供用户一个放置常用软件图标、闲置窗口、文档的场所,Steve Jobs说“任何东西都能被拉进 Dock”。但Dock真正神奇的,是它犹如多拉A梦的口袋,有无限的承载能力。当放入Dock中的东西变多时,它会自动把横向宽度变长、图标变小,可承载几十个窗口。当窗口缩入和还原时,都配有“精灵”一样的动画——在Dock的图标多的时候,每个图标很小,用户就很难找到需要的——灵动且放大动画可以让用户能快速地找到所需。

另外,起初版本的Dock中每个图标都是正方形的方块,被换成半透明的背景,看得人垂涎欲滴。这些经典的设计,影响了整整一代图形界面设计者,被各山寨界面抄了一遍又一遍,甚至又活在当今的Ubuntu Linux的Unity和 Windows 7中。

Apple追求清爽甚至到了发疯的地步,在最初版的 Mac OS X Public Beta中,每个窗口有一个按钮,只要按下,除了当前窗口外,其它一切都会飞入Dock。因此,只要一键,“整个世界都清静了”。而在后来每个版本的Mac OS X中,都有大的更新来防止窗口或其他界面元素的堆积。10.3时代的Exposé,10.5时代的Stack和Spaces,10.6时代的Exposé和Dock相结合双管齐下,到 10.7时代的Mission Control,都是用来解决果面精简这一个问题的。

而很多传统的界面控件也被赋予了新的含义。比如 Steve Jobs觉得,“最大化”一个窗口没有实际意义,而且把整个窗口最大化,也会挡住后面的窗口(直到2011年,Apple用“全屏”来重新定义传统的“最大化”)。而Mac OS X没有所谓的“最大化”,取而代之的是自动计算后调整窗口到所需大小的“最适化按钮”。而关闭一个窗口的含意也不该是关闭一个程序,而只应是结束目前的内容。Apple的许多设计都格外具有魄力,完全重写了界面设计的教科书。当然,有许多地方Apple确实做得矫枉过正,比如Apple一直是我见过的只有拖住右下角才能改动窗口大小的唯一系统。这个置用户于不顾的狂妄设计,一直在十年后发布的 Lion中,才得以改变。

Steve Jobs一直是界面设计的重要顾问。他有时候会提出一些看似稀奇古怪的意见,但往往最终又被证明是好的。比如,有一次他在会上指出,窗口左上角的“关闭”、“最小化”、“最适化”三个按钮的颜色都是一样的灰色,不容易区分他们。他建议把三个按钮变成交通灯的颜色,并且当鼠标移到附近时,显示出相应的图形指示。当Cordell Ratzlaff一群人听到这个主意后面色大变,认为简直是计算机图形设计史上最好笑的段子——谁会把电脑当交通灯使啊。不过改完后,他们对Steve Jobs心悦诚服——“红灯给用户一个终止的警示,这个窗口要被关掉;黄灯表示这个窗口要被放入等待队列,以便以后再通行;最适化则是给这个窗口大开绿灯”——这样高明的比喻,使 Cordell Ratzlaff对Steve Jobs崇拜得五体投地。
18个月转瞬即逝,“你们就是一群白痴”的骂声依旧清晰,而此时的 Mac OS X的图形界面,已今非昔彼。

“语静声息。我走上舞台。依着那打开的门,我试图探测回声中,蕴涵着什么样的未来。”(北岛翻译的帕斯捷尔纳克的《哈姆雷特》)。

18个月后的2000年1月,新世纪的钟声刚刚敲响,Steve Jobs镇定地走上 MacWorld大会的舞台,独领风骚的新世纪的经典大作Aqua,此时,就要被他揭开帷幕

作者王越,美国宾夕法尼亚大学计算机系研究生,中国著名TeX开发者,非著名OpenFOAM开发者。

Mac OS X 背后的故事(六)Cordell Ratzlaff 引发的 Aqua 革命相关推荐

  1. Mac OS X 背后的故事(六)Cordell Ratzlaff 引发的 Aqua 革命(上)

    Mac OS X 背后的故事(六)CordellRatzlaff 引发的 Aqua 革命(上) 文 / 王越 Aqua是Mac OS X Public Beta全新用户界面的名字,英文中为水的词根,寓 ...

  2. Mac OS X 背后的故事(三)Mach之父Avie Tevanian 1

    1975年,美国罗彻斯特大学纽约分校,一组研究员正在做一个名为RIG(Rochester"s Intelligent Gateway)的项目,它由Jerry Feldman主持设计.RIG的 ...

  3. Mac OS X 背后的故事(二)——Linus Torvalds的短视

    文/王越 <Mac OS X背后的故事>系列文章将为大家介绍Mac OS X的发行版本.技术历史.相关人物等内容.本文是系列连载的第二篇,主要的故事来源是Linus Torvalds的自传 ...

  4. Mac OS X 背后的故事(四)——政客的跨界

    文/王越 <Mac OS X背后的故事>系列文章将为大家介绍Mac OS X的发行版本.技术历史.相关人物等内容.本文是系列连载的第四篇. 2000年,美国总统大选,由于选票设计问题,时任 ...

  5. Mac OS X 背后的故事(九)半导体的丰收(下)

    文 / 王越 随着CPU与GPU合并成技术发展的趋势,苹果开发出了OpenCL框架,能够进行高速并行处理的能力使OpenCL成为了业界标准,被广泛应用. 最近几年,GPU的发展吸引了很多来自科学计算界 ...

  6. Mac OS X 背后的故事(一)力挽狂澜的Ellen Hancock

    原文地址: http://www.programmer.com.cn/6727/#more-6727 文 / 王越 从本期开始,我们将在杂志上连载一系列关于Mac OS X发展历史的文章.本系列将为大 ...

  7. Mac OS X 背后的故事(八)半导体的丰收

    原文地址: http://www.programmer.com.cn/10071/ 文/王越 在美国宾夕法尼亚州的东部,有一个风景秀美的城市叫费城.在这个城市诞生了一系列改变世界的奇迹:第一个三权分立 ...

  8. 【转】操作系统Unix、Windows、Mac OS、Linux的故事

    电脑,计算机已经成为我们生活中必不可少的一部分.无论是大型的超级计算机,还是手机般小巧的终端设备,都跑着一个操作系统.正是这些操作系统,让那些硬件和芯片得意组合起来,让那些软件得以运行,让我们的世界在 ...

  9. 操作系统Unix、Windows、Mac OS、Linux的故事

    2019独角兽企业重金招聘Python工程师标准>>> 我们熟知的操作系统大概都是windows系列,近年来Apple的成功,让MacOS也逐渐走进普通用户.在服务器领域,恐怕Lin ...

最新文章

  1. 【剑指offer】顺时针打印矩阵
  2. 编程面试过程中最常见的10大算法
  3. ISA CMAK 网络访问隔离区
  4. TypeScript Non-null Assertion Operator 非空断言操作符 - 感叹号
  5. git和php的区别,Git与Github的有什么区别
  6. 链表竟然比数组慢了1000多倍?(动图+性能评测)
  7. 解决方案:超卖(Redis原子队列)
  8. java环境变量配置失败_java环境变量配置失败是怎么回事?出错解决办法分享
  9. 【DIY】用驱蚊器改装wifi中继器,wifi信号增强器
  10. 【项目实战一】基于人工神经网络ANN的车牌识别
  11. Multi-modality Latent Interaction Network for Visual Question Answering阅读笔记
  12. 基音周期检测acf算法及matlab仿真,基音周期检测算法研究及在语音合成中的应用...
  13. 网页多媒体服务器,大区网页直播间搭建,服务器流媒体全对接服务
  14. 【MYsql触发器】
  15. 基于SSM技术的医院在线预约诊疗系统设计与实现毕业设计源码011130
  16. Apache AzKaban 环境搭建与入门使用
  17. linux网卡断流测试,Windows XP SP2操作系统下网络非完全断流的再分析(转)
  18. 视频教程-Python爬虫视频课程:中国女性胸部大小分析-Python
  19. 是指用计算机帮助各类,电子商务师三级试题
  20. 高通骁龙平台芯片处理器(SoC)指南

热门文章

  1. 我也来分享一个魔兽显血改键工具
  2. Pytorch损失函数解析
  3. 在VSCode中配置并调试R语言.r文件
  4. Qt保留小数点后一位、两位……
  5. 可扩展性、可用性以及高性能之间的差别
  6. 花开不败(作者:职烨)
  7. 如何学习新的IT技术
  8. 爬虫入门3---爬虫实战
  9. Python学习笔记:好玩的图形Python代码
  10. 别再盲目复制Compound代码了,Defi借贷项目漏洞分析