Advertisement

26-animation-menu-iphone-app-design

 

モバイルアプリをより分かりやすく伝えるために、アプリの動きやUIデザインの特長的なポイントを、GIFアニメーションを使ってプレゼンテーションする方法が増えています。デザインにアニメーション、動きが追加されることで、よりインタラクティブな魅せ方ができるようになりました。

 

 

海外デザインブログDesignWoopで、GIFアニメーションを有効的に利用し、GIFアニメーション付UIデザインまとめたエントリー「32 Animated User Experiecne Concepts for Mobile Applications」が公開されていたので、今回は参考になりそうなデザインをあつめています。

 

 

GIFアニメーション付UIデザインの作り方チュートリアルや、無料デザインPSD素材も公開されはじめています、いかがでしょう。

 

[list type=”star”] [li]ダイナミックな動きが魅力的!GIFアニメーション付モバイルUIデザインまとめ[/li]

[li]モバイルアプリの操作性をより良く伝える、GIFアニメーション付UIデザインまとめ[/li]

[li]GIFアニメーションが素敵!モバイルUIデザイン2013年まとめ[/li][/list]

 

 

詳細は以下から。

 

 

 

GIFアニメーションがすごい!モバイルアプリのコンセプトUIデザイン32個まとめ

 

Swipe Animation

伝えることがなかなか難しいスワイプ機能も、アニメーションも使えばラクラクです。

swipe-animation(2)

 

 

 

Cirqle

よりアプリを使っている感覚を演出するエフェクトのひとつ。

07-cirqle-iphone-app-ui-design

 

 

 

New Dribbble Navigation

ナビゲーションメニューの展開に、ふんわりとしたアニメーションを追加しています。

11-dribbble-animation-iphone-app-ui

 

 

 

Plus Button Animation

ボタンをクリックすると、勢いよく別リンクが出現するエフェクトがユニーク。

plus_button

 

 

 

Shoplt iOS App

タップ操作のみで直感的に商品をショピングカートに入れることができます。

21-shop-it-shopping-iphone-app-ui(2)

 

 

 

Weather

フェードインでゆっくり表示される、エレガントな動きに注目です。

23-dark-weather-iphone-app-ui

 

 

 

Cloudup Splash

単純になりがちなログインフォームも、アニメーションを加えることで新しいアイデアを発見できます。

24-cloudup-splash-screen-iphone-app

 

 

 

Liking Interaction GIF

31-like-animation-heart-iphone-app

 

 

 

Internet Radio App Concept

背景グラデーションが少しずつ変化する様子もうまく表現されています。

radio-demo(2)

 

 

 

Cheers!

飲み友達をあつめるユニークなアプリ、ビール柄アイコンが素敵です。

22-cheers-beer-iphone-app-ui

 

 

Menu Interaction

30-menu-interaction-iphone-app-ui-animation

 

 

 

GIF Tour

モバイルの使い方を解説、ツアーしたユーザーにも分かりやすいGIFアニメーション。

20-iphone-app-tour-interface-animation

 

 

 

Life Minimal App

関心が高まっているヘルス系モバイルアプリのプレゼンテーション用GIFアニメーション。

dribbble

 

 

What I eat Ap Animiation

animation_emerald_2x(2)

 

 

 

MyEnglish 3 App

コンテンツをスクロールした時のレイアウトの変化を表現しています。

main-dribbble-3

 

 

10-weather-app-typography-animation

 

 

Weather Rebound GIF

ボタンクリックで流れるようにスムーズなリンク展開が行われます。

19-weather-iphone-app-ui-after-effects

 

 

CityHour Calendar Animated Interaction

27-cityhour-calendar-iphone-app-ui

 

 

 

How to Move the Email

タイトルのままですがEメールを移動させる方法など、細かいパーツにも対応してくれます。

25-iphone-ios7-app-email-inbox-ui

 

 

Animated Hidden Camera Roll

カメラロールの選択方法を伝えるGIFアニメーションエフェクト。

17-iphone-hidden-camera-roll-ui

 

 

GIF Publisher

32-publisher-iphone-app-screen-interface

 

 

参考 モバイルアプリの操作性をより良く伝える、GIFアニメーション付UIデザインまとめ

これまでにも何度かGIFアニメーションをあつめています、こちらも参考にいかがでしょう。

GIF-UI-Design-001

 

 

サムネイル@ : GIF : Menu Animation by Platform – Dribbble

参照元リンク : 32 Animated User Experiecne Concepts for Mobile Applications – DesignWoop