コンパニオン ウィンドウのデザイン パターン
コンパニオン ペインのパターンは、通常は表示されない第 2 レベルの画面を作成し、アプリがスパンされたらそれを表示することで、追加された画面領域を活用する絶好の機会です。
アプリ キャンバスを 1 つの画面に配置し、他の画面を使用してキャンバスの内容を操作するツールを保持することで、2 つの画面を利用することもできます。 ツールのシナリオでコンパニオン ウィンドウを使用する場合、人間工学により、ツールが右側または下部に配置される方が適している可能性が高くなります。 アプリをテストして、アプリに最適なものを確認します。
より迅速にアクセスするために、以前に埋め込まれた画面のレベル 2 の機能に昇格させることにより、ユーザーのタスク (通常はプライマリとセカンダリのリレーションシップを持つ) を補強する補完的なコンテキストを表示します。
使用するコンテンツと操作用のツールから分離すると、ユーザーは簡単に解析してコンテンツに集中できるようになります。 ツールを手に近づけることで、より人間工学的なエクスペリエンスになります (特に、横デュアル配置の場合)。
ベスト プラクティス
この設計パターンを適用するときに役立ついくつかのシナリオを次に示します。
| 推奨 | 非推奨 |
|---|---|
| 2 番目の画面を使用して、最初の画面のコンテンツを操作するためのコンパニオン ウィンドウまたはツールとして機能します。 | ヒンジを通過する両方の画面にコンテンツを表示しないでください。 |
| 推奨 | 非推奨 |
|---|---|
| 2 番目の画面は、最初の画面でゲームを実行するためのコントローラーとして使用します。 | 2 番目の画面の上にコントローラーが重ねて表示されているゲーム コンテンツを複製しないでください。 |
このパターンの利点が得られる可能性があるアプリの種類
- メイン コンテンツの横に補足情報を表示する可能性がある生産性アプリ
- 画像描画アプリのようなクリエイティブなツール
- 音楽またはビデオ編集アプリ
- ゲーム アプリ
コード例
これらのプロジェクトは、アプリで使用できるコンパニオン ウィンドウのデザイン パターンの簡単な実装を示しています。
次のステップ
次の他の設計パターンを検討してください。