決定ガイド · 02

ツールバー vs メニューバー(macOS)

短い答え

ツールバーは、ウィンドウの中に普段よく使う操作をまとめます。メニューバーは、画面の一番上にアプリのすべてのコマンドを置きます。

よく使うドキュメントや選択操作をツールバーに置きます。すべてのコマンド、キーボードショートカット、あまり使われない操作はメニューバーに置きます。

01

各パターンが何をするかを見る

それぞれの例を試してみる。その後、それが作られた仕事について読む

Unified Title Bar Toolbar

Unified Title Bar Toolbar

↗

統合タイトルバーツールバーは、ウィンドウのタイトル部分に組み込まれたコマンドの列です。よく使う操作が置かれており、変更もできます。

Unified Title Bar ToolbarProject Atlas
Navigation patternsProduction ready
Motion principlesProduction ready
AccessibilityProduction ready
メモアプリは、サイドバーの切り替え、検索、共有、フォーマットツールを、ドラッグできる一つのタイトルバー領域にまとめるよ。
以下の場合に使用します
下の作業を助けるために、直接アクセスとカスタム選択が役立つ現在のウィンドウに関連する共通コマンドに使用してください。
以下の場合は使用しないでください
珍しいまたは破壊的なコマンドで混雑させないでください。選択依存アイテムはそのままにして、有効または選択状態を更新できます。不要なレイアウトの移動を避け、必須のコマンドはメニューバーで見つけやすくしてください。
コードで使用する名前
AppKit NSToolbar / SwiftUI toolbar
フルガイドを開く
macOS Menu Bar

macOS Menu Bar

↗

macOSのメニューバーは、画面の上部にある帯です。アクティブなアプリは、そこに明瞭なメニューで全てのコマンドを配置します。

元の作業例macOS Menu Bar
文章を書くアプリは、「新規」「書き出し」「検索」やウィンドウのコマンドを、いつもの「ファイル」「編集」「ウィンドウ」メニューに置きます。
以下の場合に使用します
アプリの完全なコマンドセットをここに置きます。メニュー名で見つけるコマンドやキーボードショートカットで実行するコマンドを含めます。
以下の場合は使用しないでください
ウィンドウ内のナビゲーションにそれを使用しないでください。ここにはコマンドを保持してください(ツールバーやコンテキストメニューにあっても)。現在の状態に依存するコマンドは更新してください。
コードで使用する名前
AppKit NSMenu / SwiftUI Commands
フルガイドを開く
02

クイック比較

UIパターン最適のためではないコードで使用する名前
Unified Title Bar ToolbarUnified Title Bar Toolbar 下の作業を助けるために、直接アクセスとカスタム選択が役立つ現在のウィンドウに関連する共通コマンドに使用してください。 珍しいまたは破壊的なコマンドで混雑させないでください。選択依存アイテムはそのままにして、有効または選択状態を更新できます。不要なレイアウトの移動を避け、必須のコマンドはメニューバーで見つけやすくしてください。 AppKit NSToolbar / SwiftUI toolbar
macOS Menu BarmacOS Menu Bar アプリの完全なコマンドセットをここに置きます。メニュー名で見つけるコマンドやキーボードショートカットで実行するコマンドを含めます。 ウィンドウ内のナビゲーションにそれを使用しないでください。ここにはコマンドを保持してください(ツールバーやコンテキストメニューにあっても)。現在の状態に依存するコマンドは更新してください。 AppKit NSMenu / SwiftUI Commands
03

出荷前に

  1. 01

    その人が何をする必要があるかを書き留めてください。

  2. 02

    キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。

  3. 03

    人々がホバーや動作なしで同じ情報を得られるようにしてください。

  4. 04

    小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。

04

比較リクエストをコピーできます

パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。

実際のユーザーフローに最適なパターンをUnified Title Bar Toolbar (Unified Title Bar Toolbar)、macOS Menu Bar (macOS Menu Bar)から選んでください。このルールを使用してください: ツールバーは、ウィンドウの中に普段よく使う操作をまとめます。メニューバーは、画面の一番上にアプリのすべてのコマンドを置きます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。

自分でコピーする

ブラウザはこれをコピーできませんでした。下のリクエストを選択して自分でコピーしてください。