12個優秀的國外Material Design網站案例

眼看2017年就快完了，你是否是還沒徹底搞懂Material Design呢？是嫌說明文檔太長，仍是以爲本身英文很差？都不要緊，小編今天給你們整理了一份乾貨滿滿的學習筆記，並列舉了一些國外的MaterialDesign優秀案例及資源網站，相信你看後會對Google的Material Design主要設計規範有更深入、全面的瞭解，別錯過咯！

 

Material Design核心思想

Material Design（又叫作「材料設計」，如下簡稱MD），是由谷歌建立和發表的一種設計語言，旨在把物理世界的體驗帶進屏幕，其中去掉現實中的雜質和隨機性，僅保留其最原始純淨的形態、變化與過渡，最終還原最貼近真實的用戶體驗，達到一種簡潔與直觀的效果。 

做爲2017年及2018年主要的流行設計趨勢之一，Material Design已被愈來愈多地運用到網站、App開發及設計中。谷歌是這樣介紹Material Design的「設計是創造的藝術，咱們的目標就是要知足不一樣的人類須要。人們的須要會隨着時間發展，咱們的設計，實踐，以及理念也要隨之提高。咱們在自我挑戰，爲用戶創造了一個可視化語言，它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。」

 

Material Design設計案例及資源網站

 

1. RumChata

Website: http://www.rumchata.com/age-gate

這個網站結合了MD設計的物理美學風格，經過建立與現實事物中類似的外觀及功能，給用戶提供了一種簡約色彩繽紛、但看起來簡單直觀的體驗。

 

2. DropBox Business

Website: https://www.dropbox.com/business/

Dropbox Business早期便開始採用MD的設計概念，能夠說是利用顏色保持品牌形象的典型案例。能夠看到，它選取藍色做爲網站主色調，同時用黑、白色做爲輔助色，這樣的顏色搭配恰好跟本身的「簡約高效」產品理念是完美結合的。

 

3. Waaark.com

Website: https://waaark.com/

MD重視動畫效果，它反覆強調一點：動畫不僅是裝飾，它有含義，且能表達元素、界面之間的關係，同時具有功能上的做用。下面這個網站的首頁動畫，能夠隨鼠標的移動進行智能切換，像屏幕上流動的波浪，但運動和變化都是由加速及減速過程，也是遵循了現實世界中的運動規律。感興趣的小夥伴，能夠打開網站看看具體的效果哦。

 

4. Serioverify.com

Website: https://serioverify.com/

MD引入了Z軸垂直於屏幕的概念，用來表現元素的關係，全部元素都有默認的海拔高度，但其中全部的元素厚度都是1dp。Serioverify這個網站中都有默認的海拔高度，對它進行操做會提高它的海拔高度，但咱們能夠注意到，同一種元素、一樣的操做，擡升的高度是一致的。這樣的話，開發人員也能夠經過一個值來控制元素的海拔高度和投影。

 

5. Pumperl Gsund

Website: https://www.pumperlgsund-bio.de/

跟Dropbox Business相反，這個網站用了兩種不一樣明亮度的綠色，在背景色中加入了一些不太顯眼的顏色，其他則以黑白色爲主。看起來有點「反賓奪主」，不過也不影響網站總體的美觀及易用性。

 

6. Behance

Website: https://www.behance.net/

Behance是國外最著名的設計網站之一，提供有各式各樣可參考的網頁、App設計案例，它也利用了MD中的多種空間、按鈕、文字排版等規範，讓人看起來賞心悅目、且有很好的交互體驗。

 

7. Codepen

Website: https://codepen.io/

就像它的名字同樣，CodePen是一個偏開發類的網站，它能夠說是前端開發者的「遊樂場」，同時開發者能挖掘到不少很多關於MD的實用材料。不只能夠看到不少很是酷的MD設計案例，還能找到開發人員用於構建設計或動畫底層的CSS，HTML或JavaScript。

 

8. Mockplus

Website: https://www.mockplus.com/resource

做爲一款全平臺的原型設計工具，Mockplus也持續提供一系列好看又實用的免費素材，包括MaterialDesign、Flat Design、交互設計與卡片式設計等等，支持免費下載及使用。同時，利用它封裝好的組件、圖標資源及頁面模板，能夠快速設計、建立各種原型項目，網頁/App/桌面原型無壓力切換。

 

9. Dribbble

Website: https://dribbble.com/tags/material_design

這是對於國外設計師、開發師或者從事視覺創意或相關領域的藝術家來講，頗有人氣的一個平臺。若是在這個平臺上搜索MD，你會發現MD其實至關流行，並能夠找到各種網頁及APP的精美設計案例，從簡單的圖標到功能完整的網站都應有盡有。

 

10. MaterialUP

Website: https://www.uplabs.com/search?q=material%20design

MaterialUp的網站主題就是關於MaterialDesign設計，從網站示例、移動APP截圖、工具、提示等等都有提供。此外，它的界面看起來有點像Google Drive，總體設計風格也是採用了多種Material Design設計手法，自己就是很好的一個設計案例。

 

11. Reddit

Website: https://www.reddit.com/r/MaterialDesign/

Reddit可能並非你直接尋找設計資源或靈感的最佳選擇，但若是你想跟一羣志趣相投的人一塊兒討論、切磋設計想法，那麼到這個網站準沒錯！

 

12. Tumblr

Website: http://matesign.tumblr.com/

不管是網頁、Android應用程序或iOS應用程序，若是你有興趣瞭解關於MD設計的更多信息，那麼必定要去Tumblr看看，或許能爲接下來的項目獲取很多靈感。

 

寫在後面的話

 

綜上可見，Material Design幾乎在大多數網頁、包括APP設計都有普遍運用，它提出了基於易用性基礎上的各種UI素材的更合理搭配設計，但願讀了這篇文章對你有所幫助。但俗話說「巧婦難爲無米之炊」，若是沒有一款好的工具，那麼即便有再多的理論學習與積累，也難將想法實際落地。做爲設計師、產品經理從入門到精通的必備工具，Mockplus是你的不二之選。