編輯導(dǎo)語：很多人都對(duì)蘋果的網(wǎng)站設(shè)計(jì)贊不絕口，蘋果的網(wǎng)站可以說是企業(yè)官網(wǎng)的設(shè)計(jì)中的佼佼者，從圖片、廣告詞、顏色對(duì)比等等設(shè)計(jì)都顯得十分的漂亮且直觀；本文作者分享了關(guān)于蘋果管網(wǎng)設(shè)計(jì)的一些可參考的點(diǎn)，我們一起來看一下。

對(duì)于每個(gè)設(shè)計(jì)師而言，蘋果的設(shè)計(jì)都是非常好的參考，無論界面還是文案都是值得大家學(xué)習(xí)的地方；今天我們一起來學(xué)習(xí)下蘋果的設(shè)計(jì)美學(xué)，看看蘋果的設(shè)計(jì)是如何引領(lǐng)全行業(yè)的，到底好在什么地方？

一、滾動(dòng)視差技術(shù)的運(yùn)用

在蘋果官網(wǎng)中有一個(gè)運(yùn)用比較多的效果，就是滾動(dòng)效果+視差，比如你在滾動(dòng)的時(shí)候會(huì)顯示一系列的圖形，甚至視頻，你每次滾動(dòng)都會(huì)發(fā)生不一樣的變化。

▲這種交互方式叫滾動(dòng)視差，蘋果經(jīng)常使用這種方式展示產(chǎn)品，你每次滾動(dòng)變化都不一樣；這樣設(shè)計(jì)好處是內(nèi)容很多，但是你瀏覽起來并不會(huì)覺得很疲憊，更不會(huì)覺得無聊，看完還有有意猶未盡的感覺。

▲在Airpods這款產(chǎn)品中，這個(gè)滾動(dòng)視差效果運(yùn)用的更加的極致和大膽，整個(gè)耳機(jī)的展示完全動(dòng)態(tài)化呈現(xiàn)，讓你仿佛可以摸到耳機(jī)的做工細(xì)節(jié)。

▲最厲害的地方是滾動(dòng)效果運(yùn)用在人物身上，從黑色背景過度到白色背景，在黑色背景下你會(huì)更關(guān)注耳機(jī)本身，過度到白色時(shí)候效果也很自然；整個(gè)滾動(dòng)效果，就像你拿著一個(gè)攝像機(jī)對(duì)著模特拍攝一樣身臨其境。

▲整個(gè)滾動(dòng)視差效果，將產(chǎn)品的每一個(gè)細(xì)節(jié)呈現(xiàn)在用戶面前，雖然國(guó)內(nèi)很多廠家都是模仿蘋果這個(gè)效果，但是流暢感和細(xì)膩都還不如蘋果精致，有興趣的同學(xué)可以去蘋果官網(wǎng)多多體驗(yàn)。

▲iPad的新款頁面也是如此，iPad以一個(gè)180度的側(cè)面角度逐步的轉(zhuǎn)成正面呈現(xiàn)在用戶眼前。

▲然后Pencil這支筆緩緩隨著筆觸出來，就像看一場(chǎng)大片一樣；所以如果今天需要你們?nèi)プ鲆粋€(gè)產(chǎn)品網(wǎng)站，想讓人印象深刻的話，不如嘗試下這種技術(shù)。

二、高清大圖的運(yùn)用

▲PC和手機(jī)不同，屏幕足夠的大，因此你可以選擇非常高清有調(diào)性的圖片來烘托你的產(chǎn)品；清晰的圖片能讓你感覺到整個(gè)產(chǎn)品的質(zhì)感，給人留下非常強(qiáng)的印象。

▲清晰到人物臉上一個(gè)斑點(diǎn)，手上的一個(gè)細(xì)紋，都很好的展示在你面前，這種高清的大圖為產(chǎn)品增添了很多光彩，體現(xiàn)了屏幕的高分辨率。

▲蘋果的圖片選擇，非常強(qiáng)調(diào)環(huán)境和人物狀態(tài)，需要體現(xiàn)出蘋果對(duì)自然環(huán)保意識(shí)，體現(xiàn)出蘋果的價(jià)值觀，科技讓人們生活更加美好。

▲同時(shí)還會(huì)關(guān)愛殘疾人士，會(huì)考慮這些用戶的使用感受，這樣的設(shè)計(jì)讓我印象非常深刻。

▲蘋果的產(chǎn)品照片不僅很漂亮，很清晰，同時(shí)使用場(chǎng)景明確；比如這個(gè)視頻，為了凸顯拍攝和剪輯很高清，支持4K 視頻，以及超廣角攝像頭取景范圍。

▲這個(gè)照片則是凸顯蘋果的全新超廣角攝像頭，你可以捕捉一望無際的壯麗風(fēng)景，也可以在和全家人外出度假時(shí)，拍張一家老小和所在美景同框的全家福

▲在人物的選擇上，蘋果很好的詮釋了蘋果的基調(diào)；同時(shí)如果文字放在圖片上，蘋果會(huì)處理圖片四周的環(huán)境，使得中心的位置更清晰。將用戶的視覺注意力引導(dǎo)到文字上面。

▲并且照片和文字很好的融為一體，比如上圖，將背景虛化處理，只把人物的臉變的更清晰。很好的和文字「人像，好上相」融為了一體。

▲同時(shí)蘋果的照片會(huì)考慮不同膚色人群，模特的選擇會(huì)考慮全球各個(gè)地區(qū)的特點(diǎn)；確保符合當(dāng)?shù)厍闆r的同時(shí)，也都是充滿了活力和朝氣的。

三、清晰的分割布局

▲蘋果的官網(wǎng)因?yàn)榻?jīng)常更新產(chǎn)品，所以為了保證產(chǎn)品上新的靈活性，采用比較簡(jiǎn)單的上圖下文的布局，這樣的布局好處是當(dāng)你發(fā)布新產(chǎn)品時(shí)候能快速響應(yīng)。

▲蘋果產(chǎn)品頁面的布局分割非常清晰，模塊感非常強(qiáng)，要么通過色彩進(jìn)行分割，要么通過大的留白來區(qū)分產(chǎn)品。

▲基本不會(huì)出現(xiàn)非常復(fù)雜的布局，都是采用上圖下文，或者左圖右文，右圖左文的方式。

四、感動(dòng)的細(xì)節(jié)

▲在蘋果WWDC的頁面設(shè)計(jì)中，每當(dāng)你刷新這個(gè)頁面展示的emoji表情都會(huì)不一樣。

▲包括電腦后面的貼紙都會(huì)有變化，蘋果將這種設(shè)計(jì)細(xì)節(jié)運(yùn)用到了很多產(chǎn)品設(shè)計(jì)，比如iPhone上的時(shí)鐘會(huì)動(dòng)態(tài)變化，日期也會(huì)變化等等。

▲還有動(dòng)態(tài)的效果，比如air發(fā)布時(shí)候的海報(bào)設(shè)計(jì)，動(dòng)態(tài)的LOGO以及蘋果pencil的筆觸效果，這些感動(dòng)的細(xì)節(jié)，都體現(xiàn)著蘋果對(duì)于設(shè)計(jì)的追求。

▲包括每次發(fā)布會(huì)的海報(bào)，都隱藏著蘋果發(fā)布產(chǎn)品的幾大奧秘，比如這個(gè)海報(bào)，有媒體說代表著蘋果會(huì)發(fā)布4款iPhone，屏幕一個(gè)比一個(gè)大。

▲9月15的發(fā)布會(huì)海報(bào)，通過這種動(dòng)態(tài)的LOGO推出了新款的iPad,產(chǎn)品和海報(bào)隱喻的非常到位。

蘋果的歷屆發(fā)布會(huì)，都是很花心思在設(shè)計(jì)里面，巧妙的將創(chuàng)意和產(chǎn)品進(jìn)行結(jié)合。

五、可視化的設(shè)計(jì)

▲蘋果的產(chǎn)品介紹，因?yàn)橛写罅康奈淖郑苋菀鬃層脩艉雎缘糁攸c(diǎn)信息，所以蘋果在設(shè)計(jì)時(shí)候，經(jīng)常使用可視化表達(dá)方式，將重點(diǎn)的信息通過圖形；或者信息可視化圖標(biāo)，讓用戶更好的感知到產(chǎn)品關(guān)鍵參數(shù)。

▲同時(shí)蘋果會(huì)使用比較字重粗切大的字體，這樣信息對(duì)比會(huì)更加強(qiáng)烈。

▲同時(shí)很多頁面會(huì)采用這種圖表，對(duì)比的方式去排版，這種大膽的設(shè)計(jì)也讓用戶更好的與舊產(chǎn)品進(jìn)行對(duì)比，更好做設(shè)計(jì)決策。

▲這種可視化的設(shè)計(jì)，讓頁面展示清晰的同時(shí)，也能增加用戶購買的轉(zhuǎn)化。

▲同時(shí)圖形化的表達(dá)，也比文字能更好的傳遞內(nèi)容信息本身。再結(jié)合蘋果的高質(zhì)量產(chǎn)品圖片，你會(huì)覺得整個(gè)產(chǎn)品充滿了魅力。

六、寫在結(jié)尾

蘋果在官網(wǎng)的投資資源是巨大的，蘋果官網(wǎng)也是全世界最大的電商網(wǎng)站；他的訪問速度和效果也是全世界最流暢的，即使是這么多國(guó)家的支持，他們也可以做到千人千面精細(xì)化的管理；可以說是互聯(lián)網(wǎng)「網(wǎng)頁教科書」的存在。

如果你也做網(wǎng)頁，沒有靈感一定要多去刷刷蘋果的網(wǎng)站。

#專欄作家#

Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自?Unsplash，基于 CC0 協(xié)議