Apple官網的網頁(yè)設計哲學(xué)

一、沉浸與交互式體(tǐ)驗

每當有(yǒu)新(xīn)産(chǎn)品發布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發布的 iPad Pro 也一樣。

這背後是 Apple 基于 webGL 技(jì )術，創造的一種沉浸與交互式産(chǎn)品體(tǐ)驗。

1. 連續性

我們在産(chǎn)品介紹頁(yè)可(kě)以看到，蘋果使用(yòng)了大量的滾動 scroll 來體(tǐ)現連續性。

一方面，滾動作(zuò)為(wèi)大多(duō)數 Web 用(yòng)戶zui自然的操作(zuò)，學(xué)習成本極低。

另一方面，在冗長(cháng)的頁(yè)面下，滾動能(néng)讓産(chǎn)品特性保持更自然的轉場銜接。

2. 趣味性

另外，采用(yòng)了大量的動畫式轉換（animated transition），即操作(zuò)時展示的動态效果，以此來增加趣味性。

伴随着豐富的、若隐顯現的章節文(wén)案，就像電(diàn)影的旁白一樣，娓娓道來。

通過滾動的方式增加交互性，這是明智之舉。試想一下，如果隻放置已渲染的演示視頻，那麽用(yòng)戶的操作(zuò)會受到限制，隻能(néng)在視頻中(zhōng)前進或後退，毫無樂趣可(kě)言。

二、言之有(yǒu)序

1. 秩序感

說到言之有(yǒu)序，我們看 iPad 的頁(yè)面介紹。四款産(chǎn)品，分(fēn)别是：iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感，可(kě)謂妙不可(kě)言。

iPad Pro 的拍攝角度接近于正側面。iPad Air 是四分(fēn)之三側面。iPad 是正面。iPad mini 是俯視。

如此一來，即顯得有(yǒu)序，也不會導緻視覺疲勞。

2. 設計語言

其次，官網與 iOS 保持協同的設計語言，給用(yòng)戶呈現了一緻的感官體(tǐ)驗。

從 iOS 11 開始，蘋果就采用(yòng)了 Large Title 大标題的字體(tǐ)風格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中(zhōng)的識别力。

HomePod

另外，高斯模糊的标題欄背景、産(chǎn)品的投影等設計語言也保持系統一貫的風格。我們可(kě)以很(hěn)清晰的看到 Web 設計的同步轉變。

三、層次

1. 視差

第三是視差帶來的層次感。

蘋果奉行包豪斯的無裝(zhuāng)飾和極簡的理(lǐ)念。當然，它不是那種附庸的美觀及外表的光鮮，而是将複雜難懂的技(jì )術以簡潔的形式傳達給用(yòng)戶。

在信息層次方面，Apple 的編排設計由淺入深，猶如抽絲剝繭。很(hěn)好的利用(yòng)了視差滾動，傳達圖片與文(wén)字之間「層」的概念。這種深度感可(kě)以增加用(yòng)戶的理(lǐ)解和樂趣。

2. 視覺張力

不僅如此，樣式上富有(yǒu)視覺張力。或擴張、或收縮、或吸引、或排斥之感覺，呈現刺激與震撼。舉兩個例子：

擴張力：整個畫面以 A13芯片 為(wèi)視覺中(zhōng)心點，元素和布局圍繞這個視覺中(zhōng)心點向外擴張。采用(yòng)發散式的視覺引導，視覺張力就出現了，讓人感覺巍峨壯觀。

排斥力：通過元素的大小(xiǎo)對比，可(kě)以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構圖、美感觸動。

四、高級感

再聊聊蘋果的高級感是怎麽來的？

1. 視覺降噪

我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有(yǒu)一種冷靜且克制的高級感。

回過頭來看蘋果官網的大部分(fēn)頁(yè)面，除了産(chǎn)品界面色彩 和 按鈕藍 之外，其他(tā)的文(wén)字、背景、控件一律采用(yòng)黑白灰色系，以此營造高級感。

甚至是 iPhone 11 Pro 新(xīn)出的暗夜綠，也是高級灰中(zhōng)加了一點點綠而已。

換言之，減少使用(yòng)顔色的數量，降低色彩的飽和度都能(néng)削減色彩對人的情緒，起到提升産(chǎn)品高級感的效果。

除此之外，恰當的留白可(kě)以更加突出産(chǎn)品内容，讓重要的信息更準确的傳達。并且能(néng)營造出廣闊的空間感，讓畫面得到延伸，呈現一種意境美。

所以我們做設計時應當多(duō)做減法，避免無意義的視覺元素堆砌，反而能(néng)讓你的設計更有(yǒu)高級的氣質(zhì)。

這又(yòu)印證了現代主義建築大師密斯·凡德(dé)羅的那句話：Less Is More。

2. 配圖

當然，隻有(yǒu)留白是不夠的。既然是做宣傳，那麽一份高分(fēn)辨率、精(jīng)緻的配圖就顯得尤為(wèi)重要。

蘋果官網大部分(fēn)的産(chǎn)品都是采用(yòng)實拍+後期修圖，而非渲染圖。目的就是為(wèi)了反映真實産(chǎn)品的質(zhì)感、以及材質(zhì)光影效果，這一點能(néng)看到蘋果對于品質(zhì)的極緻追求。

不僅如此，蘋果産(chǎn)品聖經《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有(yǒu)興趣的同學(xué)可(kě)以看下面這個幕後制作(zuò)視頻，相當硬核。

3. 蘋果式文(wén)案

做過英文(wén) Web 的設計師都知道，英文(wén)往往比中(zhōng)文(wén)更好設計，相同的布局英文(wén)出來的效果也更好看。

這不是崇洋媚外，心理(lǐ)學(xué)有(yǒu)個詞叫做「母語羞澀」。簡單來說就是，中(zhōng)文(wén)對于我們來說，太常見了會讓人産(chǎn)生一種廉價感（實際上是羞澀感）的心理(lǐ)感受。

老外也一樣，你可(kě)以看到美國(guó)企業：蘋果、麥當勞、星巴克都是使用(yòng)圖形 Logo，而日本企業不用(yòng)母語，而是用(yòng)英文(wén)，比如 SONY、TOYOTA、Canon。

回到蘋果官網，我們看到一部分(fēn)文(wén)案是英文(wén)産(chǎn)品名(míng)稱，這個不會感覺羞澀。

那中(zhōng)文(wén)部分(fēn)怎麽辦(bàn)呢(ne)？比較有(yǒu)意思的是，Apple 的本土化團隊用(yòng)了完全不對仗但押韻、奇怪的排比、雙關、重複等修辭手法。雖然語感很(hěn)差，但基本上能(néng)明白字面意思。

其實這樣做的目的就是為(wèi)了創造一種陌生感、一種獨特的語言風格，來凸品牌氣質(zhì)。舉幾個例子：

重複：比如說 iPad Pro「你的下一台電(diàn)腦，何必是電(diàn)腦。」

雙關：比如說 AppleWatch 的「它會時時關心你的心。」

排比：比如說 iMac的「從極速，到神速，任你提速。」

押韻：比如說 配件 的「可(kě)重複充電(diàn)，又(yòu)可(kě)圈可(kě)點。」

對比：比如說 iPad mini 的「身量小(xiǎo)，能(néng)量大。」

4. 儀式感

zui後一點。生活要有(yǒu)儀式感，蘋果官網也有(yǒu)儀式感。

/wangzhansheji/3338.html Apple官網的網頁(yè)設計哲學(xué)