エクスポート (0) 印刷
すべて展開

Windows Phone のアニメーション、モーション、および出力

2013/12/05

対象: Windows Phone 8 | Windows Phone OS 7.1

Windows Phone アプリでは、モーション、サウンド、および振動を使用して、アプリ内で実際に感じることができる感覚を作り出します。こうした効果と出力はタッチ機能を強化し、ユーザーが進行中の操作やタスクに関するフィードバックを得る際に役立ちます。

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

モーションは、単に物を動かすことではありません。Windows Phone では、ユーザーがタッチ操作するための物理エコシステムを作成する手段がモーションです。操作性の良し悪しは、ユーザーに対するアプリの反応の良さと、どのような個性に UI が対応できるかに依存しています。

Windows Phone には、2 種類のモーションがあります。

  • 遷移: ユーザー操作によってトリガーされる遷移は、UI を移動する際の階層リンクとなります。さまざまな遷移は、ある方向に進むユーザーを導いて、ユーザーがどこに位置するのか確信を持つことができるよう作成されています。大規模な遷移はアプリ間で使用され、小規模な遷移はアプリ内の移動で使用されます。

  • アニメーション: ビュー内のローカル要素に限定された視覚的フィードバックです。ユーザーによる操作の結果であるとは限りません。この一例にロック画面の "ホップ" モーションがあります。これは、デバイスのロックを解除する方法をユーザーに伝えます。

モーションがアプリの目的にかなっていることを確認してください。優れた Windows Phone アプリは、モーションを使用して UI を生き生きとさせます。モーションが行うことを次に示します。

  • タップなしで情報を提供する。

  • ユーザーの操作に基づいてフィードバックを提供する。

  • タッチ対象を操作する方法をユーザーに伝える。

  • 前後のビューに移動する方法を示す。

モーションの簡単な例として、Windows Phone の編集ボックスが挙げられます。編集ボックスは、拡大するときに単にスナップするだけでなく、アニメーションによってサイズ変更を示します。

モーションの効果

ユーザーがアプリを使う時間が長くなるほど、またはアプリ内のタスクが高度になるほど、高品質のモーションが重要になります。高品質のモーションを使うことで、ユーザーが感じる "負荷感" とアプリの使いやすさが変わります。モーションには他のメリットも多数あります。

  • より楽しく。アニメーションやその他の視覚的フィードバックによって、サプライズの瞬間が生み出されるほか、直観的な操作性を実現できます。デバイスやアプリへの愛着もわいてきます。

  • 操作に関するヒント。モーションには方向があります。モーションは前方や後方に移動したり、コンテンツを出たり入ったりしながら、現在のビューにアクセスした方法について最小限の "ヒント" を残します。たとえば、パノラマ エントランスのアニメーションは、アプリが開くとき、主要ナビゲーション全体にわたってユーザーの注意をひきつけ、Panorama コントロールの操作方法に関するヒントをユーザーに提供します。

  • モーションは、パフォーマンスが強化された印象を与えます。ネットワーク速度が遅くなったり、システムの動作が一時停止したりしたときに、アニメーションによって待機時間を短く感じさせることができます。

  • より個性的に。細かく配慮された Windows Phone UI は、モーションを利用して、アプリが今目の前にあることに関与しているという印象を与え、ネスト階層の深いところに入り込んでいるという感覚を和らげます。

  • 整合性の向上。遷移によって、ユーザーが既に慣れているタスクとの類似性が引き出され、新しいアプリケーションの操作方法が覚えやすくなっています。

  • よりエレガントに。アニメーションにより、電話が停止せずに動いていることをユーザーに知らせたり、ユーザーが関心を寄せいているであろう新しい情報を示したりできます。

モーション エコシステムのルール

  • 各アニメーションがシステムに属しています。個別アニメーションとして目立ってはいけません。

  • 各アニメーションに目的があり、すぐに終了します。

  • アニメーションは 2.5 次元で表示されます。3D ではありません。また、複雑なテクスチャ、光源、または浮き出しは使用しません。たとえば、傾きのアニメーションではタッチ対象が平面的に表示され、奥行きは示さません。これにより、コンテンツが強調されます。

  • ある UI 要素により、他の UI 要素が別の場所に動かされます。次に例を示します。ページ内でオブジェクトが拡大すると、ページが下方向に拡張されます。これがアニメーションで示されます。

  • モーションは、ハードウェアおよびソフトウェアの両方の動作によってトリガーできます。遷移では、あらゆる可能性を認識して設計する必要があります。

  • アクション可能なアイテムは、ユーザー操作の動きを把握します。たとえば、傾きのアニメーションは、オブジェクトがタッチされていることを示すためにアクティブになります。

  • 重要な更新がアイテムに対して行われ、ユーザーの注意を喚起する必要がある場合は、モーションを使用してユーザーにその旨を伝えます。

モーションの方向

Windows Phone デバイスは進むナビゲーションとハードウェアの [戻る] ボタンを使用するので、移行およびアニメーションは、次の図のマトリックスで示すように、2 方向または 4 方向のどちらかに移動できます。この図では、回転アニメーションを例として使用して、4 方向を示しています。これにより、ユーザーがアプリに入ることができます。

UX_Interactions_NavMatrix

ナビゲーションのマトリックス

2 方向または 4 方向の進むおよび戻るモーションにより、ユーザーは指定されたタスク フローで自分の位置を常に把握することができます。

一般的に、アプリ設計の最初の段階からモーションの役割を考慮する必要があります。設計プロセスの最後に追加されたモーションを根本的に統合するのは困難です。また、よく利用されるモーションの利点により、入念にプロトタイプ化されることが保証されます。

イージング

Windows Phone UI ではイージングは非常に重要です。イージングが適切かどうかは、文字どおり驚くべきエクスペリエンスと無残な失敗との間の違いを意味します。多くの実験が失敗となって戻ってきたのは、単にイージングが単に正しく調整されていなかったためでした。Windows Phone で最もよく使用されるイージングの種類を次に示します。

  • 対数。オブジェクトが画面に入るときは、対数イージングを使用して滑らかに停止します。

  • 指数。オブジェクトが画面から出るときは、指数イージングを使用して緊張力を作り出し、オブジェクトをすばやく画面から押し出します。

  • SCurve。対数によるイージングが目障りに感じられる場合、SCurve によるイージングを使用して画面上でより大きな動きを出します。

モーションのイージング曲線は動的なので、テストでは、アクションが動作するまでのユーザーの待機時間を完全には測定できないことを示しています。このイージングより、アプリの認識される応答速度が上がります。デバイス全体で一貫してイージング設定を使用すると、高速かつ軽量な操作性が常に実現します。

ユーザーがタッチ対象をタップするときに、適切なフィードバックをそのユーザーに提供してください。また、操作またはアクティブ化のさまざまな段階を示すカスタム コントロールの表示状態をデザインしてください。ユーザーは、ボタンが押されたこと、またはコントロールが切り替わったことを認識する必要があります。

メモメモ:

Windows Phone の最も一般的なタッチ フィードバックの方法は、チルト効果です。詳細については、「Windows Phone のコントロールの傾斜効果を使用する方法」を参照してください。

  • 変更をすぐに表示する。一部の設定を除き、すぐに変更を適用することで、フィードバックがコントロールに表示されます。

  • タッチ コントロールの操作に対する視覚的または聴覚的なフィードバックを提供する。ジェスチャの発生後ではなく発生中に応答することで、すべてのアクションの効果がすぐにはっきりと現れます。悪い設計例は、ユーザーが写真をフリックし、ジェスチャの完了後に動作が発生する場合です。

  • 時間のかかる処理に関するフィードバックを提供する。操作の進行中に、何かが発生している旨をユーザーに示す必要があります。コンテンツを使用して進行状況を示すか、進行状況バーまたは最後の手段として Raw 通知を使用できます。

  • ジェスチャに対する応答は電話およびアプリ全体で一貫している必要がある。Windows Phone SDK のタッチ コントロールには、このトピックで説明したタッチ ジェスチャのサポートが組み込まれており、一貫性を確保するのに役立ちます。カスタム タッチ コントロールを開発する場合、そのコントロールは、同様の方法でジェスチャに応答しなければなりません。

Windows Phone アプリには、4 とおりの出力方法があります。

  • 表示

  • オーディオ出力ジャック

  • 内蔵スピーカー

  • 振動

アプリを開発するときは、この 4 つの出力すべてを考慮する必要があります。

サウンドと振動

Windows Phone では、サウンドと振動がユーザーの操作性に大きく貢献します。オーディオはアプリのサウンドトラックと考えてください。ユーザーを脅かしてアクションに導く手段ではありません。アプリのオーディオを設計する際には、不快または不要なオーディオは避けるという基本的な考え方をします。優れた Windows Phone アプリは、オーディオでビジュアル デザインを補完しサポートします。

オーディオのガイドラインは次のとおりです。

  • 余計なオーディオは使用しないようにします。

  • 全体的なサウンド効果は使用しないようにします。

  • ユーザーの不安をあおる耳障りなアラーム サウンドは使用しないようにします。

メモメモ:

振動装置は、ユーザーが [着信音 & サウンド] 設定でオン/オフを切り替えることができます。この設定をオーバーライドすることはできません。

可能な場合は、システム サウンドを使用します。Windows Phone ライブラリには複数の音が用意されています。たとえば、次のような音です。

  • システムのメッセージ (情報)

  • メッセージ (警告)

  • 警告

  • トースト

システム サウンドが適切でない場合、サウンド要素はユーザーの操作性に大きく貢献します。すべてのオーディオ アセットがプロ品質で、ノイズが少なく、適切に編集され、音量のバランスがとれていなければなりません。

表示:
© 2014 Microsoft