Material Design的前世今生

說起平面設計的視覺語言，相信很多人都能脫口而出目前廣泛推行的幾大視覺設計語言：Google的Material Design、Apple的Apple Design、Microsoft的Fluent Design等等……那麼，目前廣為流行的Material Design設計語言的前世今生，到底是怎樣的呢？

早在MD誕生的2014年之前，Google在Android上就有了自己的設計語言——和當時流行的其他設計風格（如iOS 6）一樣：擬物化、質感風格、強烈的陰影和高光等等。

早在Google I/O 2014大會召開之前，谷歌就透露了一種全新的設計語言——名叫Paper Design。該設計透露出了大量的扁平（Flat）、層次（Layers）、長陰影（Long Shadow）等元素。隨著大會的召開，谷歌正式宣布了一種全新的設計風格：Material Design。自Android 2.x時代的擬物設計，Android 3~4的Holo風格以來，Android Design正式更名為Material Design。

「我們希望創造一種獨一無二的底層系統，在這個系統的基礎之上，構建跨平台和超越設備尺寸的統一體驗。遵循基本的移動設計定則，同時支持觸摸、語音、滑鼠、鍵盤等輸入方式。」

Material Design突破了谷歌以往的所有設計，包括柵格、風格、布局等，谷歌將其特點概括為擬物和扁平的結合。和蘋果以前的擬物設計並不盡相同，Material Design更關心系統反應的質感、層次、深度，和其他物體的疊放邏輯。

比如打開頁面時，新頁面不是像以往那樣直接跳轉，而是從一個中心點擴展開來，並且利用原頁面在底部的投影營造出立體空間感，告訴用戶，頁面從哪裡來、到哪裡去，形成一種操作邏輯。從某種程度上來說，Material Design更像是把交互界面變成了一張張有邏輯順序的卡片紙。所以說，「紙墨」元素，正是MD的靈魂。

「我們利用了分層的卡片式設計、使用更多的空白和層次排版結構，經歷了幾年的迭代和提煉，來為手機、平板電腦、台式機和「其他平台」提供更一致、兼具外觀和功能的「外觀和感覺」。而且，不止於谷歌和安卓APP。「

那麼，MD到底是什麼呢？

總的來說，MD可以簡單的看作為以下兩種元素組成

• 三維世界（3D world）
• 光影關係（Light and shadow）

三維世界：在MD規範中，界面控制項之間的元素並不是單純的」壓「在一起，而是通過dp區分厚度，是一個」擁有著厚度「的空間。

」Material 環境是一個三維的空間，這意味著每個對象都有 x ， y ， z 三維坐標屬性，z 軸垂直於顯示平面，並延伸向用戶視角,每個 material 元素在 z 軸上佔據一定的位置並且有一個 1dp 厚度的標準。 在網頁上，z 軸被用來分層而不是為了視角。3D 空間通過操縱 y 軸進行模擬。「

光影關係：MD的UI中，存在著一種」虛擬的光「。光線照射著每一個控制項，併產生了dp不同的陰影。」真實感「由此構建。

」在 material 環境中，虛擬的光線照射使場景中的對象投射出陰影，主光源投射出一個定向的陰影，而環境光從各個角度投射出連貫又柔和的陰影。

material 環境中的所有陰影都是由這兩種光投射產生的，陰影是光線照射不到的地方，因為各個元素在z軸上佔據了不同大小的位置遮擋住了這些光線。「

既然名字叫Material，MD設計自然離不開材料了：在MD中，材料擁有確定不變的特性和固定的行為，這與 Material Design 的構想是一致的。

物理特性

材料具有變化的長寬尺寸（以 dp 為計）和均勻的厚度（1dp）。

• 材料總是 1dp 厚。
• 材料會形成陰影。
• 陰影是由於材料元件之間的相對高度（Z 軸位置）而自然產生的。

動畫：MD十分重視動畫效果，它反覆強調一點：動畫不只是裝飾。

MD的實際應用

談完了Material Design的設計，下面讓我們來欣賞一下典型MD設計的APP吧！

（截圖為本人手機）

以上！

嘛...這裡是陽光醬...犯懶不想寫文章...

本篇文章是為了小愛同學(劃掉)參加辣辣老師的徵文活動而寫的

喜歡的話請點個贊～

參考資料：