소소하지만 재미있는 ux, 트랜지션과 애니메이션 (@ux월드/2014)
DESCRIPTION
모바일에서의 소소해 보이지만 중요하고 재미있어보지지만 의미있는 UX인 트랜지션과 애니메이션에 대해서 정리해보았습니다. * 페이지 내 대부분의 사례가 동영상이었는데 Slide Share에 PDF로 올리니 확인이 어려운건 아쉽네요. ^^; (2014년 7월, UX월드 발표자료)TRANSCRIPT
다음커뮤니케이션
CX팀, 김기성
소소하지만 재미있는
유엑스이야기
트랜지션
애니메이션
@Mobile ?
@Mobile
NUI의 등장
CLI GUI NUI
Strict
Codified
CLI
Metaphor
Exploratory
GUI
Direct
Intuitive
NUI
NUI Natural User Interface
Natural User Interface
Out of
RangeTracking Engaged
Moving
Mouse
in-air
sliding
mouse
on table
Move
mouse
on table
Mouse
replaced
on table
Button is
depressed
Mouse lifted
from table
Button is
released
Finger
Lands
Finger
Lifted
Idle Active
Finger
moving
in air
Finger
moving
on Device
트랜지션과 애니메이션 이해하기
트랜지션【명사】 1. 변천, 추이, 변이, 전이; 과도기, 변하는 시기
애니메이션【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운
트랜지션길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌
1
2
3
다음탑 모바일웹
길을 잃지 않도록 도와주는 트랜지션
1
CIRCA
길을 잃지 않도록 도와주는 트랜지션
1
YAHOO! NEWS DIGEST
길을 잃지 않도록 도와주는 트랜지션
1
길을 잃지 않도록 도와주는 트랜지션
iOS 기본 트랜지션
1
스토리텔링을 돕는 트랜지션
STELLER
2
스토리텔링을 돕는 트랜지션
TIDY PHOTO ALBUM
2
스토리텔링을 돕는 트랜지션
NESS
2
다음앱
공간감을 만들어 주는 트랜지션
3
AIR BnB
공간감을 만들어 주는 트랜지션
3
iOS7 TOUCH AREA
공간감을 만들어 주는 트랜지션
3
공간감을 만들어 주는 트랜지션
iOS7 SAFARI
3
TWEET BOT
공간감을 만들어 주는 트랜지션
3
애니메이션행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함
1
2
3
4
5
행위에 대한 결과를 알려줌
1
previous iOS PASSWORD
행위에 대한 결과를 알려줌
1
iOS7 PASSWORD
행위에 대한 결과를 알려줌
1
iOS7 APP STORE
현재 진행상태 를 보여줌
2
YAHOO! NEWS DIGEST
현재 진행상태 를 보여줌
2
Flickr
현재 진행상태 를 보여줌
2
FACEBOOK MESSENGER
현재 진행상태 를 보여줌
2
iMESSENGER
사용자 행위 를 유도함
3
iOS7 LOCKSCREEN
사용자 행위 를 유도함
3
iOS7 CAMERA
사용자 행위 를 유도함
3
KitKat CAMERA
사용자 행위 를 유도함
3
MOLDIV
부가적인 정보를 보여줌
4
FLIGHT
SOLAR
부가적인 정보를 보여줌
4
YAHOO WEATHER
부가적인 정보를 보여줌
4
감성적 재미요소 를 제공함
5
YELP
TIMEHOP
감성적 재미요소 를 제공함
5
ZAPPOS
감성적 재미요소 를 제공함
5
INSTAFEEL
감성적 재미요소 를 제공함
5
PASSBOOK
감성적 재미요소 를 제공함
5
트랜지션과 애니메이션 디자인하기
행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함
길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌
디자인 원칙
디자인 원칙과한 애니메이션을 자제할 수 있어야 함
Exercising Restraint
+
디자인 원칙과한 애니메이션을 자제할 수 있어야 함 Exercising Restraint
+
Business Theme CC 3D Launcher App Ranker 3D Launcher
디자인 원칙일관성을 유지할 수 있어야 함
Maintaining Consistency
+
디자인 원칙일관성을 유지할 수 있어야 함 Maintaing Consistency
+
디자인 원칙다양한 원칙들을 조합할 수 있어야 함 Compounding Complementary Principles
+
디자인 원칙다양한 원칙들을 조합할 수 있어야 함 Compounding Complimentary Principles
+
+ +
그리고 이 모든 것은
콘텐츠 돕는 중요 역할
이렇게 중요한 트랜지션, 그리고 애니메이션 효과
어떻게 만들면 될까?
실제 실무에서는..
나,App
개발자나,UX
디자이너
실제 실무에서는..
이번 사이드 메뉴는 어떤 형태로 열리게 되나요?
왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요.
음, 그럼 애니메이션은 어떻게 넣을까요?
음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
실제 실무에서는..
이번 사이드 메뉴는 어떤 형태로 열리게 되나요?
왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요.
음, 그럼 애니메이션은 어떻게 넣을까요?
음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
스르륵
어떻게 만들면 될까?
2가지 방법세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름
1
2
세상 아래 새로운 것 없다이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들
1
http://useyourinterface.com/
세상 아래 새로운 것 없다이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들
1
http://tympanus.net/Development/PageTransitions/
http://codepen.io/ http://cssdeck.com/ http://give-n-go.co/ http://tympanus.net/Development/PageTransitions/ http://tympanus.net/Tutorials/CaptionHoverEffects/index.html !http://lazylinepainter.info/
UI 애니메이션 아카이빙
UI 애니메이션/트랜지션 구현
http://capptivate.co/ http://useyourinterface.com/ https://dribbble.com/shots?list=animated http://ui-animations.tumblr.com/ http://sixux.com/ http://giphy.com/
세상 아래 새로운 것 없다이미 나와있는 앱이라면 내가 직접 레코딩하여 전달
1
http://www.airsquirrels.com/reflector/
세상 아래 새로운 것 없다이미 나와있는 앱이라면 내가 직접 레코딩하여 전달
1
세상 아래 새로운 것 없다이미 나와있는 앱이라면 내가 직접 레코딩하여 전달
1
https://play.google.com/store/apps/details?id=uk.org.invisibility.recordable&hl=ko
세상 아래 새로운 것 없다이미 나와있는 앱이라면 내가 직접 레코딩하여 전달
1
2가지 방법세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름
1
2
2
새로운 혁신은 만들기 나름내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
2
Write a comment (anonymous) Post
secret
2
새로운 혁신은 만들기 나름내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
2
새로운 혁신은 만들기 나름내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
2
새로운 혁신은 만들기 나름내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
2
새로운 혁신은 만들기 나름내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
2
새로운 혁신은 만들기 나름프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
2
새로운 혁신은 만들기 나름프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
2
새로운 혁신은 만들기 나름리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
QUARTZ COMPOSER
2
새로운 혁신은 만들기 나름리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
2
새로운 혁신은 만들기 나름리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
쿼즈 컴포저 http://facebook.github.io/origami/ https://vimeo.com/85578380 http://wayfinder.co/pathways/530fd1e8632075a63d000003/prototyping-101-quartz-composer
!프레이머 http://www.framerjs.com/ https://hackdesign.org/lessons/41
애니메이션 테스트
쿼즈컴포저 & 프레이머
베지에 곡선 테스트 http://easings.net/ http://cubic-bezier.com/ http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
!애니메이션 테스트 CSS http://daneden.github.io/animate.css/
요약 및 결론
써머리
NUI의 등장
Finger
Lands
Finger
Lifted
Idle Active
Finger
moving
in air
Finger
moving
on Device
써머리
행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함
길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌
트랜지션은.. 애니메이션은..
T/A 이해하기
써머리
T/A 이해하기
+과한 애니메이션을 자제할 수 있어야 함
일관성을 유지할 수 있어야 함
다양한 원칙들을 조합할 수 있어야 함
써머리
T/A 디자인하기
세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름
Animation is a great way to provide feedback to users, as long as it’s both subtle and meaningful. Although animation pervades iPhone OS, it is used to enhance the user’s experience, not as the focus of the user’s experience.
!- iPhone HIG, June 2008
Conveying a sense of kinetic realism is going to be a key differentiator in next generation apps.
!Mike Stern
User Interface Design for iOS 7 Apps / Apple’s iOS 7 Tech Talk
Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system. !
Google Material Design Animation> Authentic Motion
소소하지만 재미있는
유엑스이야기
중요 의미
참고자료
NUI - Brave NUI World The Illusion of Life
Apple Human Interface Guide Google Android Design Guide
!http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
https://medium.com/p/3d1b0a9b810e https://medium.com/design-ux/88dadaafa0aa
http://www.subtraction.com/2011/02/01/unnecessary-explanations/ https://medium.com/design-ux/926eb80d64e3
http://uxmovement.com/buttons/how-to-make-progress-bars-feel-faster-to-users/ http://radiofun.tumblr.com/post/81372256029/framer-js
감사합니다