一、沉浸與交互式體驗

每當有新產(chǎn)品發(fā)布時(shí)，我們都會(huì )被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時(shí)間發(fā)布的 iPad Pro 也一樣。

這背后是 Apple 基于 webGL 技術(shù)，創(chuàng )造的一種沉浸與交互式產(chǎn)品體驗。

1. 連續性

我們在產(chǎn)品介紹頁(yè)可以看到，蘋(píng)果使用了大量的滾動(dòng) scroll 來(lái)體現連續性。

一方面，滾動(dòng)作為大多數 Web 用戶(hù)zui自然的操作，學(xué)習成本極低。

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

2. 趣味性

另外，采用了大量的動(dòng)畫(huà)式轉換（animated transition），即操作時(shí)展示的動(dòng)態(tài)效果，以此來(lái)增加趣味性。

伴隨著(zhù)豐富的、若隱顯現的章節文案，就像電影的旁白一樣，娓娓道來(lái)。

通過(guò)滾動(dòng)的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶(hù)的操作會(huì )受到限制，只能在視頻中前進(jìn)或后退，毫無(wú)樂(lè )趣可言。

二、言之有序

1. 秩序感

說(shuō)到言之有序，我們看 iPad 的頁(yè)面介紹。四款產(chǎn)品，分別是：iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感，可謂妙不可言。

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

如此一來(lái)，即顯得有序，也不會(huì )導致視覺(jué)疲勞。

2. 設計語(yǔ)言

其次，官網(wǎng)與 iOS 保持協(xié)同的設計語(yǔ)言，給用戶(hù)呈現了一致的感官體驗。

從 iOS 11 開(kāi)始，蘋(píng)果就采用了 Large Title 大標題的字體風(fēng)格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中的識別力。

HomePod

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

三、層次

1. 視差

第三是視差帶來(lái)的層次感。

蘋(píng)果奉行包豪斯的無(wú)裝飾和極簡(jiǎn)的理念。當然，它不是那種附庸的美觀(guān)及外表的光鮮，而是將復雜難懂的技術(shù)以簡(jiǎn)潔的形式傳達給用戶(hù)。

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

2. 視覺(jué)張力

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

擴張力：整個(gè)畫(huà)面以 A13芯片 為視覺(jué)中心點(diǎn)，元素和布局圍繞這個(gè)視覺(jué)中心點(diǎn)向外擴張。采用發(fā)散式的視覺(jué)引導，視覺(jué)張力就出現了，讓人感覺(jué)巍峨壯觀(guān)。

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

四、高級感

再聊聊蘋(píng)果的高級感是怎么來(lái)的？

1. 視覺(jué)降噪

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

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

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

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

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

所以我們做設計時(shí)應當多做減法，避免無(wú)意義的視覺(jué)元素堆砌，反而能讓你的設計更有高級的氣質(zhì)。

這又印證了現代主義建筑大師密斯·凡德羅的那句話(huà)：Less Is More。

2. 配圖

當然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。

蘋(píng)果官網(wǎng)大部分的產(chǎn)品都是采用實(shí)拍+后期修圖，而非渲染圖。目的就是為了反映真實(shí)產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果，這一點(diǎn)能看到蘋(píng)果對于品質(zhì)的極致追求。

不僅如此，蘋(píng)果產(chǎn)品圣經(jīng)《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個(gè)幕后制作視頻，相當硬核。

3. 蘋(píng)果式文案

做過(guò)英文 Web 的設計師都知道，英文往往比中文更好設計，相同的布局英文出來(lái)的效果也更好看。

這不是崇洋媚外，心理學(xué)有個(gè)詞叫做「母語(yǔ)羞澀」。簡(jiǎn)單來(lái)說(shuō)就是，中文對于我們來(lái)說(shuō)，太常見(jiàn)了會(huì )讓人產(chǎn)生一種廉價(jià)感（實(shí)際上是羞澀感）的心理感受。

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

回到蘋(píng)果官網(wǎng)，我們看到一部分文案是英文產(chǎn)品名稱(chēng)，這個(gè)不會(huì )感覺(jué)羞澀。

那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關(guān)、重復等修辭手法。雖然語(yǔ)感很差，但基本上能明白字面意思。

其實(shí)這樣做的目的就是為了創(chuàng )造一種陌生感、一種獨特的語(yǔ)言風(fēng)格，來(lái)凸品牌氣質(zhì)。舉幾個(gè)例子：

重復：比如說(shuō) iPad Pro「你的下一臺電腦，何必是電腦。」

雙關(guān)：比如說(shuō) AppleWatch 的「它會(huì )時(shí)時(shí)關(guān)心你的心。」

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

押韻：比如說(shuō) 配件 的「可重復充電，又可圈可點(diǎn)。」

對比：比如說(shuō) iPad mini 的「身量小，能量大。」

4. 儀式感

zui后一點(diǎn)。生活要有儀式感，蘋(píng)果官網(wǎng)也有儀式感。

http://ezekroy.com/wangzhansheji/3338.html Apple官網(wǎng)的網(wǎng)頁(yè)設計哲學(xué)