前言

是一個作為導航工具的組件，能讓用戶隨時展開或收起，與 Bottom Navigation 相同都是作為跳轉畫面的元件，但應用上有些不同，上幾篇我有提到 Bottom Navigation 一次最多只能提供五個 destination，而 drawer 是沒有上限的，所以很明顯的區別就在於這個 App 在設計上，是否有多個頂層畫面需要一次提供給用戶或是隨時切換。但也不是代表一定要在這其中選擇一個，若 App 是有多種功能畫面，Drawer 可以作為輔助性質，而 Bottom Navigation 為常用畫面的導航，只要適當的搭配，就能做出符合使用者情境的設計

Navigation drawer - Design 分為下面幾個段落來介紹

• Usage
• Anatomy
• Modal drawer
• Bototm drawe
• State

Usage

提供對目的地和應用程序功能的訪問，與上一篇講到的 Bottom Navigation 都是作為提供導航功能的組件，例如切換帳戶。它們可以永久顯示在屏幕上，也可以由透過畫面左上方的 navigation icon 展開與收起

適用在下列幾種情況

• 當 App 需要五個以上的 top-level destinations
• 當 App 需要有多個層級的 destinations
• 在不相關的 destinations 之間快速進行導航

原則

• 可辨識的：所在的位置與列表樣式的內容能清楚地讓用戶知道這是導航功能
• 分層排序的 : 對目的地進行排序，將頻繁的目的地放在首位，並將相關的目的地分在同一組
• 對應畫面的 : 能讓用戶需要時開啟 drawer，當要對主畫面進行操作時則收起關閉

Type

Modal drawer

Modal drawer 使用 scrim 來阻止與應用程序其餘內容的交互，類似於 Dialog，會阻斷用戶與主畫面的操作，會從側邊出現。畫面上高於大多數的元件，不會影響整體的佈局，只是暫時覆蓋上

Bottom drawer

是一種特殊型態的 Modal drawer，與 Bottom app bar 一起使用，會從底部彈出。就如同我們常態看到的 Top app bar，只是上下相反過來的設計

Anatomy

1. Container
2. Header (optional)
3. Divider (optional)
4. Active text overlay
5. Active text
6. Inactive text
7. Subtitle
8. Scrim (modal only)

Sheet

sheet 的出現會從側邊或是底部，兩種類型都會出現 scrim 遮蓋住剩餘的畫面

1. from side
2. froom bottom

Destinations

drawer 中的每個 destination 採用可操作列表式的，而在每個項目之間分層分組，且都使用 text label 與 icon 來描述 destination

Destination labels

設計上，text label 應該簡潔明瞭，避免過長而超過 drawer 的寬度而截斷

若 text label 真的無法再縮短，那就應該截斷，呈現單行的狀態，避免 text label 去影響元件的大小，讓整體的設計風格出現不一致的狀態

所以不應該 wrap text 讓項目隨著 text 而改變；也不應該縮小文字將內容都縮在一起，影響用戶觀看

Destination iconography (optional)

icon 可以輔助 label 作為目的地的指標。使用時，它們應始終放在 label 之前

設計上，避免出現重複的 icon 圖示。因為比起文字，用戶會最先看到 icon，導致用戶產生錯誤的判斷，以為相同的 icon 會導航到相同的畫面

設計上，避免不一致，有些 label 有 icon 有些則無。要不就全有，要不就全無

Dividers (optional)

dividers 可用於分隔列表中導航目的地的層級與群組。寬度會延伸至整個 drawer

1. full-width dividers
2. groups of destinations

若項目之間沒有層級或群組區分，不需要刻意使用 divider

Header (optional)

Header 是一個有彈性的空間區域，可用來作為品牌表達（如 Title或 Logo）、帳戶切換器等

Scrim

scrim 是用來阻止用戶與主畫面的其餘部分交互。scrim 位在 drawer 的下方，能讓用戶點擊後關閉 drawer

1. from side
2. from bottom

Modal drawer

Usgae

Modal drawer 阻止用戶與應用程序其餘內容的交互。位於應用程序主畫面 UI 之上，不會影響畫面的佈局

Behavior

Open and close

Modal drawer 始終會由 drawer 外部主畫面的元件操作所打開，例如 top bar 中的 navigaiton icon

而可以通過以下方式關閉：

• 選擇 drawer 中的任一 destination
• 點擊 scrim
• 向右滑動 drawer

Scrolling

如果 destinations 列表高於 drawer，則應該讓用戶可以在列表中滑動

Bottom drawer

Usage

整體上，就是從底部彈起的 Modal drawer

Behavior

Open and close

Bottom drawer 初始彈起的高度，應該隨著內容或手機螢幕的比例而改變，最多不能超過 50%

• 如果 drawer 的內容佔比不到螢幕的 50%，初次開始展開時應該顯示全部內容
• 如果 drawer 的內容佔比超過螢幕的 50%，初次最多也只能顯示 50%，然後允許用戶向上拉起至 full-screen 顯示

Scrolling

能讓用戶透過滾動查看全部項目，只能在 full-screen 的狀態下

當最初打開時到達螢幕的 50% 時，必須再將 drawer 拖高到 full-screen，然後才能顯示其他項目。滾動後，drawer title 變成了一個提升的 top bar，能與 drawer 當前的內容交互

Content hierarchy

因為大多時候 Bottom drawer 內容的項目數量一開始並不是全部可見，所以內容應按如下順序排列：

1. 首先列出最有可能被用戶頻繁訪問的項目
2. 如果使用帳戶切換功能，請將其放在 hearder 最頂部

State

1. Activated （由於一次只能 activated 一個項目，在此外觀設計上應該是要最顯眼注目的）
2. Inactive (默認狀態)
3. Focus
4. Pressed
5. Hover

小結

Navigation drawer 核心是作為一個導航組件，所以在引入 App 時，應該要先設想有哪些畫面是需要放到較高層級讓用戶操作，或是哪些功能是用戶會頻繁操作到的。在較多功能的 App 中，能同時使用 Bottom 與 drawer，Bottom 由於其性質會一直存在主畫面，所以提供較長操作頻繁的功能，而 drawer 因為可以展開與收起，適合作為輔助功能，在用戶需要更加細部的操作時才去呼叫，不會長時間阻擋主畫面，在用戶需要時才去呼叫

設計上關注在這些導航元件該如何清楚的排序且傳達給用戶，將其分組分層做到條列式的呈現。就像是真的拉出一個抽屜一樣，能讓使用者一眼就看到裡面有哪些工具