側邊欄和側滑面板怎麼選？
一句話做出判斷
側邊欄會一直留在版面中。側滑面板只會暫時滑入，可能蓋住或推開內容。
空間足夠，而且導覽或工具常用時，用側邊欄。偶爾才用或螢幕很小時，用側滑面板，並提供清楚的關閉按鈕。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Sidebar Source List
↗ 側邊來源列表
側邊來源列表（Sidebar Source List）是視窗側邊的樹狀清單，選取哪個來源或集合，就會決定主內容區顯示什麼。
照片圖庫列出圖庫、喜好項目、相簿和共享群組。選取的集合會填滿內容區。
- 什麼時候用
- 當固定的集合或位置會決定主面板內容，而且使用者工作時會常常切換回去，就適合使用。
- 什麼時候不要用
- 不要用它呈現一次性檢查清單、少量平面操作，或不會真正改變主內容來源的分類。
- 程式裡的名稱
NSOutlineView source-list style / SwiftUI NavigationSplitView
Drawer
↗ 側滑面板
側滑面板會從螢幕邊緣滑入，同時保留一部分底下的畫面。
點選訂單後，詳情會從右側開啟，後方仍看得到訂單清單。
- 什麼時候用
- 查看相關詳情或處理次要任務，而且保留原本位置很有幫助時，就使用側滑面板。
- 什麼時候不要用
- 不要把步驟很多的長流程擠進狹窄的側滑面板。
- 程式裡的名稱
Dialog + edge positioning
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 側邊來源列表Sidebar Source List | 當固定的集合或位置會決定主面板內容，而且使用者工作時會常常切換回去，就適合使用。 | 不要用它呈現一次性檢查清單、少量平面操作，或不會真正改變主內容來源的分類。 | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| 側滑面板Drawer | 查看相關詳情或處理次要任務，而且保留原本位置很有幫助時，就使用側滑面板。 | 不要把步驟很多的長流程擠進狹窄的側滑面板。 | Dialog + edge positioning |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 側邊來源列表（Sidebar Source List）、側滑面板（Drawer） 中，為真實使用流程選出最合適的介面模式。判斷規則：側邊欄會一直留在版面中。側滑面板只會暫時滑入，可能蓋住或推開內容。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。