Popovers

hr.icon

ポップオーバーとは、コントロールや領域をタップしたときに、画面上の他のコンテンツの上に表示される一時的な表示のことです。

通常、ポップオーバーには、ポップオーバーが出現した場所を示す矢印が表示されます。

ポップオーバーには、モーダルなものとモーダルではないものがあります。

非モーダルのポップオーバーは、画面の他の部分やポップオーバー上のボタンをタップすることで解除されます。

モーダルポップオーバーは、ポップオーバー上のキャンセルボタンや他のボタンをタップすることで解除されます。

ポップオーバーは、大きな画面に最適で、ナビゲーションバー、ツールバー、タブバー、テーブル、コレクション、画像、マップ、カスタムビューなど、さまざまな要素を含むことができます。

ポップオーバーが表示されているときは、通常、ポップオーバーが解除されるまで、他のビューとのインタラクションは無効になります。

ポップオーバーは、画面上のコンテンツに関連するオプションや情報を表示するために使用します。

例えば、多くのiPadアプリでは、アクションボタンをタップすると、共有オプションのポップオーバーが表示されます。

https://gyazo.com/564f110d63679c4038e31d203762658f

iPhoneでは、ポップオーバーを表示しないようにしてください。

一般的に、ポップオーバーはiPadアプリで使用するために確保されるべきです。

iPhoneアプリでは、ポップオーバーではなく、フルスクリーンのモーダルビューで情報を表示することで、利用可能なすべてのスクリーンスペースを活用します。

「閉じる」ボタンは、確認とガイダンスにのみ使用します。

キャンセルや完了などの閉じるボタンは、変更を保存して終了するか、保存せずに終了するかなど、明確にするために含めるとよいでしょう。

一般的に、ポップオーバーはその存在が不要になったときに自動的に閉じるべきです。

ほとんどの場合、ポップオーバーは、誰かがその境界の外側をタップするか、ポップオーバー内のアイテムを選択すると閉じるはずです。

複数選択できる場合は、誰かが明示的にポップオーバーを閉じるか、ポップオーバーの境界の外側をタップするまで、ポップオーバーは開いたままにする必要があります。

非モーダルポップオーバーを自動的に閉じるときは、必ず作業を保存してください。

非モーダルポップオーバーは、画面の他の部分をタップすることで意図せずに閉じてしまうことがあります。

誰かが明示的にキャンセルボタンをタップしたときだけ、作業を破棄します。

ポップオーバーは画面上の適切な位置に配置します。

ポップオーバーの矢印は、それを表示する要素にできるだけ直接向くようにします。

ポップオーバーは画面上でドラッグできないので、ポップオーバーの使用中に見る必要のある重要なコンテンツをポップオーバーが覆わないようにします。

また、ポップオーバーは、ポップオーバーを表示するためにタップされた要素を覆わないようにする必要があります。

ポップオーバーは一度に1つだけ表示します。

複数のポップオーバーを表示すると、インターフェイスが煩雑になり、混乱を招きます。

1つのポップオーバーが別のポップオーバーから現れるような、カスケードや階層構造のポップオーバーは表示しないでください。

新しいポップオーバーを表示する必要がある場合は、開いているポップオーバーを先に閉じます。

ポップオーバーの上に別のビューを表示しないでください。

警告を除いて、ポップオーバーの上には何も表示してはいけません。

可能であれば、ユーザーが1回のタップで1つのポップオーバーを閉じ、別のポップオーバーを開けるようにします。

複数の異なるバーボタンがそれぞれポップオーバーを開く場合、余分なタップを避けることが特に望ましいです。

ポップオーバーを大きくしすぎないようにします。

ポップオーバーは、画面全体を占めるべきではありません。

内容を表示し、元の場所を示すのに十分な大きさでなければなりません。

画面上にうまく収まるように、システムがポップオーバーの大きさを調整する場合がありますので、ご注意ください。

カスタムポップオーバーは、ポップオーバーらしく見えるようにします。

ポップオーバーの視覚的な側面の多くをカスタマイズすることができますが、人々がポップオーバーと認識しないようなデザインを作成することは避けてください。

ポップオーバーは、標準的なコントロールとビューを含んでいるときに最もよく機能する傾向があります。

ポップオーバーのサイズを変更するときは、スムーズに移行できるようにします。

ポップオーバーの中には、同じ情報を凝縮して表示するものと拡大して表示するものがあります。

ポップオーバーのサイズを調整する場合は、新しいポップオーバーが古いポップオーバーを置き換えたという印象を与えないように、変更にアニメーションを使用します。