苹果用户界面 Aqua 背后的故事
Aqua是Mac电脑全新用户界面的名字。在英文中,Aqua为水的词根,寓意以水为灵感,精心设计。Aqua一经推出,就以其精美的设计和优雅的外观而大受欢迎,并将苹果电脑重新推向了行业领导者的位置。本文详细介绍Aqua产生的过程。
Mac电脑从最早的System 1开始,就打破了字符终端的模式,使用图形界面和用户进行交互。此举虽然颇具创新性,但也许是满足于自身的成就,自System 1到System 7,10年过去了,Mac电脑界面却始终没有显著的变化。这也给了微软的Windows以超越的机会。特别是微软发布了炫丽多彩的Windows 95之后,Mac OS的图形界面就在Windows面前显得黯然无光,毫无竞争力可言。
乔布斯重返苹果之后,召开了一次图形界面组的会议。在这次会议上,乔布斯将老Mac OS的界面批评得体无完肤,这让界面设计小组意识到了自身的不思进取。Cordell Ratzlaff作为图形界面组的主管,也意识到了苹果有三个重要的设计问题:第一,Apple的很多界面语言不明确;第二,老Mac OS不会对问题进行变通,在多窗口操作下让用户摸不着头脑;第三,老Mac OS的界面过于古板。这些问题让老Mac OS的界面非改不可。
1997年到1998年,Apple的硬件外观设计取得重大进展,具有浪漫主义气质的、五彩斑澜的、半透明外壳的、具有曲线美感的iMac被设计出来了。得益于全新iMac设计的灵感,Cordell Ratzlaff和他的同事们很快就做出了一个全新的界面图样Aqua。
针对前面提到的老Mac OS的三个问题,Cordell Ratzlaff给出了解决方案:第一,他提出了一个叫“实时状态”的概念;第二,窗口的问题统一采用动画加以解决;第三,改变老Mac OS死板面孔,呈现多彩的、小清新的图形界面,所有尖锐的直角都被打磨成圆弧,并且有像 iMac外壳一样半透明的菜单。
由于缺少资源,Aqua在当时还只是个设想(PS出来的图样及模拟出来的视频),还不是能用的代码。
当Cordell Ratzlaff给乔布斯观摩了自己的“杰作”之后,后者大为惊异,并让界面设计组不惜一切代价将之做成试验品。
在加班奋战了三周后,界面设计组用Macromedia Director完成了一个试验品。乔布斯亲自来Cordell Ratzlaff的办公室视察了一下午,他对结果非常的满意,并给予了小组坚定的支持。得到了乔布斯的支持,Apple的Mac OS X开发团队便紧密地围绕在以Cordell Ratzlaff为核心的界面设计专家周围,开发全新的操作系统。
到目前为止,Aqua还仅仅是个概念,还需要有极强的执行力来将之变为现实。Aqua的开发分设计和软件两条路并行走。下文展示了Aqua的具体开发过程。
首先,苹果定下计划,并规划整个界面设计元素的方案,把设想通过可操作性强的材料让工程师来实现。Cordell Ratzlaff每周都要和乔布斯开会,向他展示界面设计小组的最新成果。对于每一个界面元素,乔布斯都会一一过目,并提出自己的见解和改进建议,而Cordell Ratzlaff则会根据这些反馈不断修改,直到乔布斯满意为止。
设计整套方案的过程漫长得让人感到窒息,尤其是遇到了偏执傲慢的乔布斯。下面的几个示例将乔布斯追求完美的性格表现得淋漓尽致。
Mac系统中有一个控件叫滚动条,当需要显示的内容长于当前控件大小时就会出现滚动条。这是一个非常不起眼的控件,大多数时间,用户甚至注意不到它的存在。但即使是这样一个大家都觉得可以忽略的细节,乔布斯都偏执地当个大项目来做。据说,这么一根看似简单得不能再简单的滚动条,设计组都花了整整六个月来修改。
Apple历来偏爱最简化的设计,而满屏的窗口让乔布斯忍无可忍。在他的强烈要求之下,又酷又炫的Dock横空出世,巧妙地解决了满屏的问题。Dock为用户提供了一个放置常用软件图标、闲置窗口、文档的场所。当放入Dock中的东西变多时,它会自动把横向宽度变长、图标变小。当窗口缩入和还原时,都配有“精灵”一样的动画(大家最小化一个窗口的同时按住Shift键,可看到明显的效果),这种灵动的动画可以让用户能快速地找到自己所需。
在最初的Mac系统中,窗口左上角的“关闭”、“最小化”、“最适化”三个按钮的颜色都是一样的灰色,不容易区分它们。乔布斯建议把这三个按钮变成交通灯的颜色,并且当鼠标移到附近时,才显示出相应的图形指示。大家最开始听了乔布斯的这个说法之后,都觉得好笑,用户怎么可能把电脑当作交通灯使用。不过,当他们改完后,都对乔布斯心悦诚服——“红灯给用户一个终止的警示,这个窗口要被关掉了;黄灯表示这个窗口要被放入等待队列,以便以后再通行;最适化则是给这个窗口大开绿灯”。这样高明的比喻,让Cordell Ratzlaff对乔布斯佩服得五体投地。
漫长而充实的一年多的时间过去了,Mac OS X的图形界面,已经是“女大十八变”了。
2000年1月,新世纪的钟声刚刚敲响,乔布斯镇定地走上了MacWorld大会的舞台,独领风骚的、凝聚众人心血的、开创性的界面大作Aqua,就要被他揭开帷幕了。
推荐阅读
-
苹果用户界面 Aqua 背后的故事
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族