ポップオーバー

ポップオーバーは、人々がコントロールまたは操作領域をクリックまたはタップしたときに、スクリーン上の他のコンテンツの上に表示される一時的なビューです。

ベストプラクティス

ポップオーバーを使用して、少量の情報または機能を公開します。 人々がポップオーバーを操作するとポップオーバーは消えるため、ポップオーバーの機能の量をいくつかの関連するタスクに制限します。たとえば、カレンダーイベントのポップオーバーを使用すると、人々はイベントの日付や時刻を変更したり、別のカレンダーに移動したりできます。変更後、ポップオーバーは消え、人々は引き続きカレンダーでイベントを確認できます。

コンテンツ用のスペースを増やしたい場合は、ポップオーバーの使用を検討してください。 サイドバーやパネルなどのビューは、多くのスペースを占有します。コンテンツが一時的にのみ必要な場合は、ポップオーバーに表示すると、インターフェイスを簡素化できます。

ポップオーバーをスクリーン上に適切に配置します。 ポップオーバーの矢印が、それを表示した要素をできるだけ直接指していることを確認してください。理想的には、ポップオーバーは、それを表示した要素や、人々が使用中に表示する必要のある重要なコンテンツをカバーしません。

閉じるボタンは、確認とガイダンスの目的でのみ使用してください。 キャンセルや完了などの閉じるボタンは、変更を保存して終了する場合としない場合のように、明確にする場合に含める価値があります。それ以外の場合、人々がその境界の外側をクリックまたはタップするか、ポップオーバー内の項目を選択すると、ポップオーバーは通常閉じます。複数の選択が可能な場合は、人々が明示的に閉じるか、境界の外をクリックまたはタップするまで、ポップオーバーは開いたままにしてください。

モーダルでないポップオーバーを自動的に閉じるときは常に作業を保存して下さい。 スクリーンの別の部分をクリックまたはタップすると、意図せずにモーダルでないポップオーバーを閉じることができます。人々が明示的な [キャンセル] ボタンをクリックまたはタップした場合にのみ、作業を破棄します。

一度に 1 つのポップオーバーを表示します。 複数のポップオーバーを表示すると、インターフェースが乱雑になり、混乱を招きます。ポップオーバーのカスケードまたは階層を決して表示しないでください。新しいポップオーバーを表示する必要がある場合は、開いているポップオーバーを最初に閉じます。

ポップオーバーの上に別のビューを表示しないでください。 アラートを除いて、ポップオーバーの上に何も表示されないことを確認します。

可能であれば、人々が 1 つのポップオーバーを閉じて、別のポップオーバーを開くことが 1 回のクリックまたはタップでできるようにします。 いくつかの異なるバーボタンがそれぞれポップオーバーを開く場合は、余分なジェスチャを避けることが特に望ましいです。

ポップオーバーを大きくしすぎないようにします。 スクリーン全体を占有するのではなく、ポップオーバーがそのコンテンツを表示するのに十分な大きさにし、ポップオーバーの元の場所を指すようにします。ポップオーバーがスクリーンにうまく収まるように、システムがポップオーバーのサイズを調整することに注意してください。

ポップオーバーのサイズを変更するときにスムーズな移行をします。 一部のポップオーバーは、同じ情報の要約ビューと拡張ビューの両方を提供します。ポップオーバーのサイズを調整する場合は、変更をアニメーション化して、古いポップオーバーが新しいポップオーバーに置き換わったような印象を与えないようにします。

ヘルプドキュメントで popover という単語を使用するのを避けてください。 代わりに、特定のタスクまたは選択を参照してください。たとえば、「ポップオーバーの下部にある [表示] ボタンを選択してください」の代わりに、「[表示] ボタンを選択してください」と書きます。

ポップオーバーを使用して警告を表示することは避けてください。 人々は簡単に、または誤ってポップオーバーを閉じてしまいます。代わりに、アラートを使用して人々に警告します。

プラットフォームの考慮事項

tvOS または watchOS ではサポートされていません。

iOS、iPadOS

コンパクトビューでポップオーバーを表示するのは避けて下さい。 コンテンツ領域のサイズクラスに基づいて、あなたのアプリまたはゲームのレイアウトを動的に調整します。広いビュー用にポップオーバーを取っておきます。コンパクトビューの場合は、代わりにシートのようなフルスクリーンモーダルビューで情報を表示することにより、使用可能なすべてのスクリーンスペースを使用します。関連するガイダンスについては、モダリティを参照してください。