web-dev-qa-db-ja.com

UI / UXデザイナーへの質問:UIアニメーションのプロトタイピング

私はモーショングラフィックデザイナーです(以前は、テレビ、ゲームなどのモーショングラフィック)。最近では、アプリのUIモーションのプロトタイピングに取り組みました-本当に楽しかったです!

ここまでは主にAfter Effectsを使用してきましたが、トランジションやインタラクションのプロトタイプを作成するためにかなりの数のUI/UXデザイナーがこれを使用していることを読みました。

私がこの分野に入ると、すでにその分野で働いている人たちのために、AEでモーションのプロトタイプを作成するために、私のように誰かがフリーランスで利用するのを見ていますか?このために他にどんなツールが有益だと思いますか?

Quartz Composerについて読みましたが、学習曲線はかなり急です。しかし、それが望ましいスキルであるかどうかを知りたいですか?

6
Stephanie

まず、デザインの相互作用の側面に焦点を当てることに関心を示している人を称賛します。企業のUXグループでは、多くの場合、亀裂に陥ることがあるのは、インタラクションの設計です(多くの場合、ウォーターフォールの開発プロセスが原因です)。 UIは見栄えがよく、バックエンドで、タイトでレスポンシブに見えるかもしれませんが、それらを組み合わせても、トランジション、ホバー、アニメーション化されたリビールなどに何も考慮されていないため、物事はまだ不格好に感じられます。

ですから、あなたを雇うUXチームは、明確に考慮されているため、参加する優れたUXチームになるでしょう。

どのツールを使用するかについては、ここで実際のメディアが機能していること以外は少し懐疑的になります。Webアプリのモーションのプロトタイピングに取り組んでいる場合は、メディアを使用することを強くお勧めしますそれを行うには、HTML、CSS、JSがあります。ネイティブiOSアプリの場合は、Quartz Composerを取得し、ネイティブアニメーションを使用します。

ただし、After Effectsが優れたツールではないというわけではありません。結局のところ、鍵となるのはツールの背後にいる人です。つまり、ツールのみが使用されている場合、チームはそのツール内にのみ存在する相互作用に過度に依存する可能性があります。たとえば、Axureのみを使用するチームは、無意識のうちに単にデフォルトのAxureインタラクションのように感じるWebサイトを作成する可能性があります。

SharePointは、もう1つの良い例です。SharePointの媒体にとらわれているため、SharePointのように「感じられない」SharePointサイトを構築するのは非常に困難です。

要約すれば:

私のように、AEでモーションのプロトタイプを作成するために、フリーランスで誰かが利用するのを見ていますか?

私ですか?絶対に!そして、うまくいけば、他のUXチームもそうです。

このために他にどんなツールが有益だと思いますか?

私はjQueryをいじり始めます。いくつかのJSとCSS3で手を汚してください。最終的にその作業を行わなくても、After Effectsの作業をより適切に作成するために取り戻すには、多くの素晴らしいコンテキストが得られます。

UXチームが使用するさまざまな形式のインタラクションプロトタイピングを含む他の一般的なツール:

  • アクスル
  • iRise
  • ミューズ
  • InVision
  • (再び)HTML、CSS、JS。
11
DA01

DA01の答えは素晴らしく、徹底的でした。移行していただいたことにも感謝いたします。

コード自体に慣れることは、開発者やSWEとの理解とコミュニケーションを可能にし、アイデアを実稼働で実現できるようになるため、非常に貴重です。さらに、トランジションとアニメーションに対して究極の制御(およびプロダクションコードの反復回数を減らす)を実行できるため、プロダクション時間を大幅に削減できます。

Framer のようないくつかのオープンソースツールはオーバーヘッドがかなり低く、よりコードベースのデザインに移行するための力を与えることができます。静的モックを自分で作成している場合や、さまざまなツール(Photoshop、Illustrator、Sketchなど)が好きなデザイナーと作業している場合は、ワークフローを変更して洗練されたモーションデザインを作成するために押す必要はありません。

2
SwankyLegg

私は以前、ユーザーインターフェイスでアニメーションの使用を奨励しようとした会社で働いていました。彼らの信念は、アニメーションはプロトタイピングのごく初期の段階で大まかに定義されるべきであるというものでした。したがって、アニメーションでワイヤーフレームを強化するのはUXの人々の義務でした。

そのため、グラフィックやビジュアルデザインのトレーニングを受けていないUXの人でも利用できるツールを検索したところ、最もコスト効率の高いツールは、実際にはMS PowerPointであることがわかりました。これは忠実度の低いプロトタイピングの目的のためであり、PowerPointはその点で優れていたことを思い出してください(しゃれは意図されていません)。学習曲線は非常に速く、必要な労力は軽く、結果は一般的なアニメーションのアイデアを全体に行き渡らせます。

0
Dvir Adler

これはいくつかの重要な問題に触れる複雑な質問です。私は2つの中心的な問題に焦点を当てて答えようと試みます。

私のように、AEでモーションのプロトタイプを作成するために、フリーランスで誰かが使用するのを見ていますか?このために他にどんなツールが有益だと思いますか?

  1. 絶対に。フリーランサーは、あらゆる種類と規模のビジネスに対して、コアビジネス以外の分野で専門サービスを提供することを強く求められています。 スタック上のフリーランシングフリーランサーズユニオン をチェックして、フリーランサーであることについて学び、 ビジネスモデル について学びます(1つのビジネスオーナーになります)。ビジネスを所有するすべての要素を図にして、 Design is a Job を読んで、あなたの技術を実際に適用します。市場(科学的可視化、ゲームデザインなど)を発見し、売り込みを調整し、この分野の競争率について学び、正直なハードワークを行う必要があります。
  2. あなたはUXの群衆に質問しているので、口頭のストーリー paper 、ホワイトボード、ストーリーボード、 [〜#〜] axure [〜#〜] のようなツールでプロトタイプを作成できますおよび Basalmiq 、またはHTML/CSS/JSまたはネイティブ環境のhi-fiプロト。ここで重要なのは、何をテストするか誰をテストするかを決定することです。目標は、問題が解決する必要があるものについての仮定と、それらを解決する最良の方法をできるだけ安価で迅速に検証することです。研究の設定。ただし、hifiプロトは、実際に使用されるため、複雑な相互作用をテストするためのものです。

AEに代わるものはないかもしれません。速くて良い場合は、 [〜#〜] rite [ 〜#〜] は、ロックスターアニメーションのプロトタイプ作成者になるのに役立ちます。他の方法を選択する理由を自問してみてください。 ロックスターAEアニメーターを必要とするユーザビリティ研究グループと提携する必要があるかもしれません。

あなたの情熱を適用する方法を見つけてください。それがフリーランサーの美しさです。あなた自身の方法を選択します。

0
Ken