Apple.com 蘋果公司歷年網站首頁設計分析

讓我們看看蘋果公司 apple.com 這 25 年的網站首頁風格變化，以及看它是如何影響設計師和行銷人員思維吧！

你可以從研究一個標誌性品牌的首頁學到什麼？

在現代設計的，沒有哪個品牌比蘋果更有影響力了。不管是通過使用他們的硬體（ MacBook、iPhone、iPad）、還是軟體（iMovie、Keynote）。甚至是他們的對使用者的行銷用語已經影響到每個人（Mac user ; PC user）— Apple 已經現在這個世界產生了巨大的影響，從圖形設計、硬體到網路世界。

本篇讓我們一起回顧蘋果公司在歷史上一些最具影響力的時刻，以及他們的品牌首頁迭代，我們將一起帶你了解 Apple 是如何表達他們的品牌概念，並將網頁設計和開發推向新的高度。

1990 年代的 Apple.com

90年代正是 windows 風靡的年代，你可以看到 90 年代風格的網頁設計大概就是這種概念，而 Apple 的設計在這個時代並沒有特別突出，而這個主頁是 1997 年初的，大約在 Steve Jobs 通過收購 NeXT Computer 回到公司擔任顧問的時候。

如果你還記得 90 年代中後期的網路，這種介面應該看起來很熟悉。這時候的網站喜歡垂直堆疊的menu，而這種設計是非常普遍的。而 1997 年的 Apple 主頁的 hero section 包含三個獨立的 GIF 和一個沿頁面延伸的兩列佈局。這種佈局和美學並沒有持續太久。

讓我們跳到 1999 年吧！

Power Mac 和一個更簡單、hero section 的主頁

這個主頁是 1999 年 10 月在 Steve Jobs 重返 CEO 職位兩年後出現在我們面前。你可以看到這時候的 Apple.com 將網站的內容中至中，讓你可以看到更多焦點。而先前位於左側的 menu 也消失了，內容居中並保持乾淨、簡潔。

Hero sectin 有一個明確的焦點：Power Mac。較小的輔助框將注意力吸引到 Mac 一些其他的功能，甚至還有熱點新聞的出現，而這時期很多的廣告片是需要下載才能觀看的。

2000 年代的 Apple.com

iMac 和標籤式的 menu

上面的截圖是 2000 年 5 月的 apple.com，展示了色彩繽紛、半透明的 iMac，而上一個網站設計的方式仍保留著，像是焦點內容居中、輪播的焦點新聞。

但是頁面頂部有一個新的導航欄。選項卡式 menu （一種模仿文件夾選項卡的導航欄）的出現，而這種設計在 2000 年代初期影響了許多網站設計。雖然選項卡在 2010 年代沒有持續使用，但頂部導航位置在網站設計中仍然極為常見，至今仍是 Apple 使用的導航位置。

值得指出的是，在 2010 年代，Apple 主頁上的主圖通常是一張圖，當時會將文案放在到圖片裡面，這種方式現在來看的話對於網站的響應不友好，但當時手機瀏覽網站並非主流，因此這種方式是最適合的方式。

iPod 和設計系統的一致性

當 iPod 於 2001 年 11 月推出時，Apple 對現代設計的影響才真正開始受到關注。色彩逼分的廣告、舞動、文案精簡的廣告詞，讓蘋果在廣告界脫穎而出。而蘋果首頁在這個時代值得注意的事情就是 - 他們的主視覺設計系統是非常明顯的，包括標籤式的menu、新聞都保留著先前的設計風格。

雖然 “熱門新聞”這個板塊一直被保留使用，但到 2006 年被淘汰了。因為人們不需要再透過頭條 banner 來說服使用者蘋果產品有多棒，這時候的蘋果已經在設計和科技領域中確立了自己的地位。

iPhone、OS X Leopard 和新的導航風格

當 iPhone 於 2007 年初在全球開發者大會 (WWDC) 上推出時，Apple.com 使用深色背景發佈，而這種戲劇性的色彩變化迫使大家將注意力集中在螢幕中央的 iPhone 上。

但能注意到此時白色 menu 與頁面的其他部分相比是稍微突出，而到 2007 年 6 月 Mac OS X Leopard 出現時，menu 變成灰色，圖標更加擬物化。這開啟了 Apple 設計史上的一個偉大時代，Safari 的圖標變成了一個逼真的指南針，或者 iMovie 看起來像一個相機平板。

在 Hero section 的 MacBook Air 和 CTA

2008 年初，Apple 推出了 Macbook Air，以及我們最喜歡的他們製作的廣告之一。該首頁製作的方式也成為 Apple 長期以來一直使用的做法 — 朗朗上口的文案 (CTA)。而這些連結也會指向觀看廣告或跟隨導覽，有時點擊 hero section 中的實際圖像會將你完全帶到另一個頁面 — 例如產品介紹頁面。

這是一種在從有限的螢幕閱覽中獲得更好的點擊策略，而 Apple 迄今為止做得非常好。因為最主要的廣告頁面並不會讓人感到資訊擁擠，只呈現最重點的資訊，而網站訪問者也有其他選項可以查看更多。

2010 年代的 Apple.com

iPad的戲劇性入口

2010 年 4 月發布的 iPad 對公司來說是一個戲劇性的時刻——它鞏固了 Apple 在平板電腦新產品類別。而 Apple的 Hero section 不局限於特定的尺寸，他們可以點選其他角度來展示 iPad，向訪問者展示它明顯比那時候的 iPhone 大。

Steve Jobs 逝世

Steve Jobs 於 2011 年 10 月去世時，許多公司和個人都表達了敬意 - 但沒有一個像蘋果公司那樣簡單而有影響力。這張標誌性的照片是頁面上唯一的圖片，鏈接到紀念他的網站，其中包含來自受他和他的作品啟發的人們的訊息。

扁平化設計進入 iOS 7

隨著 2013 年 9 月 iOS 7 的到來，Apple 在其主頁上採取了幾個新的方向。首先：更扁平化的設計，更簡約，對擬物化略有抽象。平面設計明顯是二維的，並且往往具有吸引你注意力的鮮豔色彩。這種設計轉變是短命的新擬態趨勢的先驅，它本質上是擬物化和扁平化設計的混合體。

其次，Helvetica 的排版發生了變化，僅僅三年後，在大家抱怨 Helvetica 字體薄之後，它被 Apple 自己的 San Francisco 字體所取代。

最後，整個頁面是一個輪播，透過幾次整頁體驗，讓每個產品都有機會成為中心舞台。而這不是 Apple 在主頁上經常使用的佈局，所以很快地就消失在他們家的官網上，但有時他們仍然使用輪播作為較小的組件。你也可以觀察到到目前為止很多的企業、品牌還是使用 hero section 是一個影片輪播的設計。

到 2014 年，Apple.com 上的 menu 已經完全扁平化。我們還可以看到他們利用透明度調整 menu ，所以使用者仍然可以看到它背後的豐富圖像。而 heron section 下方的板塊稍微放大，而這種設計板塊的效果讓人感到相對優雅。

iPhone X 改變遊戲規則

當 iPhone X 在 2017 年 11 月進入手機競技場時，蘋果嘗試了一些非常不同的東西。hero section 下面三四格的圖案消失了！整個頁面完全用於 iPhone X 的產品攝影，主角的鏡頭、一個標題、一個副標題和幾個鏈接。

該頁面被拉長並包含突出顯示不同 iPhone 功能的框。將鼠標懸停在這些框上會顯示功能名稱，並且這些框用作產品概述頁面上特定部分的跳轉鏈接。頁面底部斜邊的鏡頭實際上是一個影片，在滑鼠 hover 時會播放或允許點擊以觀看完整的影片。

2020 年代的 Apple.com

烏克蘭戰爭

今天，Apple.com 主頁的導航功能充滿了 Apple 最受歡迎的產品—從手機和電腦到 Apple Watch 和 AirPods。這些 hero section 也經常反映在電視和 Apple 商店中運行的活動—比如這個以返校活動為特色的活動。

2022 年 3 月，他們開始在導航菜單下方顯示橫幅，要求人們向聯合國兒童基金會捐款，以支持受烏克蘭戰爭影響的家庭。這是正確的，因為首席執行官 Tim Cook 也鼓勵公司的員工捐款。

iPhone 14

當 iPhone 14 於 2022 年 9 月發佈時，一款帶有閃亮邊緣的深紫色設備佔據了蘋果主頁的首屏部分。iPhone 14 頁面的 “Learn more” 頁面將主頁的能量與時尚新設備的近距離圖像、展示功能的流暢動畫以及改變文本顏色或背景顏色的滾動觸發漸變效果相匹配，整個網站就像是一部動畫依樣精彩。

上一次最新款 iPhone 佔據如此多的主頁空間是在 2017 年 iPhone X 的發布。對於三代 iPhone，重點是改進和改進，而不是重大變化。但 iPhone 14 標誌著一個新時代的開始，包括攝影頭改進、高級安全功能和動態島等的重大升級。

Apple 將 Dynamic Island 描述為“真正的 Apple 創新，它是硬體和軟體及介於兩者之間的東西”。這個升級是指使用戶能夠在主屏幕頂部的一個小型固定小部件中查看應用程序、通知、音樂等，這也解釋了為什麼 Apple 將 Dynamic Island 介紹為“iPhone 的新面孔”。