列舉了一些國外的materialdesign優(yōu)秀案例及資源網(wǎng)站，相信你看后會(huì)對google的material design主要設(shè)計(jì)規(guī)范有更深刻、全面的了解。
眼看2017年就快完了，你是不是還沒完全搞懂material design呢?是嫌說明文檔太長，還是覺得自己英文不好?都沒關(guān)系，小編今天給大家整理了一份干貨滿滿的學(xué)習(xí)筆記，并列舉了一些國外的materialdesign優(yōu)秀案例及資源網(wǎng)站，相信你看后會(huì)對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í)踐，以及理念也要隨之提升。我們在自我挑戰(zhàn)，為用戶創(chuàng)造了一個(gè)可視化語言，它整合了優(yōu)秀設(shè)計(jì)的經(jīng)典原則和科學(xué)與技術(shù)的創(chuàng)新。這就是material design。”
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)的海拔高度，對它進(jìn)行操作會(huì)提升它的海拔高度，但我們可以注意到，同一種元素、同樣的操作，抬升的高度是一致的。這樣的話，開發(fā)人員也可以通過一個(gè)值來控制元素的海拔高度和投影。
5. pumperl gsund
website: https://www.pumperlgsund-bio.de/
跟dropbox business相反，這個(gè)網(wǎng)站用了兩種不同明亮度的綠色，在背景色中加入了一些不太顯眼的顏色，其余則以黑白色為主?？雌饋碛悬c(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
這是對于國外設(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 design
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ì)，希望讀了這篇文章對你有所幫助。但俗話說“巧婦難為無米之炊”，如果沒有一款好的工具，那么即使有再多的理論學(xué)習(xí)與積累，也難將想法實(shí)際落地。作為設(shè)計(jì)師、產(chǎn)品經(jīng)理從入門到精通的必備工具，mockplus是你的不二之選。