哈哈,前几天刚发现一个神网站:
Internet Archive(互联网档案馆,以下简称 IA)。这个网站抓取了自其 1996 年成立以来超过 1500 亿个网页,这当然也包括苹果,而且也刚好涵盖了乔老爷回归苹果后的十多年历程,我来截几张图。
⚠ 超级多长图,请注意,请注意 ⚠
1996-1997 ▼
先来看他回归前 http://apple.com 的样子。IA 里的最早收录追溯到 1996 年 10 月,图片已经显示不全,但从轮廓构架上看,这个设计一直保留到了 1997 年,也就是他正式回归的这一年。所以他回归前的 http://apple.com 是这样的(原网页很长,稍有截取) ▽
遗憾的是,只有首页可以访问,其他页面统统无法预览了。这时的网站,无论配色、版面结构和今天相差甚远。乔布斯最初创立苹果时便使用的 Garamond 字体一直延续下来,而且源代码中将字体限定在 <FONT FACE="Times">(也就是衬线字体 Times New Roman 的前身) 也说明了那时苹果公司对这个网站设计的审美倾向:追求优雅,不追求未来感和极简风。
1998 ▼
这一年苹果推出了革新科技界审美的复兴之作:iMac G3。苹果的官网也在同月进行了更新,可以非常明显地看出,今日首页的框架初见倪端,大片留白、图片为主的设计风格也基本确立。Apple Store、Products、Support、Hot News 等栏目都保留下来。彼时导航栏位于底部,搜索框独立于导航栏。关于搜索有个有趣的细节:除了 Search 按钮外,还有一个 Shortcut 按钮,这大概就像是当年谷歌的「I'm feeling lucky」按钮一样,不进入搜索页面,而是直接进入第一个搜索结果。是当时潮流还是模仿谷歌,这就不得而知了。
首页,那时苹果已经不再满足于静态的呈现方式,下图右上角的 Mac 就有一个转身出场的 GIF 动画(
点此查看) ▽
对比一下今天(2015 年 4 月)的官网面貌 ▽
产品页 ▽
1999 ▼
这一年网站设计没有大幅修改,但是照片上开始出现高光线,Mac OS X 的 Aqua 风格初现 ▽
苹果 logo 在这一年也第一次水晶化 ▽
2000 ▼
随着 Mac OS X 公众测试版发布,苹果的官网大幅更新,并全面转向 Aqua 风格,包括水晶质感的标签式导航栏、品牌 logo 也换成了去年出现的红水晶版本,搜索中的 Shortcut 按钮也被移除 ▽
Mac OS X 介绍页,我们今天熟悉的 App Store 的 icon 在那时候已经有了原型 ▽
2001 ▼
这一年 iPod 横空出世。官网继续 Aqua 化;logo 由红变蓝;大图下面的促销栏,由三图变为四图,图片之间由原来的线条分割,转为变成圆角矩形分割,这一惯例延续至今;最底下的一行字:Powered by Mac OS X Server 在随后持续多年 ▽
iPod 介绍页,这是苹果首次在网页中尝试文字环绕图片的排版方式,这种错列有序的布局明显地影响了多年后 iPhone 4 的展示页设计 ▽
这一时期,苹果官网的特色就是在导航栏上针对不同页面使用不同的水晶色 ▽
这一年苹果中文官网有了收录,幼圆匹配西文中的无衬线体,某种宋体(具体哪款有人知道请告知)匹配 Apple Garamond ▽
2002 ▼
这一年在宣传广告和网站中,苹果不再使用衬线字体 Apple Garamond,转而开始使用人文主义无衬线体 Myriad,可以看出苹果的网站结构已经成熟,以水晶和金属质感为主的拟物设计风格也基本确立——比如 Sync 的金属圆盘质感一直延续到后来的 iCloud 图标上。除了水晶质感,这些十三年前的设计放在今天依然很前卫 ▽
苹果的简短广告语风格初现 ▽
有趣的导航栏设计 ▽
Finder 程序介绍 ▽
2003 - 2006 ▼
这几年苹果的官网没有很大变化,一直在完善各种 Aqua 细节,照片也开始出现黑底,广告词已经开始…改变世界。相对于设计细节的完善,这一时期新产品更吸引人 ▽
左上角显示当前页面的产品名(如下图中的 .mac)、右上角显示各类分项介绍,这一惯例从此确立,延续到今天 ▽
对比今天的产品展示页(注意左上角的 MacBook 和右上角的 Design、Wireless、OS X、Built-in Apps Tech Specs) ▽
2007 ▼
这一年初,苹果在旧金山发布了影响深远的 iPhone,官网也有一个有趣故事:在 2007 年 1 月 8 日 iPhone 发布前,苹果在首页题图中这样写道 ▽
iPhone 发布当日,苹果更新了官网:这是在首页中,除了导航栏外,首次使用全黑背景,如果没有考察错,这一年苹果在网页中开始加入视频播放 ▽
2007 年 6 月 iPhone 正式发售时,苹果将导航栏设计由水晶 Aqua 转向金属质感,将原来在页底的搜索栏移到导航栏,而底部的分栏信息的设计也从此确立。今天的苹果官网布局定型 ▽
2008-2009 ▼
这两年苹果的官网回归到小修小补中 ▽
Apple Online Store 的这一版格局延续到 2013 年 ▽
2010 ▼
这一年有两件重磅产品,iPad 初代和 iPhone 4,苹果在这两件产品的展示页中所作的设计后来被众多产品模仿。
iPad 发布时,曾短暂将首页底部的四块促销图拿掉,只留下大图 ▽
iPhone 4 发布时,促销图又得到回归 ▽
这种文字和图片错落有致排版样式,从 2001 年 iPod 展示页首次应用,在展示 iPhone 4 时彻底成熟,从此被运用到众多的产品展示页中 ▽
2011 ▼
这一年在新款 MacBook Air 发布后,官网的导航栏重回水晶风格,并加回高光线 ▽
苹果在图片和文字的融合上作出了不少尝试 ▽
这一年的 10 月 6 日: