• 品牌設計
    Hi,are you ready?

    準備好開始了嗎?
    那就與我們取得聯系吧

    有一個品牌項目想和我們談談嗎?您可以填寫右邊的表格,讓我們了解您的項目需求,這是一個良好的開始,我們將會盡快與你取得聯系。當然也歡迎您給我們寫信或是打電話,讓我們聽到你的聲音!

    PID派點互動

    地 址:廣州市天河區金慧路88號11棟138單元(華南農業大學內)

    電 話:+020- 3855 0205 3855 0745

    傳 真:+020-3855 0745

    E-mail:925774558@qq.com

    填寫您的項目信息

    為什么說 Apple 的網站設計是魔鬼:Apple網站對國內網站設計的影響及啟發!

    標簽:Apple網站設計,網站設計,廣州網站設計,網站設計公司

    小派在工作過程中,經常會碰到一些客戶,網站設計要參考Apple網站的設計風格,還經常抱怨國內設計師設計不出Apple這種風格的網站,水平有限......遇到這種客戶,小派也往往陷入沉思,也不去爭辯。誠然,國內設計師的能力跟國外頂尖設計師的能力確實有差距,這不可否認,但國內設計師特別在最近這些年,也取得很大的進步。Apple網站確實是設計的魔鬼,集大成者,無論是從網站架構,文案,內容素材,頁面設計,還是代碼編寫都是頂級的,但國內的設計師為什么很難做出同種水平的網站呢?因為很多條件不具備,比如有些公司做網站,對網站多么多么重視,要求多么多么高,預算沒有上限......這種客戶大部分是不靠譜的,預算3500,要啥沒啥,還讓你做著做那......做不出來是正常的,做出來那才見鬼了呢。Apple 網站是一個頂級的制作團隊經過多年的打造才做出來的。你那么點銀兩,要啥沒啥,就憑一張嘴,張口就來,做Apple的網站,騙鬼呢?我相信,從 Apple.com 找設計靈感是每一位設計師都做過的事。那它到底有何魅力?跟我來一探究竟吧。


    沉浸與交互式體驗

    每當有新產品發布時,我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時間發布的 iPad Pro 也一樣。這背后是 Apple 基于 webGL 技術,創造的一種沉浸與交互式產品體驗。


    1. 連續性

    我們在產品介紹頁可以看到,蘋果使用了大量的滾動 scroll 來體現連續性。一方面,滾動作為大多數 Web 用戶最自然的操作,學習成本極低。另一方面,在冗長的頁面下,滾動能讓產品特性保持更自然的轉場銜接。

    為什么說 Apple 的設計是魔鬼:網頁篇

    iPad Pro 的連續性


    2. 趣味性

    另外,采用了大量的動畫式轉換(animated transition),即操作時展示的動態效果,以此來增加趣味性。伴隨著豐富的、若隱若顯的章節文案,就像電影的旁白一樣,娓娓道來。通過滾動的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會受到限制,只能在視頻中前進或后退,毫無樂趣可言。

    為什么說 Apple 的設計是魔鬼:網頁篇

    AirPods 的趣味性


    言之有序

    1. 秩序感

    說到言之有序,我們看 iPad 的頁面介紹。四款產品,分別是:iPad Pro、iPad Air、iPad、iPad mini。拍攝角度的秩序感,可謂妙不可言。

    為什么說 Apple 的設計是魔鬼:網頁篇

    iPad 的秩序感


    iPad Pro 的拍攝角度接近于正側面。

    iPad Air 是四分之三側面。

    iPad 是正面。

    iPad mini 是俯視。

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

    2. 設計語言

    其次,官網與 iOS 保持協同的設計語言,給用戶呈現了一致的感官體驗。從 iOS 11 開始,蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合,轉向的 Medium + Bold ,以此增強信息傳播中的識別力。

    為什么說 Apple 的設計是魔鬼:網頁篇

    HomePod


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

    層次

    1. 視差

    第三是視差帶來的層次感。蘋果奉行包豪斯的無裝飾和極簡的理念。當然,它不是那種附庸的美觀及外表的光鮮,而是將復雜難懂的技術以簡潔的形式傳達給用戶。

    為什么說 Apple 的設計是魔鬼:網頁篇

    Mac Pro 視差滾動


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


    2. 視覺張力

    不僅如此,樣式上富有視覺張力?;驍U張、或收縮、或吸引、或排斥之感覺,呈現刺激與震撼。舉兩個例子:

    為什么說 Apple 的設計是魔鬼:網頁篇

    A13芯片的擴張力


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

    為什么說 Apple 的設計是魔鬼:網頁篇

    Pro級攝像頭的排斥力


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


    高級感

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

    1. 視覺降噪

    我們都知道,高飽和度的色彩

    為什么說 Apple 的設計是魔鬼:網頁篇

    iMac Pro 高級感


    回過頭來看蘋果官網的大部分頁面,除了產品界面色彩和按鈕欄之外,其他的文字、背景、控件一律采用黑白灰色系,以此營造高級感。甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級灰中加了一點點綠而已。換言之,減少使用顏色的數量,降低色彩的飽和度都能削減色彩對人的情緒,起到提升產品高級感的效果。

    為什么說 Apple 的設計是魔鬼:網頁篇

    iPad 留白


    除此之外,恰當的留白可以更加突出產品內容,讓重要的信息更準確地傳達。并且能營造出廣闊的空間感,讓畫面得到延伸,呈現一種意境美。所以我們做設計時應當多做減法,避免無意義的視覺元素堆砌,反而能讓你的設計更有高級的氣質。這又印證了現代主義建筑大師密斯·凡德羅的那句話:Less Is More。

    2. 配圖

    當然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。蘋果官網大部分的產品都是采用實拍+后期修圖,而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果,這一點能看到蘋果對于品質的極致追求。

    為什么說 Apple 的設計是魔鬼:網頁篇

    Designed by Apple in California


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


    3. 蘋果式文案

    做過英文 Web 的設計師都知道,英文往往比中文更好設計,相同的布局英文出來的效果也更好看。這不是崇洋媚外,心理學有個詞叫做「母語羞澀」。簡單來說就是,中文對于我們來說,太常見了會讓人產生一種廉價感(實際上是羞澀感)的心理感受。老外也一樣,你可以看到美國企業:蘋果、麥當勞、星巴克都是使用圖形 Logo,而日本企業不用母語,而是用英文,比如 SONY、TOYOTA、Canon。

    為什么說 Apple 的設計是魔鬼:網頁篇

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


    回到蘋果官網,我們看到一部分文案是英文產品名稱,這個不會感覺羞澀。那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差,但基本上能明白字面意思。其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格,來凸品牌氣質。舉幾個例子:

    重復:比如說 iPad Pro「你的下一臺電腦,何必是電腦?!?br/>

    雙關:比如說 Apple Watch 的「它會時時關心你的心?!?/p>

    排比:比如說 iMac 的「從極速,到神速,任你提速?!?/p>

    押韻:比如說配件的「可重復充電,又可圈可點?!?/p>

    對比:比如說 iPad mini 的「身量小,能量大?!?/p>

    4. 儀式感

    最后一點。生活要有儀式感,蘋果官網也有儀式感。

    為什么說 Apple 的設計是魔鬼:網頁篇

    國際婦女節專題


    在一些特殊的日子里,例如三八節當天,友商選擇打廣告促銷。而蘋果推出了國際婦女節專題,致敬女性的偉大,這一做法頗具人文情懷。不過話又說回來,感動歸感動,還是參與友商的打折活動香。

    以上就是Apple網站設計的一些特點,如果您也想設計一個跟Apple類似風格的網站,首頁您要有這個預算,還要有這方面的素材,最重要是要有互聯網的意識與思維,這樣才能打造一個搞品質的網站。如果這些都不具備,還要求做Apple這種要求的網站,那就扯淡耍流氓。

    更多網站設計、廣州網站設計、網站設計公司等相關內容,歡迎您咨詢派點互動!


    返回列表
    在線溝通

    Are you interested in ?

    感興趣嗎?

    有關我們服務的更多信息,請聯系

    135 7039 2915 李先生

    與我們合作

    與派點合作,您將會得到更成熟的網站建設服務。我們以客戶至上,同時也相互挑戰,力求呈現最好的網站建設成果。

    品牌顧問熱線(李生):

    +135 7039 2915

    TOP

    QQ客服

    免費電話

    前上司聚会时遭同事侵犯