Apple.com 設計細節(jié) — 導航欄篇

時間：2023-05-16 14:06:01 | 來源：網站運營

時間：2023-05-16 14:06:01 來源：網站運營

Apple.com 設計細節(jié) — 導航欄篇：蘋果官網的頂部導航欄是從 2000 年開始才加入的。在 2000 年以前，蘋果官網是這樣的：



可以發(fā)現(xiàn)，那個時候的導航欄還沒有把 Apple 的產品羅列進去。這主要是因為當時了解 Apple 不同產品定位的人還比較少，面向大眾的硬件產品也主要以 Mac 為主，直接平鋪在首頁上已經足夠了。

伴隨著硬件與軟件服務的增多，千禧年之際蘋果加入了被沿用至今的頂部導航欄，一開始它被分成了兩級：


在這一版本的導航欄中，主頁面的二級分類囊括了 Apple 劃分的產品分類，分別按照「軟件 / 硬件」與「產品定位」兩方面進行了區(qū)分。除了主頁面外，「iReview」「iTools」等面向 Mac 的服務也被加入了進來，可以說蘋果官網當時的使命是「The website of Mac users, by Mac users, for Mac users」。

另外，導航欄使用了 Aqua 的風格，首次將蘋果官網的設計思路與其產品保持了一致性。

伴隨著 Mac OS X 的正式發(fā)售，2000 年末開始蘋果官網的導航欄上出現(xiàn)了「Mac OS X」標簽，它也是作為 Mac 的產品而被放上去的。iReview 網站評論服務則在 2001 年 2 月停止了服務，標簽被撤下。同年 10 月發(fā)布的 iPod 就沒有 Mac OS X 這么好的待遇了，導航欄根本就沒有為 iPod 讓步：

此外，這一代的蘋果官網還為每個配上了不同的顏色，它們的配色與當時的 iMac G3 是相同的：

2002 年 7 月，Apple 推出了 iCloud 的前身 ——「.Mac」服務，iTools 與 iCards 也被整合進了「Mac」標簽內。全新的「Switch」則更加能說明 Apple 對于導航欄內該放什么標簽的立場 —— 它是專門用來教大家怎么把數(shù)據從 PC 轉移至 Mac 的。

除了標簽的變化外，這一版的導航欄設計也同 Mac OS X 一樣在過渡上出現(xiàn)了變化，Apple 的 logo 也變成了經典的「深空灰色」。當然，最明顯的變化應該莫過于 Mac OS X 標簽了：

隨后的 2003 年應該是蘋果官網的導航欄有史以來變化最多的一年了。

2003 年 4 月，iTunes Music Store 開幕?！窼witch」標簽的位置被替換成了「Music」，Switch 本身則被移至了主頁面的二級分類中。

2003 年 9 月，「Music」標簽又變成了「iTunes」。這可能是蘋果官網首次在搞大新聞前就出現(xiàn)了的小動作 —— 因為一個月后隨著 iTunes 4.1 的發(fā)布，Windows 用戶也可以把他們電腦里的歌曲傳輸至自己的 iPod 里了，iTunes 在這時變成了 Apple 最主要的產品服務。

一個月后，也就是支援 Windows 的 iTunes 4.1 發(fā)布時，「iTunes」標簽又改了一次名，這個名字想必大家都比較熟悉，叫「iPod + iTunes」?！竔Pod + iTunes」與隨后的「iPhone + App Store」一樣，是 Apple 在數(shù)字娛樂領域搭建的及其重要的商業(yè)模式。

經歷了一年三次的改名后，「iPod + iTunes」終于穩(wěn)定了下來，并持續(xù)了七年左右的時間。蘋果官網的導航欄也是如此，隨后的幾年一直都沒有變化，直至 2007 年舉世矚目的 Macworld 大會后。

在 2007 年 1 月的 Macworld 大會上，Apple 發(fā)布了 iPhone，蘋果官網的導航欄增加了「iPhone」標簽。從 2006 年開始的「Get a Mac」系列廣告也出現(xiàn)在了主頁面的二級分類中。從這時開始，導航欄的使命已經漸漸地開始面向 Apple 的所有產品了。

另外，iPhone 是蘋果官網有史以來第一次將產品劃分成「概覽」「網路」「技術」等多個二級分類來進行介紹，并一直沿用至了今天。

同年 6 月，iPhone 正式發(fā)售。蘋果官網也進行了一次大改版，導航欄則與 Mac OS X Leopard 一樣從 Aqua 改為了金屬風格，并且位置往下挪動了一點，二級分類被移除，搜索框也從頁面底部移到了導航欄上。


標簽方面，「iPhone」被移到了「Mac」與「iPod + iTunes」后，這是按照三款產品的發(fā)布時間來排序的，與 Jobs 在 Macworld 上所說的「Three revolutionary products」形成對應。

如果將標簽放大的話，你會發(fā)現(xiàn) logo 與文字方面使用了下凹的蝕刻效果，并且字號較之前縮小了一點。另外，當你將光標移至導航欄中的某一標簽時，它的顏色也會發(fā)生變化。

2010 年 4 月，iPad 推出。按照發(fā)布時間，它被放在了 iPhone 后。此時「iPod + iTunes」標簽已被拆開，這是因為當時的 iTunes 已不單單是為 iPod 設計的應用程式，人們同樣需要它為 iPhone 與 iPad 傳輸數(shù)據。


原來為 Mac 用戶提供 App 下載的「Downloads」則被新發(fā)布的內建應用程式「Mac App Store」替代。順便一提，2007 年時「Downloads」中除了 Apple 自己開發(fā)的程式外，下載量最大的三款 App 為 OmniPlan、Windows Media Player 與 Google Earth。

2011 年 1 月，蘋果官網的導航欄又迎來了一次更新。這次的更新還挺有意思的 —— 首先是導航欄增加了一個動畫，當網頁加載完畢后，導航欄會突然從屏幕最上方出現(xiàn)并向下掉落到原來的位置；另外，水晶的風格又重新回到了導航欄上，文字內容從黑色變成了白色，高光線也經過了重新處理。

導航欄還針對不同瀏覽器以及 Retina 進行了優(yōu)化。使用 Internet Explorer 時，將會加載 GIF 格式；無損的 SVG 格式則會在使用支持「CSS 選擇器」的瀏覽器時加載；除此之外的其他瀏覽器默認加載 PNG 格式。

此外，右側的搜索框也加入了動畫。當它被激活時，其余的標簽都會向左縮進。

這種設計持續(xù)了三年多后，2014 年 9 月蘋果官網再一次迎來了全新的設計，整個網站都以扁平化的設計得以重新呈現(xiàn)，導航欄也不例外。

首先是導航欄的背景，它的配色與原來比較相似，并且它是半透明的，默認情況下不透明度為 80%，頁面也使用了全寬布局。


導航欄上的文字間距會隨著網頁窗口大小進行微調，當縮小至一定程度時導航欄上的標簽將會被放進 Hamburger Menu 內。標簽也出現(xiàn)了變化：「iPod」被移到了靠后的位置，全新的「Watch」則被放在了 iPhone 與 iPad 中間。為了進一步利用空間，搜索框在未激活時變成了圖形的狀態(tài)。當光標移至導航欄中的某一標簽時，它將會出現(xiàn)一個從白色至淺灰色的漸變動畫。


為什么標簽會進行重新的整理呢？首先對于 Apple 來說， iPod 已經沒有它左邊的那些產品來得重要了。越來越多的人使用 iPhone 來代替 iPod 產品，再加上 iPod Classic 的停售與緩慢的更新周期，iPod 不適合排在前面的位置；而 Apple Watch 作為一款搭配 iPhone 使用的新產品，它自然就被放在了 iPhone 后面。

一年后，Apple 推出了 Apple Music 服務，它與「iPod」「iTunes」兩個標簽合并在了一起，新的標簽叫做「Music」。

另外一個變化是 iPad 在沒有任何新產品發(fā)布的情況下悄悄地從 iPhone 的后面移到了前面，和 Mac 放在了一起，這暗示著 Apple 想搞的另外一個大新聞 —— 將 iPad 打造成一臺像電腦一樣的設備。五個月后發(fā)布的 iPad Pro 便證實了這一觀點。

與 iPad Pro 同時發(fā)布的還有 Apple TV 4th generation，「TV」標簽也被放進了導航欄內。原先最左側的「Store」也被移除，取而代之的是最右側的「Shopping Bag」。這么做的原因和蘋果官網的邏輯有關：原先要購買 Apple 產品時需要進入 Store 進行挑選購買，但現(xiàn)在無論是產品本身還是配件，都可以在每個產品標簽里找到了。


這樣的設計一直延續(xù)到了今天。

總的來看，蘋果官網的導航欄設計不僅與其不同時期的產品設計相對應，而且導航欄內的標簽也跟隨著產品種類與營銷策略不斷地進行調整，不僅追求使用新的技術來改善網頁顯示效果，而且也保證了能夠在大多數(shù)設備上得以完美展示的兼容性。

未來 Apple 的產品線將會越來越復雜，Apple Car、Apple AR 等設備或許會逐漸步入我們的視線，Apple 將如何規(guī)劃它們的產品？或許在今后蘋果官網的導航欄內，你就能找到答案。