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