2 ページのデザインパターン

ブックのメタファーを活用すると、2 つのページパターンは自然に本のようなページングエクスペリエンスを提供する傾向があります。自然な境界を使用すると、ページや画像などのコレクションのいくつかの項目を表示できます。それ以外の場合は、ユーザーが一度に 1 つずつ表示する必要がある可能性があります。

アプリによっては、一度に 2 ページ分のページ分割を行うか、一度に 1 ページ進めます。

Diagram shows the two page design pattern.

ベストプラクティス

この設計パターンを適用する際に役立つシナリオをいくつか次に示します。

Diagram shows two pages side-by-side, like a book, with no content under the hinge.

推奨	非推奨
2 つの画面を使用して、完全に独立した 2 つのページビューを表示します。	ヒンジの下を通過する 2 つの画面にページを表示しないでください。

Diagram shows items on separate pages, not under the hinge.

推奨	非推奨
2 ページ形式を使用して、オンボード/説明コンテンツのアクション可能な項目を表示します。	ヒンジの下を通過する 2 つの画面にわたって、実用的な項目を表示しないでください。

Diagram shows each individual page expanded to take up both screens in dual-landscape mode, where the user can see all content.

推奨	非推奨
デバイスが二重の横向きに回転したときに、コンテンツを 1 つのページとして表示します。	デバイスの向きをロックしないでください。ユーザーがデバイスを回転させて、大きな画面でコンテンツを表示できるようにします。

Diagram shows a placeholder or other element on the second screen if no content exists.

推奨	非推奨
コンテンツに必要な画面が 1 つだけの場合は、2 番目の画面でイラストまたは視覚的なインジケーターを使用します。	スペースを埋めるために、2 つの画面に 1 つのページをまたがってはいけません。

これらのプロジェクトは、アプリで使用できる 2 つのページデザインパターンの簡単な実装を示しています。

次の他の設計パターンを検討してください。