前言

Bottom Sheet 算是比較近期 App 非常熱門的應用設計，從底部彈跳出視窗。通常會搭配在 more action，提供用戶與當前情境畫面的細部操作。例如在社交平台上，想將這篇文章或梗圖分享給朋友或是儲存

Bottom Sheet - Design 分為下面幾個段落來介紹

• Usage
• Anatomy
• Behavior
• Standard bottom sheet
• Modal bottom sheet
• Expanding bottom sheet

Usage

Bottom Sheets 有三種類型適用於各種不同的情境

1. Standard bottom sheets : 用戶可以查看屏幕的其餘部分並與之交互，非常適用於多任務處理的情境。例如用來顯示音樂播放器，並允許用戶在瀏覽其他頁面時，也能控制現在撥放的音樂

2. Modal bottom sheets : 可作為 inline menu 或 Simple Dialog 的替代方案，並為其他項目、更長的描述和圖標提供空間。必須解除它們才能操作主畫面，使用上類似於 Dialog

3. Expanding bottom sheets : 用戶可以在需要訪問其全部內容時點擊 expand bottom sheets。折疊狀態可用於指示功能的當前狀態，例如選定項目或未讀消息的數量

原則

• 輔助性質的 : 用來輔助主畫面中的 UI 元件
• 有彈性的 : 可以用來顯示各式各樣的元件與佈局
• 好操作的 : 位置上，應該讓用戶能輕易點選到

Anatomy

1. Sheet
2. Contents
3. Scrim (Modal only)

Sheet

錨定在屏幕的底部邊緣並出現在其他 UI 元件的前面。Standard 和 Modal 的寬度會與手機螢幕相同

Contents

顯示各式各樣的內容和佈局，從 menu item （在列表和網格佈局中）到與主畫面交互的補充內容

最初顯示在屏幕下方時，在 sheet 被用戶拖入視圖時變得可見，而拖回底部時則收起

• Menu of actions

• Menu of apps

• Google Maps

• Music player

Behavior

Visibility

Initial appearance

當 Bottom sheet 最初出現在畫面上時，它們可能包含延伸到屏幕底部下方的內容。可以滑動或向上拖動以成為 Full-screen。根據內容與情境，也可以通過點擊其表面或 icon 、button，來全屏顯示

Full-screen

Full-screen 時，Bottom sheet 可以在內部滾動以顯示其他內容。應使用工具欄提供折疊或關閉功能讓用戶可以取消或退出

Standard bottom sheet

與畫面的主要 UI 區域共存，並允許同時查看兩個區域並與之交互。當主 UI 區域中的內容經常滾動或平移時，它們通常用於在畫面上保持功能或輔助內容的可見與使用

Behavior

Interaction

當用戶與主 UI 區域交互時，Standard Bottom Sheet 會一直保持在屏幕上。它們的默認高度為 8dp，這允許後面的主 UI 區域中的內容滾動或平移，並允許工作表在 Full-screen 時臨時覆蓋主 UI 區域。在 Full-screen 的時候，應該在 Bottom sheet 的應用欄中提供一個折疊 icon 或 button 將 Bottom sheet 收起

Modal bottom sheet

呈現一組選擇，阻止用戶與畫面其餘部分的交互行為，效果類似 Dialog，只要點擊外部的 Scrim 就會收起。在手機裝置上的 inline menu 和 Simple Dialog 的替代品，為畫面內容、Icon 和操作提供了額外的空間

Behavior

Elevation and scrim

elevation 設定為 16dp。這種高度允許它們出現在大多數 UI 元件之上，並允許它們可以被拉到整個 UI 的前面以顯示更多選項，透過 elevation 與主畫面的差異，讓用戶能準確的去操作

在 Modal bottm sheet 出現時，會導致其後面的所有內容和 UI 元素顯示一個 scrim，讓主畫面停止與用戶交互。當用戶點擊 scrim 時，bottom sheet 會被收起

Visibility

為了對頂部元件操作與保留 Scrim 畫面的空間，Modal Bottom Sheet 的初始高度設為畫面高度的 50%

然後，可以將內容超過屏幕高度 50% 的 Modal Bottom Sheet 拉至整個螢幕，便可透過內部滾動以訪問其剩餘的項目

Control

設計上，會有下列幾種方式可以關閉 Bottom sheet

1. 點擊 bottom sheet 內部的元件
2. 點擊外部的 scrim
3. 往下滑動 bottom sheet
4. 點擊左上方的 navigation Icon 來關閉

Expanding bottom sheet

固定在畫面底部上，用戶可以展開該 Sheet 以使用功能或查看任務

適用於以下狀況

• 持續顯示跨應用功能。例如我們常在購物 app 再加入物品時，右下方或出現購物車或結帳提示
• 在一個表格或列表中，收集或是反應用戶的選擇操作。例如在相簿中選取圖片
• 作為輔助任務，例如 FackBoook 的 Message 功能，能做聊天或評論
• 作為導航元件，例如 Youtube 縮小後的迷你播放器

Anatomy

Expanding bottom sheets 有兩種不同的狀態，分別為折疊收起(Collapsed)與展開 (Expanded)

Collasped state

1. Container
2. Icon
3. Label (Optional)

Expanded state

4. Header
5. Close action
6. Label
7. Content

Collapsed

當 Expanding bottom sheet 摺疊時，會收起至右下方變成一個小型的 Button 或 Icon

設計上有幾點要注意

• 可以透過不同顏色或形狀的變化來表達交互性質
• 顯示上，只少需要一個 Icon 顯示，若在更大裝置或是需要更多細節時，可以再加上 Text label
• 為避免遮擋過多內容，寬度上最多不應該超過螢幕的一半

在設計上應該去避免元件不要隨著其他元素改變大小，例如 wrapping text 或過長的 text label 破壞了原本的設計樣式

Expanded

當 Expanding bottom sheet 展開時，會撐開到至整個螢幕。並且會帶有一個 toolbar，藉由 title 表達當前的狀態，再搭配 navigation icon 讓用戶可以返回折疊

Behavior

Controls

• 折疊時 : 與主畫面有交互性，點擊它會展開工作表
• 展開時 : Sheet 會顯示一個帶有操作圖標的 toolbar，可以摺疊收回 sheet 。此外，它還可以在 Sheet 中顯示完成任務的上下文操作，例如購物車結帳、傳送訊息或下載按鈕

勿將各種功能都放在 collapsed 的狀態，寬度上會阻擋畫面，也會讓用戶不知道該執行哪個功能。這些功能應該放在 expanded 的狀態

行為設計上，除了操作 (1) navigation icon 返回與折疊 bottom sheet 之外，若情境是要 (2) 新增或是儲存等功能，可以在用戶操作後，也跟著連動執行折疊收起 bottom sheet

Placement

Expanding bottom sheet 會固定在畫面的底部右下方，減少對屏幕主要內容的阻礙

小結

Bottom sheet 設計過程相對於一般小型元件複雜許多，但並不是在 UI 上，是 UX。因為在 UI 設計元件上，其實用到很多先前我們介紹過的概念，例如 menu、card、button 等等。所以如果專注在畫面上，就無法清楚了解 Material Design 為什麼要把 Bottom Sheet 分為三種類型，它們之間最大的差別便是在與使用者互動的 UX 上。

• Standard : 會一直保持在主畫面上與其內容交互，提供適合當前的輔助行為
• Modal : 反應用戶的操作，提供一組選擇或操作，但是會阻擋主畫面的運行，類似 Dialog
• Expand : 可收可開的 sheet，當用戶需要時可點擊切換為全屏，不需要時可縮小至底部作為輔助提醒，有點類似上述兩種的綜合體

提供一個便利與快速的操作體驗，才是 Bottom Sheet 最主要的任務