Google I/O 2014發(fā)布了全新的設(shè)計(jì)語言Material Design（卡片式材料設(shè)計(jì)），它是迄今為止最受歡迎的視覺設(shè)計(jì)語言之一，利用了分層的卡片式設(shè)計(jì)、使用更多的空白和層次排版結(jié)構(gòu)，經(jīng)歷了幾年的迭代和提煉，來為手機(jī)、平板電腦、臺(tái)式機(jī)和“其他平臺(tái)”提供更一致、兼具外觀和功能的“外觀和感覺”。而且，不止于谷歌和安卓app。

事實(shí)上，多重層疊的概念并非谷歌首創(chuàng)，不過，谷歌對(duì)其進(jìn)行了更深一層的開發(fā)——在觸覺體驗(yàn)中滲入大膽活力的審美效果（本質(zhì)設(shè)計(jì)）。那么，其實(shí)，Material Design真正的優(yōu)勢(shì)在哪呢？

首先，我們來具體了解一下Material Design：

Material Design突破了谷歌以往的所有設(shè)計(jì)，包括柵格、風(fēng)格、布局等，谷歌將其特點(diǎn)概括為擬物和扁平的結(jié)合。和蘋果以前的擬物設(shè)計(jì)并不盡相同，Material Design更關(guān)心系統(tǒng)反應(yīng)的質(zhì)感、層次、深度，和其他物體的疊放邏輯，比如打開頁面時(shí)，新頁面不是像以往那樣直接跳轉(zhuǎn)，而是從一個(gè)中心點(diǎn)擴(kuò)展開來，并且利用原頁面在底部的投影營(yíng)造出立體空間感，告訴用戶，頁面從哪里來、到哪里去，形成一種操作邏輯。從某種程度上來說，Material Design更像是把交互界面變成了一張張有邏輯順序的卡片紙。

Material誕生之初首先搭載的設(shè)備分別是Nexus 6智能手機(jī)和Nexus 9平板電腦，但后來延伸至其他所有設(shè)備，取得這樣的效果都是因?yàn)樗哺趲讉€(gè)原則：

1、原質(zhì)化的視覺提示：設(shè)計(jì)結(jié)合實(shí)體物理屬性，參照了紙質(zhì)和墨水材料的元素。

2、圖像式的、深思熟慮的：技術(shù)推動(dòng)了視覺效果的變革，空間、尺度、色彩、圖像、排版等元素組成層次結(jié)構(gòu)明顯的設(shè)計(jì)，一切都經(jīng)過了慎密的考慮。

3、移動(dòng)效果產(chǎn)生的意義：和物理世界接近的觸感可以讓用戶更為自然、快速地理解和認(rèn)知。

認(rèn)識(shí)“原質(zhì)化外觀”:

如前文所提到的，其實(shí)這個(gè)新型的設(shè)計(jì)我們可以將其理解為“數(shù)字紙”，然后組成這個(gè)這個(gè)框架的元素就是一層層“卡紙”，系統(tǒng)運(yùn)行時(shí)就像翻開一張張由一定邏輯組合的卡紙。而與真正卡紙不同的是，Material可以改變它們的形狀和形式，比如拉伸和彎曲。

就如Mobile Design Trends 2015 & 2016所解釋的那樣，設(shè)計(jì)本身相當(dāng)于一個(gè)內(nèi)容和信息的裝載體。這個(gè)載體采用的是扁平化設(shè)計(jì)，但利用陰影展現(xiàn)出其層級(jí)形式就成為了與其他設(shè)計(jì)的區(qū)別特征，其他設(shè)計(jì)或者是采用漸變、紋理等形式來區(qū)別層次。例如以下這個(gè)APP的界面，用戶進(jìn)行最新的操作的菜單顯示于頂層，歷史操作路徑則變成灰色外觀處于底層。

在設(shè)計(jì)中建立起目錄的功能和與內(nèi)容的聯(lián)系，不僅使得操作更接近物理真實(shí)，而且建立起一種深度，多種要素疊加起來就像是創(chuàng)造了一個(gè)三維的世界。

Material為響應(yīng)式設(shè)計(jì)而生

分層式的設(shè)計(jì)根本上說是迎合了響應(yīng)式設(shè)計(jì)的趨勢(shì)——每考慮一個(gè)層級(jí)的設(shè)計(jì)，就要考慮所有元素之間應(yīng)該如何自動(dòng)關(guān)聯(lián)。所以說，谷歌的扁平化并不只是把立體的設(shè)計(jì)效果壓扁，事實(shí)上，Material的扁平化設(shè)計(jì)更是功能上的簡(jiǎn)化與重組。

值得一提的是，Material Design利用的是12柵格系統(tǒng)來約束網(wǎng)頁的內(nèi)容區(qū)。谷歌當(dāng)初推崇這套標(biāo)準(zhǔn)是因?yàn)?，靈活的柵格設(shè)計(jì)能夠保證布局的一致性、以及由臨界點(diǎn)（breakpoint）逐步放大到面的打開方式能夠完整描述出APP的打開過程。

網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。柵格系統(tǒng)的使用，不僅可以讓頁面的信息呈現(xiàn)更加美觀，而且更具可用性，頁面響應(yīng)也更加的靈活與規(guī)范。因?yàn)橛捎谄聊坏南拗疲ㄆ皆O(shè)計(jì)營(yíng)造的空間感不一定能夠恰到好處地充滿整個(gè)屏幕，影響美觀，所以需要有一個(gè)東西來對(duì)之進(jìn)行約束，這就是Material Design采用的12柵格系統(tǒng)。12柵格寬度對(duì)應(yīng)屏幕的比值，即：12柵格寬度X占比=屏幕寬（臨界點(diǎn)）。

而所謂臨界點(diǎn)，是指響應(yīng)式頁面發(fā)生布局變化的關(guān)鍵點(diǎn)，例如“當(dāng)屏幕寬度小于480px時(shí)加載一種樣式，而當(dāng)寬度在480px至600px之間時(shí)加載另一種樣式”。理論上說，響應(yīng)式頁面有無數(shù)種尺寸，但開發(fā)者不可能也沒有必要為每個(gè)尺寸都去做設(shè)計(jì)，而是只需要選定幾個(gè)臨界點(diǎn)做設(shè)計(jì)，在兩個(gè)臨界點(diǎn)之間是延續(xù)上一個(gè)臨界點(diǎn)的布局。

臨界點(diǎn)確認(rèn)總體目的就是為了保證頁面在智能手機(jī)（小屏幕）、平板（中屏幕）、臺(tái)式電腦（大屏幕）上加載相應(yīng)的樣式，然而經(jīng)驗(yàn)較少的設(shè)計(jì)師往往會(huì)苦惱一個(gè)問題，那就是高像素的手機(jī)屏幕和低像素的平板屏幕應(yīng)如何處理。例如設(shè)計(jì)師會(huì)擔(dān)心1080p的手機(jī)加載大屏幕頁面，或者720p的平板加載小屏幕頁面。

所以為了適應(yīng)各種設(shè)備的屏幕和分辨率，Material Design設(shè)定的臨界點(diǎn)像素包括了480、600、840、960、1280、1440和1600的像素梯度。這些參數(shù)給設(shè)計(jì)者在調(diào)整臺(tái)式電腦、平板電腦和智能手機(jī)的界面時(shí)提供了一個(gè)尺寸的基準(zhǔn)。

Material和其他移動(dòng)界面設(shè)計(jì)趨勢(shì)

越來越多的網(wǎng)站設(shè)計(jì)已在UI上走扁平式設(shè)計(jì)的路線，當(dāng)谷歌創(chuàng)造了分層式界面連接時(shí)，其他系統(tǒng)也會(huì)加入到這場(chǎng)UI美學(xué)的變革當(dāng)中。而Material Design為什么能夠鶴立雞群呢？

其實(shí)，Material Design也是借鑒了其他扁平化設(shè)計(jì)的概念以及新潮的技術(shù)，甚至有些人會(huì)職責(zé)谷歌的Material Design與扁平化設(shè)計(jì)模式Flat Design 2.0太過雷同。

在Material的扁平化設(shè)計(jì)中，它仍舊使用了分層元素來營(yíng)造三維空間，而且實(shí)質(zhì)上是設(shè)計(jì)師將以往被淘汰的設(shè)計(jì)技巧重新拿了回來。因?yàn)楸举|(zhì)上來說，扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，即去掉多余的透視、紋理、漸變等等能做出3D效果的元素，讓“信息”本身重新作為核心被凸顯出來，并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化。但Material的成功就在于化腐朽為神奇，它重拾這些技巧最大的不同是，將其用于提高系統(tǒng)的實(shí)用性，而非裝飾性。

Material和其他設(shè)計(jì)模式最大的區(qū)別還在于，其配色方案已經(jīng)最大限度地接近于扁平化設(shè)計(jì)美學(xué)。因?yàn)樵诒馄交O(shè)計(jì)中，配色是最重要的一環(huán)，它通常采用比其他風(fēng)格更明亮更炫麗的顏色，而且還意味著更多的色調(diào)。其他設(shè)計(jì)最多只包含兩三種主要顏色，但是扁平化設(shè)計(jì)中會(huì)平均使用六到八種顏色。谷歌的Material正是如此，對(duì)于不同的選項(xiàng)會(huì)配有不一樣的顏色——明亮、絢麗、完全飽和的色調(diào)。

比如下圖這個(gè)APP界面，所有元素組合起來（圖片、標(biāo)記、簡(jiǎn)要文字、層疊）就簡(jiǎn)單利落地展示了該應(yīng)用要傳達(dá)的信心。這就體現(xiàn)了Material Design并不是為了營(yíng)造視覺沖擊而堆疊這些圖片、陰影效果，而是它本身是功能的一部分，能夠輔助核心信息的突出。

當(dāng)下的設(shè)備中，你似乎已經(jīng)很難找到哪個(gè)界面不是由點(diǎn)到面，進(jìn)而全屏顯示的，這就是一個(gè)不可逆轉(zhuǎn)額UI設(shè)計(jì)趨勢(shì)。

如今，不管是蘋果的設(shè)計(jì)語言，還是谷歌的設(shè)計(jì)語言，甚至于Windows的Modern UI 和Facebook的Paper設(shè)計(jì)語言，大方向都是朝著扁平化設(shè)計(jì)發(fā)展，而在細(xì)節(jié)上卻分道揚(yáng)鑣。外媒表示，Material Design或許才更符合喬布斯的設(shè)想。而隨著谷歌對(duì)Material Design的逐步開源，業(yè)內(nèi)的設(shè)備或者APP產(chǎn)品設(shè)計(jì)都可以更容易地向Android式靠攏，所以未來或者會(huì)見到更多“Android apps”。

via TNW

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。