웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
kimdirector is Creative Web & Mobile UI/UX Planner and Designer
WEBDESK
Inspiration
HOME WEBDESK Inspiration
모바일 UI 디자인 애니메이션 3가지 원칙
Posted by kimdirector | 2020.05.25 | Hit : 389
UX 모바일 애니메이션 UI 디자인
목록보기이전보기
아래 내용은 "3 Key Uses for Animation in Mobile UI Design"의 내용을 번역한 내용입니다. 의역이 있을 수 있으며, 추가 설명을 덧붙인 부분도 있으니 참고하시기 바랍니다. 자세한 내용은 원문을 확인해 보시기 바랍니다.


Credits: Eddie Lobanovskiy

기술의 빠른 발전으로 인해 애니메이션은 시각적 고급스러움을 위해 사용하기 보다는 사용자가 기대하는 기능적 요구사항이 되었습니다. 애니메이션은 인터페이스에 존재하는 많은 기능적 문제를 해결해주며 인터페이스가 생기 있으면서도 진정으로 사용자를 위한다고 느끼게 해줍니다. 모바일 인터페이스의 기능성과 감성적인 힘을 향상시켜주는 ‘애니메이션 핵심 요령’을 살펴보도록 하겠습니다.
 
 
1. System Status
 
항상 앱의 백스테이지에서는 많은 수의 프로세스가 진행 중인 경우가 많이 있습니다. 가령 데이터가 서버로부터 다운로드되고 있거나, 계산이 진행 중이거나 할 때는 이러한 프로세스에는 언제나 시간이 걸리기 마련입니다. 사용자에게는 앱이 고장난 것이 아니며 프로세스가 진행 중인 상태임을 알려줘야 합니다. 프로세스에 대한 시각적 싸인은 사용자가 앱에 대해서 통제감을 가질 수 있게 해주는 것이 사용자에게 안정감과 도움을 줄 수 있을 것 입니다.
 
 
Loading Indicators
로딩 시간은 대부분의 디지털 제품에서 피할 수 없는 상황입니다. 애니메이션이 이 문제를 해결해 주진 못하겠지만, 사용자에게는 분명 ‘기다림’은 큰 문제가 아닌 것으로 만들어 줍니다. 기다림을 줄일 수 없을 때라도, 기다림을 조금 더 즐겁게 만들어 줄 수는 있습니다. 창의적인 프로세스 인디케이터는 사용자가 지각하는 시간을 줄여줄 수 있습니다. 애니메이션은 사용자의 제품에 대한 지각에 영향을 미쳐서 실제보다 더 좋은 제품이라고 느끼게 해 줍니다.
 
 
기다리는 잠깐의 시간 동안 흥미롭게 볼 수 있는 무언가를 사용자에게 제공해 준다면,
사용자는 기다림 그 자체에 덜 집중하게 됩니다.
Credits: Ramotion
 
 
Pull to refresh
이 그룹에서 유명한 애니메이션은 “pull down to refresh” 애니메이션으로, 모바일 디바이스에서 콘텐츠가 업데이트되는 프로세스에 적용됩니다.
 
팁 : pull down to refresh 애니메이션은 앱의 디자인 아웃라인과 매치가 되어야 합니다.
앱이 미니멀한 디자인을 따르고 있다면, 이 애니메이션 역시 그래야 합니다.
Credits: Zee Young
 
 
Notifications
움직임은 그 자체로 이목을 끌기 때문에 알림에 애니메이션 효과를 주는 것은 사용자의 경험에 지나치게 침범하지 않으면서도 즐겁게 알림을 줄 수 있는 방법입니다.
 

움직이는 오브젝트는 즉시 사용자의 이목을 끌게 됩니다.
Credits: Arjun Kani
 
 
 
2. Navigation and Transitions
 
애니메이션이 가장 기본적으로 활용되는 사례는 전환 효과입니다. 페이지의 레이아웃에 방금 발생한 변화가 무엇인지, 무엇이 변화를 촉발했는지, 그 변화를 나중에 다시 주려면 어떻게 해야 하는지 등을 사용자가 이해할 수 있도록 도움을 주기 위해 이런 유형의 애니메이션이 사용됩니다. 고전적인 사례로는 숨겨진 콘텐츠를 보여주는 햄버거 버튼이 있습니다.
 


모션 디자인은 정보를 전달하면서도 재미있는 방향으로 효과적으로 유저의 이목을 끌 수 있습니다.
Credits: Gal Shir
 
여기서는 보통 햄버거 애니메이션이 가장 많이 고려되는 옵션일 텐데, 내비게이션에 활용될 수 있는 애니메이션은 다음과 같이 다양합니다.
 
 
Transport between navigational context
디자이너는 애니메이션을 활용하여 사용자가 찾고 있는 콘텍스트로 매끄럽게 이동하도록 도와주며, 스크린 상의 요소 배치에 생긴 변화를 설명합니다. 전환 효과는 서로 다른 UI 상태 사이에서 다리 역할을 해줌으로, 스크린 상에 변화가 생겼을 때 어떤 일이 일어나고 있는 것인지 사용자가 이해할 수 있게 해줘야 합니다.
 
 
Visual hierarchy and connection between elements
애니메이션은 인터페이스 상의 오브젝트를 표현하고 오브젝트끼리 어떻게 상호작용하는지 보여주는 데 유용합니다. 애니메이션은 요소가 서로 어떻게 연결되어 있는지 보여줍니다.


Credits: Vitaly Rubtsov
 
 
Function change
어떤 경우에, 디자이너는 특정 조건하에 기능적으로 변화하는 액션 버튼을 디자인하라는 요구를 받기도 합니다. 보통 전반적인 공간이 제한된 모바일 디자인에서 많이 발견할 수 있습니다.


“재생”과 “정지” 버튼은 다중상태 버튼 중 아마 가장 흔하게 사용되는 사례일것입니다.
Credits: KREATIVA Studio
 
이런 유형의 애니메이션은 사용자가 그것을 사용할 때 어떻게 바뀌는지 보여 줍니다. 아래 사례를 보면, 유저가 플로팅 액션 버튼(floating action button)을 누르면 플러스 싸인이 연필 모양으로 바뀝니다. 연필은 가장 주된 작성 기능을 보여주는 것 입니다. 이러한 작은 디테일이 ‘다음에 일어날 일을 추측해야만 하는 상황’과 ‘두 상태에서 아이콘이 어떤 의미인지 이미 아는 상황’의 차이를 만듭니다.
 

버튼은 “플러스”에서 “연필”로 모양이 바뀌면서 버튼의 기능이 바뀌었음을 보여줍니다.
Credits: Material Design
 
 
 
3. Visual Feedback
 
시각적 피드백은 어떤 인터페이스에서든 매우 중요합니다. 사용자가 통제감을 느낄 수 있게 해주는데, 사용자에게 통제감이란 언제든 시스템의 현 상태를 알고 이해한다는 것을 의미합니다.
 
 
Acknowledgement
버튼이나 컨트롤 같은 사용자 인터페이스 요소는 유리 뒤에 존재한다 할지라도 실제 유형의 물체로 보이게 만들어야 합니다. 물리적 세계에서 쓰는 버튼이나 컨트롤, 그 외 다른 오브젝트들은 우리가 해당 오브젝트에 가하는 행동에 대한 반응을 보입니다. 사람들은 사용자 인터페이스 컨트롤에 대해서도 같은 수준의 반응성을 기대합니다. 이러한 갭을 줄이기 위해서, 인풋이 발생하는 즉시 인지하여, 마치 직접 조작하는 것처럼 보이고 느껴지도록 시각적 모션 단서가 움직여야 합니다.
 


유저의 탭에 반응을 보여주는 버튼
Credits: Material Design
 
 
Visualize the results of the actions
애니메이션은 인터랙션의 모든 지점을 개선해 줄 수 있으며 사용자가 수행하는 액션을 보강해 줄 수 있습니다. 아래 Stripe의 사례를 보면, 사용자가 “Pay”를 클릭하면, 결제가 성공적으로 되었음을 보여주기 전에 스피너가 잠깐 나타납니다. 체크표시 애니메이션은 사용자가 쉽게 결제를 했다고 느끼게 해주는데, 사용자는 이런 중요한 디테일을 좋아합니다.
 

시각적 반응은 인게이지먼트를 높일 수 있으며 유저를 기쁘게 해줄 수 있습니다.
Imagecredit: Michaël Villar
 
 
 
Conclusion
애니메이션은 정교하게 사용되면 강력한 힘을 발휘합니다. 어떤 디자인에든 생명을 불어 넣어주며, 사용자가 일상적인 태스크를 수행할 때도 몰입할 수 있게 해주며, 당연히 여러분이 군중 속에서 눈에 띄게 만들어 줄 것입니다. 잘 디자인된 애니메이션은 공들여 만들었다는 느낌을 받게 해줍니다.
 
Posted by kimdirector | 2020.05.25 | Hit : 389
LINK https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b
Tags UX 모바일 애니메이션 UI 디자인
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=DesignInspiration&no=76

COMMENT
목록보기이전보기

모바일 UI 디자인 애니메이션 3가지 원칙
아래 내용은 "3 Key Uses for Animation in Mobile UI Design"의 내용을 번역한 내용입니다. 의역이 있을 수 있으...
NO: 2020.05.25 389 
[인포그래픽 사이트 추천] 50만 장이 넘는 셔...
Creative Template with apple banner / can be used for infographics / banners / concept vecto...
NO:62 2015.11.27 6054 (1)
2015 로고 디자인 트렌드 Top10
Design Bolts—New trends of Logo design for 2015을 번역 및 재구성한 포스트를 소개합니다. 여러분의 로고 디자...
NO:61 2015.04.28 8756 
30 Dark iPhone App UI Designs
모바일 UI 디자인은 현재 간단한 버튼이나 라인 아이콘 편평한 요소에 초점을 맞추고 있습니다. 괜찮은 어플리케이션이 많이 있지만, UI의 영감을 위한 최...
NO:60 2015.04.17 5618 
기발하고 창의적인 로고 디자인 15선-하이컨셉,...
기발하고 창의적인 세계의 로고 디자인 15선   가장 단순 심플 하지만 많은 것을 담고 있어야 할 로고 디자인 그러한 이유로 로고 디...
NO:59 2015.04.10 2838 
다양한 형태의 모션을 이용한 디자인 사례
스마트폰을 사용하면서 가끔 느끼는 것들 중에서 재미있는 효과 또는 신기한 효과들을 볼 때면 나도 모르게 감탄사를 연발할 때가 있다. 이런 느낌을 가질 ...
NO:58 2015.03.20 13495 
The 2014 Logo Trend Report
2014년 올 한 해동안 있었던 다양한 스토리들이 연말에 많이 솟아져 나오고 있습니다. IT계도 크게 다르지 않았습니다.    2014년에 기...
NO:57 2014.12.26 6054 
효과적인 기능성을 갖춘 UI, UX 디자인 사례
웹 기반 응용 프로그램과 모바일 앱을 디자인 할 때, 제일 먼저 고려해야 할 사항은 어떤 것들이 있을까요?   단순히 디자인만 강조할 것인지...
NO:56 2014.12.18 9628 
40 Effective Responsive Naviga...
아래 소개하고 있는 사이트들은 기본으로 반응형 웹 형태로 되어 있습니다. PC 버전인 경우에는 상관없이 서핑이 가능하겠지만, 모바일 버전에서의 ...
NO:55 2014.12.13 2066 
25 UI design inspiration
아래 소개하고 있는 대부분의 UI 디자인은 애플리케이션 또는 모바일 앱이나 웹 페이지에서 활용 가능한 UI 요소들 입니다. 각종 메뉴 아이콘 부터 슬...
NO:54 2014.11.26 2871 
26 Parallax Scrolling Design I...
요즘 부쩍 Parallax Scrolling에 대한 포스팅이 많은 것 같습니다. 현재 많이 이슈화되고 있는 트렌드이기도 하지만 그만큼 관심을 많이 ...
NO:53 2014.11.11 2631 
jQuery 라이브러리 기반 무료 오픈 소스 플러...
소개하고 있는 플러그인은 주로 jQuery 라이브러리를 기반으로 무료 오픈 소스들입니다.  원하는 효과를 재현하기 위해 간단한 JavaScript ...
NO:52 2014.11.03 4120 
Elements of a Brilliant jQuery...
웹사이트 제작시, 활용도가 가장 높은 image slider 에 대한 좋은 리소스 파일들을 소개합니다. 그 이유는 여러가지가 있겠지마 그 중에서 컨...
NO:51 2014.10.31 7773 
Interesting Examples of HTML5 ...
웹디자이너들에게 중요한 건 포트폴리오입니다. 자신이 작업한 결과물을 정리하기 위한 수단으로 포트폴리오를 관리하기도 하지만 내가 제작한 작업물들...
NO:50 2014.10.24 2078 
모바일 앱 디자인에 최적화된 UI 구현 사례들
모바일 인터페이스 디자이너들은 모바일에 최적화 된 사이트는 사이트 개발자의 부담을 가볍게 할 수 있지만, 일부가 아닌 전체 기능의 앱을 구축하고 개발하...
NO:49 2014.10.16 10161 

 1 2345
WEBDESK
Webdesign Report
Web Plan Report
Inspiration
Web Development
Recommend Site
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile Work IT Information Web Identity Work Everyday Mobile Life Webdesign Web Development Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site  ETC. Work  Artwork  Typography Work
Tags
UI UX 스마트폰 디자인 폰트 리더 일러스트 웹브라우저 Accessibility 모바일 앱 프레젠테이션 산업 습관 원도우 리더 SKT 웹디자인 DB 예제 오피스 프로젝트 캠페인 파워포인트 글꼴 무료 웹표준 포스트잇 머트리얼 디자인 애플 HTML5 솔루션 구글 폰트 천안외국어대학 모바일 앱 네비게이션 실버라이트5.0 홈페이지 홈페이지 디자인
Recommend Tags
디자인 씽킹 퍼스널 브랜드 사용자 경험 서비스 디자인