从苹果官网细看20年设计变迁史

在过去很长一段时间，苹果都一直以自己流线型、极简风格的工业设计闻名全球。而97年乔布斯带着NeXT团队荣归苹果之后，这家传奇企业重获新生，它的高速发展的这个阶段也和互联网快速普及的20年有着高度的重叠。因此，苹果官方网站正式上线之后，它的设计风格也在过去20年间迎来了巨大变化，你可以在每一次设计的转型和改变中看到苹果变革的轨迹。

得益于“互联网档案馆”（the Internet Archive）所收集的网页历史数据，我们将首次得以以时间线的方式大致了解一下苹果官网在这些年来的设计风格变化。

需要指出的是，虽然苹果早在1987年就注册了Apple.com的域名，但我们只拿到了1997年之后的清晰截屏。正好，让我们仔细观察一下乔布斯回归之后的苹果，官方网站是如何变革与进化的。以下是具体内容：

1997年：变革开始

1997年时的苹果主页看起来就和一份彩色报纸一样。这是令人振奋的一年，乔布斯重回公司，去掉冗余的产品线，Mac OS X开始进入酝酿阶段。这时候苹果官网的视觉设计受限于时代，同时也受到当时的Mac OS 8的设计语言的影响。看看Mac OS 8的设计，你就明白了：

1998年：“乔纳森式”设计发轫

1998年时，苹果对自己的官网进行了大幅精简，并在主页用大量空间突出了全新iMac的广告。此时苹果主打的iMac产品为iMac G3，也就是电影《乔布斯》结尾处乔纳森手稿上的那台线条流畅，充满浪漫主义气息的半透明外壳的一体机。在这张网页截图中，我们可以看左下角充满浓郁90年代风格的电脑主机和笔记本，和iMac G3形成鲜明的对比，所以人们将苹果由此开始的这个阶段戏称为苹果的“浪漫主义时期”。简洁与浪漫汇聚于此，我们在这张98年的网页上看到了乔布斯追求的简洁与艾维早期设计中的浪漫与精致。

不同于乔纳森之前设计的Newton系列掌上电脑的90年代工业风，从iMac G3开始，这个英国人开始把他内心的另一面呈现在产品上。

1999年：你好，色彩

1999年，苹果在官网上力推当时最新推出的iBook系列笔记本电脑。今天，我们将这款线条柔和色彩活泼的笔记本亲切的称为“贝壳机”，苹果的台式机和笔记本产品线全部更新换代，在乔布斯和乔纳森的主导下，苹果几乎全部产品线（高端的Powerbook系列笔记本除外）都开始在工业设计上融入多彩的元素，使用晶莹剔透的高品质工程塑料来制作外壳。在99年的这张网页截图上，我们可以看到底部中央的AirPort和左侧的高端工作站 Mac Pro G3 也使用了同样的设计语言。

而于此同时，Mac OS 9也在同年推出，设计上延续了Mac OS 8，但是你可以在用色和字体上看出，这一次的升级在视觉上更加现代了，图标和UI控件的细节打磨得更加细腻了。当然，这种改变是离不开硬件风格改变的影响的。

但是别忘了，苹果是出名的讲究软硬件一体化设计的公司，Mac OS 9的温吞升级的背后正酝酿着一次革命性的改变。OS X 要来了。

2000年：Aqua与拟物化元年

2000年时，苹果在自己的官网主页设计了一个顶部导航栏，而这一设计一直沿用到了现在。更令人难忘的是顶部导航栏所制作出的水滴质感，也许我们今天看并没有太深的感受，但是这种名为Aqua（拉丁语，水）的设计风格，是整个UI设计发展史上的一个重要里程碑。这一切要从Mac OS X的开发说起。

Mac OS X DP2，也就是第二个开发预览版。

Mac OS X的开发是艰难的。乔布斯带来的NeXT公司的操作系统团队和苹果本身的开发者加在一起有150人之多，他们在乔布斯回归之后就走到了一起，倾尽全力，结合NeXT的NextStep操作系统的内核和Mac OS的设计，打造下一代的系统。在乔布斯的暴君式的咆哮和无数次的打回重做之后，开发团队终于在Mac OS X第三个开发版上作出了革命性的设计：

Mac OS X DP3

鲁宾斯坦曾回忆，Aqua的设计语言是从窗口右侧的滚动条开始的。在乔布斯否定50多次之后，湛蓝色水滴式的滚动条第一次让他难得地点头称赞。从这一刻开始，苹果在UI设计上开始从打磨水滴质感开始“抄现实”，拟物化设计之路也由此展开。没有设计师不知道“拟物化”，但是千万别忘了，这一切是从一个滚动条开始的。（不可否认，广泛意义上的拟物化在几千年前就有了，但是旗帜鲜明地将其以设计语言的形式呈现在UI设计上，并影响全世界的，是Aqua，是Skeuomorph）

2001年：继往开来，Apple Store与 Mac OS X

2001年对于苹果而言是重要的。随着Mac OS X的正式发布，标志性的Aqua设计风格也影响了苹果的Logo设计，苹果终于在自己的官网的去掉了以往一直使用的巨型“APPLE”文字，并将左上角的红色苹果Logo更换成了蓝色。乔布斯治下的皮克斯通过几部动画电影获得了巨大的成功，影响世界的苹果商店也开始开门迎客，Max OS X开始正式发布，这三件事情对于乔布斯和苹果而言，都意味着光明的未来。最重要的是，4年漫长的马拉松之后，苹果电脑的软件和硬件在设计上在这一刻融合于一体。

随着G4世代的产品发布，苹果的“浪漫主义时期”走向终点，更富于现代主义特色的白色开始替代彩色，苹果悄然进化。

2002年：剑指传统音乐产业的iPod与iTunes

而在2002年，苹果的产品设计开始大规模地使用白色和银色。当年主推的iPod就是前白后银的工业设计，它于2001年10月23日正式发布。这也就难怪，官网首页上的蓝色苹果Logo被更换成了银色。网页左下角的iMac G4就是著名的“台灯”，工业设计的灵感来源于乔布斯家后院的向日葵，屏幕后背的金属轴定位感极强，柔和的曲线和金属臂结合在一起，现代感极强。无独有偶，初代iPod也将转轮设计成机械结构，初代的iTunes的UI也使用了金属拉丝的纹理来点缀。苹果的“现代主义”设计，在2002年基本成型。

iPod + iTunes 让数字音乐给传统音乐产业送终，而2002年的这个网页又何尝不是开启战役的冲锋号呢？

2005年：Shuffle，Nano，数字音乐组合技

在此之后，苹果一直在官网最显著的位置以巨大的空间着重推荐自己的最新产品。图中便是2005年时候的苹果官网截图，这正式当时主推的产品iPod Nano。在这一年，苹果在年初发布了低端的iPod Shuffle，年底则发布了中端的iPod Nano，配合经典的iPod，正式布局完成。

这个阶段，苹果在网页设计上不再拘泥于白色背景+产品图的经典搭配，更具有包容性。难道不是么？不信看网页底部，那款Motorola E1就是苹果与Moto合作的产物——“iTunes手机”，在苹果的开拓史上，也算是独一无二了。

2007年：重新定义手机的iPhone

在2007年中期，苹果再次对官网的顶部导航栏进行了重新设计，而当年的主角毫无疑问是横空出世的iPhone。我们都很清楚这款产品的意义有多重大。极具代表性的圆角矩形图标，将拟物化设计推向整个世界。这个内部代号为“Purple”的智能手机催生了Android，也为摩托罗拉、Nokia和黑莓的没落埋下了伏笔。

iPhone有多经典？看看iPhone 6和iPhone 6 Plus 你就明白。

2010年：稳定积累

苹果的这一官网设计方案此后一直没有迎来巨大变化，图中便是2010年苹果推出iPad时的官网截图。稳定积累又何尝不是好选择呢？须知只有量变，才能引起质变。2010年苹果发布了传奇的iPhone 4，并且用iPad向世界证明这家公司能设计出真正易用的平板电脑。

2011年：一个时代的结束

2011年时，苹果对顶部导航栏采用了更加深色的基调，搜索栏也变得更加简单。这是在这一年，乔布斯也走到了人生的尽头。iPhone的工业设计和下一代的iOS设计也开始在苹果内部立项研发。一个时代结束了，改变也即将发生。

2014年：不止于平，岂止于大！

图中便是苹果如今官网主页的设计方案。iOS7发布之后，“苹果式扁平”也运用到了网页设计上。单页设计、动态加载、视差滚动等各种新技术都能苹果官网上找得到。所以，“苹果式”的扁平化设计，并不是看起来这么简单。iPhone 6 Plus 和 Apple Watch 一大一小也像全世界宣告苹果在设计上的不拘一格。

本文地址：http://www.uisdc.com/website-inspire-apple-revolution

从苹果官网细看20年设计变迁史相关推荐

苹果官网下架 iPhone 8 全系；阿里推出“阿里云会议”；深度操作系统 20 BETA 发布 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
为什么苹果官网设计如此吸引人？
我敢打包票,在企业官网的设计中,没有人比苹果(Apple)更懂得如何漂亮直观的在页面上展示宣传自己的产品. 苹果的网页设计从图片选取.广告词.主页栏以及白色的背景等编排设计,依旧继承了它在产品研发中追 ...
iPhone13真香了？苹果官网被抢崩了，连夜补货！粉色或成爆款..
17日晚间20:00,苹果新款iPhone 13系列正式开启首轮预购.果粉们直接把官网买崩了,各大平台的首批备货也火速售罄!随后,话题"苹果官网崩了"."iPhone 1 ...
苹果官网出现价格Bug：千元产品变百元；阿里云量子模拟平台“太章2.0”正式开源；Vant 3.0发布|极客头条...
整理 | 郑丽媛头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「 ...
苹果官网下架iPhone 8；破解百度网盘的Pandownload开发者被捕；三大运营商年内上线5G消息 | EA周报...
EA周报 2020年4月17日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 热点大事件谷歌收紧游戏商店规则,要求开发者提供免费试用细节谷歌宣布了一系列政策调整, ...
iphone降级_无刘海 iPhone 现身苹果官网iOS 13.3 系统验证已关闭
iOS 13.3 验证关闭今天凌晨,苹果关闭了 iOS 13.3 和 iPadOS 13.3 版本的系统验证,这意味着用户已无法从 iOS 13.3.1 降回 iOS 13.3 了. 苹果发布新版系 ...
那个把iPhone卖这么贵的女高管离开了个人信息已从苹果官网撤下
在苹果越卖越贵时,有人调侃苹果已成为奢侈品,事实也确实如此. 主管苹果零售部门的前高级副总裁安吉拉·阿伦茨(Angela Ahrendts)在加入苹果之前正是奢侈品巨头巴宝莉(Burberry)的首席 ...
苹果官网以旧换新价格暴跌；戴威退出 ofo 法人代表及高管；TensorFlow 2.1.0 发布| 极客头条...
整理 | 屠敏快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页.其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外. 最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣 ...

从苹果官网细看20年设计变迁史

从苹果官网细看20年设计变迁史相关推荐

最新文章

热门文章