UWP アプリのコンテンツ デザインの基本

どのようなアプリでも、主な目的はコンテンツへのアクセスを提供することです。たとえば、写真編集アプリでは写真がコンテンツであり、旅行アプリでは地図と旅行の目的地に関する情報がコンテンツです。 ナビゲーション要素はコンテンツへのアクセスを提供します。コマンド要素はユーザーがコンテンツを操作できるようにし、コンテンツ要素は実際のコンテンツを表示します。

この記事では、3 つのコンテンツ シナリオでのコンテンツの設計に関する推奨事項を示します。

適切なコンテンツ シナリオの設計

次の 3 つの主要なコンテンツ シナリオがあります。

  • 使用: コンテンツを使用する、主に一方向のエクスペリエンス。 使用は、読む、音楽を聴く、ビデオを見る、写真や画像を表示するなどのタスクです。
  • 作成: 新しいコンテンツの作成が焦点となる、主に一方向のエクスペリエンス。 作成は、写真やビデオの撮影のように何かをゼロから作る、描画アプリで新しい画像を作る、新しいドキュメントを開くなどに分かれます。
  • 対話型: コンテンツの使用、作成、修正を含む、2 方向のコンテンツ エクスペリエンス。

使用に重点を置いたアプリ

使用に重点を置いたアプリでは、コンテンツ要素の優先順位が最も高く、ユーザーが目的のコンテンツを探すために必要な ナビゲーション要素 が次に続きます。 使用に重点を置いたアプリの例として、ムービー プレーヤー、読書アプリ、音楽アプリ、フォト ビューアーなどがあります。

ニュースリーダー アプリ

使用に重点を置いたアプリに関する一般的な推奨事項:

  • 専用の ナビゲーション ページとコンテンツ表示ページを作成し、ユーザーが探していたコンテンツを見つけたときに、無駄な情報がない専用のページでそのコンテンツを表示できるようにすることを検討します。
  • コンテンツを画面全体に拡張し、その他のすべての UI 要素を非表示にする、全画面表示のオプションを作成することを検討します。

作成に重点を置いたアプリ

コンテンツと コマンド 要素は、作成に重点を置いたアプリでは最も重要な UI 要素です。コマンド要素により、ユーザーは新しいコンテンツを作成することができます。 この例には、ペイント アプリ、写真編集アプリ、ビデオ編集アプリ、ワード プロセッシング アプリがあります。

例として、コマンド バーを使ってツールや写真操作オプションにアクセスできるようにするフォト アプリのデザインを以下に示します。 すべてのコマンドがコマンド バーにあるため、アプリは画面のスペースのほとんどをそのコンテンツ (編集する写真) に充てることができます。

アクティブなキャンバスを使った写真編集アプリの設計例

作成に重点を置いたアプリに関する一般的な推奨事項:

  • ナビゲーション 要素の使用を最小限に抑えます。
  • コマンド要素は、作成に重点を置いたアプリで特に重要です。 ユーザーは多くのコマンドを実行するため、コマンド履歴/元に戻す機能を提供することをお勧めします。

対話型コンテンツを含むアプリ

対話型コンテンツを含むアプリでは、ユーザーはコンテンツを作成、表示、編集します。多くのアプリはこのカテゴリに分類されます。 これらの種類のアプリの例には、基幹業務アプリ、在庫管理アプリ、ユーザーがレシピを作成または変更できる料理のアプリなどがあります。

コラボレーション ツールの設計、対話型コンテンツを含むアプリ

これらの種類のアプリでは、次の 3 つすべての UI 要素のバランスを取る必要があります。

  • ナビゲーション要素を使用すると、ユーザーがコンテンツを見つけて表示しやすくなります。 コンテンツの表示と検索が最も重要なシナリオである場合は、ナビゲーション要素、フィルター処理と並べ替え、検索を優先します。
  • コマンド要素を使用すると、ユーザーはコンテンツを作成、編集、操作できます。

対話型コンテンツを使ったアプリに関する一般的な推奨事項:

  • 3 つすべてが重要であるときに、ナビゲーション、コンテンツ、およびコマンド要素のバランスを取ることは困難である場合があります。 可能であれば、コンテンツの閲覧、作成、編集用の別の画面を作成するか、モード スイッチを提供することを検討します。

よく使われるコンテンツ要素

コンテンツの表示によく使われるいくつかの UI 要素を次に示します。 UI 要素の全一覧については、「コントロールと UI 要素」をご覧ください。

カテゴリ 要素 説明
オーディオとビデオ メディア再生コントロールとメディア トランスポート コントロール オーディオとビデオを再生します。
画像ビューアー フリップ ビュー画像 画像を表示します。 FlipView は、コレクション内の画像 (アルバム内の写真や製品の詳細ページ内の項目など) を一度に 1 つずつ表示します。
リスト ドロップダウン リスト、リスト ボックス、リスト ビューとグリッド ビュー 対話型のリストまたはグリッド内に項目を表示します。 これらの要素を使うと、ユーザーは新着の一覧からムービーを選んだり、在庫を管理したりすることができます。
テキストとテキスト入力

テキスト ブロックテキスト ボックスリッチ エディット ボックス

テキストを表示します。 一部の要素を使うと、ユーザーがテキストを編集することができます。 詳しくは、「テキスト コントロール」をご覧ください。