mobile ui design
mobile ui design

20가지 GIF 애니메이션으로 설명하는 모바일 UI 예시

| Comments

공유 버튼

모바일 서비를 기획시 애니메이션을 이용해 이해도를 높이자

온라인 서비스 기획시 대부분 PPT를 이용한 스토리보드와 몇몇 온라인 서비스를 캡쳐해 스크린 샷으로 서비스를 설명하곤 한다.

하지만, 위와 같은 방법은 실제 서비스의 다이나믹한 움직임을 표현하기 어렵다. 특히 와이어프레임으로 제작하면 컬러 표현 또한 제한되 너무 단순해 보이고 지루하다.

모바일 앱과 모바일 사이트를 제작할 때 구동되는 모습을 표현하는데 gif 파일을 사용하면 고객에게 너무나 쉽게 제작되는 모습을 설명할 수 있다.

모바일 화면 구성에 대한 고민을 쉽게 해결하자

모바일 서비스 기획 시 각 페이지의 프레임을 한장 한장 표현하지만, 그 움직임을 전체적으로 설명하기는 쉽지 않다.

많은 시간이 필요하는 테스트 페이지까지 나온 후 구성을 변경하는 건 너무나 번거로운 작업이다 .

뛰어난 효과를 주는 장면 전환의 아이디어를 얻고 싶은 사람에게 아래 리스트에 있는 20가지 모바일 UI 애미메이션은 너무나 유용한 자료다.

각기 다른 특성이 있는 이미지를 보면서 더 큰 아이디어를 생각해 보자.


 

Gif Animation

Speedcam App Animation

Abracadabra App

Loading Animation

Profile Animation

Designer Screen GIF Animation

GIF Animation of Template Gallery

Weather App

Push Animation

Process Animation

iWatch Mock-Up

Weather Rebound Gif

Curl Animation

GIF Tour

Animated Sliding Tab Bar

Animation Test

Photo Navigation Concept

Fiche Gif Animation

myChat App Concept

Covert Inbox

Soccer Analytics

Map Pin Bubble

Menu Animation

First Shot

Fold Effect

source: The Design Inspiration : 20 Incredible Mobile UI Animations in GIFs

Author: 장 정우

FBML.co.kr은 중/소기업에서 소셜미디어 마케팅 및 온라인 마케팅을 하시는 분들에게 쉽게 사용 가능한 자료를 제공하고 있습니다.