起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識只會用彈窗作重要提示？來試試體驗更佳的Sheets吧！
還在頻繁的使用彈窗對用戶展示重要提示嗎？明知這樣有損體驗卻沒有更好的選擇嗎？那么不妨來試試干擾度更低卻依然可以用于重要提示的Sheet控件吧！
一、什么是Sheets
Sheets控件并非彈窗，通常會被熟稱為“浮層”或“浮窗”。
該控件在iOS和Android系統規范中都有相關定義，屬于多才多藝的控件，可以用于給予信息提示，也可用于展示更多的拓展信息。
從用于提示的角度來看，Sheets控件和Dialogs控件的相同點和不同點在哪里呢？
1. 共同點
（1）模態化
二者都可以設置模態，當模態控件顯示時，頁面背景會顯示深色遮罩，并立即打斷用戶當前操作。
（2）承載操作和信息
二者都可以承載豐富的操作和信息，支持嵌入列表、選擇器等控件及圖片、文本信息。
2. 不同點
（1）觸發方式不同
Dialog可以不通過用戶操作而自動觸發，Sheet必須通過用戶操作才可以觸發顯示，因此用戶對Sheet的顯示會更有預期。
（2）關閉方式不同
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. 注意事項
（1）Bottom sheet通常用于Android豎屏場景，在Android橫屏場景建議使用Side sheet。
（2）在iOS中不建議使用Bottom sheet，建議使用原生的Action sheet或Activity views。
3. 樣式類型
（1）菜單樣式
可嵌套Menus，展示多個選項內容。
（2）宮格樣式
可使用宮格布局，展示多個選項內容。
（3）迷你樣式（非模態）
一個非模態底部浮窗可被設置固定展示在頁面底部，用戶可以隨時用它來對其它功能/任務進行快捷操作，如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。
4. 模態/非模態
如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作。
如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。
5. 顯示與消失
顯示
浮窗顯示時從底部向上滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。
（1）模態浮窗在以下情況下會消失：
- 用戶觸發浮窗上的對應操作（自定義）
- 用戶點擊浮窗外的區域
- 用戶下拉浮窗達到收起閾值后（自定義）
- 用戶點擊Android系統返回鍵
（2）非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。
6. 支持高度延伸
當浮窗底部仍有未顯示的內容時，可設置通過滑動或拖動浮窗來使其變為全屏展示，并在頂部顯示Toolbar來顯示關閉/收起操作。
7. 支持深層鏈接
模態浮窗中可以展示其它應用的深層鏈接內容或操作，譬如調用Google翻譯。
8. 范例
抖音的評論功能使用的是模態Bottom sheet；百度地圖的路線切換功能使用的是非模態Bottom sheet。
三、Side sheets 側邊浮窗
專屬于Android的Sheets控件。
1. 使用場景
用于補充內容相關的更多信息（非模態）或提供可交互的列表信息（模態）。
2. 注意事項
（1）Bottom sheet通常用于Android豎屏場景，在Android橫屏場景建議使用Side sheet。
（2）在iOS中不建議使用Bottom sheet,建議使用原生的Action sheet或Activity views。
3. 樣式類型
（1）菜單樣式：可嵌套Menus，展示多個選項內容。
（2）宮格樣式：可使用宮格布局，展示多個選項內容。
4. 模態/非模態
如左下圖所示，非模態浮窗與內容保持在同一層級，用戶可同時對內容和浮窗進行操作（在移動端較少使用，通常用于PC端）。
如右下圖所示，模態浮窗層級高于內容，背景深色顯示遮罩，用戶僅能對浮窗進行操作。
5. 顯示與消失
顯示
浮窗顯示時從左/右邊緣滑入，非模態浮窗顯示時不會打斷用戶操作，模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向左/右邊緣滑出。
1. 模態浮窗在以下情況下會消失：
- 用戶觸發浮窗上的對應操作（自定義）
- 用戶點擊浮窗外的區域
- 用戶側拉浮窗達到收起閾值后（自定義）
- 用戶點擊Android系統返回鍵
2. 非模態浮窗在以下情況下會消失：用戶選中浮窗上的對應按鈕（自定義）。
6. 滑動說明
支持上下滑動，不支持左右滑動。
7. 范例
淘寶的篩選功能使用的是Side sheet。
四、Action sheets 操作浮窗
專屬于iOS的Sheets控件。
1. 使用場景
用于呈現一組與當前操作相關的選項，如啟動某個任務，或者確認是否開始執行某個可能具有破壞性的操作。
2. 注意事項
在Android中不建議使用Action sheet,建議使用原生的Bottom sheet或Simple dialog。
3. 樣式類型
如下所示，支持單個或多個操作的展示，以及說明文案的展示：
4. 顯示與消失
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
- 浮窗消失時會向底部滑出。會在以下情況下會消失
- 用戶觸發浮窗上的對應操作（自定義）
- 用戶點擊浮窗外的區域
- 用戶點擊浮窗“取消”按鈕
5. 顯示位置
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
6. 范例
微信的選擇朋友圈發布類型及清除聊天記錄的二次確認都使用的是Action sheet。
五、Activity views 活動浮窗
專屬于iOS的Sheets控件。
1. 使用場景
用于呈現一組與當前操作相關的選項表，如復制、收藏或分享。
2. 注意事項
在Android中不建議使用Activity views,建議使用原生的Bottom sheet。
3. 樣式類型
（1）列表樣式
（2）宮格樣式
（3）混合樣式
4. 顯示與消失
顯示
浮窗顯示時從底部向上滑入，會顯示深色遮罩以打斷用戶操作。
消失
- 浮窗消失時會向底部滑出。會在以下情況下會消失
- 用戶觸發浮窗上的對應操作（自定義）
- 用戶點擊浮窗外的區域
- 用戶下拉浮窗達到收起閾值后（自定義）
5. 顯示位置
豎屏時顯示在頁面底部，橫屏是居中顯示在頁面底部。
6. 支持高度延伸
當面板底部仍有未顯示的內容時，可設置通過滑動或拖動面板來使其高度進行延伸，從而展示更多信息。
7. 范例
愛奇藝的分享功能和泡泡圈選擇發布內容類型，都使用的是Activity view。
六、用法總結
建議針對非系統級或業務級的重要提示，使用Sheets控件進行提示；Dialogs控件僅用于最重要的信息提示才算是“好鋼用在了刀刃上”。
另外在調用原生Sheets組件時，記得分端的差異性哦～
最后感謝閱讀，下面是其它提示控件的傳送門：
#專欄作家#
愚者秦，微信公眾號：feather-wit，人人都是產品經理專欄作家。先后任職于愛奇藝、字節跳動的一枚體驗設計師，同時是兼職寫小說的斜杠青年，善于總結和抽象設計方法，熱衷于探索不同用戶場景下的產品策略。
本文原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
Side sheet??沒有這個東西吧
百度地圖的舉例，底部更像功能卡片或者區塊吧，和滴滴類似。求疑惑解答
我剛才看下了滴滴，滴滴底部的卡片組沒有使用特定控件，用的是自定義的組件view。
寫得很詳細，受教了