サイドバー vs. ドロワー
サイドバーはページのレイアウトの中に固定されます。ドロワーは短い時間だけ横からスライドして現れ、ページに重なったり押し出したりします。
スペースがあるとき、人々がよく使うツールやリンクにはサイドバーを使います。あまり使わない作業や小さい画面の場合はドロワーを使い、閉じやすくします。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Sidebar Source List
サイドバーのソースリストは、ウィンドウの横にあるツリー状のリストです。選んだソースやグループが、メインエリアに表示される内容を決めます。
フォトライブラリは、Library、Favorites、アルバム、共有グループを一覧にするよ。選んだコレクションが詳細エリアを埋めるよ。
- 以下の場合に使用します
- 安定したグループや場所がメインビューをコントロールし、人々が作業中によく戻る場合に使用します。
- 以下の場合は使用しないでください
- 一度限りのチェックリストや短く単調なアクションリストには避けてください。各カテゴリは、メインのコンテンツソースを実際に変える必要があります。
- コードで使用する名前
NSOutlineView source-list style / SwiftUI NavigationSplitView
引き出し
drawerは、画面の端からスライドして現れます。その後ろにあるページの一部も見えたままです。
注文を選択して、右側から詳細を開きます。注文リストはその背後に表示されたままです。
- 以下の場合に使用します
- 詳細や、現在の位置を保持することが役立つ小さい第二のタスクに使用します。
- 以下の場合は使用しないでください
- 多段階の長いワークフローを狭いドロワーに詰め込んではいけません。
- コードで使用する名前
Dialog + edge positioning
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | 安定したグループや場所がメインビューをコントロールし、人々が作業中によく戻る場合に使用します。 | 一度限りのチェックリストや短く単調なアクションリストには避けてください。各カテゴリは、メインのコンテンツソースを実際に変える必要があります。 | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| 引き出しDrawer | 詳細や、現在の位置を保持することが役立つ小さい第二のタスクに使用します。 | 多段階の長いワークフローを狭いドロワーに詰め込んではいけません。 | Dialog + edge positioning |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをSidebar Source List (Sidebar Source List)、引き出し (Drawer)から選んでください。このルールを使用してください: サイドバーはページのレイアウトの中に固定されます。ドロワーは短い時間だけ横からスライドして現れ、ページに重なったり押し出したりします。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。