コンテキストメニュー vs. ドロップダウン
context menuは、クリックしたアイテムに対するアクションを表示します。dropdownは、目的がはっきりした見えているボタンから開きます。
コンテキストメニューは追加のショートカットとして使用し、唯一の経路にしないでください。メニューの開く場所を確認する必要がある場合は、ドロップダウンを使用してください。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
macOS Context Menu
macOS Context Menu は、ポインタの下にある項目の、短いアクションリストだよ。副ボタンのクリック（右クリックなど）で開くよ。
選択したファイルを右クリックすると、リストを離れずに名前の変更、複製、共有、ゴミ箱に移動が表示されます。
- 以下の場合に使用します
- ポインター下のアイテムや選択に依存する、あまり一般的でない短い操作セットに使用します。
- 以下の場合は使用しないでください
- 重要なコマンドへの唯一の経路としてコンテキストメニューを使用しないでください。アプリ全体のコマンドは、1つのアイテムのアクションから離して配置してください。
- コードで使用する名前
AppKit NSMenu / SwiftUI contextMenu
ドロップダウン＆コンテキストメニュー — ラーニングバンドル
この学習バンドルは、開き方によってメニューを比較します。ドロップダウンはコントロールから開きます。コンテキストメニューは1つのオブジェクトに属し、しばしばポインタで開きます。このバンドルは、標準的なメニュー用語の1つではありません。
DropdownMenu / ContextMenu「その他」ボタンは一般的な操作を開きます。ファイルを右クリックすると、そのファイルに対する操作のみが開きます。
- 以下の場合に使用します
- タスクに合うトリガーとオブジェクトを持つメニューを選択します。次にそのキーボード動作を作成します。
- 以下の場合は使用しないでください
- コマンドメニューの中にフォームフィールドやサイトのメインナビゲーションを絶対に入れないでください。
- コードで使用する名前
DropdownMenu / ContextMenu
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| macOS Context MenumacOS Context Menu | ポインター下のアイテムや選択に依存する、あまり一般的でない短い操作セットに使用します。 | 重要なコマンドへの唯一の経路としてコンテキストメニューを使用しないでください。アプリ全体のコマンドは、1つのアイテムのアクションから離して配置してください。 | AppKit NSMenu / SwiftUI contextMenu |
| ドロップダウン＆コンテキストメニュー — ラーニングバンドルDropdown & Context Menu — Learning Bundle | タスクに合うトリガーとオブジェクトを持つメニューを選択します。次にそのキーボード動作を作成します。 | コマンドメニューの中にフォームフィールドやサイトのメインナビゲーションを絶対に入れないでください。 | DropdownMenu / ContextMenu |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをmacOS Context Menu (macOS Context Menu)、ドロップダウン＆コンテキストメニュー — ラーニングバンドル (Dropdown & Context Menu — Learning Bundle)から選んでください。このルールを使用してください: context menuは、クリックしたアイテムに対するアクションを表示します。dropdownは、目的がはっきりした見えているボタンから開きます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。