UIアニメーションとインタラクションをブランドアイデンティティに合わせる
ブランドアイデンティティを思い付くと、デザイナーはブランドガイドライン、色、フォントスタイルとサイズ、使用方法のガイドラインを思い付くでしょう。インテル、マクドナルド、インテルなどの一部のブランドではイヤコンさえ得られます examples
しかし、これらのブランドのWebサイトまたはアプリでのUIのアニメーションと相互作用に関しては、これらはどのように決定されますか？それともカバーされていますか？これに関する良い例やケーススタディはありますか？
ブランドアイデンティティと一致するようにアニメーションとインタラクションを考案するための最善の方法は何ですか？
ブランドアニメーションのガイドラインがあるかどうかはわかりませんが、ないという直感がありますが、間違いかもしれません。
アニメーションに対する私の個人的なアプローチは、ブランドキーワードを特定することです。周囲のオブジェクトからアイデアを得て、それらをどのように操作するか（ページのめくり、ライトの切り替えなど）を行います。これらのオブジェクトがどのように移動または動作するかを観察することで、アニメーション化するプロパティ（位置、不透明度）とアニメーション化に最適な方法をおおまかに知ることができますブランドイメージに合わせて。
ナイキの例を見てみましょう：
"Swoosh"ロゴ は、世界で最も認知されているブランドロゴの1つです。
その最も基本的なレベルでは、スウッシュは動きと速度を表します。形は動きの弧を描いています。 「スウッシュ」という言葉は、レブロンジェームスまたはマイケルジョーダンが壮大なダンクに向かう途中でジッパーを通り抜けるときに聞こえる音のオノマトペです。
そのため、Nikeのページにアクセスすると、動きが大きく画像が点滅するのが一般的です。 Nikeはこのアニメーションプロパティを使用して、ブランドを強化しています。
キーワードを探して、次のような特定のアニメーションにマッピングします。
- プロフェッショナル-フェード
- 楽しい/カラフル-バウンス
- 試験運用-スライド、フラッシュ
特定の製品向けに開発している場合、周囲のオブジェクトからインスピレーションを得ることができます。
- 書店-フリップ
- おもちゃ屋-バウンス、弾性、回転
適切なアニメーションを選択することも、人の気分に影響を与えると思います（バウンスアニメーションは、より幸せな気持ちを生み出すと想定されています）。独自のアニメーションを実装する場合は、それを考慮に入れることができます。
他の人が述べているように、ブランドの形容詞を明確にする。次に、映画のソースや、ドリブルやタンブラーなどのUIデザイン備蓄から収集した動きのムードボードを作成することを検討してください。 （アニメーションの例をデザイン資料と一緒に含めることが重要です。暗いテーマのフェードは、映画のように見えたり、脅かされたりする場合があります。）
会社の形容詞に合った広告や映画のクレジットを見てください。たとえば、バットマンのタイトルクレジットには、強力で安全な、ドライブされたという会社のイメージを強化するデザインコンポーネントが含まれている場合があります。
私たちにとって「見た目が良い」ものは、聴衆に「正しく読ませる」ことができない場合があることを覚えておくことは重要です。たとえば、弾力性を子供と関連付けて遊んでいますが、バウンスが多すぎると、初心者のコンピューターユーザーを混乱させる可能性があります。だから、実際にインターフェースを子供の前に置き、彼らがそれをどのように使用するかを確認してください。ユーザーの顔を見ます。彼らが作る音に耳を傾けます。彼らは眉をひそめたり笑ったりしますか？またはまったく何もありませんか？時には、何の反応も正しい反応ではありません！
その後、彼らに印象を尋ねます。「これはどのようなXXだと思いますか？」
設計チームと協力している場合：モーションデザインの経験があり、一連のトリートメントの作成を支援してくれる人がいるかどうかを尋ねます。
会社が処理を決定するときは、適合を促すために、スタイルとブランドのガイドラインで文書化されていることを確認してください。
素晴らしい 24wayに関する記事：ブランドのアニメーション化
彼らのマテリアルデザインページで Googleのアニメーションガイドライン も読む価値があります。アニメーションのさまざまなスタイルについていくつかのアイデアを提供しているからです。
アニメーションとブランディングに関する別の記事をどこかで見たことがあると思いますが、それを見つけることができません。アニメーションはあなたのウェブサイトとブランドの声のトーンにマッチします。
すばらしい Dudley Storeyによるアニメーションテクニックのガイド もあります（ただし、ブランディングは対象外です）。
そして、この記事にはいくつかのアイデアがあります、アニメーションでWebを生き生きとさせる、アニメーションとブランドについて-フォーマルvs非公式。
そして、この記事は A List Apart、UI Animation and UX、not-so-secret friendship にあり、作成したアニメーションについて自問するための役立つ質問：
- アニメーションはインタラクションに関する有用な情報を提供しますか？
- ユーザーとしてあなたに反応しているように感じますか？
- どんな感情的な反応を引き起こしますか？