Apple.com 设计细节 — 导航栏篇

Apple.com 导航栏的设计细节。

苹果官网的顶部导航栏是从 2000 年开始才加入的。在 2000 年以前,苹果官网是这样的:

可以发现,那个时候的导航栏还没有把 Apple 的产品罗列进去。这主要是因为当时了解 Apple 不同产品定位的人还比较少,面向大众的硬件产品也主要以 Mac 为主,直接平铺在首页上已经足够了。

伴随着硬件与软件服务的增多,千禧年之际苹果加入了被沿用至今的顶部导航栏,一开始它被分成了两级:

在这一版本的导航栏中,主页面的二级分类囊括了 Apple 划分的产品分类,分别按照「软件 / 硬件」与「产品定位」两方面进行了区分。除了主页面外,「iReview」「iTools」等面向 Mac 的服务也被加入了进来,可以说苹果官网当时的使命是「The website of Mac users, by Mac users, for Mac users」。

另外,导航栏使用了 Aqua 的风格,首次将苹果官网的设计思路与其产品保持了一致性。

伴随着 Mac OS X 的正式发售,2000 年末开始苹果官网的导航栏上出现了「Mac OS X」标签,它也是作为 Mac 的产品而被放上去的。iReview 网站评论服务则在 2001 年 2 月停止了服务,标签被撤下。同年 10 月发布的 iPod 就没有 Mac OS X 这么好的待遇了,导航栏根本就没有为 iPod 让步:

此外,这一代的苹果官网还为每个配上了不同的颜色,它们的配色与当时的 iMac G3 是相同的:

2002 年 7 月,Apple 推出了 iCloud 的前身 ——「.Mac」服务,iTools 与 iCards 也被整合进了「Mac」标签内。全新的「Switch」则更加能说明 Apple 对于导航栏内该放什么标签的立场 —— 它是专门用来教大家怎么把数据从 PC 转移至 Mac 的。

除了标签的变化外,这一版的导航栏设计也同 Mac OS X 一样在过渡上出现了变化,Apple 的 logo 也变成了经典的「深空灰色」。当然,最明显的变化应该莫过于 Mac OS X 标签了:

随后的 2003 年应该是苹果官网的导航栏有史以来变化最多的一年了。

2003 年 4 月,iTunes Music Store 开幕。「Switch」标签的位置被替换成了「Music」,Switch 本身则被移至了主页面的二级分类中。

2003 年 9 月,「Music」标签又变成了「iTunes」。这可能是苹果官网首次在搞大新闻前就出现了的小动作 —— 因为一个月后随着 iTunes 4.1 的发布,Windows 用户也可以把他们电脑里的歌曲传输至自己的 iPod 里了,iTunes 在这时变成了 Apple 最主要的产品服务。

一个月后,也就是支援 Windows 的 iTunes 4.1 发布时,「iTunes」标签又改了一次名,这个名字想必大家都比较熟悉,叫「iPod + iTunes」。「iPod + iTunes」与随后的「iPhone + App Store」一样,是 Apple 在数字娱乐领域搭建的及其重要的商业模式。

经历了一年三次的改名后,「iPod + iTunes」终于稳定了下来,并持续了七年左右的时间。苹果官网的导航栏也是如此,随后的几年一直都没有变化,直至 2007 年举世瞩目的 Macworld 大会后。

在 2007 年 1 月的 Macworld 大会上,Apple 发布了 iPhone,苹果官网的导航栏增加了「iPhone」标签。从 2006 年开始的「Get a Mac」系列广告也出现在了主页面的二级分类中。从这时开始,导航栏的使命已经渐渐地开始面向 Apple 的所有产品了。

另外,iPhone 是苹果官网有史以来第一次将产品划分成「概览」「网路」「技术」等多个二级分类来进行介绍,并一直沿用至了今天。

同年 6 月,iPhone 正式发售。苹果官网也进行了一次大改版,导航栏则与 Mac OS X Leopard 一样从 Aqua 改为了金属风格,并且位置往下挪动了一点,二级分类被移除,搜索框也从页面底部移到了导航栏上。

标签方面,「iPhone」被移到了「Mac」与「iPod + iTunes」后,这是按照三款产品的发布时间来排序的,与 Jobs 在 Macworld 上所说的「Three revolutionary products」形成对应。

如果将标签放大的话,你会发现 logo 与文字方面使用了下凹的蚀刻效果,并且字号较之前缩小了一点。另外,当你将光标移至导航栏中的某一标签时,它的颜色也会发生变化。

2010 年 4 月,iPad 推出。按照发布时间,它被放在了 iPhone 后。此时「iPod + iTunes」标签已被拆开,这是因为当时的 iTunes 已不单单是为 iPod 设计的应用程式,人们同样需要它为 iPhone 与 iPad 传输数据。

原来为 Mac 用户提供 App 下载的「Downloads」则被新发布的内建应用程式「Mac App Store」替代。顺便一提,2007 年时「Downloads」中除了 Apple 自己开发的程式外,下载量最大的三款 App 为 OmniPlan、Windows Media Player 与 Google Earth。

2011 年 1 月,苹果官网的导航栏又迎来了一次更新。这次的更新还挺有意思的 —— 首先是导航栏增加了一个动画,当网页加载完毕后,导航栏会突然从屏幕最上方出现并向下掉落到原来的位置;另外,水晶的风格又重新回到了导航栏上,文字内容从黑色变成了白色,高光线也经过了重新处理。

导航栏还针对不同浏览器以及 Retina 进行了优化。使用 Internet Explorer 时,将会加载 GIF 格式;无损的 SVG 格式则会在使用支持「CSS 选择器」的浏览器时加载;除此之外的其他浏览器默认加载 PNG 格式。

此外,右侧的搜索框也加入了动画。当它被激活时,其余的标签都会向左缩进。

这种设计持续了三年多后,2014 年 9 月苹果官网再一次迎来了全新的设计,整个网站都以扁平化的设计得以重新呈现,导航栏也不例外。

首先是导航栏的背景,它的配色与原来比较相似,并且它是半透明的,默认情况下不透明度为 80%,页面也使用了全宽布局。

导航栏上的文字间距会随着网页窗口大小进行微调,当缩小至一定程度时导航栏上的标签将会被放进 Hamburger Menu 内。标签也出现了变化:「iPod」被移到了靠后的位置,全新的「Watch」则被放在了 iPhone 与 iPad 中间。为了进一步利用空间,搜索框在未激活时变成了图形的状态。当光标移至导航栏中的某一标签时,它将会出现一个从白色至浅灰色的渐变动画。

为什么标签会进行重新的整理呢?首先对于 Apple 来说, iPod 已经没有它左边的那些产品来得重要了。越来越多的人使用 iPhone 来代替 iPod 产品,再加上 iPod Classic 的停售与缓慢的更新周期,iPod 不适合排在前面的位置;而 Apple Watch 作为一款搭配 iPhone 使用的新产品,它自然就被放在了 iPhone 后面。

一年后,Apple 推出了 Apple Music 服务,它与「iPod」「iTunes」两个标签合并在了一起,新的标签叫做「Music」。

另外一个变化是 iPad 在没有任何新产品发布的情况下悄悄地从 iPhone 的后面移到了前面,和 Mac 放在了一起,这暗示着 Apple 想搞的另外一个大新闻 —— 将 iPad 打造成一台像电脑一样的设备。五个月后发布的 iPad Pro 便证实了这一观点。

与 iPad Pro 同时发布的还有 Apple TV 4th generation,「TV」标签也被放进了导航栏内。原先最左侧的「Store」也被移除,取而代之的是最右侧的「Shopping Bag」。这么做的原因和苹果官网的逻辑有关:原先要购买 Apple 产品时需要进入 Store 进行挑选购买,但现在无论是产品本身还是配件,都可以在每个产品标签里找到了。

这样的设计一直延续到了今天。

总的来看,苹果官网的导航栏设计不仅与其不同时期的产品设计相对应,而且导航栏内的标签也跟随着产品种类与营销策略不断地进行调整,不仅追求使用新的技术来改善网页显示效果,而且也保证了能够在大多数设备上得以完美展示的兼容性。

未来 Apple 的产品线将会越来越复杂,Apple Car、Apple AR 等设备或许会逐渐步入我们的视线,Apple 将如何规划它们的产品?或许在今后苹果官网的导航栏内,你就能找到答案。