ツールチップは短いヒントを出します。ポップオーバーは、もっと多くの文章や選択肢、ボタンを置けます。
数語で十分な場合はツールチップを使います。ページを離れずにもっと読む必要がある場合や操作が必要な場合はポップオーバーを使います。 ガイドを開く混同しやすいUIパターンを比較する
2つのパターンは似て見えることがありますが、異なる作業を行います。正しいものを選ぶためにこれらの短いルールを使用してください。
モーダルは、作業が終わるまでページをストップさせるよ。ポップオーバーはボタンの横にあって、ページはそのまま動かせるよ。
最初に完了させる必要がある1つのタスクにはモーダルを使用します。追加の詳細や小さなアクションにはポップオーバーを使用します。 ガイドを開く ドロップダウン＆コンテキストメニュー — ラーニングバンドルDropdown & Context Menu — Learning Bundle · 選択Select · 編集可能なコンボボックスEditable Combobox
dropdownメニューはアクションを実行します。selectは決まったリストから選びます。comboboxはさらに、キーボードで入力や検索もできます。
アクションにはメニューを使用します。短い固定リストにはセレクトを使用します。長いまたは検索可能なリストにはコンボボックスを使用します。 ガイドを開くタブはコンテンツのセクション間を切り替えます。セグメント化されたコントロールは同じビュー内で小さなモード、フィルター、または値を変更します。
別々のコンテンツセクションにはタブを使用します。同じ内容を変更する短い選択肢がいくつかある場合は、セグメント化されたコントロールを使用します。 ガイドを開くアコーディオンはページ内のセクションを開き、複数を開いたままにできる場合があります。タブは一度に1つのセクションしか表示せず、共有スペースで管理します。
質問や人々が一緒に読む可能性のあるセクションにはアコーディオンを使用してください。一度に一つしか重要でない少数のビューにはタブを使用してください。 ガイドを開くトーストは、作業を止めない短いメッセージです。アラートは、絶対に見逃してはいけないので、そのまま残ったり、作業を中断したりします。
完了したアクションの確認にはトーストを使います。失敗や危険、または今すぐ注意が必要な選択にはアラートを使います。 ガイドを開くツールチップは短いラベルやヒントを出します。ホバーカードは、人やアイテム、リンクについての詳しいプレビューを見せます。
数語で十分な場合はツールチップを使います。プレビューで別ページに移動する手間を省ける場合はホバーカードを使います。キーボードやタッチでも動作する必要があります。 ガイドを開く macOS Context MenumacOS Context Menu · ドロップダウン＆コンテキストメニュー — ラーニングバンドルDropdown & Context Menu — Learning Bundle
context menuは、クリックしたアイテムに対するアクションを表示します。dropdownは、目的がはっきりした見えているボタンから開きます。
コンテキストメニューは追加のショートカットとして使用し、唯一の経路にしないでください。メニューの開く場所を確認する必要がある場合は、ドロップダウンを使用してください。 ガイドを開くカルーセルは別々のスライドを操作ボタンと一緒に見せるよ。マーキーはコンテンツの列をずっと動かし続けるよ。
各項目に時間と操作が必要な場合はカルーセルを使用してください。重要でない装飾で、一時停止や停止が可能な場合のみ、マーキーを使用してください。 ガイドを開くライトボックスは、写真や動画のために作られたモーダルだよ。ふつうのモーダルは、選択、フォーム、短い作業を入れるために使うよ。
画像や動画を拡大するにはライトボックスを使用してください。主要な作業が行動または決定である場合はモーダルを使用してください。 ガイドを開くメーソンリは異なる高さのカードを列に詰め込みます。弁当グリッドは計画されたカードサイズを使用して最も重要なものを表示します。
高さの異なる多数の個別アイテムにはマソニリーを使用します。サイズが重要性を示す小さなセットには弁当グリッドを使用します。 ガイドを開くサイドバーはページのレイアウトの中に固定されます。ドロワーは短い時間だけ横からスライドして現れ、ページに重なったり押し出したりします。
スペースがあるとき、人々がよく使うツールやリンクにはサイドバーを使います。あまり使わない作業や小さい画面の場合はドロワーを使い、閉じやすくします。 ガイドを開く3本線のボタンは、ナビゲーションを開きます。3つのドットのボタンは、近くのアイテムのその他の操作を開きます。
非表示ナビゲーションには三本線を使用し、主に小さい画面で使用します。余分なアイテム操作が収まらない場合は三点リーダーを使用し、ボタンを「その他の操作」と名付けてください。 ガイドを開くイージングは設定されたタイミングカーブに従います。スプリングは本物のスプリングのように動き、自然に止まります。
フェード、色の変化、タイムドステップにはイージングを使用してください。移動またはドラッグに追従するオブジェクトにはスプリングを使用してください。 ガイドを開くステッパーは、決まった刻みで数字を変えます。スライダーは、範囲の中から1つの場所を選びます。
小さく厳密な変更にはステッパーを使います。正確な数字を入力するよりもおおよその位置が重要な場合はスライダーを使います。常に値を表示し、キーボードをサポートします。 ガイドを開くシートは1つのウィンドウに属し、短い作業を行います。アラートは、今すぐ確認が必要な短いメッセージや選択肢を表示します。
設定、保存、または1つのドキュメントに関連する短いフォームにはシートを使用します。警告、失敗、または1ステップの確認にはアラートを使用します。 ガイドを開く空の状態とは、コンテンツがない状態を意味します。スケルトンはコンテンツがまだ読み込まれている状態で、その形状が既知であることを示します。
何もない理由と次に何をすべきかを説明するには、空の状態を使用してください。レイアウトが分かっている短い読み込みにはスケルトンを使用してください。 ガイドを開くツールバーは、ウィンドウの中に普段よく使う操作をまとめます。メニューバーは、画面の一番上にアプリのすべてのコマンドを置きます。
よく使うドキュメントや選択操作をツールバーに置きます。すべてのコマンド、キーボードショートカット、あまり使われない操作はメニューバーに置きます。 ガイドを開く