Google I/O 2014發布了全新的設計語言Material Design（卡片式材料設計），它是迄今為止最受歡迎的視覺設計語言之一，利用了分層的卡片式設計、使用更多的空白和層次排版結構，經歷了幾年的迭代和提煉，來為手機、平板電腦、臺式機和「其他平臺」提供更一致、兼具外觀和功能的「外觀和感覺」。而且，不止於谷歌和安卓app。
事實上，多重層疊的概念並非谷歌首創，不過，谷歌對其進行了更深一層的開發——在觸覺體驗中滲入大膽活力的審美效果（本質設計）。那麼，其實，Material Design真正的優勢在哪呢？
首先，我們來具體了解一下Material Design：Material Design突破了谷歌以往的所有設計，包括柵格、風格、布局等，谷歌將其特點概括為擬物和扁平的結合。和蘋果以前的擬物設計並不盡相同，Material Design更關心系統反應的質感、層次、深度，和其他物體的疊放邏輯，比如打開頁面時，新頁面不是像以往那樣直接跳轉，而是從一個中心點擴展開來，並且利用原頁面在底部的投影營造出立體空間感，告訴用戶，頁面從哪裡來、到哪裡去，形成一種操作邏輯。從某種程度上來說，Material Design更像是把交互界面變成了一張張有邏輯順序的卡片紙。
Material誕生之初首先搭載的設備分別是Nexus 6智慧型手機和Nexus 9平板電腦，但後來延伸至其他所有設備，取得這樣的效果都是因為它植根於幾個原則：
1、原質化的視覺提示：設計結合實體物理屬性，參照了紙質和墨水材料的元素。
2、圖像式的、深思熟慮的：技術推動了視覺效果的變革，空間、尺度、色彩、圖像、排版等元素組成層次結構明顯的設計，一切都經過了慎密的考慮。
3、移動效果產生的意義：和物理世界接近的觸感可以讓用戶更為自然、快速地理解和認知。
認識「原質化外觀」:如前文所提到的，其實這個新型的設計我們可以將其理解為「數字紙」，然後組成這個這個框架的元素就是一層層「卡紙」，系統運行時就像翻開一張張由一定邏輯組合的卡紙。而與真正卡紙不同的是，Material可以改變它們的形狀和形式，比如拉伸和彎曲。
就如Mobile Design Trends 2015 & 2016所解釋的那樣，設計本身相當於一個內容和信息的裝載體。這個載體採用的是扁平化設計，但利用陰影展現出其層級形式就成為了與其他設計的區別特徵，其他設計或者是採用漸變、紋理等形式來區別層次。例如以下這個APP的界面，用戶進行最新的操作的菜單顯示於頂層，歷史操作路徑則變成灰色外觀處於底層。
在設計中建立起目錄的功能和與內容的聯繫，不僅使得操作更接近物理真實，而且建立起一種深度，多種要素疊加起來就像是創造了一個三維的世界。
Material為響應式設計而生分層式的設計根本上說是迎合了響應式設計的趨勢——每考慮一個層級的設計，就要考慮所有元素之間應該如何自動關聯。所以說，谷歌的扁平化並不只是把立體的設計效果壓扁，事實上，Material的扁平化設計更是功能上的簡化與重組。
值得一提的是，Material Design利用的是12柵格系統來約束網頁的內容區。谷歌當初推崇這套標準是因為，靈活的柵格設計能夠保證布局的一致性、以及由臨界點（breakpoint）逐步放大到面的打開方式能夠完整描述出APP的打開過程。
網頁柵格系統是從平面柵格系統中發展而來。柵格系統的使用，不僅可以讓頁面的信息呈現更加美觀，而且更具可用性，頁面響應也更加的靈活與規範。因為由於屏幕的限制，卡片式設計營造的空間感不一定能夠恰到好處地充滿整個屏幕，影響美觀，所以需要有一個東西來對之進行約束，這就是Material Design採用的12柵格系統。12柵格寬度對應屏幕的比值，即：12柵格寬度X佔比=屏幕寬（臨界點）。
而所謂臨界點，是指響應式頁面發生布局變化的關鍵點，例如「當屏幕寬度小於480px時加載一種樣式，而當寬度在480px至600px之間時加載另一種樣式」。理論上說，響應式頁面有無數種尺寸，但開發者不可能也沒有必要為每個尺寸都去做設計，而是只需要選定幾個臨界點做設計，在兩個臨界點之間是延續上一個臨界點的布局。
臨界點確認總體目的就是為了保證頁面在智慧型手機（小屏幕）、平板（中屏幕）、桌上型電腦（大屏幕）上加載相應的樣式，然而經驗較少的設計師往往會苦惱一個問題，那就是高像素的手機屏幕和低像素的平板屏幕應如何處理。例如設計師會擔心1080p的手機加載大屏幕頁面，或者720p的平板加載小屏幕頁面。
所以為了適應各種設備的屏幕和解析度，Material Design設定的臨界點像素包括了480、600、840、960、1280、1440和1600的像素梯度。這些參數給設計者在調整桌上型電腦、平板電腦和智慧型手機的界面時提供了一個尺寸的基準。
Material和其他移動界面設計趨勢越來越多的網站設計已在UI上走扁平式設計的路線，當谷歌創造了分層式界面連接時，其他系統也會加入到這場UI美學的變革當中。而Material Design為什麼能夠鶴立雞群呢？
其實，Material Design也是借鑑了其他扁平化設計的概念以及新潮的技術，甚至有些人會職責谷歌的Material Design與扁平化設計模式Flat Design 2.0太過雷同。
在Material的扁平化設計中，它仍舊使用了分層元素來營造三維空間，而且實質上是設計師將以往被淘汰的設計技巧重新拿了回來。因為本質上來說，扁平化的概念最核心的地方就是：去掉冗餘的裝飾效果，即去掉多餘的透視、紋理、漸變等等能做出3D效果的元素，讓「信息」本身重新作為核心被凸顯出來，並且在設計元素上強調抽象、極簡、符號化。但Material的成功就在於化腐朽為神奇，它重拾這些技巧最大的不同是，將其用於提高系統的實用性，而非裝飾性。
Material和其他設計模式最大的區別還在於，其配色方案已經最大限度地接近於扁平化設計美學。因為在扁平化設計中，配色是最重要的一環，它通常採用比其他風格更明亮更炫麗的顏色，而且還意味著更多的色調。其他設計最多只包含兩三種主要顏色，但是扁平化設計中會平均使用六到八種顏色。谷歌的Material正是如此，對於不同的選項會配有不一樣的顏色——明亮、絢麗、完全飽和的色調。
比如下圖這個APP界面，所有元素組合起來（圖片、標記、簡要文字、層疊）就簡單利落地展示了該應用要傳達的信心。這就體現了Material Design並不是為了營造視覺衝擊而堆疊這些圖片、陰影效果，而是它本身是功能的一部分，能夠輔助核心信息的突出。
當下的設備中，你似乎已經很難找到哪個界面不是由點到面，進而全屏顯示的，這就是一個不可逆轉額UI設計趨勢。
如今，不管是蘋果的設計語言，還是谷歌的設計語言，甚至於Windows的Modern UI 和Facebook的Paper設計語言，大方向都是朝著扁平化設計發展，而在細節上卻分道揚鑣。外媒表示，Material Design或許才更符合賈伯斯的設想。而隨著谷歌對Material Design的逐步開源，業內的設備或者APP產品設計都可以更容易地向Android式靠攏，所以未來或者會見到更多「Android apps」。
via TNW
雷鋒網原創文章，未經授權禁止轉載。詳情見轉載須知。