99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

交互控件科普系列！ Sheet 的常見樣式和設計注意事項總結

2019-9-2 濤濤

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

什么是Sheets

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

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

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

1. 共同點

模態化

二者都可以設置模態，當模態控件顯示時，頁面背景會顯示深色遮罩，并立即打斷用戶當前操作。

承載操作和信息

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

2. 不同點

觸發方式不同

Dialog 可以不通過用戶操作而自動觸發，Sheet 必須通過用戶操作才可以觸發顯示，因此用戶對 Sheet 的顯示會更有預期。

關閉方式不同

Dialog 的關閉方式較少，通常會要求用戶進行選項操作后才可關閉；Sheet 的關閉方式較多，對于用戶而言有更豐富的選擇權。

因此綜上所述，我們可以發現，Sheet 對比 Dialog 的優勢在于，它的顯示會更符合用戶的預期，它的干擾層度也會低于Dialog（因為更易關閉）。

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

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

Bottom sheets 底部浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內容相關的更多信息（非模態）、提供可交互的菜單或對話（模態）或其它關鍵功能/任務的拓展。

2. 注意事項

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

3. 樣式類型

菜單樣式

可嵌套 Menus，展示多個選項內容。

宮格樣式

可使用宮格布局，展示多個選項內容。

迷你樣式（非模態）

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

4. 模態/非模態

非模態浮窗：如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作。

模態浮窗：如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。

5. 顯示與消失

顯示

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

消失

浮窗消失時會向底部滑出。

模態浮窗在以下情況下會消失：

用戶觸發浮窗上的對應操作（自定義）；
用戶點擊浮窗外的區域；
用戶下拉浮窗達到收起閾值后（自定義）；
用戶點擊 Android 系統返回鍵。

非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。

6. 支持高度延伸

當浮窗底部仍有未顯示的內容時，可設置通過滑動或拖動浮窗來使其變為全屏展示，并在頂部顯示 Toolbar 來展示關閉/收起操作。

7. 支持深層鏈接

模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用 Google 翻譯。

8. 范例

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

Side sheets 側邊浮窗

專屬于 Android 的 Sheets 控件。