Advertisement

ui-interaction-top

 

控えめなGIFアニメーションを活用した、新しいUIデザインの魅せ方が人気となっており、これまで以上にデザインだけでなくどのように動作するのか表現することが重要になってきています。

 

 

海外デザインブログLine25で、インタラクティブな動きが魅力的なGIFアニメーション月UIデザインをまとめたエントリー「Showcasing UI Interaction Design with Animatied GIFs」が公開されていたので、今回はこちらを中心に参考にしたいUIインタラクションを集めています。

 

 

アニメーションの基本原則12個を取り入れることで、より実生活に近い動きを再現することができるようになります。

 

 

 

詳細は以下から。

 

 

 

滑らかなGIFアニメーションが素敵!これから参考にしたいUIデザインまとめ

 

Product Page Interaction

product-pate-interaction

 

 

 

Handsome Site Team Page

handsome-site-team

 

 

 

Home Motion Fitness

home-motion-fitness

 

 

 

Traveller App Animation

popular-destinations

 

 

 

Menu Animation

travel-app-animation-dribbble

 

 

 

Mixpanel Homepage Trends

mixpanel-homepage-trends

 

 

 

Gemrock Love

gemrock-love

 

 

 

90° The Last Appventure

mounta-mckinley

 

 

 

Hnadsome Navigation Animations

handsome-home-nav

 

 

 

CRNT Favorites

crnt-favorites

 

 

 

New Message Animation

chat-new-message

 

 

 

New App – Menu Interaction

mon-trajet-navigation-menu

 

 

 

iOS Flow Interactions

interactions_v2-2

 

 

 

App Animation

infopaginas_gif-1

 

 

 

Music Stats

music_anim

 

 

 

New Rally Site!!

new-rally-saite

 

 

 

Dropbox / Guide

dropbox-guide

 

 

 

CRNT Watch Animation

crnt_applewatch

 

 

 

Twitter Social Button

twitter-button

 

 

 

Add New Content Button

add-new-content-button

 

 

 

Onborading Animation

product-virtual-shopping

 

 

 

Trip Detail Animation

trip-log-interface

 

 

 

Portrait vs Landscape

perspective-change-layout

 

 

 

GIF for Ribbet Countrols

gif-for-ribbet-cntrols

 

 

サムネイル@ : Dribbble – Re:Designing Travel – A New Skillshare Class by Claudio Guglieri

参照元リンク : Showcasing UI Interaction Design with Animatied GIFs – Line25