苹果用户界面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,就要被他揭开帷幕了。

目录
相关文章
|
4月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
90 1
|
4月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
73 11
|
4月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
95 9
|
5月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
61 7
|
5月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
132 0
|
5月前
|
UED 开发者 Java
触摸未来:Vaadin UI设计原则如何引领你打造触动人心的数字体验
【8月更文挑战第31天】Vaadin UI设计原则致力于提升Web应用的用户体验,其核心理念包括简洁性、一致性、直观性和可访问性。通过简化界面、统一设计风格、增强直观操作及优化无障碍访问,开发者能构建出高效且吸引人的应用。本文详细介绍每个原则,并提供实用的Java代码示例,帮助开发者在Vaadin平台上实现卓越的用户体验,提升用户满意度与应用成功率。
67 0
|
传感器 搜索推荐 物联网
宝宝巴士与HarmonyOS携手打造更具交互性的早教体验
宝宝巴士与HarmonyOS携手打造更具交互性的早教体验
226 0
|
前端开发 JavaScript 程序员
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
基于JavaScript实现网页版仿苹果2022下半年最新UI设计(灵动岛UI设计原理设计)
371 0
|
Web App开发 编解码 移动开发
移动开发屏幕适配分析
我在开发前端的时候曾经会有几个疑惑
移动开发屏幕适配分析