編輯導語：如果你不熟悉Material Design，請一口吃下這篇乾貨！本篇文章為您準備了最新的Material Design摺疊屏設計規範，跟著作者一起看看吧！
一、核心佈局
核心佈局是一系列大屏幕布局，作為設計和實現的起點。在為大螢幕適配 App 時，這些佈局可以用來幫助定義佈局和組織共同元素。
這些佈局支援常見的活動，如內容瀏覽和消費，以及身臨其境的媒體體驗。
列表詳情檢視
許多佈局可以基於列表和詳情之間的關係來建立。在螢幕左邊顯示列表，右邊顯示列表對應的詳情，可以在空間上建立它們之間的關係。只能用於橫屏。在豎屏時，要考慮調整佈局。列表詳情檢視的用途包括：
1. 佈局用例
列表詳情檢視最好用於瀏覽內容和快速檢視詳情資訊。這對顯示一系列對話和文字資訊、瀏覽檔案和檢視它們的詳情、瀏覽多個專輯封面和它們各自的曲目的佈局來說，都很有幫助。
即時通訊 App，顯示聯絡人列表和他們的對話
列表詳情檢視使用兩列，一列用於列表或條目組，另外一列用於詳情檢視。
1。 列表區域；2。 詳情區域
1:1 佈局
將螢幕分割為兩個相等的空間，來顯示列表和詳情。
郵件 App 使用 50/50 分割螢幕空間
1:2 佈局
如果列表上的內容可以輕鬆閱讀的話，也可以使用三分之一的列表和三分之二的詳情來劃分螢幕。
訊息 App 使用 1：2 劃分螢幕
頂部的應用欄可以放在詳情檢視內。
在滾動內容時看到詳情檢視內固定位置的頂部應用欄
當切換到豎屏模式時，最好使用單列布局，讓內容舒適地在狹窄的螢幕裡流動。
在豎屏模式下使用單列布局
如果在豎屏模式下使用列表詳情檢視，確保有足夠的空間來列表條目具備可讀性。
當心！ 確保在豎屏模式下有足夠的空間，使得列表條目易於閱讀。
當用戶從橫屏變成豎屏並選擇了一個條目時，在過渡到豎屏模式時顯示所選條目的詳情檢視。
當從橫屏（左圖）過渡到右圖時，如果使用者以及在列表中選中了條目，則在豎屏時顯示選中的內容。
如果使用者沒有做出選擇，在切換螢幕方向時返回到豎屏模式的列表檢視。
如果使用者沒有從列表中進行選擇，在豎屏模式以單一檢視顯示列表。
二、輔助面板（Supporting panel）
輔助面板佈局是一種擴充套件螢幕的方法。輔助面板佈局的用途包括：
注意：輔助面板與列表詳情檢視佈局不同，因為主要和次要的焦點同時是彼此不可分割的。
1. 佈局用例
輔助面板佈局透過使用佔據螢幕三分之二的詳情容器或焦點面板，和佔據剩餘空間的輔助面板，兩者配合創造一種焦點和輔助的關係。這種佈局適用於無縫鉸鏈裝置。
一個詳情容器或焦點面板佔據了螢幕的三分之二，而輔助面板則佔據了剩餘的空間。
螢幕分為焦點面板（左）和輔助面板（右）。
1。 焦點面板；2。 輔助面板
對於有物理鉸鏈的可摺疊裝置，最好將螢幕分成相等的兩半，用其中一半作為輔助面板。
如果裝置有物理鉸鏈，組合結構可以把一個面板作為焦點，另外一個顯示補充或輔助資訊。
在豎屏模式時，輔助面板可以放在焦點面板下面。
豎屏時，輔助面板可以放在焦點面板下面。
三、資訊流（Feed）
資訊流是新聞和社交 App 中常見的佈局。資訊流由多個卡片（tiles）構成，使用者透過卡片探索內容。
資訊流的整體互動體驗在移動裝置和可摺疊裝置上是相同的。在這兩種裝置尺寸上，開啟一個條目都會開啟一個新頁面；在可摺疊裝置中，由於螢幕尺寸更大，資訊流更具有沉浸感。
1. 佈局用例
資訊流可用於透過卡片和列表來顯示不同的內容。資訊流佈局支援內容和瀏覽，通常用於新聞或照片等 App。
透過卡片和列表展示各種內容，資訊流佈局支援內容發現和瀏覽。
資訊流可以使用卡片、列表、banner 和其他元素等元件，以呈現進入 App 的多個入口。
資訊流區域
資訊流允許內容元件擴充套件多個列，以創造為大螢幕最佳化的佈局。
內容元件在多列上擴充套件，建立為大螢幕最佳化的佈局。
四、主角式佈局（Hero）
主角式佈局優先考慮螢幕頂部的內容，並使用輔助面板。佈局的主角區域提供了專門的空間來突出單一內容。
譯者備註：主角式佈局（hero layout）來源於戲劇表演的 hero prop（主角/主要道具），指製作最精美，適合特寫鏡頭，用於凸顯最重點的部分。
1. 佈局用例
主角式佈局使用螢幕頂部為圖片、適配或輪播圖等元素提供更多的空間。這種佈局可以用於內容的詳情檢視，比如文章或者 App 商店中的 App。
主角式螢幕顯示一個帶有影片或圖片的輪播圖，並在下方顯示輔助面板。
在主角式佈局中，頂部區域使用大圖或影片作為螢幕上最突出的視覺元素。這種佈局可以與其他佈局相結合，如輔助面板。
主角式區域
在主角式螢幕中，後退按鈕幫助使用者導航回到前一個螢幕。
主角式螢幕顯示導航欄上的後退按鈕。
作者：龍爪槐守望者；公眾號：龍爪槐守望者
本文由 @龍爪槐守望者 原創釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於 CC0 協議