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

时间：2023-05-16 14:06:01 | 来源：网站运营

时间：2023-05-16 14:06:01 来源：网站运营

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 将如何规划它们的产品？或许在今后苹果官网的导航栏内，你就能找到答案。