次の方法で共有


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 つのページ デザイン パターンの簡単な実装を示しています。

次のステップ

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