在過去很長一段時間，蘋果都一直以自己流線型、極簡風(fēng)格的工業(yè)設(shè)計聞名全球。而97年喬布斯帶著NeXT團隊榮歸蘋果之后，這家傳奇企業(yè)重獲新生，它的高速發(fā)展的這個階段也和互聯(lián)網(wǎng)快速普及的20年有著高度的重疊。因此，蘋果官方網(wǎng)站正式上線之后，它的設(shè)計風(fēng)格也在過去20年間迎來了巨大變化，你可以在每一次設(shè)計的轉(zhuǎn)型和改變中看到蘋果變革的軌跡。

得益于“互聯(lián)網(wǎng)檔案館”（the?Internet?Archive）所收集的網(wǎng)頁歷史數(shù)據(jù)，我們將首次得以以時間線的方式大致了解一下蘋果官網(wǎng)在這些年來的設(shè)計風(fēng)格變化。

一直走在時代前列線的 IOS 設(shè)計史：《超贊！每個設(shè)計師都應(yīng)該了解的IOS編年史》

也許你也想知道蘋果為何如此不同，這篇文章給你答案：《真相！前蘋果設(shè)計師揭秘關(guān)于蘋果的4個傳說》

需要指出的是，雖然蘋果早在1987年就注冊了Apple.com的域名，但我們只拿到了1997年之后的清晰截屏。正好，讓我們仔細(xì)觀察一下喬布斯回歸之后的蘋果，官方網(wǎng)站是如何變革與進(jìn)化的。以下是具體內(nèi)容：

1997年：變革開始

1997年時的蘋果主頁看起來就和一份彩色報紙一樣。這是令人振奮的一年，喬布斯重回公司，去掉冗余的產(chǎn)品線，Mac OS X開始進(jìn)入醞釀階段。這時候蘋果官網(wǎng)的視覺設(shè)計受限于時代，同時也受到當(dāng)時的Mac OS 8的設(shè)計語言的影響。看看Mac OS 8的設(shè)計，你就明白了：

1998年：“喬納森式”設(shè)計發(fā)軔

1998年時，蘋果對自己的官網(wǎng)進(jìn)行了大幅精簡，并在主頁用大量空間突出了全新iMac的廣告。此時蘋果主打的iMac產(chǎn)品為iMac G3，也就是電影《喬布斯》結(jié)尾處喬納森手稿上的那臺線條流暢，充滿浪漫主義氣息的半透明外殼的一體機。在這張網(wǎng)頁截圖中，我們可以看左下角充滿濃郁90年代風(fēng)格的電腦主機和筆記本，和iMac G3形成鮮明的對比，所以人們將蘋果由此開始的這個階段戲稱為蘋果的“浪漫主義時期”。簡潔與浪漫匯聚于此，我們在這張98年的網(wǎng)頁上看到了喬布斯追求的簡潔與艾維早期設(shè)計中的浪漫與精致。

不同于喬納森之前設(shè)計的Newton系列掌上電腦的90年代工業(yè)風(fēng)，從iMac G3開始，這個英國人開始把他內(nèi)心的另一面呈現(xiàn)在產(chǎn)品上。

1999年：你好，色彩

1999年，蘋果在官網(wǎng)上力推當(dāng)時最新推出的iBook系列筆記本電腦。今天，我們將這款線條柔和色彩活潑的筆記本親切的稱為“貝殼機”，蘋果的臺式機和筆記本產(chǎn)品線全部更新?lián)Q代，在喬布斯和喬納森的主導(dǎo)下，蘋果幾乎全部產(chǎn)品線（高端的Powerbook系列筆記本除外）都開始在工業(yè)設(shè)計上融入多彩的元素，使用晶瑩剔透的高品質(zhì)工程塑料來制作外殼。在99年的這張網(wǎng)頁截圖上，我們可以看到底部中央的AirPort和左側(cè)的高端工作站 Mac Pro G3 也使用了同樣的設(shè)計語言。

而于此同時，Mac OS 9也在同年推出，設(shè)計上延續(xù)了Mac OS 8，但是你可以在用色和字體上看出，這一次的升級在視覺上更加現(xiàn)代了，圖標(biāo)和UI控件的細(xì)節(jié)打磨得更加細(xì)膩了。當(dāng)然，這種改變是離不開硬件風(fēng)格改變的影響的。

但是別忘了，蘋果是出名的講究軟硬件一體化設(shè)計的公司，Mac OS 9的溫吞升級的背后正醞釀著一次革命性的改變。OS X 要來了。

2000年：Aqua與擬物化元年

2000年時，蘋果在自己的官網(wǎng)主頁設(shè)計了一個頂部導(dǎo)航欄，而這一設(shè)計一直沿用到了現(xiàn)在。更令人難忘的是頂部導(dǎo)航欄所制作出的水滴質(zhì)感，也許我們今天看并沒有太深的感受，但是這種名為Aqua（拉丁語，水）的設(shè)計風(fēng)格，是整個UI設(shè)計發(fā)展史上的一個重要里程碑。這一切要從Mac OS X的開發(fā)說起。

Mac OS X DP2，也就是第二個開發(fā)預(yù)覽版。

Mac OS X的開發(fā)是艱難的。喬布斯帶來的NeXT公司的操作系統(tǒng)團隊和蘋果本身的開發(fā)者加在一起有150人之多，他們在喬布斯回歸之后就走到了一起，傾盡全力，結(jié)合NeXT的NextStep操作系統(tǒng)的內(nèi)核和Mac OS的設(shè)計，打造下一代的系統(tǒng)。在喬布斯的暴君式的咆哮和無數(shù)次的打回重做之后，開發(fā)團隊終于在Mac OS X第三個開發(fā)版上作出了革命性的設(shè)計：

Mac OS X DP3

魯賓斯坦曾回憶，Aqua的設(shè)計語言是從窗口右側(cè)的滾動條開始的。在喬布斯否定50多次之后，湛藍(lán)色水滴式的滾動條第一次讓他難得地點頭稱贊。從這一刻開始，蘋果在UI設(shè)計上開始從打磨水滴質(zhì)感開始“抄現(xiàn)實”，擬物化設(shè)計之路也由此展開。沒有設(shè)計師不知道“擬物化”，但是千萬別忘了，這一切是從一個滾動條開始的。（不可否認(rèn)，廣泛意義上的擬物化在幾千年前就有了，但是旗幟鮮明地將其以設(shè)計語言的形式呈現(xiàn)在UI設(shè)計上，并影響全世界的，是Aqua，是Skeuomorph）

2001年：繼往開來，Apple Store與 Mac OS X

2001年對于蘋果而言是重要的。隨著Mac OS X的正式發(fā)布，標(biāo)志性的Aqua設(shè)計風(fēng)格也影響了蘋果的Logo設(shè)計，蘋果終于在自己的官網(wǎng)的去掉了以往一直使用的巨型“APPLE”文字，并將左上角的紅色蘋果Logo更換成了藍(lán)色。喬布斯治下的皮克斯通過幾部動畫電影獲得了巨大的成功，影響世界的蘋果商店也開始開門迎客，Max OS X開始正式發(fā)布，這三件事情對于喬布斯和蘋果而言，都意味著光明的未來。最重要的是，4年漫長的馬拉松之后，蘋果電腦的軟件和硬件在設(shè)計上在這一刻融合于一體。

隨著G4世代的產(chǎn)品發(fā)布，蘋果的“浪漫主義時期”走向終點，更富于現(xiàn)代主義特色的白色開始替代彩色，蘋果悄然進(jìn)化。

2002年：劍指傳統(tǒng)音樂產(chǎn)業(yè)的iPod與iTunes

而在2002年，蘋果的產(chǎn)品設(shè)計開始大規(guī)模地使用白色和銀色。當(dāng)年主推的iPod就是前白后銀的工業(yè)設(shè)計，它于2001年10月23日正式發(fā)布。這也就難怪，官網(wǎng)首頁上的藍(lán)色蘋果Logo被更換成了銀色。網(wǎng)頁左下角的iMac G4就是著名的“臺燈”，工業(yè)設(shè)計的靈感來源于喬布斯家后院的向日葵，屏幕后背的金屬軸定位感極強，柔和的曲線和金屬臂結(jié)合在一起，現(xiàn)代感極強。無獨有偶，初代iPod也將轉(zhuǎn)輪設(shè)計成機械結(jié)構(gòu)，初代的iTunes的UI也使用了金屬拉絲的紋理來點綴。蘋果的“現(xiàn)代主義”設(shè)計，在2002年基本成型。

iPod + iTunes 讓數(shù)字音樂給傳統(tǒng)音樂產(chǎn)業(yè)送終，而2002年的這個網(wǎng)頁又何嘗不是開啟戰(zhàn)役的沖鋒號呢？

2005年：Shuffle，Nano，數(shù)字音樂組合技

在此之后，蘋果一直在官網(wǎng)最顯著的位置以巨大的空間著重推薦自己的最新產(chǎn)品。圖中便是2005年時候的蘋果官網(wǎng)截圖，這正式當(dāng)時主推的產(chǎn)品iPod?Nano。在這一年，蘋果在年初發(fā)布了低端的iPod Shuffle，年底則發(fā)布了中端的iPod Nano，配合經(jīng)典的iPod，正式布局完成。

這個階段，蘋果在網(wǎng)頁設(shè)計上不再拘泥于白色背景+產(chǎn)品圖的經(jīng)典搭配，更具有包容性。難道不是么？不信看網(wǎng)頁底部，那款Motorola E1就是蘋果與Moto合作的產(chǎn)物——“iTunes手機”，在蘋果的開拓史上，也算是獨一無二了。

2007年：重新定義手機的iPhone

在2007年中期，蘋果再次對官網(wǎng)的頂部導(dǎo)航欄進(jìn)行了重新設(shè)計，而當(dāng)年的主角毫無疑問是橫空出世的iPhone。我們都很清楚這款產(chǎn)品的意義有多重大。極具代表性的圓角矩形圖標(biāo)，將擬物化設(shè)計推向整個世界。這個內(nèi)部代號為“Purple”的智能手機催生了Android，也為摩托羅拉、Nokia和黑莓的沒落埋下了伏筆。

iPhone有多經(jīng)典？看看iPhone 6和iPhone 6 Plus 你就明白。

2010年：穩(wěn)定積累

蘋果的這一官網(wǎng)設(shè)計方案此后一直沒有迎來巨大變化，圖中便是2010年蘋果推出iPad時的官網(wǎng)截圖。穩(wěn)定積累又何嘗不是好選擇呢？須知只有量變，才能引起質(zhì)變。2010年蘋果發(fā)布了傳奇的iPhone 4，并且用iPad向世界證明這家公司能設(shè)計出真正易用的平板電腦。

2011年：一個時代的結(jié)束

2011年時，蘋果對頂部導(dǎo)航欄采用了更加深色的基調(diào)，搜索欄也變得更加簡單。這是在這一年，喬布斯也走到了人生的盡頭。iPhone的工業(yè)設(shè)計和下一代的iOS設(shè)計也開始在蘋果內(nèi)部立項研發(fā)。一個時代結(jié)束了，改變也即將發(fā)生。

2014年：不止于平，豈止于大！

圖中便是蘋果如今官網(wǎng)主頁的設(shè)計方案。iOS7發(fā)布之后，“蘋果式扁平”也運用到了網(wǎng)頁設(shè)計上。單頁設(shè)計、動態(tài)加載、視差滾動等各種新技術(shù)都能蘋果官網(wǎng)上找得到。所以，“蘋果式”的扁平化設(shè)計，并不是看起來這么簡單。iPhone 6 Plus 和 Apple Watch 一大一小也像全世界宣告蘋果在設(shè)計上的不拘一格。

一個強迫癥設(shè)計師對蘋果官網(wǎng)的吐槽：《給蘋果中國的公開信！一個設(shè)計師對蘋果官網(wǎng)的微吐槽》

一起來看看那些顛覆乾坤的重設(shè)計案例！

體制內(nèi)人士分享的政府網(wǎng)站重設(shè)計！
《推陳出新！政務(wù)網(wǎng)站的重設(shè)計》

10個值得學(xué)習(xí)的重設(shè)計經(jīng)典案例！
《驚艷！著名網(wǎng)站重新設(shè)計的10個經(jīng)典案例》

社交網(wǎng)站的超級變變變！
《網(wǎng)站七十二變！一組社交網(wǎng)站重設(shè)計頂尖案例欣賞》

作者：@陳子木
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量78萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：