還在頻繁的使用彈窗對用戶展示重要提示嗎？明知這樣有損體驗(yàn)卻沒有更好的選擇嗎？那么不妨來試試干擾度更低卻依然可以用于重要提示的Sheet控件吧！

一、什么是Sheets

Sheets控件并非彈窗，通常會被熟稱為“浮層”或“浮窗”。

該控件在iOS和Android系統(tǒng)規(guī)范中都有相關(guān)定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。

從用于提示的角度來看，Sheets控件和Dialogs控件的相同點(diǎn)和不同點(diǎn)在哪里呢？

1. 共同點(diǎn)

（1）模態(tài)化

二者都可以設(shè)置模態(tài)，當(dāng)模態(tài)控件顯示時(shí)，頁面背景會顯示深色遮罩，并立即打斷用戶當(dāng)前操作。

（2）承載操作和信息

二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。

2. 不同點(diǎn)

（1）觸發(fā)方式不同

Dialog可以不通過用戶操作而自動(dòng)觸發(fā)，Sheet必須通過用戶操作才可以觸發(fā)顯示，因此用戶對Sheet的顯示會更有預(yù)期。

（2）關(guān)閉方式不同

Dialog的關(guān)閉方式較少，通常會要求用戶進(jìn)行選項(xiàng)操作后才可關(guān)閉；Sheet的關(guān)閉方式較多，對于用戶而言有更豐富的選擇權(quán)。

因此綜上所述，我們可以發(fā)現(xiàn)，Sheet對比Dialog的優(yōu)勢在于，它的顯示會更符合用戶的預(yù)期，它的干擾層度也會低于Dialog（因?yàn)楦钻P(guān)閉）。

Sheets在Google Material design規(guī)范中被分為了Bottom sheest和Side sheets兩類；

在iOS Human Interface Guidelines中被分為了Action sheets和Activity views兩類。

下面就由我來依次詳解其特性和玩法吧～

二、Bottom sheets 底部浮窗

專屬于Android的Sheets控件。

1. 使用場景

用于補(bǔ)充內(nèi)容相關(guān)的更多信息（非模態(tài)）、提供可交互的菜單或?qū)υ挘B(tài)）或其它關(guān)鍵功能/任務(wù)的拓展。

2. 注意事項(xiàng)

（1）Bottom sheet通常用于Android豎屏場景，在Android橫屏場景建議使用Side sheet。

（2）在iOS中不建議使用Bottom sheet，建議使用原生的Action sheet或Activity views。

3. 樣式類型

（1）菜單樣式

可嵌套Menus，展示多個(gè)選項(xiàng)內(nèi)容。

（2）宮格樣式

可使用宮格布局，展示多個(gè)選項(xiàng)內(nèi)容。

（3）迷你樣式（非模態(tài)）

一個(gè)非模態(tài)底部浮窗可被設(shè)置固定展示在頁面底部，用戶可以隨時(shí)用它來對其它功能/任務(wù)進(jìn)行快捷操作，如進(jìn)入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

4. 模態(tài)/非模態(tài)

如左下圖所示，非模態(tài)浮窗與內(nèi)容保持在同一層級，用戶可同時(shí)對內(nèi)容和浮窗進(jìn)行操作。

如右下圖所示，模態(tài)浮窗層級高于內(nèi)容，背景深色顯示遮罩，用戶僅能對浮窗進(jìn)行操作。

5. 顯示與消失

顯示

浮窗顯示時(shí)從底部向上滑入，非模態(tài)浮窗顯示時(shí)不會打斷用戶操作，模態(tài)浮窗顯示時(shí)會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時(shí)會向底部滑出。

（1）模態(tài)浮窗在以下情況下會消失：

• 用戶觸發(fā)浮窗上的對應(yīng)操作（自定義）
• 用戶點(diǎn)擊浮窗外的區(qū)域
• 用戶下拉浮窗達(dá)到收起閾值后（自定義）
• 用戶點(diǎn)擊Android系統(tǒng)返回鍵

（2）非模態(tài)浮窗在以下情況下會消失：用戶選中浮窗上的對應(yīng)按鈕（自定義）。

6. 支持高度延伸

當(dāng)浮窗底部仍有未顯示的內(nèi)容時(shí)，可設(shè)置通過滑動(dòng)或拖動(dòng)浮窗來使其變?yōu)槿琳故?，并在頂部顯示Toolbar來顯示關(guān)閉/收起操作。

7. 支持深層鏈接

模態(tài)浮窗中可以展示其它應(yīng)用的深層鏈接內(nèi)容或操作，譬如調(diào)用Google翻譯。

8. 范例

抖音的評論功能使用的是模態(tài)Bottom sheet；百度地圖的路線切換功能使用的是非模態(tài)Bottom sheet。

三、Side sheets 側(cè)邊浮窗

專屬于Android的Sheets控件。

1. 使用場景

用于補(bǔ)充內(nèi)容相關(guān)的更多信息（非模態(tài)）或提供可交互的列表信息（模態(tài)）。

2. 注意事項(xiàng)

（1）Bottom sheet通常用于Android豎屏場景，在Android橫屏場景建議使用Side sheet。

（2）在iOS中不建議使用Bottom sheet,建議使用原生的Action sheet或Activity views。

3. 樣式類型

（1）菜單樣式：可嵌套Menus，展示多個(gè)選項(xiàng)內(nèi)容。

（2）宮格樣式：可使用宮格布局，展示多個(gè)選項(xiàng)內(nèi)容。

4. 模態(tài)/非模態(tài)

如左下圖所示，非模態(tài)浮窗與內(nèi)容保持在同一層級，用戶可同時(shí)對內(nèi)容和浮窗進(jìn)行操作（在移動(dòng)端較少使用，通常用于PC端）。

如右下圖所示，模態(tài)浮窗層級高于內(nèi)容，背景深色顯示遮罩，用戶僅能對浮窗進(jìn)行操作。

5. 顯示與消失

顯示

浮窗顯示時(shí)從左/右邊緣滑入，非模態(tài)浮窗顯示時(shí)不會打斷用戶操作，模態(tài)浮窗顯示時(shí)會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時(shí)會向左/右邊緣滑出。

1. 模態(tài)浮窗在以下情況下會消失：

• 用戶觸發(fā)浮窗上的對應(yīng)操作（自定義）
• 用戶點(diǎn)擊浮窗外的區(qū)域
• 用戶側(cè)拉浮窗達(dá)到收起閾值后（自定義）
• 用戶點(diǎn)擊Android系統(tǒng)返回鍵

2. 非模態(tài)浮窗在以下情況下會消失：用戶選中浮窗上的對應(yīng)按鈕（自定義）。

6. 滑動(dòng)說明

支持上下滑動(dòng)，不支持左右滑動(dòng)。

7. 范例

淘寶的篩選功能使用的是Side sheet。

四、Action sheets 操作浮窗

專屬于iOS的Sheets控件。

1. 使用場景

用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項(xiàng)，如啟動(dòng)某個(gè)任務(wù)，或者確認(rèn)是否開始執(zhí)行某個(gè)可能具有破壞性的操作。

2. 注意事項(xiàng)

在Android中不建議使用Action sheet,建議使用原生的Bottom sheet或Simple dialog。

3. 樣式類型

如下所示，支持單個(gè)或多個(gè)操作的展示，以及說明文案的展示：

4. 顯示與消失

顯示

浮窗顯示時(shí)從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

• 浮窗消失時(shí)會向底部滑出。會在以下情況下會消失
• 用戶觸發(fā)浮窗上的對應(yīng)操作（自定義）
• 用戶點(diǎn)擊浮窗外的區(qū)域
• 用戶點(diǎn)擊浮窗“取消”按鈕

5. 顯示位置

豎屏?xí)r顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 范例

微信的選擇朋友圈發(fā)布類型及清除聊天記錄的二次確認(rèn)都使用的是Action sheet。

五、Activity views 活動(dòng)浮窗

專屬于iOS的Sheets控件。

1. 使用場景

用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項(xiàng)表，如復(fù)制、收藏或分享。

2. 注意事項(xiàng)

在Android中不建議使用Activity views,建議使用原生的Bottom sheet。

3. 樣式類型

（1）列表樣式

（2）宮格樣式

（3）混合樣式

4. 顯示與消失

顯示

浮窗顯示時(shí)從底部向上滑入，會顯示深色遮罩以打斷用戶操作。

消失

• 浮窗消失時(shí)會向底部滑出。會在以下情況下會消失
• 用戶觸發(fā)浮窗上的對應(yīng)操作（自定義）
• 用戶點(diǎn)擊浮窗外的區(qū)域
• 用戶下拉浮窗達(dá)到收起閾值后（自定義）

5. 顯示位置

豎屏?xí)r顯示在頁面底部，橫屏是居中顯示在頁面底部。

6. 支持高度延伸

當(dāng)面板底部仍有未顯示的內(nèi)容時(shí)，可設(shè)置通過滑動(dòng)或拖動(dòng)面板來使其高度進(jìn)行延伸，從而展示更多信息。

7. 范例

愛奇藝的分享功能和泡泡圈選擇發(fā)布內(nèi)容類型，都使用的是Activity view。

六、用法總結(jié)

建議針對非系統(tǒng)級或業(yè)務(wù)級的重要提示，使用Sheets控件進(jìn)行提示；Dialogs控件僅用于最重要的信息提示才算是“好鋼用在了刀刃上”。

另外在調(diào)用原生Sheets組件時(shí)，記得分端的差異性哦～

最后感謝閱讀，下面是其它提示控件的傳送門：

提示控件中的雙刃劍：霸氣外露的Dialogs家族

彈窗提示太強(qiáng)，Toast又太弱？不妨來試試Banner吧！

還在用Toast？快試試更好用的Snackbar！

#專欄作家#

愚者秦，微信公眾號：feather-wit，人人都是產(chǎn)品經(jīng)理專欄作家。先后任職于愛奇藝、字節(jié)跳動(dòng)的一枚體驗(yàn)設(shè)計(jì)師，同時(shí)是兼職寫小說的斜杠青年，善于總結(jié)和抽象設(shè)計(jì)方法，熱衷于探索不同用戶場景下的產(chǎn)品策略。

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

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