眼看2017年就快完了，你是不是還沒完全搞懂Material Design呢？是嫌說明文檔太長，還是覺得自己英文不好？都沒關(guān)系，小編今天給大家整理了一份干貨滿滿的學(xué)習(xí)筆記，并列舉了一些國外的MaterialDesign優(yōu)秀案例及資源網(wǎng)站，相信你看后會(huì)對(duì)Google的Material Design主要設(shè)計(jì)規(guī)范有更深刻、全面的了解，別錯(cuò)過咯！

Material Design核心思想

Material Design（又叫做“材料設(shè)計(jì)”，以下簡稱MD），是由谷歌創(chuàng)建和發(fā)表的一種設(shè)計(jì)語言，旨在把物理世界的體驗(yàn)帶進(jìn)屏幕，其中去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，僅保留其最原始純凈的形態(tài)、變化與過渡，最終還原最貼近真實(shí)的用戶體驗(yàn)，達(dá)到一種簡潔與直觀的效果。

作為2017年及2018年主要的流行設(shè)計(jì)趨勢之一，Material Design已被越來越多地運(yùn)用到網(wǎng)站、App開發(fā)及設(shè)計(jì)中。谷歌是這樣介紹Material Design的“設(shè)計(jì)是創(chuàng)造的藝術(shù)，我們的目標(biāo)就是要滿足不同的人類需要。人們的需要會(huì)隨著時(shí)間發(fā)展，我們的設(shè)計(jì)，實(shí)踐，以及理念也要隨之提升。我們?cè)谧晕姨魬?zhàn)，為用戶創(chuàng)造了一個(gè)可視化語言，它整合了優(yōu)秀設(shè)計(jì)的經(jīng)典原則和科學(xué)與技術(shù)的創(chuàng)新。這就是Material Design?！?/p>

Material Design設(shè)計(jì)案例及資源網(wǎng)站

1. RumChata

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

這個(gè)網(wǎng)站結(jié)合了MD設(shè)計(jì)的物理美學(xué)風(fēng)格，通過創(chuàng)建與現(xiàn)實(shí)事物中相似的外觀及功能，給用戶提供了一種簡約色彩繽紛、但看起來簡單直觀的體驗(yàn)。

2. DropBox Business

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

Dropbox Business早期便開始采用MD的設(shè)計(jì)概念，可以說是利用顏色保持品牌形象的典型案例?？梢钥吹剑x取藍(lán)色作為網(wǎng)站主色調(diào)，同時(shí)用黑、白色作為輔助色，這樣的顏色搭配剛好跟自己的“簡約高效”產(chǎn)品理念是完美結(jié)合的。

3. Waaark.com

Website:https://waaark.com/

MD重視動(dòng)畫效果，它反復(fù)強(qiáng)調(diào)一點(diǎn)：動(dòng)畫不只是裝飾，它有含義，且能表達(dá)元素、界面之間的關(guān)系，同時(shí)具備功能上的作用。下面這個(gè)網(wǎng)站的首頁動(dòng)畫，可以隨鼠標(biāo)的移動(dòng)進(jìn)行智能切換，像屏幕上流動(dòng)的波浪，但運(yùn)動(dòng)和變化都是由加速及減速過程，也是遵循了現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。感興趣的小伙伴，可以打開網(wǎng)站看看具體的效果哦。

4. Serioverify.com

Website:https://serioverify.com/

MD引入了Z軸垂直于屏幕的概念，用來表現(xiàn)元素的關(guān)系，所有元素都有默認(rèn)的海拔高度，但其中所有的元素厚度都是1dp。Serioverify這個(gè)網(wǎng)站中都有默認(rèn)的海拔高度，對(duì)它進(jìn)行操作會(huì)提升它的海拔高度，但我們可以注意到，同一種元素、同樣的操作，抬升的高度是一致的。這樣的話，開發(fā)人員也可以通過一個(gè)值來控制元素的海拔高度和投影。

5. Pumperl Gsund

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

跟Dropbox Business相反，這個(gè)網(wǎng)站用了兩種不同明亮度的綠色，在背景色中加入了一些不太顯眼的顏色，其余則以黑白色為主。看起來有點(diǎn)“反賓奪主”，不過也不影響網(wǎng)站整體的美觀及易用性。

6. Behance

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

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

7. Codepen

Website:https://codepen.io/

就像它的名字一樣，CodePen是一個(gè)偏開發(fā)類的網(wǎng)站，它可以說是前端開發(fā)者的“游樂場”，同時(shí)開發(fā)者能挖掘到很多不少關(guān)于MD的實(shí)用材料。不僅可以看到很多非常酷的MD設(shè)計(jì)案例，還能找到開發(fā)人員用于構(gòu)建設(shè)計(jì)或動(dòng)畫底層的CSS，HTML或JavaScript。

8. Mockplus

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

作為一款全平臺(tái)的原型設(shè)計(jì)工具，Mockplus也持續(xù)提供一系列好看又實(shí)用的免費(fèi)素材，包括MaterialDesign、Flat Design、交互設(shè)計(jì)與卡片式設(shè)計(jì)等等，支持免費(fèi)下載及使用。同時(shí)，利用它封裝好的組件、圖標(biāo)資源及頁面模板，可以快速設(shè)計(jì)、創(chuàng)建各類原型項(xiàng)目，網(wǎng)頁/App/桌面原型無壓力切換。

9. Dribbble

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

這是對(duì)于國外設(shè)計(jì)師、開發(fā)師或者從事視覺創(chuàng)意或相關(guān)領(lǐng)域的藝術(shù)家來說，很有人氣的一個(gè)平臺(tái)。如果在這個(gè)平臺(tái)上搜索MD，你會(huì)發(fā)現(xiàn)MD其實(shí)相當(dāng)流行，并可以找到各類網(wǎng)頁及APP的精美設(shè)計(jì)案例，從簡單的圖標(biāo)到功能完整的網(wǎng)站都應(yīng)有盡有。

10. MaterialUP

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

MaterialUp的網(wǎng)站主題就是關(guān)于MaterialDesign設(shè)計(jì)，從網(wǎng)站示例、移動(dòng)APP截圖、工具、提示等等都有提供。此外，它的界面看起來有點(diǎn)像Google Drive，整體設(shè)計(jì)風(fēng)格也是采用了多種Material Design設(shè)計(jì)手法，本身就是很好的一個(gè)設(shè)計(jì)案例。

11. Reddit

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

Reddit可能并不是你直接尋找設(shè)計(jì)資源或靈感的最佳選擇，但如果你想跟一群志趣相投的人一起討論、切磋設(shè)計(jì)想法，那么到這個(gè)網(wǎng)站準(zhǔn)沒錯(cuò)！

12. Tumblr

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

無論是網(wǎng)頁、Android應(yīng)用程序或iOS應(yīng)用程序，如果你有興趣了解關(guān)于MD設(shè)計(jì)的更多信息，那么一定要去Tumblr看看，或許能為接下來的項(xiàng)目獲取不少靈感。

寫在后面的話

綜上可見，Material Design幾乎在大多數(shù)網(wǎng)頁、包括APP設(shè)計(jì)都有廣泛運(yùn)用，它提出了基于易用性基礎(chǔ)上的各類UI素材的更合理搭配設(shè)計(jì)，希望讀了這篇文章對(duì)你有所幫助。但俗話說“巧婦難為無米之炊”，如果沒有一款好的工具，那么即使有再多的理論學(xué)習(xí)與積累，也難將想法實(shí)際落地。作為設(shè)計(jì)師、產(chǎn)品經(jīng)理從入門到精通的必備工具，Mockplus是你的不二之選。