このトピックはまだ評価されていません - このトピックを評価する

Windows Phone の Panorama コントロールのデザイン ガイドライン

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

Panorama コントロールは、左右にパンできる項目のビューを表示します。アプリの全画面コンテナーであり、ナビゲーション モデルです。

OEM_OemMoAppDevGuide_PeoplePan

Panorama コントロール

このトピックは、次のセクションで構成されています。

パノラマ エクスペリエンスは、Windows Phone 本来のルック アンド フィールの一部です。デバイスの画面の範囲に収まるようにデザインされた標準的なアプリとは異なり、パノラマ アプリは、画面の範囲を越えた横長のキャンバスを使用することによって、コントロール、データ、およびサービスを独自の方法で表示します。これは本質的に動的なビューであり、レイヤー化されたアニメーションとコンテンツを使用して、視差効果と同様に、レイヤーがさまざまな速度でスムーズにパンします。

パノラマ アプリの要素は、より詳細な項目表示への開始地点です。その目標は、視覚的に豊かな方法でコンテンツをユーザーに表示することです。

ユーザー インターフェイスは、それぞれ独立したロジックで動作する複数種のレイヤーで構成されます。背景イメージ、パノラマ タイトル、パノラマ セクション タイトル、パノラマ セクションといったレイヤーがあります。パノラマ ビューは、その主要要素であるサムネイルによって完成されます。それらはパノラマ エクスペリエンスの外部で利用されるコンテンツまたはメディアにリンクしています。

背景イメージは一番下のレイヤーで、パノラマに雑誌のような雰囲気を与えるのに役立ちます。通常はふちなしで全体に表示されるこの画像は、アプリの中で最も視覚的に訴える部分となる場合もあります。

パノラマ タイトルはアプリを識別するためのもので、ユーザーがどのような方法でアプリを開始しても目に入るように配置する必要があります。

パノラマ セクションはパノラマ アプリのコンポーネントで、各種のコントロールやコンテンツを格納しています。パノラマ セクションは、指によるパンやフリックと同じスピードで移動します。

パノラマ セクション タイトルは、パノラマ セクションごとにオプションで使用できます。

サムネイルはパノラマ ビューのメインの要素となることもあります。それらはパノラマ エクスペリエンスの外部で利用されるコンテンツまたはメディアにリンクしています。

OEM_OemMoAppDevGuide_PictPan

パノラマ コントロールとそのサムネイル

パノラマ デザインは、1 つの Panorama コントロールと 1 つまたは複数の PanoramaItem コントロールで構成されます。Panorama コントロールがアプリの基盤を提供し、PanoramaItem コントロールが個々のコンテンツ セクションをホストします。アプリの要件に応じて、Panorama コントロールのサーフェイスに複数の PanoramaItem コントロールを追加して、それぞれに異なる機能目的を持たせることができます。たとえば、ある PanoramaItem には一連のリンクとコントロールを含め、別の PanoramaItem コントロールはサムネイル画像のリポジトリとして使用するなどです。ユーザーは、パノラマ アプリによって既に提供されているジェスチャ サポートを使用して、これらのセクションを前後にパンすることができます。

パノラマの一般的なガイドライン

  • Panorama コントロールは、最後のセクションから最初のセクションへ、またはその逆にラップします。この効果を使用して、アプリのフローを適切に設計します。

  • Panorama でアプリ バーを使用する場合は、モードを最小に設定します。このモードは、Panorama ページの画面領域を最大限に利用するために設計されています。詳細については、「Windows Phone のアプリ バー」を参照してください。

  • パフォーマンスを維持するためと、ユーザーが移動しなければならないビューの数を制限するために、Panorama コントロールでは 5 つ以上のセクションを使用しないでください。コンテンツが複雑な場合は、使用するセクションをさらに減らす必要があります。セクションが多すぎるとユーザーが混乱します。4 つか 5 つ程度のセクションなら、今どこにいて左には何があり右には何があるか把握することができます。

  • Panorama コントロールは縦向き専用です。Panorama コントロールでは、横向きをサポートしていません。Panorama コントロール内から起動するダイアログは、不快な操作性を避けるために回転させないでください。

  • Panorama コントロールは、システム トレイの進行状況バーまたは起動時の全画面の "読み込み" インジケーターを表示できます。システム トレイの進行状況バーは、Panorama コントロールのセクションが更新中だが、ユーザーの対話をブロックしていない場合に表示されます。

  • 初回訪問:最初に表示されるセクションでは、Panorama コントロールのタイトルを左側に正確に位置揃えする必要があります。どのセクションを既定にするかについての標準ガイドラインはありません。表示する内容によります。

  • その後の訪問の場合、ユーザーが同じ Panorama コントロールを再訪問したときに、中断したペインに戻される必要があります。

  • Panorama コントロール内で Pivot コントロール (またはその逆) を使用しないでください。ただし、Panorama コントロール セクション内の項目を Pivot コントロールに導くようにリンクを作成することができます。

  • Panorama コントロール内でパンやスクロールできるコントロールを使用しないでください。たとえば、Panorama コントロール セクション内に Map コントロールを配置すると、Panorama コントロールが使いにくくなります。ジェスチャ入力が混同されます。たとえば、Panorama コントロールのセクション内にあるスライダーを左にスライドしようとすると、セクションをスクロールしたいのかスライダーを動かしたいのかはっきりしません。これを解決するには、ジェスチャ入力と必要とするコントロールを個別のサブページに置き、そこにナビゲートするようにします。ジェスチャ操作をサポートしない地図は Panorama コントロールのセクション内に入れても問題ありません。マップをアクティブにするボタンをオーバーレイすることができます。ボタンをクリックすると、実際には、Map コントロールのみを含む別のページに移動します。その後ユーザーは [戻る] ボタンを押して Panorama セクションに戻ることができます。

  • Pivot コントロールに対して、Panorama コントロールを使用する状況に関するその他のガイダンスについては、次のトピックを参照してください。

パノラマ タイトル:

  • Panorama タイトルには、プレーン テキストか画像 (ロゴなど) を使用します。ロゴとテキストやその他の UI 要素など、複数の要素を組み合わせることもできます。

  • タイトルのフォントやイメージには背景画像のどこでもはっきり見えるような色を使用し、場所によって見えにくくなったりしないよう注意します。ブランド戦略の制約がない限り、システム フォントとスタイルを使用してください。

  • 一貫性を維持するため、[スタート] の起動タイトルは Panorama タイトルと同じにします。

  • Panorama タイトルをアニメーション化したり、サイズを動的に変更したりしないでください。

  • Panorama タイトルのモーション レートは、最上位のコンテンツ レイヤーや背景イメージよりも遅くします。

パノラマ セクション タイトル:

  • Panorama セクション タイトルにはプレーン テキストを使用します。画像を使うこともできます。画像とテキスト (または UIElement クラスのその他の要素) など複数の要素を組み合わせることもできます。

  • Panorama セクション タイトルが背景イメージに関係なく見やすいことを確認します。

  • タイトルが動くため、Panorama セクション タイトルにはアニメーションを使用しないでください。

  • 複数のコントロールがある場合でも、Panorama セクション全体を Panorama セクション タイトルに合わせて広げます。

  • ユーザーが別のセクションに移動するときは、Panorama セクション タイトルをアニメーションによって画面の外に出します。

  • Panorama セクション タイトルは、セクションの幅が画面の幅より広いか狭いかによって異なる動作をする必要があります。セクションの幅の方が広い場合は、水平のアニメーションを使用します。タイトルはセクションの左上にとどまらず、Panorama が移動するにつれて異なるスピードで上端に沿って移動する必要があります。この場合、縦のスクロールが発生してはなりません。セクションの幅が画面の幅より小さい場合は、タイトルはセクションの左上に固定されなければなりません。この場合、水平方向のアニメーションが発生してはなりません。またタイトルはコンテンツと共に移動する必要があります。

パノラマ セクション:

  • Panorama セクション内のリストやグリッドの垂直方向スクロールは、セクション内に限定され、水平スクロールと同時に発生しない限り使用できます。

  • ユーザーが別のセクションに移動するときは、Panorama セクションをアニメーションによって画面の外に出します。

  • 表示するコンテンツがない場合は Panorama セクションを非表示にすることを検討してください。

背景アートのベスト プラクティス

  • 常に背景を使用したり、複雑な背景を使用したりする必要はありません。

  • 写真背景によって Panorama コントロールは見栄えが良くなります。

  • Panorama コントロールにテーマを設定し、アプリのブランド カラーでシステムのテーマをオーバーライドすることができます。

  • Panorama コントロール タイトル内に埋め込みテキストとロゴを含める場合は注意してください。システム トレイやその他の要素と、重なったり、噛み合ったりする問題が発生する可能性があります。

  • 内容に含めるテキストとイメージを吟味することによって、Panorama コントロールの操作性の美しさを維持し、混乱させたり、うるさくならないようにしてください。

  • 暗く、柔らかい、コントラストの低い背景を使用してください。実践的な技法の 1 つとして、背景イメージの上に半透明の黒か白のフィルター (四角形) を使用して、テキストを見やすくします。これを実行するには、ビットマップ編集ツールを使用するか、四角形コントロールを使用して、背景イメージの上に重ねます。

  • できるだけ、Panorama コントロールの背景として 1 つのイメージを使用してください。

  • 単一色の背景または Panorama コントロール全体に広がる画像を使用します。画像を使う場合、サポートしているほとんどの種類の UI イメージを使用できます。ただし、JPEG は他の形式と比較してサイズが小さくなるため、一般に JPEG が推奨されます。

  • 背景に複数のイメージを使用することもできますが、一度に表示されるイメージは 1 つにしてください。

  • 背景イメージは、高速のパフォーマンスと最小の読み込み時間を確保し、拡大縮小されないようにするため、480 x 800 ピクセルから 1024 x 800 ピクセル (幅 x 高さ) までにする必要があります。

サムネイル:

  • 画像全体を使用するよりも、項目を際立たせるようにトリミングした画像を使用します。画像だけでは内容が明確でない場合は、コンテンツを説明するようなテキストを 2 行まで追加できます。

UI_Panorama_04

パノラマ コントロールの各部分 (タイトル、セクション タイトル、その他)

この情報は役に立ちましたか。
(残り 1500 文字)
フィードバックをいただき、ありがとうございました
表示:
© 2014 Microsoft. All rights reserved.