Backdrop 背景

這是一個翻譯系列，原文是谷歌18年所出的材料設計指南（文末有鏈接），強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇，一共百余篇，歡迎關注哦。

App中所有表面后面都會有一個背景，顯示上下文和可操作的內容。

目錄

1. 用法
2. 剖析
3. 行為
4. 主題化
5. 規格

用法

背景由兩個表面組成：后層和前層。后層顯示操作和情景，并控制和推出前層的內容。

1. 后層
2. 前層

1. 收起時，后層可以提供有關前層的語境信息。
2. 顯示時，后層顯示與前層相關的上下文控件。

原則

剖析

背景由后層，前層和可選的副標題組成。在同一時刻后層或前層只有一個可以被激活。

1.后層

2.前層

3.副標題（可選）

激活的前層

前層始終出現在后層的前面。它以全寬顯示并裝載主要內容。

前層可以包含瀏覽組件，例如：

1. 文字列表
2. 圖像列表
3. 卡片
4. 文本
   

當前層激活時，后層帶有展開操作（1）。點擊它將展開后層。

副標題（可選）

副標題是前層的固定區域，包含標題和可選的圖標。

副標題可以固定位置，而其下面的內容獨立滾動。

前層上的副標題（A）和可滾動內容區域（B）都具有1dp的海拔。

激活的后層

后層在App中海拔最低（0dp）并填滿整個背景。它包含與前層相關的可操作內容。

后層包含用于導航或過濾的組件，例如：

1. 導航
   
2. 步進器
   
3. 文本字段
   
4. 選擇控件

這些組件會影響前層的內容。

A：后層的海拔為0dp。

當后層處于激活狀態時，前層可以用文本和圖標或遮罩來掩蓋后層。

1. 圖標和文字
   
2. 遮罩

行為

展開后層

可以通過點擊后層的任何操作來展開后層。

通過點擊菜單圖標（1）可以顯示該后層。

可以通過點擊任何輸入字段（1,2,3）來顯示該后層。

不要在前層用滑動手勢來顯示后層。

當后層展開時，前層滑出視野。

后層的高度取決于其內容的大小。

收起后層

后層可以通過與前層交互或在任一層上點擊隱藏操作來收起。

可以通過點擊后層關閉圖標（1），整個前層（2）或前層箭頭（3）來收隱藏后層。

當后層展開時，前層內容變為非激活狀態。要收起后層，可以點擊前層的任何位置或后層的收起操作。

要在前層不可見時隱藏后層，請點擊關閉按鈕。

內容滾動

前后層上的內容具有不同的滾動行為（和限制）。

前層的內容可以水平滾動。

不要讓前層內容超出其容器，與后層重疊。

前層內容垂直滾動時使用一個副標題。

使用副標題時，在展開后層時保留該副標題的相對位置。

如果前層最小化，則后層上的內容可以垂直滾動。

在小區域中滾動后層時要小心。由于暴露的背景是模態的，因此盡可能多地暴露內容。

主題化

Crane材料主題

這個旅行App的背景是使用材料主題定制的。定制領域包括顏色和形狀。

Crane的自定義背景

顏色

Crane的背景在四個元素上使用了自定義顏色：后層，前層，后層圖標和前層文本。

形狀

Crane的背景的前層頂角使用了自定義形狀。

Shrine材料主題

Shrine是一款零售App，它的背景是根據材料主題自定義的。定制的部分包括顏色和形狀。

Shrine的自定義背景

顏色

Shrine中有四個元素使用了自定義顏色：后層，后層圖標，前層和前層圖標。

形狀

Shrine的背景在前層的左上角使用了自定義形狀。

規格

移動端

原文地址：Material Design

譯者：珠珠

轉載請注明：學UI網 » Backdrop 背景