品牌設計
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. 視覺張力

不僅如此│▩☁↟,樣式上富有視覺張力◕•。或擴張☁☁☁☁╃、或收縮☁☁☁☁╃、或吸引☁☁☁☁╃、或排斥之感覺│▩☁↟,呈現刺激與震撼◕•。舉兩個例子✘↟:

為什麼說 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「你的下一臺電腦│▩☁↟,何必是電腦◕•。」

雙關✘↟:比如說 Apple Watch 的「它會時時關心你的心◕•。」

排比✘↟:比如說 iMac 的「從極速│▩☁↟,到神速│▩☁↟,任你提速◕•。」

押韻✘↟:比如說配件的「可重複充電│▩☁↟,又可圈可點◕•。」

對比✘↟:比如說 iPad mini 的「身量小│▩☁↟,能量大◕•。」

4. 儀式感

最後一點◕•。生活要有儀式感│▩☁↟,蘋果官網也有儀式感◕•。

為什麼說 Apple 的設計是魔鬼✘↟:網頁篇

國際婦女節專題


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

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

更多網站設計☁☁☁☁╃、廣州網站設計☁☁☁☁╃、網站設計公司等相關內容│▩☁↟,歡迎您諮詢派點互動│▩!


返回列表
線上溝通

Are you interested in ?

感興趣嗎₪☁?

有關我們服務的更多資訊,請聯絡

135 7039 2915 李先生

與我們合作

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

品牌顧問熱線(李生):

+135 7039 2915

TOP

QQ客服

免費電話

亚洲精品无码你懂的,日韩无码电影,啊太粗太硬了快拔出来啊,天堂网av