編輯導語：如果你不熟悉Material Design，請一口吃下這篇乾貨！本篇文章為您準備瞭最新的Material Design摺疊屏設計規範，跟著作者一起看看吧！
編輯導語：如果你不熟悉Material Design，請一口吃下這篇乾貨！本篇文章為您準備瞭最新的Material Design摺疊屏設計規範，跟著作者一起看看吧！
一、核心布局
核心布局是一係列大屏幕布局，作為設計和實現的起點。在為大屏幕適配 App 時，這些布局可以用來幫助定義布局和組織共同元素。
這些布局支持常見的活動，如內容瀏覽和消費，以及身臨其境的媒體體驗。
列錶詳情視圖
許多布局可以基於列錶和詳情之間的關係來建立。在屏幕左邊顯示列錶，右邊顯示列錶對應的詳情，可以在空間上建立它們之間的關係。隻能用於橫屏。在竪屏時，要考慮調整布局。列錶詳情視圖的用途包括：
列錶詳情視圖最好用於瀏覽內容和快速查看詳情信息。這對顯示一係列對話和文本信息、瀏覽文件和查看它們的詳情、瀏覽多個專輯封麵和它們各自的麯目的布局來說，都很有幫助。
即時通訊 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 協議
責任編輯：
