web-dev-qa-db-ja.com

MockUps-After Effectsを使用したプロトタイピングUI。その価値はありますか?

私はビジュアルデザイナーであり、現在は勤務先の会社でUI_UXデザイナーとして働いています。ここの同僚やフロントエンドのDevsに、特定のデザインでのインタラクションがどのように行われるかを詳しく説明するために、After Effectsアニメーションの提示についてのあなたの意見を聞きたかったのです。これは役に立ちましたか?

このリンクでは、私が話していることの一例を見つけることができます。

https://www.behance.net/gallery/52672469/Animated-Mockup-APP-Merkus

注:これは、別のプロトタイピングツールを使用するよりもはるかに時間がかかりますが、設計者が実行したいことをシームレスに表示できるため、実装プロセスで非常に役立ちます。

私はあなたの意見、長所と短所、またはあなたが共有したいものは何でも必要です。どうもありがとう。

3
Calvin Gaviria

これが私の問題の2セントです。プロトタイピングが必要な場合があることに同意します(クライアントを驚かせたり、アプリの動作の詳細を表現したりするなど)。私の経験では、プロトタイピングは非常に役立ちましたが、私は次の2つの方法のいずれかでそれを行いました。

ラピッドプロトタイピング(私のお気に入り)。現在Angularアプリに取り組んでおり、これは私が比較的簡単に見つけたものです。基本的に、アプリが存在するのと同じ環境で開発者が使用しているフレームワークを使用してプロトタイピングしていますin。理由(私の意見では)なぜこのアプローチが最適なのか:

  1. 高度なコードの再利用性(使い捨てコードを使用していない場合-Adobe Museスパゲッティコードファクトリを参照).
  2. 開発者と同じフレームワークを使用して、アプリ/機能のtrue動作を示す能力、
  3. 時々構築する必要がなく、費用がかかることが判明する可能性のあるアニメーション/動作を尋ねる/設計することによって、開発者が経験するかもしれない痛みを体験してください。これはあなたの状況に当てはまるとは言いませんが、言及する価値はあります。

Traditional Prototyping私はまだこれを行って、あまり労力を必要としない、より単純な機能と動作をまとめています。これは、時間があり、機能がダイジェスト/説明するのにそれほど面倒ではない場合の頼りになる方法です。私はInvisionを使用して、動作のシミュレーションとデザインのスケッチを支援しています。

上記のいずれかでうまくいくかどうかはわかりませんが、(もちろんAEの習熟度に比べて)After Effectsを使用するよりも時間がかからないかもしれません。すでにデザインの準備が整っていて、引き出そうとしている動作が次のツールで達成できる場合は、(順不同)をお勧めします。

  1. Craftプラグインを使用してプロトタイピングをスケッチします。 Protoはまだベータ版ですが、コードをリクエストできます。それはかなりしっかりしています。
  2. JustInMind
  3. Adobe XD
  4. インビジョン

これがあなたの決定に役立つことを願っています。

乾杯!

2
Stefan

ここに2つの問題があります。

(1)あなたは彼らが作るのに長い時間がかかると指摘しました。プロトタイプは、反復していて、変更が頻繁に発生するため、変更をすばやく安価に行うことができます。

(2)プロトタイプのユーザーは最終的に開発者です。彼らと話して、彼らが必要とするものを見てください。いくつかのテキストノートを含む静的ワイヤーフレームから作業できますか?より明確にするために、(たとえばAxureを使用した)大まかなやり取りが必要ですか?または、彼らは彼らの仕事をするために実際のピクセルパーフェクトなアニメーションを必要としますか? (静的ワイヤーフレーム以上のものを必要とする開発者に会ったことはありません。)

Lo-fiスタティックワイヤーフレームは常に私に有効でしたが、現在の仕事では、Axureインタラクティブプロトタイプを作成しています。あなたがAfter Effectsで作業しているのはそのためだと思います。

0
Ken Mohnkern

私の意見(中間のHTML/CSS/JSスキルを前提としています):

簡単な答えを探しているのであれば、BeHanceでプロジェクトを提示するための格好良い方法を作る以外に、AfterEffectsの価値は限られていると言えます。これは退屈な作業であり、インタラクティブアニメーションの大多数にとって、優れたCSSは長い道のりを歩むことができます。アニメーションをつなぐ必要がある場合は、GreenSockのTweenMaxライブラリ(JavaScriptの専門家である必要がない非常に強力なライブラリ)でブーストしてください。アニメーションを作成するのが高速であるだけでなく、開発者が1:1レベルで量産コードに変換するのが簡単になります。非常に複雑にする必要がある場合、開発者と協力してアニメーションを設計するのに最も時間を費やすことがよくあると思います。

0
SorenRomer