Advertisement

gif_animation5

 

アプリを購入する前に、機能や使い方ももちろんですが、どのような動きや操作感なのか確かめたい!と思ったことありませんか。UIデザインにGIFアニメーションを加えることで、イメージ画像では伝わらない、新しくてインタラクティブな、プレゼンテーションの形を体感してみましょう。

 

 

海外デザインブログLine 25で、モバイルアプリにおけるUIデザインの操作性をより分かりやすく表現した、ユニークなGIFアニメーションをまとめたエントリー「25 Creative Uses of Animated GIFs to Present UI Design」が公開されていたので、今回はこちらを中心に、見ているだけでも面白いUIデザインをまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

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

 

Gif Animation

gif_animation7

 

 

Speedcam App Animation

gif_animation1

 

 

Designer Screen GIF Animation

gif_animation8

 

 

Loading Animation

gif_animation12

 

 

Push Animation

gif_animation10

 

 

Curl Animation

gif_animation13

 

 

Profile Animation

gif_animation4

 

 

Abracadabra App

gif_animation3

 

 

Weather Rebound Gif

gif_animation18

 

 

Weather App

gif_animation2

 

 

Animated Sliding Tab Bar

gif_animation9

 

 

First Shot

gif_animation19

 

 

Fold Effect

gif_animation20

 

 

iWatch Mock-Up

gif_animation14

 

 

Covert Inbox

gif_animation6

 

 

Photo Navigation Concept

gif_animation15

 

 

Process Animation

gif_animation17

 

 

Menu Animation

gif_animation21

 

 

UI8 Wireframe Kit

gif_animation16

 

 

Map Pin Bubble

gif_animation11

 

 

Fiche Gif Animation

gif_animation22

 

 

Soccer Analytics

squawka-1

 

 

GIF Tour

onboarding-tour

 

 

Animation Test

brewstar_test

 

 

myChat App Concept

group_chat

 

 

GIF Animation of Template Gallery

gif_animation23

 

 

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

昨年末にまとめた、GIFアニメーションを使ったモバイルアプリデザインをあつめています。

video-animation

 

 

サムネイル@ : Tap Animated by Jordi Verdu – Dribbble

参照元リンク : 25 Creative Uses of Animated GIFs to Present UI Designs – Line 25