Google Material Design設(shè)計規(guī)范和iOS設(shè)計規(guī)范中，都有從底部向上出現(xiàn)的浮層組件。在Android中，是底板（Bottom Sheet）；在iOS規(guī)范中，是上拉菜單（Action Sheets）和活動視圖（Activity Views）。由于內(nèi)容較多，本文介紹MD中的底板組件；iOS中的兩個組件，將在下一篇文章中進(jìn)行介紹。

Google Material Design Guideline

在MD規(guī)范中，底板分為兩種：固定底板和模態(tài)底板。它們的區(qū)別，主要在狀態(tài)是否固定——固定底板的狀態(tài)是固定的，和應(yīng)用界面在同一層級；而模態(tài)底板的狀態(tài)是臨時的，其層級位于應(yīng)用界面之上。舉個栗子：

另外，我們看一下MD規(guī)范給出的各部件的高度示意圖，可以發(fā)現(xiàn)，模態(tài)底板的高度是很高的（16DPs)；原圖中沒有給出固定底板的高度示意，我添加了一下（藍(lán)色部分,0DPs）：

MD規(guī)范中各部件的高度示意圖

也就是說，如果兩種底板同時出現(xiàn)，模態(tài)底板是壓在固定底板的上面的（別想多了，呵呵呵）。

另外還有一個區(qū)別：模態(tài)底板出現(xiàn)的時候，頁面會自帶蒙層；固定底板出現(xiàn)的時候沒有蒙層。

下面詳細(xì)說一下兩種底板。

固定底板（Persistent Modal Sheet）

固定底板主要用于以下兩種情況：

1. 在當(dāng)前頁展示新內(nèi)容；
2. 展示與主要內(nèi)容同等重要的新內(nèi)容。

固定底板示例

對于不同尺寸的設(shè)備，MD規(guī)范也給出了詳細(xì)的說明：

• 對于手機(jī)，不論正?；蛘邫M置的情況，固定底板都占滿100%的寬度。
• 對于平板，則要依據(jù)內(nèi)容的多少決定固定底板是否占滿100%寬度：

平板上固定底板占滿100%的寬度

平板上固定底板未占滿100%的寬度

對于PC，MD規(guī)范建議設(shè)計師考慮把固定底板移到屏幕左側(cè)：

PC上的固定底板

模態(tài)底板（Modal Bottom Sheet）

模態(tài)底板的用法有以下三點需要注意：

1. 模態(tài)底板用列表或者網(wǎng)格的形式，呈現(xiàn)出操作選項。同樣具備這樣功能的是MD組件是菜單和簡單對話框；

三種組件示例

2. 展示一個符合當(dāng)前情景的操作面板；

3. 強(qiáng)調(diào)模態(tài)底板中的元素（如下圖所示）。

模態(tài)底板有個比較特殊的地方：支持深層鏈接。啥意思呢？看下面的例子你就明白了：

在這個例子中，對于單詞“fervor”的釋義，是來自另外一個詞典應(yīng)用的。但是當(dāng)前的閱讀應(yīng)用直接調(diào)用了詞典應(yīng)用的釋義功能，在當(dāng)前進(jìn)行了展示。這就是deep link達(dá)到的效果。除了可以調(diào)用內(nèi)容，deep link還可以調(diào)用別的應(yīng)用中的操作。

MD規(guī)范指出，模態(tài)底板中可以存在一定程度的導(dǎo)航。比如點擊模態(tài)底板中的一條鏈接，可以在模態(tài)底板中進(jìn)入下一級頁面。但是模態(tài)底板中，無法從下一級頁面返回上一級頁面，因為模態(tài)底板中沒有返回按鈕，只有一個關(guān)閉模態(tài)底板的按鈕。

模態(tài)底板左上角為關(guān)閉按鈕

在展現(xiàn)形式上，模態(tài)底板的高度，需要根據(jù)選項的高度來確定：

當(dāng)選項過多，導(dǎo)致模態(tài)底板高度過高時，請保證模態(tài)底板不會覆蓋到頂部導(dǎo)航欄。模態(tài)底板中允許上下滾動的操作，以查看被遮擋的內(nèi)容：

最后，MD中提到了四種關(guān)閉模態(tài)底板的方法：點擊系統(tǒng)返回鍵、向下拖動、點擊底板以外區(qū)域、點擊關(guān)閉按鈕：

后三種關(guān)閉方式

奇怪的是，規(guī)范中沒有提到可以上拉模態(tài)底板，使其達(dá)到全屏的狀態(tài)。但是實際應(yīng)用中，好多應(yīng)用都是這么做的。所以這一點在這也提一下，給大家參考。

以上是MD規(guī)范中對于底板（Bottom Sheet）的介紹。下一篇文章將介紹iOS中的上拉菜單和活動視圖。

雖然經(jīng)過了仔細(xì)研究，但文章中難免會出現(xiàn)不足和遺漏之處，歡迎大家留言討論。

相關(guān)閱讀：

iOS和Android規(guī)范解析——底部浮層（下）

iOS和Android規(guī)范解析：警告框（Alerts）

iOS和Android規(guī)范解析：提示框（Toast）對比

#專欄作家#

沐風(fēng)，微信公眾號：“沐風(fēng)與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團(tuán)隊負(fù)責(zé)人。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗，專注設(shè)計領(lǐng)域，歡迎關(guān)注。

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

題圖來自 Unsplash，基于CC0協(xié)議。