アニメーションをワイヤーフレームで効果的に描画するにはどうすればよいですか？
私は ワイヤーフレームでのjQueryアニメーションに関するQuoraに関する質問 に出会い、静的ワイヤーフレームでのアニメーションの描写における一般的な規則について考えさせられました。私は、アニメーション要素を説明するためにコールアウトまたは補足ドキュメントのいずれかを使用してきましたが、それらは明らかに正義を行いません。
より良い方法はありますか、それとも抽象の継承された「機能」ですか？
ワイヤーフレームはアニメーションを表現しようとする恐ろしい場所です。あなたが得ることができる最も近いものは インタラクティブスケッチ記法 のような抽象的なものですが、ワイヤーフレームの閲覧者は記法のスタイルを理解する必要があり、非常に限られたトランジションしか伝達できません。
ワイヤーフレームを使用して、ページの構造の概要を説明します。例として作成された忠実度の高いスケッチであっても、スケッチのように扱ってください。 AxureまたはBalsamiqモックアップ。
インタラクティブなプロトタイプ（できれば最終製品が作成されるのと同じ環境で作成される）を使用して、ボタンや実際の画面遷移やアニメーションに対する特定のホバー効果など、あらゆる種類の対話性を説明します。
利害関係者が特定の相互作用アプローチを理解することが困難であり、プロトタイプを作成する時間またはリソースがない場合、私が見た1つのショートカットは、「実際の」相互作用の例を使用することです。 。 （例えば、Ethan MarcotteのレスポンシブWebデザイン。）明らかに、あなたが言及しているのはnotプロジェクトソリューションであることを明確にする必要があります。同様のアプローチが他の製品にどのように実装されているかの例にすぎません。 。
長期的には、対話性をより効率的に表現するための1つの大きな方法は、インターフェイス要素をモジュール化することです。たとえば、最後のプロジェクトの日付ピッカーを作成した場合は、それを保存して、後でプロトタイプで使用します。すべての対話でホイールを再発明しないでください。
これは、ワイヤーフレームがインタラクションドキュメントとして不十分である多くの理由の1つです。答えは単に彼らができないということです。インタラクションを適切に伝えるには、プロトタイプ（理想的には適切なプレゼンテーションレイヤーコード）が必要です。
私はこれに何度も遭遇しましたが、私がすべきでないことを確かにあなたに伝えることができます-静的または仕様のプロトタイプを作成している場合、特にファイルがベースとして機能する場合、アニメーションを含めることは通常価値がありません開発。プログラマーを混乱させるだけでなく、ドキュメントの基礎としてファイルを使用することをほとんど不可能にします（たとえば、SCRUMストーリーを書く）。
私が試した解決策の1つは、アニメーションをストーリーボード形式で表示することですが、プログラミングの人々にとっては、混乱を招くため、あまりうまくいきませんでした。
私が提案するのは、アニメーション化されたプロトタイプを静的なプロトタイプから分離し、単純に要素の説明フィールドに外部ファイルへのリンクを追加することです。このようにして、1つのファイルをマーケティング部門または製品マネージャーに渡し、もう1つのファイルをフレンドリーな近隣仕様の担当者やプログラマーに渡すことができます。
小さなアニメーションは実際に可能です。ワイヤーフレームドキュメント内のアニメーションでフォームフィールドがどのように動作するかを示しました。最終的なドキュメントは、フラッシュデモが埋め込まれたインタラクティブなPDFでした。
私は実際にはすべてのエラー状態または動作に注釈を付けなかったため、エンジニアは非常に有用であるとわかりました-注釈はアニメーションでした。
これはフラッシュや何かが得意である必要はありません。InDesignにはカスタムアニメーションとタイミングパネルがいくつかあり、アニメーションがインタラクションの説明に適していることがわかったときに役立ちます。
マイナス面は少し時間がかかります。しかし、それだけの価値があります。
基調講演では、単純なページ遷移とより複雑なアニメーションを提示できます。その多くはiPadアプリに表示され、関係者に資料を提示するときにうまく機能します。警告：iPad KeynoteアプリはBuildInおよびBuildOutアニメーションのみを表示します。
シンプルなアニメーションは、POPプロトタイピングアプリでも作成できます。
標準遷移は、機能仕様書で注釈を付けることができます。たとえば、遷移と動作のリストはAndroidおよびiOSユーザーエクスペリエンスガイドラインのWebサイトにあります。
静的なワイヤーフレームでは、通常、コールアウトを使用し、アニメーションを表す特定のアイコン/シンボルを含めます。
アニメーションが非常に重要な場合は、アニメーションのストーリーボードにワイヤーフレームを提供します。
Microsoft PowerPointを使用して、対話用のアニメーションを作成しました。要件のストーリーまたは一連のタスクを構築できます。少し時間がかかりますが、楽しく、シンプルで、費用対効果に優れています。
インタラクションとして実際にクリックするのではなく、インタラクションを自動化できます。これは、PowerPointに適しています。これにより、関係者や開発者がロジックを理解し、デッキを開いたときに概念にすばやく対処でき、流れるような自動化が効果的に機能します。
@Rahulが言ったように-ワイヤーフレームは、アニメーションを描写するには不適切な場所です。唯一の方法は、単語と矢印の説明を組み合わせることです。さらに、すべてのステップで、ワイヤーフレームの詳細化を行うか、必要に応じて行う必要はありません。
私もこの問題に遭遇しました。通常は時間を節約するために...ワイヤーフレームでアクションをストーリーボード化します。時間に問題がなければ、FireworksでHi-Fiアクションを作成します。
アニメーションの複雑さに応じて、Keynote、Adobe After Effects、またはFlashを使用してアニメーションをデモできます。また、アノテーションで他のライブWebサイトを参照することもできます。 Tweenlite のデモを使用して、トランジションとアニメーションを説明することがあります。