概述

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-goals-landingimage_large_mdpi.png" alt="" />

我們挑戰(zhàn)自我，為用戶創(chuàng)造了嶄新的視覺(jué)設(shè)計(jì)語(yǔ)言。與此同時(shí)，新的設(shè)計(jì)語(yǔ)言除了遵循經(jīng)典設(shè)計(jì)定則，還汲取了最新的科技，秉承了創(chuàng)新的設(shè)計(jì)理念。這就是原質(zhì)化設(shè)計(jì)(Material Design)。這份文檔是動(dòng)態(tài)更新的，將會(huì)隨著我們對(duì) Material Design 的探索而不斷迭代、升級(jí)。

目標(biāo)

我們希冀創(chuàng)造一種新的視覺(jué)設(shè)計(jì)語(yǔ)言，能夠遵循優(yōu)秀設(shè)計(jì)的經(jīng)典定則，同時(shí)還伴有創(chuàng)新理念和新的科技。

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-goals-swirlanddot_large_mdpi.png" alt="materialdesign-goals" />

我們希望創(chuàng)造一種獨(dú)一無(wú)二的底層系統(tǒng)，在這個(gè)系統(tǒng)的基礎(chǔ)之上，構(gòu)建跨平臺(tái)和超越設(shè)備尺寸的統(tǒng)一體驗(yàn)。遵循基本的移動(dòng)設(shè)計(jì)定則，同時(shí)支持觸摸、語(yǔ)音、鼠標(biāo)、鍵盤等輸入方式。

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-goals-cutrectangles_large_mdpi.png" alt="materialdesign-goals-cutrectangles" />

設(shè)計(jì)原則

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-principles-layersquares_large_mdpi.png" alt="materialdesign-principles-layersquares" />

實(shí)體感就是(通過(guò)設(shè)計(jì)方式來(lái)表達(dá))隱喻

通過(guò)構(gòu)建系統(tǒng)化的動(dòng)效和空間合理化利用，并將兩個(gè)理念合二為一，構(gòu)成了實(shí)體隱喻。與眾不同的觸感是實(shí)體的基礎(chǔ)，這一靈感來(lái)自我們對(duì)紙墨的研究，但是我們相信，隨著科技的進(jìn)步，應(yīng)用前景將不可估量。

實(shí)體的表面和邊緣提供基于真實(shí)效果的視覺(jué)體驗(yàn)，熟悉的觸感讓用戶可以快速地理解和認(rèn)知。實(shí)體的多樣性可以讓我們呈現(xiàn)出更多反映真實(shí)世界的設(shè)計(jì)效果，但同時(shí)又絕不會(huì)脫離客觀的物理規(guī)律。

光效、表面質(zhì)感、運(yùn)動(dòng)感這三點(diǎn)是解釋物體運(yùn)動(dòng)規(guī)律、交互方式、空間關(guān)系的關(guān)鍵。真實(shí)的光效可以解釋物體之間的交合關(guān)系、空間關(guān)系，以及單個(gè)物體的運(yùn)動(dòng)。

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-principles-circleplus_large_mdpi.png" alt="materialdesign-principles-circleplus_large_mdpi.png" />

鮮明、形象、深思熟慮

新的視覺(jué)語(yǔ)言，在基本元素的處理上，借鑒了傳統(tǒng)的印刷設(shè)計(jì)——排版、網(wǎng)格、空間、比例、配色、圖像使用——這些基礎(chǔ)的平面設(shè)計(jì)規(guī)范。在這些設(shè)計(jì)基礎(chǔ)上下功夫，不但可以愉悅用戶，而且能夠構(gòu)建出視覺(jué)層級(jí)、視覺(jué)意義以及視覺(jué)聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構(gòu)建出鮮明、形象的用戶界面，讓用戶沉浸其中。

Material Design 設(shè)計(jì)語(yǔ)言強(qiáng)調(diào)根據(jù)用戶行為凸顯核心功能，進(jìn)而為用戶提供操作指引。

http://wiki.jikexueyuan.com/project/material-design/images/materialdesign-principles-flyingsquare_large_mdpi.png" alt="materialdesign-principles-flyingsquare" />

有意義的動(dòng)畫效果

動(dòng)畫效果(簡(jiǎn)稱動(dòng)效)可以有效地暗示、指引用戶。動(dòng)效的設(shè)計(jì)要根據(jù)用戶行為而定，能夠改變整體設(shè)計(jì)的觸感。

動(dòng)效應(yīng)當(dāng)在獨(dú)立的場(chǎng)景呈現(xiàn)。通過(guò)動(dòng)效，讓物體的變化以更連續(xù)、更平滑的方式呈現(xiàn)給用戶，讓用戶能夠充分知曉所發(fā)生的變化。

動(dòng)效應(yīng)該是有意義的、合理的，動(dòng)效的目的是為了吸引用戶的注意力，以及維持整個(gè)系統(tǒng)的連續(xù)性體驗(yàn)。動(dòng)效反饋需細(xì)膩、清爽。轉(zhuǎn)場(chǎng)動(dòng)效需高效、明晰。

原文：Introduction 翻譯：iceskysl 校對(duì)：siton