編輯導(dǎo)語(yǔ)：如果你不熟悉Material Design，請(qǐng)一口吃下這篇干貨！本篇文章為您準(zhǔn)備了最新的Material Design折疊屏設(shè)計(jì)規(guī)范，跟著作者一起看看吧！

一、核心布局

核心布局是一系列大屏幕布局，作為設(shè)計(jì)和實(shí)現(xiàn)的起點(diǎn)。在為大屏幕適配 App 時(shí)，這些布局可以用來(lái)幫助定義布局和組織共同元素。

這些布局支持常見(jiàn)的活動(dòng)，如內(nèi)容瀏覽和消費(fèi)，以及身臨其境的媒體體驗(yàn)。

列表詳情視圖

許多布局可以基于列表和詳情之間的關(guān)系來(lái)建立。在屏幕左邊顯示列表，右邊顯示列表對(duì)應(yīng)的詳情，可以在空間上建立它們之間的關(guān)系。只能用于橫屏。在豎屏?xí)r，要考慮調(diào)整布局。列表詳情視圖的用途包括：

1. 文本消息和對(duì)話
2. 文件瀏覽器和打開(kāi)的文件夾
3. 音樂(lè)家和專輯

1. 布局用例

列表詳情視圖最好用于瀏覽內(nèi)容和快速查看詳情信息。這對(duì)顯示一系列對(duì)話和文本信息、瀏覽文件和查看它們的詳情、瀏覽多個(gè)專輯封面和它們各自的曲目的布局來(lái)說(shuō)，都很有幫助。

即時(shí)通訊 App，顯示聯(lián)系人列表和他們的對(duì)話

列表詳情視圖使用兩列，一列用于列表或條目組，另外一列用于詳情視圖。

1. 列表區(qū)域；2. 詳情區(qū)域

1:1 布局

將屏幕分割為兩個(gè)相等的空間，來(lái)顯示列表和詳情。

郵件 App 使用 50/50 分割屏幕空間

1:2 布局

如果列表上的內(nèi)容可以輕松閱讀的話，也可以使用三分之一的列表和三分之二的詳情來(lái)劃分屏幕。

消息 App 使用 1:2 劃分屏幕

頂部的應(yīng)用欄可以放在詳情視圖內(nèi)。

在滾動(dòng)內(nèi)容時(shí)看到詳情視圖內(nèi)固定位置的頂部應(yīng)用欄

當(dāng)切換到豎屏模式時(shí)，最好使用單列布局，讓內(nèi)容舒適地在狹窄的屏幕里流動(dòng)。

在豎屏模式下使用單列布局

如果在豎屏模式下使用列表詳情視圖，確保有足夠的空間來(lái)列表?xiàng)l目具備可讀性。

當(dāng)心！ 確保在豎屏模式下有足夠的空間，使得列表?xiàng)l目易于閱讀。

當(dāng)用戶從橫屏變成豎屏并選擇了一個(gè)條目時(shí)，在過(guò)渡到豎屏模式時(shí)顯示所選條目的詳情視圖。

當(dāng)從橫屏（左圖）過(guò)渡到右圖時(shí)，如果用戶以及在列表中選中了條目，則在豎屏?xí)r顯示選中的內(nèi)容。

如果用戶沒(méi)有做出選擇，在切換屏幕方向時(shí)返回到豎屏模式的列表視圖。

如果用戶沒(méi)有從列表中進(jìn)行選擇，在豎屏模式以單一視圖顯示列表。

二、輔助面板（Supporting panel）

輔助面板布局是一種擴(kuò)展屏幕的方法。輔助面板布局的用途包括：

1. 生產(chǎn)力軟件
2. Word 文檔和評(píng)論

注意：輔助面板與列表詳情視圖布局不同，因?yàn)橹饕痛我慕裹c(diǎn)同時(shí)是彼此不可分割的。

1. 布局用例

輔助面板布局通過(guò)使用占據(jù)屏幕三分之二的詳情容器或焦點(diǎn)面板，和占據(jù)剩余空間的輔助面板，兩者配合創(chuàng)造一種焦點(diǎn)和輔助的關(guān)系。這種布局適用于無(wú)縫鉸鏈設(shè)備。

一個(gè)詳情容器或焦點(diǎn)面板占據(jù)了屏幕的三分之二，而輔助面板則占據(jù)了剩余的空間。

屏幕分為焦點(diǎn)面板（左）和輔助面板（右）。

1. 焦點(diǎn)面板；2. 輔助面板

對(duì)于有物理鉸鏈的可折疊設(shè)備，最好將屏幕分成相等的兩半，用其中一半作為輔助面板。

如果設(shè)備有物理鉸鏈，組合結(jié)構(gòu)可以把一個(gè)面板作為焦點(diǎn)，另外一個(gè)顯示補(bǔ)充或輔助信息。

在豎屏模式時(shí)，輔助面板可以放在焦點(diǎn)面板下面。

豎屏?xí)r，輔助面板可以放在焦點(diǎn)面板下面。

三、信息流（Feed）

信息流是新聞和社交 App 中常見(jiàn)的布局。信息流由多個(gè)卡片（tiles）構(gòu)成，用戶通過(guò)卡片探索內(nèi)容。

信息流的整體交互體驗(yàn)在移動(dòng)設(shè)備和可折疊設(shè)備上是相同的。在這兩種設(shè)備尺寸上，打開(kāi)一個(gè)條目都會(huì)打開(kāi)一個(gè)新頁(yè)面；在可折疊設(shè)備中，由于屏幕尺寸更大，信息流更具有沉浸感。

1. 布局用例

信息流可用于通過(guò)卡片和列表來(lái)顯示不同的內(nèi)容。信息流布局支持內(nèi)容和瀏覽，通常用于新聞或照片等 App。

通過(guò)卡片和列表展示各種內(nèi)容，信息流布局支持內(nèi)容發(fā)現(xiàn)和瀏覽。

信息流可以使用卡片、列表、banner 和其他元素等組件，以呈現(xiàn)進(jìn)入 App 的多個(gè)入口。

信息流區(qū)域

信息流允許內(nèi)容組件擴(kuò)展多個(gè)列，以創(chuàng)造為大屏幕優(yōu)化的布局。

內(nèi)容組件在多列上擴(kuò)展，創(chuàng)建為大屏幕優(yōu)化的布局。

四、主角式布局（Hero）

主角式布局優(yōu)先考慮屏幕頂部的內(nèi)容，并使用輔助面板。布局的主角區(qū)域提供了專門的空間來(lái)突出單一內(nèi)容。

譯者備注：主角式布局（hero layout）來(lái)源于戲劇表演的 hero prop（主角/主要道具），指制作最精美，適合特寫鏡頭，用于凸顯最重點(diǎn)的部分。

1. 布局用例

主角式布局使用屏幕頂部為圖片、適配或輪播圖等元素提供更多的空間。這種布局可以用于內(nèi)容的詳情視圖，比如文章或者 App 商店中的 App。

主角式屏幕顯示一個(gè)帶有視頻或圖片的輪播圖，并在下方顯示輔助面板。

在主角式布局中，頂部區(qū)域使用大圖或視頻作為屏幕上最突出的視覺(jué)元素。這種布局可以與其他布局相結(jié)合，如輔助面板。

主角式區(qū)域

在主角式屏幕中，后退按鈕幫助用戶導(dǎo)航回到前一個(gè)屏幕。

主角式屏幕顯示導(dǎo)航欄上的后退按鈕。

作者：龍爪槐守望者；公眾號(hào)：龍爪槐守望者

本文由 @龍爪槐守望者 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議