デュアル ビューのデザイン パターン

  • [アーティクル]

画面が 2 つあると、同じ種類のコンテンツの 2 つのバージョンを比較する自然な機会が得られます。 2 つの画像、2 つのリスト、または 2 つのドキュメントを並べて比較できます。

また、同じ情報を 2 つの異なる方法で同時に表示することもできます。 各画面はシームレスに動作し、ユーザーに詳細情報を提供します。 たとえば、1 つの画面にレストランの一覧を表示し、もう一方の画面に場所があるマップを表示します。

2 つの特定のビューを設計せずにデュアル ビューのようなエクスペリエンスを実現する場合は、代わりにアプリでマルチインスタンスをサポートすることを検討してください。 この方法では、OS が提供する組み込みのサポートを利用します。 このエクスペリエンスは、2 つのタブまたは他の同様のシナリオで開かれた 2 つの製品を比較する場合に役立ちます。

Screenshot shows the dual view experience with similar views side by side and the same data presented different ways.

ベスト プラクティス

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

Screenshot shows the preferred dual view contrasted with the list detail pattern.

推奨 非推奨
画面の左側を使用して 1 つのビューにコンテンツを表示し、2 番目の画面を使用して同じコンテンツを別のビューで表示します。 左側の画面を使用してリストを表示したり、2 番目の画面を使用して詳細を表示したりしないでください。 これがリストの詳細デザイン パターンです。

Screenshot shows visual indicators that are synchronized for the selected item on both screens.

推奨 非推奨
ビジュアル インジケーターを使用して、2 つの異なるビューに同じ情報を表示します。 ビジュアルを誤って使用しないでください。 ビジュアル インジケーターを正しい方法で使用しないと、リストの詳細ビューが表示される可能性があります。

Screenshot shows the two screens used to compare data, instead of a list and detail display.

推奨 非推奨
2 つの画面を使用して、製品の同じインスタンスを比較します。 1 つの画面にリストを表示し、2 番目の画面に詳細を表示しないでください。

Screenshot shows using the two screens to preview and edit at the same time, but not on both screens interchangeably.

推奨 非推奨
2 番目の画面を使用して、デュアル ビューの最初の画面のコンテンツからの変更を編集またはマークアップします。 ユーザーがデュアル ビューの両方の画面で変更を編集またはマークアップできないようにします。

このパターンの利点が得られる可能性があるアプリの種類

  • 前後の状態を並べて表示することでメリットを得られる編集ツール。 たとえば、マークダウン コードとプレビューです。
  • コンテンツとコンテキストを並べて表示します。 たとえば、マップやレストランの一覧などです。
  • ユーザーが同様の項目を比較できるようにするアプリ。
  • 2 つのキャンバスと調整された内容を持つが、各ページを別々に保つ。 たとえば、一方の側のキャンバスは、もう一方を取ってメモします。

コード例

これらのプロジェクトは、アプリで使用できるデュアル ビューの簡単な実装を示しています。

次の手順

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