2014-10-27 藍(lán)藍(lán)設(shè)計(jì)的小編
在過(guò)去很長(zhǎng)一段時(shí)間，蘋(píng)果都一直以自己流線型、極簡(jiǎn)風(fēng)格的工業(yè)設(shè)計(jì)聞名全球。而97年喬布斯帶著NeXT團(tuán)隊(duì)榮歸蘋(píng)果之后，這家傳奇企業(yè)重獲新生，它的高速發(fā)展的這個(gè)階段也和互聯(lián)網(wǎng)快速普及的20年有著高度的重疊。因此，蘋(píng)果官方網(wǎng)站正式上線之后，它的設(shè)計(jì)風(fēng)格也在過(guò)去20年間迎來(lái)了巨大變化，你可以在每一次設(shè)計(jì)的轉(zhuǎn)型和改變中看到蘋(píng)果變革的軌跡。
得益于“互聯(lián)網(wǎng)檔案館”（the Internet Archive）所收集的網(wǎng)頁(yè)歷史數(shù)據(jù)，我們將首次得以以時(shí)間線的方式大致了解一下蘋(píng)果官網(wǎng)在這些年來(lái)的設(shè)計(jì)風(fēng)格變化。
需要指出的是，雖然蘋(píng)果早在1987年就注冊(cè)了Apple.com的域名，但我們只拿到了1997年之后的清晰截屏。正好，讓我們仔細(xì)觀察一下喬布斯回歸之后的蘋(píng)果，官方網(wǎng)站是如何變革與進(jìn)化的。
1997年時(shí)的蘋(píng)果主頁(yè)看起來(lái)就和一份彩色報(bào)紙一樣。這是令人振奮的一年，喬布斯重回公司，去掉冗余的產(chǎn)品線，Mac OS X開(kāi)始進(jìn)入醞釀階段。這時(shí)候蘋(píng)果官網(wǎng)的視覺(jué)設(shè)計(jì)受限于時(shí)代，同時(shí)也受到當(dāng)時(shí)的Mac OS 8的設(shè)計(jì)語(yǔ)言的影響。看看Mac OS 8的設(shè)計(jì)，你就明白了：
1998年時(shí)，蘋(píng)果對(duì)自己的官網(wǎng)進(jìn)行了大幅精簡(jiǎn)，并在主頁(yè)用大量空間突出了全新iMac的廣告。此時(shí)蘋(píng)果主打的iMac產(chǎn)品為iMac G3，也就是電影《喬布斯》結(jié)尾處喬納森手稿上的那臺(tái)線條流暢，充滿浪漫主義氣息的半透明外殼的一體機(jī)。在這張網(wǎng)頁(yè)截圖中，我們可以看左下角充滿濃郁90年代風(fēng)格的電腦主機(jī)和筆記本，和iMac G3形成鮮明的對(duì)比，所以人們將蘋(píng)果由此開(kāi)始的這個(gè)階段戲稱(chēng)為蘋(píng)果的“浪漫主義時(shí)期”。簡(jiǎn)潔與浪漫匯聚于此，我們?cè)谶@張98年的網(wǎng)頁(yè)上看到了喬布斯追求的簡(jiǎn)潔與艾維早期設(shè)計(jì)中的浪漫與精致。
不同于喬納森之前設(shè)計(jì)的Newton系列掌上電腦的90年代工業(yè)風(fēng)，從iMac G3開(kāi)始，這個(gè)英國(guó)人開(kāi)始把他內(nèi)心的另一面呈現(xiàn)在產(chǎn)品上。
1999年，蘋(píng)果在官網(wǎng)上力推當(dāng)時(shí)推出的iBook系列筆記本電腦。今天，我們將這款線條柔和色彩活潑的筆記本親切的稱(chēng)為“貝殼機(jī)”，蘋(píng)果的臺(tái)式機(jī)和筆記本產(chǎn)品線全部更新?lián)Q代，在喬布斯和喬納森的主導(dǎo)下，蘋(píng)果幾乎全部產(chǎn)品線（高端的Powerbook系列筆記本除外）都開(kāi)始在工業(yè)設(shè)計(jì)上融入多彩的元素，使用晶瑩剔透的高品質(zhì)工程塑料來(lái)制作外殼。在99年的這張網(wǎng)頁(yè)截圖上，我們可以看到底部中央的AirPort和左側(cè)的高端工作站 Mac Pro G3 也使用了同樣的設(shè)計(jì)語(yǔ)言。
而于此同時(shí)，Mac OS 9也在同年推出，設(shè)計(jì)上延續(xù)了Mac OS 8，但是你可以在用色和字體上看出，這一次的升級(jí)在視覺(jué)上更加現(xiàn)代了，圖標(biāo)和UI控件的細(xì)節(jié)打磨得更加細(xì)膩了。當(dāng)然，這種改變是離不開(kāi)硬件風(fēng)格改變的影響的。
但是別忘了，蘋(píng)果是出名的講究軟硬件一體化設(shè)計(jì)的公司，Mac OS 9的溫吞升級(jí)的背后正醞釀著一次革命性的改變。OS X 要來(lái)了。
2000年時(shí)，蘋(píng)果在自己的官網(wǎng)主頁(yè)設(shè)計(jì)了一個(gè)頂部導(dǎo)航欄，而這一設(shè)計(jì)一直沿用到了現(xiàn)在。更令人難忘的是頂部導(dǎo)航欄所制作出的水滴質(zhì)感，也許我們今天看并沒(méi)有太深的感受，但是這種名為Aqua（拉丁語(yǔ)，水）的設(shè)計(jì)風(fēng)格，是整個(gè)UI設(shè)計(jì)發(fā)展史上的一個(gè)重要里程碑。這一切要從Mac OS X的開(kāi)發(fā)說(shuō)起。
Mac OS X DP2，也就是第二個(gè)開(kāi)發(fā)預(yù)覽版。
Mac OS X的開(kāi)發(fā)是艱難的。喬布斯帶來(lái)的NeXT公司的操作系統(tǒng)團(tuán)隊(duì)和蘋(píng)果本身的開(kāi)發(fā)者加在一起有150人之多，他們?cè)趩滩妓够貧w之后就走到了一起，傾盡全力，結(jié)合NeXT的NextStep操作系統(tǒng)的內(nèi)核和Mac OS的設(shè)計(jì)，打造下一代的系統(tǒng)。在喬布斯的暴君式的咆哮和無(wú)數(shù)次的打回重做之后，開(kāi)發(fā)團(tuán)隊(duì)終于在Mac OS X第三個(gè)開(kāi)發(fā)版上作出了革命性的設(shè)計(jì)：
Mac OS X DP3
魯賓斯坦曾回憶，Aqua的設(shè)計(jì)語(yǔ)言是從窗口右側(cè)的滾動(dòng)條開(kāi)始的。在喬布斯否定50多次之后，湛藍(lán)色水滴式的滾動(dòng)條第一次讓他難得地點(diǎn)頭稱(chēng)贊。從這一刻開(kāi)始，蘋(píng)果在UI設(shè)計(jì)上開(kāi)始從打磨水滴質(zhì)感開(kāi)始“抄現(xiàn)實(shí)”，擬物化設(shè)計(jì)之路也由此展開(kāi)。沒(méi)有設(shè)計(jì)師不知道“擬物化”，但是千萬(wàn)別忘了，這一切是從一個(gè)滾動(dòng)條開(kāi)始的。（不可否認(rèn)，廣泛意義上的擬物化在幾千年前就有了，但是旗幟鮮明地將其以設(shè)計(jì)語(yǔ)言的形式呈現(xiàn)在UI設(shè)計(jì)上，并影響全世界的，是Aqua，是Skeuomorph）
2001年對(duì)于蘋(píng)果而言是重要的。隨著Mac OS X的正式發(fā)布，標(biāo)志性的Aqua設(shè)計(jì)風(fēng)格也影響了蘋(píng)果的Logo設(shè)計(jì)，蘋(píng)果終于在自己的官網(wǎng)的去掉了以往一直使用的巨型“APPLE”文字，并將左上角的紅色蘋(píng)果Logo更換成了藍(lán)色。喬布斯治下的皮克斯通過(guò)幾部動(dòng)畫(huà)電影獲得了巨大的成功，影響世界的蘋(píng)果商店也開(kāi)始開(kāi)門(mén)迎客，Max OS X開(kāi)始正式發(fā)布，這三件事情對(duì)于喬布斯和蘋(píng)果而言，都意味著光明的未來(lái)。最重要的是，4年漫長(zhǎng)的馬拉松之后，蘋(píng)果電腦的軟件和硬件在設(shè)計(jì)上在這一刻融合于一體。
隨著G4世代的產(chǎn)品發(fā)布，蘋(píng)果的“浪漫主義時(shí)期”走向終點(diǎn)，更富于現(xiàn)代主義特色的白色開(kāi)始替代彩色，蘋(píng)果悄然進(jìn)化。
而在2002年，蘋(píng)果的產(chǎn)品設(shè)計(jì)開(kāi)始大規(guī)模地使用白色和銀色。當(dāng)年主推的iPod就是前白后銀的工業(yè)設(shè)計(jì)，它于2001年10月23日正式發(fā)布。這也就難怪，官網(wǎng)首頁(yè)上的藍(lán)色蘋(píng)果Logo被更換成了銀色。網(wǎng)頁(yè)左下角的iMac G4就是著名的“臺(tái)燈”，工業(yè)設(shè)計(jì)的靈感來(lái)源于喬布斯家后院的向日葵，屏幕后背的金屬軸定位感極強(qiáng)，柔和的曲線和金屬臂結(jié)合在一起，現(xiàn)代感極強(qiáng)。無(wú)獨(dú)有偶，初代iPod也將轉(zhuǎn)輪設(shè)計(jì)成機(jī)械結(jié)構(gòu)，初代的iTunes的UI也使用了金屬拉絲的紋理來(lái)點(diǎn)綴。蘋(píng)果的“現(xiàn)代主義”設(shè)計(jì)，在2002年基本成型。
Pod + iTunes 讓數(shù)字音樂(lè)給傳統(tǒng)音樂(lè)產(chǎn)業(yè)送終，而2002年的這個(gè)網(wǎng)頁(yè)又何嘗不是開(kāi)啟戰(zhàn)役的沖鋒號(hào)呢？
在此之后，蘋(píng)果一直在官網(wǎng)最顯著的位置以巨大的空間著重推薦自己的產(chǎn)品。圖中便是2005年時(shí)候的蘋(píng)果官網(wǎng)截圖，這正式當(dāng)時(shí)主推的產(chǎn)品iPod Nano。在這一年，蘋(píng)果在年初發(fā)布了低端的iPod Shuffle，年底則發(fā)布了中端的iPod Nano，配合經(jīng)典的iPod，正式布局完成。
這個(gè)階段，蘋(píng)果在網(wǎng)頁(yè)設(shè)計(jì)上不再拘泥于白色背景+產(chǎn)品圖的經(jīng)典搭配，更具有包容性。難道不是么？不信看網(wǎng)頁(yè)底部，那款Motorola E1就是蘋(píng)果與Moto合作的產(chǎn)物——“iTunes手機(jī)”，在蘋(píng)果的開(kāi)拓史上，也算是了。
在2007年中期，蘋(píng)果再次對(duì)官網(wǎng)的頂部導(dǎo)航欄進(jìn)行了重新設(shè)計(jì)，而當(dāng)年的主角毫無(wú)疑問(wèn)是橫空出世的iPhone。我們都很清楚這款產(chǎn)品的意義有多重大。極具代表性的圓角矩形圖標(biāo)，將擬物化設(shè)計(jì)推向整個(gè)世界。這個(gè)內(nèi)部代號(hào)為“Purple”的智能手機(jī)催生了Android，也為摩托羅拉、Nokia和黑莓的沒(méi)落埋下了伏筆。
iPhone有多經(jīng)典？看看iPhone 6和iPhone 6 Plus 你就明白。
2011年時(shí)，蘋(píng)果對(duì)頂部導(dǎo)航欄采用了更加深色的基調(diào)，搜索欄也變得更加簡(jiǎn)單。這是在這一年，喬布斯也走到了人生的盡頭。iPhone的工業(yè)設(shè)計(jì)和下一代的iOS設(shè)計(jì)也開(kāi)始在蘋(píng)果內(nèi)部立項(xiàng)研發(fā)。一個(gè)時(shí)代結(jié)束了，改變也即將發(fā)生。
圖中便是蘋(píng)果如今官網(wǎng)主頁(yè)的設(shè)計(jì)方案。iOS7發(fā)布之后，“蘋(píng)果式扁平”也運(yùn)用到了網(wǎng)頁(yè)設(shè)計(jì)上。單頁(yè)設(shè)計(jì)、動(dòng)態(tài)加載、視差滾動(dòng)等各種新技術(shù)都能蘋(píng)果官網(wǎng)上找得到。所以，“蘋(píng)果式”的扁平化設(shè)計(jì)，并不是看起來(lái)這么簡(jiǎn)單。iPhone 6 Plus 和 Apple Watch 一大一小也像全世界宣告蘋(píng)果在設(shè)計(jì)上的不拘一格。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net