昨天我們用嚴肅的態度去了解 Material Design 基礎介紹與章節架構後，今天讓我們用比較輕鬆的心情將 Material 章節拆解細分，一天天拼出完整的 Material Design 吧。

Environment 環境

• Surfaces 表面
• Elevation 高度
• Light and shadows 光影

Surfaces 表面

3D 空間的設計概念含有光、表面和陰影，可以像積木般堆疊或接續擺放，但不能互相穿過 除非是阿飄那就是另一個領域了 ，除了讓設計物更立體外也讓介面設計多了更多的畫面層次。

本圖片截取自 Material Design。

在 UI 設計上同樣運用了 3D 空間與曲面的移動方式，使用光、表面和陰影來表示 3D 空間，所有素材都具有 x 、y 、 z 軸的 3D 空間。尺寸及厚度以 dp 為單位變化。

Material 元件外型、尺寸、高度和寬度都可以變化，在不同高度的材質表面上投射陰影。而陰影會根據不同材質、遠近、高度變化，在這些條件下陰影模糊程度、顏色、樣貌都會有不同狀態，可以在元件上色及增加材質或圖片，增加質感不會增加元素的厚度。

Material 有著無限大的解析度。可以改變形狀放大縮小也可以改變透明度，元素表面可以連接在一起成為同一個元素表面，也可以分裂並重新變成整體；可以在任何地方設計元素或刪除，元素無法被摺疊或彎曲凹折；在元素間可以設定轉場動畫及交互作用的互動效果。

Material 基本屬性定義元素表面是不透明的白色，厚度為 1dp，並投射陰影。可以固定元素表面尺寸，在所有互動狀態下，表面保持原有大小。

元件表面呈現方式：

1. 剛硬表面在所有互動狀態中保持相同大小。
2. 可延伸表面可以沿著一個或多個邊緣拉長或收縮，直到最大限制後就無法再增長。
3. 可視窗化的表面在整個互動過程中保持相同的大小。他們可以在區域內滾動時顯示其他內容，直到滾動到內容最底部後則無法再往下滾動區域。

Material 畫面具有豐富的變化，包含多個可水平移動的畫面、可延伸的表面、當畫面內容過多時，可以沿任何方向移動，儘管一次只能將移動限制在一個軸上。畫面可以是透明、半透明或不透明的。透明和半透明畫面可能需要背景保持清晰度。

當畫面有彈跳視窗或是警告視窗，為了引起使用者注意，遠離遠本聚焦的畫面區塊，則有幾種方法 :

** 跳出的視窗下層所有內容變暗或變亮
** 跳出的視窗下層所有內容減少不透明度

Elevation 高度

高度是沿 z 軸的兩個表面之間的相對距離。

元件高度值單位為 dp ( 關於 dp 單位介紹 )
1.側邊攔選單：16dp
2.應用欄：4dp
3.內容視窗：1dp~8dp
4.FAB：6dp
5.按鈕：2dp~8dp
6.對話框：24dp

本圖片截取自 Material Design。

Material 兩元件高度測量方式為從底層元件正面到另一個元件表面的距離，所有元件元素都有高度，可以在 Z 軸前後移動，在最上方的元件元素繪製陰影，也可以用顏色及不透明度來表現高度關係。

元件高度觀念比較像我們設計軟體中常見的圖層設定、圖層關係排版等設計，基本的介面設計常見區塊有應用欄位、內容畫面、操作按鈕...等等。在使用者點擊時藉由改變顏色及陰影來表示元件高度。

不論元素在畫面移動或是靜止狀態下請減少與其他元素發生重疊的狀況，可以設定移開或是淡出畫面的互動狀態。不要讓重要的內容被上層元件遮擋而無法觀看，用戶想觀看內文時卻被按鈕獲跳出視窗遮擋無法觀看內文，只好放棄離開，這些都會造成不好的使用者體驗。

在顯示元素間的高度時，可以善用邊框、顏色、陰影、透明度，尤其當元件因為設計或重疊時，讓元件與元件間產生區隔，其中陰影可以顯示表面邊緣，表面重疊和高度。不同的表面顏色及不透明度會顯示表面邊緣和重疊，但不顯示高度。

為了區隔前方元件和後方資訊，可以增加背景模糊、減少背景亮度和增加元件陰影，陰影的大小和模糊及擴散程度都能表現兩個表面之間的距離。例如: 陰影較小且較銳利的元素表示非常靠近後方的元素。更大更柔和的陰影表示距離更遠。

透過陰影的變化、物體的重疊、移動畫面、縮放畫面、視差展現和結合動畫，都可以讓使用者辨別畫面深度感，並將焦點放在前景內容上。

元件之間的相關程度可以用高度來表現，在畫面最上方的元件通常包含更多重要內容，需要吸引使用者注意力，控制後方的物體，例如: 應用欄中的操作。相同高度的元件內容通常具有同樣的訊息重要性，通過調整畫面排版建立層次級別來傳達層次結構間的差異。例如: 在同一個畫面高度或圖層中根據文字的顯示方向排版。

Material 對所有元素都有相關的前後放置建議，dp 值越高則放置越上層，例如: 對話框、幫助提示，這些元件經常出現在所有元件的前方。

本圖片截取自 Material Design - Table of default elevation values 元件預設高度表。

本圖片截取自 Material Design - Diagram of default elevation values 可以從這個切面圖觀察多個元件的靜態高度和動態高度。

Light and shadows 光影

前面提到了許多陰影與元件間的關連與使用方法，在 Material 中有分為主要燈光和環境燈光，主要燈光會照射出更銳利的定向陰影，環境光從各個角度出現，創造分散的柔和陰影，兩種燈光在照射時被元件阻擋，在元件後方描繪出陰影。

陰影表示元件之間的高度，因此在整個產品中要注意元件與陰影的設計。當元件改變形狀而高度不變則不需要改變陰影參數，若元件改變高度時陰影也要跟著改變參數。

Material 對 15 位視力較低的使用者進行了 36 次採訪，以採訪的方式更深入的理解陰影和輪廓如何影響個人識別和與元件互動的關係。

研究結果包括：

• 陰影和輪廓只是影響使用者識別元件的眾多原因之一。影響識別元件能力的其他因素包括字體、高度、顏色、周圍元素之間的排版以及使用環境。
• 使用陰影和輪廓可以提高用戶在頁面間尋找內容的速度和便利性。
• 在元件周圍使用邊框或陰影可以讓使用者直覺選取並操作該元件或與該元件互動。

今天我們了解到 Material Environment (環境) 中表面、高度、光影間的密切關係，明天讓我們從 Layout (排版) 開始，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~