小派在工作過(guò)程中，經(jīng)常會(huì)碰到一些客戶，網(wǎng)站設(shè)計(jì)要參考Apple網(wǎng)站的設(shè)計(jì)風(fēng)格，還經(jīng)常抱怨國(guó)內(nèi)設(shè)計(jì)師設(shè)計(jì)不出Apple這種風(fēng)格的網(wǎng)站，水平有限......遇到這種客戶，小派也往往陷入沉思，也不去爭(zhēng)辯。誠(chéng)然，國(guó)內(nèi)設(shè)計(jì)師的能力跟國(guó)外頂尖設(shè)計(jì)師的能力確實(shí)有差距，這不可否認(rèn)，但國(guó)內(nèi)設(shè)計(jì)師特別在最近這些年，也取得很大的進(jìn)步。Apple網(wǎng)站確實(shí)是設(shè)計(jì)的魔鬼，集大成者，無(wú)論是從網(wǎng)站架構(gòu)，文案，內(nèi)容素材，頁(yè)面設(shè)計(jì)，還是代碼編寫(xiě)都是頂級(jí)的，但國(guó)內(nèi)的設(shè)計(jì)師為什么很難做出同種水平的網(wǎng)站呢？因?yàn)楹芏鄺l件不具備，比如有些公司做網(wǎng)站，對(duì)網(wǎng)站多么多么重視，要求多么多么高，預(yù)算沒(méi)有上限......這種客戶大部分是不靠譜的，預(yù)算3500，要啥沒(méi)啥，還讓你做著做那......做不出來(lái)是正常的，做出來(lái)那才見(jiàn)鬼了呢。Apple 網(wǎng)站是一個(gè)頂級(jí)的制作團(tuán)隊(duì)經(jīng)過(guò)多年的打造才做出來(lái)的。你那么點(diǎn)銀兩，要啥沒(méi)啥，就憑一張嘴，張口就來(lái)，做Apple的網(wǎng)站，騙鬼呢？我相信，從 Apple.com 找設(shè)計(jì)靈感是每一位設(shè)計(jì)師都做過(guò)的事。那它到底有何魅力？跟我來(lái)一探究竟吧。
沉浸與交互式體驗(yàn)
每當(dāng)有新產(chǎn)品發(fā)布時(shí)，我們都會(huì)被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時(shí)間發(fā)布的 iPad Pro 也一樣。這背后是 Apple 基于 webGL 技術(shù)，創(chuàng)造的一種沉浸與交互式產(chǎn)品體驗(yàn)。
1. 連續(xù)性
我們?cè)诋a(chǎn)品介紹頁(yè)可以看到，蘋(píng)果使用了大量的滾動(dòng) scroll 來(lái)體現(xiàn)連續(xù)性。一方面，滾動(dòng)作為大多數(shù) Web 用戶最自然的操作，學(xué)習(xí)成本極低。另一方面，在冗長(zhǎng)的頁(yè)面下，滾動(dòng)能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場(chǎng)銜接。
iPad Pro 的連續(xù)性
2. 趣味性
另外，采用了大量的動(dòng)畫(huà)式轉(zhuǎn)換（animated transition），即操作時(shí)展示的動(dòng)態(tài)效果，以此來(lái)增加趣味性。伴隨著豐富的、若隱若顯的章節(jié)文案，就像電影的旁白一樣，娓娓道來(lái)。通過(guò)滾動(dòng)的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會(huì)受到限制，只能在視頻中前進(jìn)或后退，毫無(wú)樂(lè)趣可言。
AirPods 的趣味性
言之有序
1. 秩序感
說(shuō)到言之有序，我們看 iPad 的頁(yè)面介紹。四款產(chǎn)品，分別是：iPad Pro、iPad Air、iPad、iPad mini。拍攝角度的秩序感，可謂妙不可言。
iPad 的秩序感
iPad Pro 的拍攝角度接近于正側(cè)面。
iPad Air 是四分之三側(cè)面。
iPad 是正面。
iPad mini 是俯視。
如此一來(lái)，既顯得有序，也不會(huì)導(dǎo)致視覺(jué)疲勞。
2. 設(shè)計(jì)語(yǔ)言
其次，官網(wǎng)與 iOS 保持協(xié)同的設(shè)計(jì)語(yǔ)言，給用戶呈現(xiàn)了一致的感官體驗(yàn)。從 iOS 11 開(kāi)始，蘋(píng)果就采用了 Large Title 大標(biāo)題的字體風(fēng)格。字重也從 Regular + Light 的組合，轉(zhuǎn)向的 Medium + Bold ，以此增強(qiáng)信息傳播中的識(shí)別力。
HomePod
另外，高斯模糊的標(biāo)題欄背景、產(chǎn)品的投影等設(shè)計(jì)語(yǔ)言也保持系統(tǒng)一貫的風(fēng)格。我們可以很清晰地看到 Web 設(shè)計(jì)的同步轉(zhuǎn)變。
層次
1. 視差
第三是視差帶來(lái)的層次感。蘋(píng)果奉行包豪斯的無(wú)裝飾和極簡(jiǎn)的理念。當(dāng)然，它不是那種附庸的美觀及外表的光鮮，而是將復(fù)雜難懂的技術(shù)以簡(jiǎn)潔的形式傳達(dá)給用戶。
Mac Pro 視差滾動(dòng)
在信息層次方面，Apple 的編排設(shè)計(jì)由淺入深，猶如抽絲剝繭。很好地利用了視差滾動(dòng)，傳達(dá)圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂(lè)趣。
2. 視覺(jué)張力
不僅如此，樣式上富有視覺(jué)張力?；驍U(kuò)張、或收縮、或吸引、或排斥之感覺(jué)，呈現(xiàn)刺激與震撼。舉兩個(gè)例子：
A13芯片的擴(kuò)張力
擴(kuò)張力：整個(gè)畫(huà)面以 A13 芯片為視覺(jué)中心點(diǎn)，元素和布局圍繞這個(gè)視覺(jué)中心點(diǎn)向外擴(kuò)張。采用發(fā)散式的視覺(jué)引導(dǎo)，視覺(jué)張力就出現(xiàn)了，讓人感覺(jué)巍峨壯觀。
Pro級(jí)攝像頭的排斥力
排斥力：通過(guò)元素的大小對(duì)比，可以形成一定強(qiáng)度的視覺(jué)排斥力。Pro 級(jí)攝像頭輔以大特寫(xiě)，傳達(dá)空間意識(shí)。視覺(jué)上被其構(gòu)圖、美感觸動(dòng)。
高級(jí)感
再聊聊蘋(píng)果的高級(jí)感是怎么來(lái)的？
1. 視覺(jué)降噪
我們都知道，高飽和度的色彩
iMac Pro 高級(jí)感
回過(guò)頭來(lái)看蘋(píng)果官網(wǎng)的大部分頁(yè)面，除了產(chǎn)品界面色彩和按鈕欄之外，其他的文字、背景、控件一律采用黑白灰色系，以此營(yíng)造高級(jí)感。甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級(jí)灰中加了一點(diǎn)點(diǎn)綠而已。換言之，減少使用顏色的數(shù)量，降低色彩的飽和度都能削減色彩對(duì)人的情緒，起到提升產(chǎn)品高級(jí)感的效果。
iPad 留白
除此之外，恰當(dāng)?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容，讓重要的信息更準(zhǔn)確地傳達(dá)。并且能營(yíng)造出廣闊的空間感，讓畫(huà)面得到延伸，呈現(xiàn)一種意境美。所以我們做設(shè)計(jì)時(shí)應(yīng)當(dāng)多做減法，避免無(wú)意義的視覺(jué)元素堆砌，反而能讓你的設(shè)計(jì)更有高級(jí)的氣質(zhì)。這又印證了現(xiàn)代主義建筑大師密斯·凡德羅的那句話：Less Is More。
2. 配圖
當(dāng)然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。蘋(píng)果官網(wǎng)大部分的產(chǎn)品都是采用實(shí)拍+后期修圖，而非渲染圖。目的就是為了反映真實(shí)產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果，這一點(diǎn)能看到蘋(píng)果對(duì)于品質(zhì)的極致追求。
Designed by Apple in California
不僅如此，蘋(píng)果產(chǎn)品圣經(jīng)《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個(gè)幕后制作視頻，相當(dāng)硬核。
3. 蘋(píng)果式文案
做過(guò)英文 Web 的設(shè)計(jì)師都知道，英文往往比中文更好設(shè)計(jì)，相同的布局英文出來(lái)的效果也更好看。這不是崇洋媚外，心理學(xué)有個(gè)詞叫做「母語(yǔ)羞澀」。簡(jiǎn)單來(lái)說(shuō)就是，中文對(duì)于我們來(lái)說(shuō)，太常見(jiàn)了會(huì)讓人產(chǎn)生一種廉價(jià)感（實(shí)際上是羞澀感）的心理感受。老外也一樣，你可以看到美國(guó)企業(yè)：蘋(píng)果、麥當(dāng)勞、星巴克都是使用圖形 Logo，而日本企業(yè)不用母語(yǔ)，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一臺(tái)電腦，何必是電腦。
回到蘋(píng)果官網(wǎng)，我們看到一部分文案是英文產(chǎn)品名稱(chēng)，這個(gè)不會(huì)感覺(jué)羞澀。那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團(tuán)隊(duì)用了完全不對(duì)仗但押韻、奇怪的排比、雙關(guān)、重復(fù)等修辭手法。雖然語(yǔ)感很差，但基本上能明白字面意思。其實(shí)這樣做的目的就是為了創(chuàng)造一種陌生感、一種獨(dú)特的語(yǔ)言風(fēng)格，來(lái)凸品牌氣質(zhì)。舉幾個(gè)例子：
重復(fù)：比如說(shuō) iPad Pro「你的下一臺(tái)電腦，何必是電腦?！?br/>
雙關(guān)：比如說(shuō) Apple Watch 的「它會(huì)時(shí)時(shí)關(guān)心你的心?！?/p>
排比：比如說(shuō) iMac 的「從極速，到神速，任你提速?！?/p>
押韻：比如說(shuō)配件的「可重復(fù)充電，又可圈可點(diǎn)?！?/p>
對(duì)比：比如說(shuō) iPad mini 的「身量小，能量大。」
4. 儀式感
最后一點(diǎn)。生活要有儀式感，蘋(píng)果官網(wǎng)也有儀式感。
國(guó)際婦女節(jié)專(zhuān)題
在一些特殊的日子里，例如三八節(jié)當(dāng)天，友商選擇打廣告促銷(xiāo)。而蘋(píng)果推出了國(guó)際婦女節(jié)專(zhuān)題，致敬女性的偉大，這一做法頗具人文情懷。不過(guò)話又說(shuō)回來(lái)，感動(dòng)歸感動(dòng)，還是參與友商的打折活動(dòng)香。
以上就是Apple網(wǎng)站設(shè)計(jì)的一些特點(diǎn)，如果您也想設(shè)計(jì)一個(gè)跟Apple類(lèi)似風(fēng)格的網(wǎng)站，首頁(yè)您要有這個(gè)預(yù)算，還要有這方面的素材，最重要是要有互聯(lián)網(wǎng)的意識(shí)與思維，這樣才能打造一個(gè)搞品質(zhì)的網(wǎng)站。如果這些都不具備，還要求做Apple這種要求的網(wǎng)站，那就扯淡耍流氓。
更多網(wǎng)站設(shè)計(jì)、廣州網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司等相關(guān)內(nèi)容，歡迎您咨詢(xún)派點(diǎn)互動(dòng)！
