苹果用户界面Aqua背后的故事

简介: Aqua是Mac电脑全新用户界面的名字。在英文中,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,就要被他揭开帷幕了。

目录
相关文章
|
2月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
81 9
|
3月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
95 0
|
3月前
|
UED 开发者 Java
触摸未来:Vaadin UI设计原则如何引领你打造触动人心的数字体验
【8月更文挑战第31天】Vaadin UI设计原则致力于提升Web应用的用户体验,其核心理念包括简洁性、一致性、直观性和可访问性。通过简化界面、统一设计风格、增强直观操作及优化无障碍访问,开发者能构建出高效且吸引人的应用。本文详细介绍每个原则,并提供实用的Java代码示例,帮助开发者在Vaadin平台上实现卓越的用户体验,提升用户满意度与应用成功率。
57 0
|
3月前
|
前端开发
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
类抖音logo的光影之旅:CSS动画效果,让标志更具吸引力!
|
前端开发 JavaScript 程序员
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
356 0
|
Web App开发 算法 程序员
一部手机,万物皆可复制粘贴,这位兼职写代码的设计师将AR玩出了新高度
看到什么就复制什么,这是魔法还是孙悟空的神通?都不是。这是 AR 的魔力。
195 0
一部手机,万物皆可复制粘贴,这位兼职写代码的设计师将AR玩出了新高度
|
iOS开发
iPhone诞生以后,从此UI设计行业就迅速发生了翻天覆地的变化!
iPhone4诞生之后,UI设计发生了翻天覆地的变化,以电容触摸屏为交互中心的智能手机以难以想象的速度,成为了人类生活中不可分割的部分,人与人之间的连接因此而更加紧密,同时也更加疏远。
1131 0
|
Web App开发
云技术让UC浏览器TV版 赋予懒人超能力
本文讲的是云技术让UC浏览器TV版 赋予懒人超能力,
1319 0
《社交网站界面设计(原书第2版)》——1.14 比你想象中简单得多
本节书摘来自华章计算机《社交网站界面设计(原书第2版)》一书中的第1章,第1.14节,作者:(美)克里斯蒂安·克鲁姆里什(Christian Crumlish),艾琳·马洛恩(Erin Malone)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1159 0