エンジニアリングチームの引き継ぎに最適なアニメーション/遷移を指定する方法
私はPixateを使用して構築されたアプリのプロトタイプを持っています。これは、現在取り組んでいるアプリの全体的な流れを示しています。ページ上の特定の要素について、ビューとアニメーションの間で遷移があります。プロジェクトに取り組んでいるエンジニアにプロトタイプを示しましたが、彼らは私が使用しているトランジションとアニメーションの詳細な内訳を求めています。これらのアニメーションをスペックドキュメントでどのように伝えればよいですか？アニメーションの仕様に役立つリソースやツールはありますか？
（ここに問題があります。すべてのエンジニアがLinuxまたはWindowsマシンを使用していますが、私はMacを使用しています。そのため、ソリューションはクロスプラットフォームのものでなければなりません。）
アプリのデザイン、特にマテリアルデザインでアニメーションが普及しているので、これはGoogle検索が答える簡単な質問だと思いましたが、うまくいきませんでした。どんな助けでも素晴らしいでしょう。前もって感謝します。
アーロン・J.
アニメーションの仕様を作成する必要がある場合もあり、その場合はアニメーションを文章で書くことをお勧めします。アニメーションを開発者に伝えるための独自の速記を作成できます。
アニメーターのレイチェルナボールズがUIEポッドキャストでインタビューを受けました。彼女はあなたのアニメーションのために文章を書くことを提案します。
「私は、トレーリングイベント、アニメーション化されているもの、プロパティをリストする式を使ってアニメーションを書き出す傾向があります。アニメーションの持続時間、およびイージングは何ですか。それは負荷がかかると、幅は25ミリ秒から100パーセントになり、300ミリ秒以上の緩和が使用されます。これは、ドキュメントに記載する方法です。フロントエンドの開発者にとっては理にかなっており、それでも判読できます。デザイナーにも。」 -レイチェル・ナボールス
ポッドキャストへのリンク： IE：Rachel Nabors –アニメーションを使用してUXを強化する
Simon PanのAmazon Prime Musicケーススタディ からアニメーションに注釈を付ける別の例を次に示します。
ご覧のとおり、この注釈は非常に詳細であり、開発者にとって非常に役立ちます。
したがって、開発者にドキュメントを提供する必要がある場合は、実際のアニメーションを特定のアニメーション注釈と視覚的に組み合わせたり、文章として書き出すことができます。
これらのアニメーションをスペックドキュメントでどのように伝えればよいですか？
できません。それはオキシモロンです。アニメーションを伝達する最良の方法は、これまでと同じようにアニメーションを表示することです。
アニメーションを説明しようとするすべてのドキュメントは、すでにソースから削除されています。さらに、それに入るすべての複雑さを実際に文書化する方法はありません。
映画を作るようなものです。スクリプトを記述できます。ストーリーボードを作成できます。リハーサルできます。しかし、結局のところ、最終的に出てくるものは、作成したすべてのドキュメントに100％一致することは決してありません。どうして？状況は変わります。組織は、UXチームにドキュメントファクトリになることを強いるのではなく、それを受け入れて「流れに乗る」ことを学ぶ必要があります。
一部の組織では、開発者はすべてを書き出すことに慣れています。それは、うまくいけばあなたが壊れることを助けることができる悪い習慣です。
私は単に言う文書を提案します：
アニメーションをプロトタイプのアニメーションのように動作させます。
そして、できる限りサイドバイサイドで作業します。
さて、おそらくあなたはすでにいくつかの詳細を持っています...あなたのようにknow .5sフェードです。文書化できるもの。メールで簡単にできます。
まず、アニメーションを完全に自由にするために Framer.js を使用することをお勧めします。これは、モバイル用のコードベースのプロトタイピングツールです。
プロトタイプを作成することは、アプリの仕様をデベロッパーやクライアントに渡す際にこれまでに経験したことのない最も効果的な方法です。フレーマーソースファイルを開発者に転送するだけで、開発者はそこで何が起こっているのかを理解できます。
注：私はframer.jsのプロモーターではなく、プロユーザーです。