編者按：看不懂iOS 和Android 的設(shè)計規(guī)范？愛奇藝高級交互設(shè)計師來幫你！這個系列文章會深入淺出地為你講解兩個規(guī)范中相同控件的概念和應(yīng)用，加上超多實例演示，輕松看懂設(shè)計規(guī)范！

往期回顧：

1. 高手幫你學規(guī)范！iOS和Android規(guī)范解析之提示框+警告框
2. 高手幫你學規(guī)范！IOS和ANDROID規(guī)范解析之簡易菜單+彈框

Google Material Design設(shè)計規(guī)范和iOS設(shè)計規(guī)范中，都有從底部向上出現(xiàn)的浮層組件。在Android中，是底板（Bottom Sheet）；在iOS規(guī)范中，是上拉菜單（Action Sheets）和活動視圖（Activity Views）。

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)；原圖中沒有給出固定底板的高度示意，我添加了一下（藍色部分，0DPs）：

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

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

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

下面詳細說一下兩種底板。

固定底板（Persistent Modal Sheet）

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

1. 在當前頁展示新內(nèi)容；

2. 展示與主要內(nèi)容同等重要的新內(nèi)容。

△ ?固定底板示例

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

對于手機，不論正常或者橫置的情況，固定底板都占滿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. 展示一個符合當前情景的操作面板。

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

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

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

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

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

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

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

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

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

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

在iOS規(guī)范中，出現(xiàn)在頁面底部的浮層有兩種：上拉菜單（Action Sheets）和活動視圖（Activity Views）。

上拉菜單

上拉菜單，是當用戶激發(fā)一個操作的時候，出現(xiàn)的浮層。“使用上拉菜單讓用戶可以開始一個新任務(wù)或者對破壞性操作（例如：刪除、退出登錄等，筆者注）進行二次確認。” 使用上拉菜單開始一個新任務(wù)，在蘋果官方的郵件應(yīng)用里有很多案例，比如下面這個：

點擊了那個長得很像“回復”的按鈕，出現(xiàn)了三個操作供用戶選擇：回復、轉(zhuǎn)發(fā)、打印。

在用戶進行破壞性操作的時候，上拉菜單成為一個確認性質(zhì)的存在，防止用戶誤操作引起了破壞性結(jié)果。比如刪除照片時：

好奇的人這里可能就會想了：之前介紹過的警告框（Alerts），在進行一些重要操作的時候也會有再次提示的作用，那么它和上拉菜單有什么區(qū)別呢？筆者經(jīng)過研究，終于在一個英文論壇上找到了答案：

警告框比較打擾用戶的使用，一般是告知出現(xiàn)的問題、希望用戶來處理一下；而上拉菜單，往往出現(xiàn)在在用戶點擊了刪除按鈕之后，用戶比較對此有預(yù)期。

其實這兩者在功能上差別不是太大，警告框打擾更大一些。

另外，對于這種破壞性操作的上拉彈框，蘋果建議在設(shè)計上突出那個破壞性的操作。比如上面那張圖的“刪除照片”按鈕，就文案的顏色被設(shè)計成了紅色。此外，上拉菜單必須要在底部有個“取消”按鈕；同時，應(yīng)盡量避免出現(xiàn)滾動條。

活動視圖

這里的“活動”，指的就是浮層里包含的每一個操作。活動視圖里包含的操作，必須是在對當前場景有用的操作。

iOS規(guī)范里提到，活動視圖，可以是從底部出現(xiàn)的浮層，也可以是從按鈕處展現(xiàn)的彈出框（popover），如下圖所示：

△ ?左邊是活動視圖，右邊是彈出框

至于使用哪一種，蘋果建議是根據(jù)尺寸和屏幕的放置方向決定。其實，原來手機屏幕較小時，popover這種控件，是專屬于iPad設(shè)備的，現(xiàn)在隨著手機屏幕尺寸越來越大，popover也開始出現(xiàn)在手機應(yīng)用的設(shè)計里。這也是合理的情況。

另外，在設(shè)計活動視圖的時候，需要注意圖標要能表現(xiàn)出操作的意義，文案要盡量簡短明確。如果是系統(tǒng)自帶的一些操作，如復制、黏貼，蘋果建議直接使用系統(tǒng)自帶的樣式，不要創(chuàng)造新樣式。規(guī)范里還特別指出，點擊活動視圖里的操作，不可在原有活動視圖之上疊加出現(xiàn)活動視圖或者上拉菜單，最多可以出現(xiàn)警告框這種控件。

以上介紹了iOS設(shè)計規(guī)范中上拉菜單和活動視圖這兩種控件。我們來總結(jié)一下：

上拉菜單可以展示操作（文字形式），也可以對用戶的破壞性操作進行二次確認；而活動視圖也可以展示操作，只是展示的操作數(shù)量更多，且可以使用圖標+文字的展現(xiàn)形式。

所以，當操作數(shù)目較少的時候，可以考慮使用上拉菜單，而數(shù)目較多的時候，最好使用活動視圖；對破壞性操作的二次確認，則必須使用上拉菜單。

△ ?底板示例

歡迎關(guān)注作者微信公眾號：新設(shè)計青年

「如何看懂iOS 10 的設(shè)計規(guī)范指南」

1. 看趨勢變化丨《從IOS 10設(shè)計指南變化看設(shè)計的新趨勢》
2. 看交互啟示丨《從IOS 10 的交互設(shè)計中學到的3個設(shè)計啟示》
3. 看使用方法丨《一份超詳細的「IOS 10 UI KIT」使用手冊（附源文件）》