意欲的なUXモーションデザイナーのための20のベスト景品
インターフェイス設計者は、ユーザーの操作をエミュレートするアニメーションモックアップを使用して、UXデザインに大きな関心を寄せています。これらのUXモックアップ 動きに頼る 定義するアニメーション効果を使って インターフェースがユーザー入力にどのように応答するか.
ほとんどのUXデザイナーは、これらのアニメーションを作成するためにソフトウェアを使うことを学びます。最も人気のある2つの選択肢は、Adobe After EffectsとPrinciple（OS Xのみ）です。あなたはできる デザインインターフェースモックアップ Photoshopなどのプログラムで、UIをこれらのプログラムに移動します。 アニメーション用.
あなたがUXアニメーションを学ぶことに興味があるならば、景品は途方もない資産になるでしょう。あなたは他人の仕事を研究し、それがすべてどのように機能するかを見るために彼らのデザインで遊ぶことができます.
以下では、PrincipleとAEのユーザーにとって最良の景品を見つけることができます。 UXモーションデザインに入る. 彼らはきっとあなたの理解を助けるでしょう UXアニメーションのしくみ, そしてあなた自身の作り方.
1.削除アクション
スワイプ さまざまな目的のためのモバイルアプリで非常に一般的なアクションです。デフォルトのiOSスワイプアクションは、 アイテムを編集/削除するための代替オプションを表示する, Ramil Derogongunによって作成されたこの景品でまさにそれはあなたが得るものです.
After Effects用の無料のAEPファイルをダウンロードして、自分で試してみてください。 UIは 非常に基本的なワイヤフレーム方式 ユーザー入力が青い点で表示されます。これらのタイプのユーザーの行動は見せるのに最適です。 アニメーションを通して それは開発者に見る機会を与えるからです インターフェースの仕組み.
2.ウィジェットスワイプ
これは、フォーカスを当てたもう1つのスワイプアニメーションモックアップです。 スライドショーのカートアイテム. Leon Wuによって設計されたこの無料のスワイプアニメーションは、Principle用に作られたPRDファイルが付属しています。.
アニメーションは非常に単純で、アイテムが画面上でどのように移動するかを示しています 圧力がかかったとき. あなたも感触を得る 緩和効果 スワイプアクションが解除されるたびに.
3.デュアルショックUI
これはAlexander Boychenkoが共有する、驚くほどダイナミックなUXアニメーション効果です。このモックアップは、モバイルアプリUI用のPlayStation Controllerに基づいています。無料でダウンロードできるSketch and Principleファイルが含まれています.
この景品はどのようにトランジションを作成するかを示しています 画面間をスワイプ. しかし、ページ要素が画面上でどのようにアニメーション化されるかも確認できます。 様々な方向に.
4.ハンバーガーメニューのアニメーション
ハンバーガーのアイコンは、依然としてモバイルインタフェースでは大流行しています。このメニューアイコン景品はどのようにするかを示します 3本の棒のアイコンを「X」アイコンにアニメートする.
それは 繰り返しアニメーション, そのため、 "X"もハンバーガーメニューアイコンに戻ります。これは学ぶための素晴らしい景品です。 UI要素のベクトル操作.
5.スナップ
この無料モックアップは、Snapsterというモバイルアプリ用です。それは焦点を当てます ウェルカム/オンボーディング画面 ユーザーがアプリのデモを見て、実際にどのように機能するかを学ぶことができる場所.
これはPRDファイルですが、残念ながらこれはAfter Effectsではうまく機能しないため、Principleユーザーのみがこのファイルを利用できます。.
スピナーのロード
これがAEP After Effectsの景品です。 モバイルローディングスピナー. AjaxがWeb開発の主流になったとき、これらのタイプのアニメーションGIFが非常に人気になりました。.
現在、これらのモバイルローダーは1ダースです。 大きくカスタマイズされた 特定のインターフェースに合うように。この景品は、あなたがそれらを修正したいならば、ベクトルを編集するためにAEPファイルとスケッチファイルが付属しています.
7.トランジションの再生/一時停止
トランジション効果 多くの場合非常に単純に見えますが、実際にはかなりの量の作業が必要です。 Alex Pronskyによって作成されたこの再生/一時停止アニメーションは素晴らしい例です。.
この景品を使用すると、さまざまな細い線のアイコンをアニメートする方法を調べることができます 形や記号に. あなたがプログラムを学ぶと、それはこの種のものを行うことがはるかに簡単になるので、それは研究のためにあなたの処分で景品を持つのに役立ちます.
8. iPhoneのモックアップ
この景品には直接アニメーションは含まれていませんが、使用されることを意図しています iPhoneアプリケーションでの制作作業用. これは、iPhoneテンプレートとしてAfter Effectsで使用するための無料のiPhone 5S AEPファイルです。.
インターフェイスモックアップをインポートして、After Effectsでアニメーションを作成するだけです。それからあなたはあなたのチームと共有するためにこのiPhoneモックアップにそれを差し込むことができます.
9. iPhoneのテンプレート
これは別です カスタムAfter Effectsテンプレート とともに より現代的なiPhoneデザイン. 景品は、UX in Motionのこのページから入手できます。.
テンプレート内のすべてのものは カスタマイズがとても簡単. ダウンロードページには、 "Video Instructions"というセクションもあり、ここでアプリのアニメーション化方法を学ぶことができます.
10.マイクロアニメーション
最小のアプリアニメーションでも、ユーザーエクスペリエンスに大きな影響を与える可能性があります。この景品には 「好き」マイクロアニメーション ユーザーが投稿を「気に入った」ときはいつでも.
ハートのアイコン 独自のアニメーションを持っています ユーザーのプロフィール写真がいいねのスタックに追加された状態で。この景品は原則のためだけのもので、あなたにも .mov ご希望の場合はダウンロードするファイル.
11.財布アプリ
デジタル財布はますます普及してきており、この景品はそれをより簡単にデザインすることを可能にします。すべての生ベクトル要素を含むSketchファイルと、Principleアニメーション用の無料のPRDファイルを入手できます。.
この景品はSergey Bykovによって楽しい小さなサイドプロジェクトとして設計されました。しかし、それを分解してアニメーションを段階的に操作すると、非常に効果的です。.
12. iOSスイッチ
AppleのiOS 7によって、世界はオン/オフラベル用に新しく設計されたスイッチを手に入れました。これは無料のアニメーションを含む多くの異なる効果をもたらしました。 ネイティブのオン/オフスイッチを模倣.
このファイルでは、基本的なイージングを使った非常にシンプルなアニメーション効果が得られます。スイッチが上に移動して背景が緑色に変わり、その後スイッチをオフにすると元に戻ります。.
13.リッターアプリ
これが彼がRitter Appと呼ぶもののためにSergey Bykovによってリリースされたもう一つの素晴らしい景品です。これには、Principleアニメーション用の無料のPRDファイルとともに、ベクターインターフェイス用の無料のSketchファイルが含まれています。.
あなたは得るでしょう たくさんの異なるアニメーション この景品で、私はそれが中級から上級のデザイナーにとってより有用であろうと思います。初心者もそれから多くを学ぶことができますが、急な学習曲線を持っているかもしれません.
14.友達を招待する
私たちはみんなグーグルのプラスアイコンフライアウトメニューを知っていて、大好きです。さて、Jardson Almeidaは、シンプルなマテリアルデザインのコンセプトに基づいてFriends Inviteメニューを作成しました。.
すべてSketchでデザインされ、アニメーションのためにPrincipleにインポートされました。あなたは両方のファイルを景品としてダウンロードして玩具として入手します.
15.カードスワイプ
これはPrincipleユーザーのために作られたもう一つの一般的な強打景品です。これは カードスワイプインタフェース 汎用スライドショーまたはネイティブアプリのUI用に作成されたもの.
私はこれが原則に入ったばかりの初心者にとっては完璧な景品だと思います。それほど複雑ではないので迷子になるでしょうが、それほど単純ではないので簡単に感じることができます。.
16.地図上でチャット
多くのデザイナーはまだインターフェイスにPhotoshopを使用しています、そしてそれはこの地図チャット景品にも当てはまります。インターフェース用のPSDファイルと、プリンシパルアニメーション用のPRDファイルをダウンロードできます。.
それはスタイルにとって驚くほど飼い慣らされたアニメーションです、しかしそれはまだ素晴らしく見えて、そしてあなたが単純な地図/地理位置情報アプリであなたが期待するとおりに機能する.
17.アプリの読み込み
モバイルアプリがよく使う ロード画面 バックエンドで何かが起こっていることを訪問者に伝えるため。このコレクションのお気に入りの景品の1つは、Roman Wagnerによって作成されたこのロードアニメーションです。.
個々の要素をロードします 続々 ロード画面が終了したら。このアニメーションは非常に滑らかで、モバイルアプリ設計の分野では完全に信頼できます。.
18.オンボーディングカード
ユーザーオンボーディング すべての新しいモバイルアプリケーションにとって重要なステップです。この段階でいくつかのアニメーションを含めるのは常にうれしいことです。このため、これらのオンボーディングカードのアニメーションはアプリ設計者にとって非常に役立ちます。.
これはAustin Bairdによって作成され、あらゆるUI / UXプロジェクトで使用できるように無料でリリースされました.
19.基本デモ
Principleをさらに深く掘り下げていくうちに、多くの高度なワークフロー技法を学ぶことになります。さらに進むための最高の景品の一つは、Yalantisクリエイティブチームのために作成されたものです。.
これはPrincipleユーザーがダウンロードして遊ぶための完全に無料のリソースです。 Principle animationでプロになる方法を示すいくつかのトリックを網羅しています.
20.ドロップダウンメニュー
メニューのドロップダウンは、私たちの注意を引くためにクレイジーなアニメーションを使うことがよくあります。このAfter Effectsの景品は、 ドロップダウン階段アニメーション それらが階段のように落ちるように個々の要素のメニューに.
これは誰にとっても役に立つわけではないかもしれませんが、それは確かにAfter Effectsのインターフェースアニメーションについて学ぶための素晴らしい方法です。.
最後の言葉
これらすべてのリソースは、あなた自身のプロジェクトでダウンロードして遊ぶことが完全に無料です。あなたがUXアニメーションの初心者であるなら、私はあなたがこれらの景品を研究することによってあなたがたくさん学ぶことを保証する。あなたが他の素晴らしいリソースを知っているならば、コメントにリンクを落としても構わないと感じます.
