思考 | 蘋果設計牛在哪?

sky
0 評論 6021 瀏覽 7 收藏 14 分鐘

編輯導語:很多人都對蘋果的網站設計贊不絕口,蘋果的網站可以說是企業官網的設計中的佼佼者,從圖片、廣告詞、顏色對比等等設計都顯得十分的漂亮且直觀;本文作者分享了關于蘋果管網設計的一些可參考的點,我們一起來看一下。

對于每個設計師而言,蘋果的設計都是非常好的參考,無論界面還是文案都是值得大家學習的地方;今天我們一起來學習下蘋果的設計美學,看看蘋果的設計是如何引領全行業的,到底好在什么地方?

一、滾動視差技術的運用

蘋果設計牛在哪?

在蘋果官網中有一個運用比較多的效果,就是滾動效果+視差,比如你在滾動的時候會顯示一系列的圖形,甚至視頻,你每次滾動都會發生不一樣的變化。

蘋果設計牛在哪?

▲這種交互方式叫滾動視差,蘋果經常使用這種方式展示產品,你每次滾動變化都不一樣;這樣設計好處是內容很多,但是你瀏覽起來并不會覺得很疲憊,更不會覺得無聊,看完還有有意猶未盡的感覺。

蘋果設計牛在哪?

蘋果設計牛在哪?

▲在Airpods這款產品中,這個滾動視差效果運用的更加的極致和大膽,整個耳機的展示完全動態化呈現,讓你仿佛可以摸到耳機的做工細節。

蘋果設計牛在哪?

▲最厲害的地方是滾動效果運用在人物身上,從黑色背景過度到白色背景,在黑色背景下你會更關注耳機本身,過度到白色時候效果也很自然;整個滾動效果,就像你拿著一個攝像機對著模特拍攝一樣身臨其境。

蘋果設計牛在哪?

▲整個滾動視差效果,將產品的每一個細節呈現在用戶面前,雖然國內很多廠家都是模仿蘋果這個效果,但是流暢感和細膩都還不如蘋果精致,有興趣的同學可以去蘋果官網多多體驗。

蘋果設計牛在哪?

▲iPad的新款頁面也是如此,iPad以一個180度的側面角度逐步的轉成正面呈現在用戶眼前。

蘋果設計牛在哪?▲然后Pencil這支筆緩緩隨著筆觸出來,就像看一場大片一樣;所以如果今天需要你們去做一個產品網站,想讓人印象深刻的話,不如嘗試下這種技術。

二、高清大圖的運用

蘋果設計牛在哪?

▲PC和手機不同,屏幕足夠的大,因此你可以選擇非常高清有調性的圖片來烘托你的產品;清晰的圖片能讓你感覺到整個產品的質感,給人留下非常強的印象。

蘋果設計牛在哪?

▲清晰到人物臉上一個斑點,手上的一個細紋,都很好的展示在你面前,這種高清的大圖為產品增添了很多光彩,體現了屏幕的高分辨率。

蘋果設計牛在哪?

蘋果設計牛在哪?

▲蘋果的圖片選擇,非常強調環境和人物狀態,需要體現出蘋果對自然環保意識,體現出蘋果的價值觀,科技讓人們生活更加美好。

蘋果設計牛在哪?

▲同時還會關愛殘疾人士,會考慮這些用戶的使用感受,這樣的設計讓我印象非常深刻。

蘋果設計牛在哪?

▲蘋果的產品照片不僅很漂亮,很清晰,同時使用場景明確;比如這個視頻,為了凸顯拍攝和剪輯很高清,支持4K 視頻,以及超廣角攝像頭取景范圍。

蘋果設計牛在哪?

蘋果設計牛在哪?

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

蘋果設計牛在哪?

▲在人物的選擇上,蘋果很好的詮釋了蘋果的基調;同時如果文字放在圖片上,蘋果會處理圖片四周的環境,使得中心的位置更清晰。將用戶的視覺注意力引導到文字上面。

蘋果設計牛在哪?

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

蘋果設計牛在哪?

蘋果設計牛在哪?

▲同時蘋果的照片會考慮不同膚色人群,模特的選擇會考慮全球各個地區的特點;確保符合當地情況的同時,也都是充滿了活力和朝氣的。

三、清晰的分割布局

蘋果設計牛在哪?

▲蘋果的官網因為經常更新產品,所以為了保證產品上新的靈活性,采用比較簡單的上圖下文的布局,這樣的布局好處是當你發布新產品時候能快速響應。

蘋果設計牛在哪?

▲蘋果產品頁面的布局分割非常清晰,模塊感非常強,要么通過色彩進行分割,要么通過大的留白來區分產品。

蘋果設計牛在哪?

▲基本不會出現非常復雜的布局,都是采用上圖下文,或者左圖右文,右圖左文的方式。

四、感動的細節

蘋果設計牛在哪?

▲在蘋果WWDC的頁面設計中,每當你刷新這個頁面展示的emoji表情都會不一樣。

蘋果設計牛在哪?

▲包括電腦后面的貼紙都會有變化,蘋果將這種設計細節運用到了很多產品設計,比如iPhone上的時鐘會動態變化,日期也會變化等等。

蘋果設計牛在哪?

蘋果設計牛在哪?

▲還有動態的效果,比如air發布時候的海報設計,動態的LOGO以及蘋果pencil的筆觸效果,這些感動的細節,都體現著蘋果對于設計的追求。

蘋果設計牛在哪?

▲包括每次發布會的海報,都隱藏著蘋果發布產品的幾大奧秘,比如這個海報,有媒體說代表著蘋果會發布4款iPhone,屏幕一個比一個大。

蘋果設計牛在哪?

▲9月15的發布會海報,通過這種動態的LOGO推出了新款的iPad,產品和海報隱喻的非常到位。

蘋果設計牛在哪?

蘋果的歷屆發布會,都是很花心思在設計里面,巧妙的將創意和產品進行結合。

五、可視化的設計

蘋果設計牛在哪?

▲蘋果的產品介紹,因為有大量的文字,很容易讓用戶忽略掉重點信息,所以蘋果在設計時候,經常使用可視化表達方式,將重點的信息通過圖形;或者信息可視化圖標,讓用戶更好的感知到產品關鍵參數。

蘋果設計牛在哪?

▲同時蘋果會使用比較字重粗切大的字體,這樣信息對比會更加強烈。

蘋果設計牛在哪?

蘋果設計牛在哪?

▲同時很多頁面會采用這種圖表,對比的方式去排版,這種大膽的設計也讓用戶更好的與舊產品進行對比,更好做設計決策。

蘋果設計牛在哪?

▲這種可視化的設計,讓頁面展示清晰的同時,也能增加用戶購買的轉化。

蘋果設計牛在哪?

▲同時圖形化的表達,也比文字能更好的傳遞內容信息本身。再結合蘋果的高質量產品圖片,你會覺得整個產品充滿了魅力。

六、寫在結尾

蘋果在官網的投資資源是巨大的,蘋果官網也是全世界最大的電商網站;他的訪問速度和效果也是全世界最流暢的,即使是這么多國家的支持,他們也可以做到千人千面精細化的管理;可以說是互聯網「網頁教科書」的存在。

如果你也做網頁,沒有靈感一定要多去刷刷蘋果的網站。

#專欄作家#

Sky,微信公眾號:我們的設計日記(ID:helloskys),人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自?Unsplash,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!