アニメーションを使用してUIでブランドの個性を表現する
いくつかのアニメーションプリセットを考え出すことにより、アプリのUIにキャラクターを与えることに取り組んでいます。これらはアプリのさまざまな要素で使用でき、スタイルガイドに含まれます。
https://ustwo.com/blog/infusing-brand-spirit-into-the-ui-of-knopka/ のようなプロセスに従うことを願っています。
アニメーションの観点からブランドとその個性を表すさまざまなキャラクターの例をいくつか示します。これらは良い出発点になる可能性があります。
- 遊び心のあるキャラクター（冥王星）：緩和と弾力性が重い
- 深刻な性格（ビルダーのボブ）：迅速かつ正確、ほとんど緩和されません。弾力がない
- 官能的なキャラクター（Jessica Rabbit）：スムーズな緩和。わずかに遅いアニメーションとフェードの不透明度
私たちのブランドのキャラクターは、これらの2つまたは3つの組み合わせかもしれません。
注：この出力はブランドマスコットではありませんが、UIパーソナリティが考えられます。期待される答えは、実装の詳細ではなく、プロセスに重点を置く必要があります。デザインプロセス全体を提供することも、私のコンテキストに当てはまるブランドをデザインする上でのポイントを提供することもできます。
参考文献
ブランドマスコットを行うという観点からこれを議論しているなら
私はそれを2つのプロセスで処理します。
1。キャラクターデザインプロセスを含むマスコットデザイン
マスコットに注入する必要があるブランドの特性を形式化することから始める必要があります。これはアニメーションにも役立ちます。これは、多くの手法で処理できます。私が好む2つ：単語リスト（マスコットデザインに取り入れるべきブランドと望ましいルックアンドフィールを説明する30の単語をリストする）とムードボード（インスピレーションを与える画像を組み合わせ、マスコットデザインが何をすべきかについての良い直感を与えるコラージュデザイン通信）。 https://en.wikipedia.org/wiki/Mood_board
これは、デザインのガイドラインとなるブランドアイデンティティの含意の複合を作成するのに役立ちます。
次に、マスコットのデザイン自体を行います。それはすでに行われているかもしれませんが、それがあなたの仕事である場合、これらは私が役立つと思うリソースです：
最高のアプリマスコットデザイン http://mashable.com/2010/06/07/best-mascots/#pEGgaO7omkqa Hootsuiteマスコットデザインプロセス http://lauraeagin.com/designing-an -app-mascot キャラクターデザインのインスピレーションPinterestボード https://www.pinterest.com/explore/character-design/
（ピクサーキャラクターのような）アニメーションのビデオキャラクターデザインとは対照的に、マスコットは通常、ミニマルで、漫画的で、シンプルでキュートです。可愛さは決して過小評価されるべきではない巨大な要素です。動物のマスコットは最も人気のあるテクニックです（そしてそれはそれ自体が完全に人類学的問題であり、個別の議論に値します;-)。
2。マスコットアニメーション
魅力的なリソースは2つあります。UXデザイナー向けのアニメーションの振り付け。ディズニーの父親の創設者の1人と共同でUXデザイナーが書いた記事です。 https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a
また、「Illusion of life」というアニメーションは、アニメーションのしくみと、ムーブメントの感情を認識させるものを説明する12の主要なアニメーション原理に関するビデオです。 https://vimeo.com/93206523/
Android他の質問で示したビデオ
上記のすべてが引き続き適用されますが、2つの注意点があります。アニメートするアイテムは擬人化オブジェクトではありません（ただし、ピクサーランプだと考えられますが）、アニメーションはより単純になります。しかし、原則は同じです。伝達する必要があるのはキャラクターなので、要素が生きていて反応しているように扱います。
UIのどの要素は通常、頭の上からアニメーション化する必要があります：
- ユーザーの注意を引く必要があるもの：ツアーガイドのインジケーター、通知など.
- ユーザーまたはUIをある状態から別の状態に移行するもの：遷移、ローダー、ステータスインジケーターの変更など。
- 経験を模倣するもの：バッジ、ポイント、実績、帽子など.
アプリはeコマースであるため、楽しい方法とビジネスに向けた方法の両方でアニメーション化できるUI要素はたくさんあります（私は官能主義を避け、非常に主観的であり、TAの一部を無効にすることができます）：ローダー、購入状況インジケーター、バッジ、通知、ギフトなど。
トピックとしての商取引には、処理する象徴的な資料がたくさんあります。たとえば、ユーザーが[購入]を押すと喜んで跳ねるカートやショッピングバスケット、端末をすり抜けるクレジットカード、プレゼントのように開くことができるローダー、開封して喜んでグリーンになる買い物袋は、アプリ、補助パネルで数秒間バウンドするギフト券、出荷進捗バーの小包を飛ばします。などなど。
Mailchimpの例を確認できると思います。彼らのプラットフォームでメールキャンペーンを完了すると、彼らのブランドキャラクターのチンパンジーが現れ、あなたにハイタッチを与えます。チンパンジーが実際にハイタッチ（手を上げる）をしたのか、イメージ全体がポップアップしたのか覚えていません。
それらのキャラクターがユーザーにとって何か意味があるかどうかを確認するために、簡単なテストを実行することができます。あなたの3人のキャラクターの戦略はわかりませんが、ブランドの声、キャラクターは一貫している必要があります。例：あなたのブランドは「発信」または「真面目なビジネスマン」ですか？
ほとんどの場合、モーションをインタラクションの一部として使用し、アイコン、ボタン、ステップを完了するときなどに広く使用されているのを確認できます。
チェックアウト http://www.materialup.com 彼らはたくさんのインスピレーションを持っています。
ブランド、インターフェース、アニメーションを結びつける
インターフェイスデザインとモーショングラフィックスの境界を広げる方法に関する私のインスピレーションの源は、ドリブルです。
2つのカテゴリのアニメーションの例がたくさんあります。
1つはより細かいレベルであり、ロゴやインターフェイスにすることができます。たとえば、ユーザーがハンバーガーアイコンをタップして、十字アイコンにモーフィングしたときのハンバーガーアイコンの反応。
表示される可能性があるその他のカテゴリセットは、アプリケーション全体のアニメーションです。
私はこれらの例を一定期間収集しており、両方のカテゴリを示すために、ドリブルバケットを共有しました。
インターフェースアニメーション> https://dribbble.com/vjaybaskr/buckets/277280-AwesomeAnimation
モバイルアプリでの操作中のアニメーション> https://dribbble.com/vjaybaskr/buckets/272123-MobileInteractions
ブランド、アニメーション、インターフェースを結びつけるために、Dropboxはインスピレーションの最高の源の1つです。繰り返しになりますが、DribbbleのDropboxアカウントですべて見つけることができます。 > https://dribbble.com/dropbox
Dropboxを引用している理由は、Dropboxのデザイナーがインターフェイスとアニメーションの実験を巧みに解き放ち、一貫して制作現場に連れて行っているためです。 これは進化的なプロセスであり、ブランドの一部にする前の一貫した実験とテストの結果であることに注意してください。
これらの参考資料からインスピレーションを得てください
ブランドのムードボードを作成/デザインしましたか？これは、アニメーションのスタイルとキャラクターを理解するのに役立ちます。また、ターゲットの人口統計、性格などを知ることも役立ちます。 （企業vs若い専門家vsオタクvs女性など）
どのようなスタイルを決定する場合でも、アニメーションは全体的なエクスペリエンスに積極的に貢献する必要があることを忘れないでください。したがって、ユーザーに絶対に必要がない場合、またはユーザーにメリットがない場合は、アニメーションを行わないでください。 「なぜ」特定のオブジェクトをアニメーション化する必要があるのかを自問してみてください（見栄えが良いからといって、ロードを待機してモーダルを閉じますか？）
アプリのアニメーションは最初は面白いと思いますが、数回使用するとかなり早く古くなります（煩わしくない場合）ので、微妙でフローが中断されないようにしてください（たとえば、アニメーションが完了するまでユーザーに待たせないでください）。その美しいスピンを10秒間終えた後、ボタンをクリック可能にするようなものです。
おそらくあなたの質問には答えませんが、Webアプリではなく漫画映画を作りたい人たちといくつかのプロジェクトに取り組んだ後、私はもう少し慎重になりました！
いい質問だ、eコマースユーザーとして2セント（たぶん、たぶん3）
Doアニメーションを私の目の前に置くことで、私がここに来たばかりのときと同じように（おそらく最初はスリルになるでしょうが、毎回ではありません）注意を払うことを期待しています。購入。注目しても大丈夫です
- 製品の特徴
- 機能比較
- 価格下落/変動
これらのことを表現するためにアニメーションを追加する場合、それがエクスペリエンスに追加され、私が集中したいもの（上記3つ）から注意をそらさない限り、それは私にとってより有用です。
しないでください製品のリストを閲覧していて、各製品にアニメーションが含まれている場合、かなり混乱する可能性があります。アニメーションがフィルター上にある場合は、意味がありません。スクロールダウンしているときに何が起こったのか（一度ウィッシュリストに追加した製品など）と下に行くときに期待できることを教えてください。しかし、私はまだ私の目の前の選択を分析しているという事実に焦点を合わせ続け、それから焦点を離さないでください。
実行私はブランドストア（通常のリストではありません）にいます。これは、アニメーションを通じてブランドエクスペリエンスを紹介する最良の機会です。ブランドストアにいるとき、最も気にする3つのことに集中できます
- 機能（明らかに）、前回のアニメーションから改善点があるかどうかを示します
- ユーザーのフィードバック
- 次回発売日
お役に立てれば。
Shopify 中古バッグマスコット、これはeコマースであるため、このeコマースエリアではバッグマスコットが人気です。アプリに似たマスコットデザインを探すことを強くお勧めします。