Apple 的設計網(wǎng)頁篇
發(fā)布時間:2022-01-22 08:46 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

Apple 致力于讓每件產(chǎn)品都賞心悅目,與其說官網(wǎng)是產(chǎn)品展示平臺,倒不如說它是蘋果產(chǎn)品分支的延續(xù)。

我相信,從 Apple.com 找設計靈感是每一位設計師都做過的事。那它到底有何魅力?跟我來一探究竟吧。


沉浸與交互式體驗


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

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

1. 連續(xù)性

我們在產(chǎn)品介紹頁可以看到,蘋果使用了大量的滾動 scroll 來體現(xiàn)連續(xù)性。

一方面,滾動作為大多數(shù) Web 用戶最自然的操作,學習成本極低。

另一方面,在冗長的頁面下,滾動能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場銜接。

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ iPad Pro 的連續(xù)性

2. 趣味性

另外,采用了大量的動畫式轉(zhuǎn)換(animated transition),即操作時展示的動態(tài)效果,以此來增加趣味性。

伴隨著豐富的、若隱若顯的章節(jié)文案,就像電影的旁白一樣,娓娓道來。

通過滾動的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會受到限制,只能在視頻中前進或后退,毫無樂趣可言。

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ AirPods 的趣味性


言之有序


1. 秩序感

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

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ iPad 的秩序感

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

如此一來,既顯得有序,也不會導致視覺疲勞。

2. 設計語言

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

從 iOS 11 開始,蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合,轉(zhuǎn)向的 Medium + Bold ,以此增強信息傳播中的識別力。

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ HomePod

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


層次


1. 視差

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

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ Mac Pro 視差滾動

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

2. 視覺張力

不僅如此,樣式上富有視覺張力。或擴張、或收縮、或吸引、或排斥之感覺,呈現(xiàn)刺激與震撼。舉兩個例子:

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ A13芯片的擴張力

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ Pro級攝像頭的排斥力

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


高級感


再聊聊蘋果的高級感是怎么來的?

1. 視覺降噪

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ iMac Pro 高級感

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

甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級灰中加了一點點綠而已。

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ iPad 留白

除此之外,恰當?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容,讓重要的信息更準確地傳達。并且能營造出廣闊的空間感,讓畫面得到延伸,呈現(xiàn)一種意境美。

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

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

2. 配圖

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

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ Designed by Apple in California

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

△ 蘋果壁紙制作幕后

3. 蘋果式文案

做過英文 Web 的設計師都知道,英文往往比中文更好設計,相同的布局英文出來的效果也更好看。

這不是崇洋媚外,心理學有個詞叫做「母語羞澀」。簡單來說就是,中文對于我們來說,太常見了會讓人產(chǎn)生一種廉價感(實際上是羞澀感)的心理感受。

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

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ 你的下一臺電腦,何必是電腦。

回到蘋果官網(wǎng),我們看到一部分文案是英文產(chǎn)品名稱,這個不會感覺羞澀。

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

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

  • 重復:比如說 iPad Pro「你的下一臺電腦,何必是電腦!
  • 雙關(guān):比如說 Apple Watch 的「它會時時關(guān)心你的心!
  • 排比:比如說 iMac 的「從極速,到神速,任你提速!
  • 押韻:比如說配件的「可重復充電,又可圈可點!
  • 對比:比如說 iPad mini 的「身量小,能量大。」

4. 儀式感

最后一點。生活要有儀式感,蘋果官網(wǎng)也有儀式感。

為什么說 Apple 的設計是魔鬼:網(wǎng)頁篇

△ 國際婦女節(jié)專題

在一些特殊的日子里,例如三八節(jié)當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節(jié)專題,致敬女性的偉大,這一做法頗具人文情懷。

不過話又說回來,感動歸感動,還是參與友商的打折活動香。

HTML基礎視頻教程
我要自學網(wǎng)商城 ¥30 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC