022019-9

交互控件科普系列！ Sheet 的常見樣式和設(shè)計(jì)注意事項(xiàng)總結(jié)

資深UI設(shè)計(jì)者

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

什么是Sheets

Sheets 控件并非彈窗，通常會(huì)被熟稱為「浮層」或「浮窗」。

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

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

1. 共同點(diǎn)

模態(tài)化

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

承載操作和信息

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

2. 不同點(diǎn)

觸發(fā)方式不同

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

關(guān)閉方式不同

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

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

Sheets 在 Google Material design 規(guī)范中被分為了 Bottom sheest 和 Side sheets 兩類；
在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

下面就由我來(lái)依次詳解其特性和玩法吧。

Bottom sheets 底部浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場(chǎng)景

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

2. 注意事項(xiàng)

Bottom sheet 通常用于 Android 豎屏場(chǎng)景，在 Android 橫屏場(chǎng)景建議使用 Side sheet。
在 iOS 中不建議使用 Bottom sheet，建議使用原生的 Action sheets 或 Activity views。

3. 樣式類型

菜單樣式

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

宮格樣式

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

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

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

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

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

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

5. 顯示與消失

顯示

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

消失

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

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

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

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

6. 支持高度延伸

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

7. 支持深層鏈接

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

8. 范例

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

Side sheets 側(cè)邊浮窗

專屬于 Android 的 Sheets 控件。