自適應介面設計

為了在不同大小螢幕（穿戴、手持、PC）上獲得統一的產品認知和使用體驗，材料設計提出了系列的規則和設計策略。以480, 600, 840, 960, 1280, 1440, 和1600dp作為斷點。根據螢幕的尺寸可以確定屬於那個斷點，以確定網格系統所需要的列數（4、8、12）和列間距的寬度（16、24）。

以600dp為分界點，寬度在600以下的螢幕同時只展示某一個層級的資訊（列表或詳情）；寬度在600以上的螢幕可以同時展示多個層級的資訊，列表頁和詳情頁同時展示。

不同斷點間螢幕上的介面相互切換適應的策略有：展現、轉變、分割、重排、擴充套件和移位。

1、展現，小螢幕上隱藏的UI資訊在螢幕增大時可以展現出來，如下圖所示本來隱藏在手機側邊導航中的選單項在平板的左側直接顯示出來了。這一點也和以600為分界的策略相呼應，在更大的螢幕上直接顯示出兩級資訊：

展現更多

2、轉變，介面元素從一個元件變為另一個元件，這一點也說明元件的使用並不是一成不變的，可以根據螢幕的大小選擇合適的元件。如下圖所示，側邊導航的選單項可能在大屏上顯示為標籤；小螢幕上的文字列表項可以在大屏上顯示為圖片網格列表：

元件轉換

3、分割，分層的資訊在一個大的空間裡鋪開：

層級分割

4、重排，介面元素可以重新排布以填滿新的空間：

重新排布

5、擴充，介面元素在大螢幕上展開為更大的尺寸：

擴充元素

6、移位，介面元素調整到更合適的位置：

移動位置

網格系統可以使介面視覺設計更為規整，靈活使用以上六種適配策略可以使產品在平臺上不同裝置間呈現合適的樣式。有助於使用者在不同裝置間無縫切換，配合使用。使產品在不同的生活場景下都能發揮出最大的效能。