소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
•
34 likes•8,720 views
모바일에서의 소소해 보이지만 중요하고 재미있어보지지만 의미있는 UX인 트랜지션과 애니메이션에 대해서 정리해보았습니다. * 페이지 내 대부분의 사례가 동영상이었는데 Slide Share에 PDF로 올리니 확인이 어려운건 아쉽네요. ^^; (2014년 7월, UX월드 발표자료)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to 소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
Similar to 소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014) (20)
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
- 2. 트랜지션
- 3. 애니메이션
- 4. @Mobile?
- 11. @Mobile
- 12. NUI의 등장
- 13. CLI GUI NUI
- 17. NUI Natural User Interface Natural User Interface
- 19. Out of Range Tracking 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
- 23. 트랜지션과 애니메이션 이해하기
- 24. 트랜지션 【명사】 1. 변천, 추이, 변이, 전이; 과도기, 변하는 시기
- 26. 애니메이션 【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운
- 28. 트랜지션 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 1 2 3
- 29. 다음탑 모바일웹 길을 잃지 않도록 도와주는 트랜지션 1
- 30. CIRCA 길을 잃지 않도록 도와주는 트랜지션 1
- 31. YAHOO! NEWS DIGEST 길을 잃지 않도록 도와주는 트랜지션 1
- 32. 길을 잃지 않도록 도와주는 트랜지션 iOS 기본 트랜지션 1
- 41. 애니메이션 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 1 2 3 4 5
- 42. 행위에 대한 결과를 알려줌 1 previous iOS PASSWORD
- 44. 행위에 대한 결과를 알려줌 1 iOS7 APP STORE
- 45. 현재 진행상태 를 보여줌 2 YAHOO! NEWS DIGEST
- 62. 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 디자인 원칙
- 63. 디자인 원칙 과한 애니메이션을 자제할 수 있어야 함 Exercising Restraint +
- 64. 디자인 원칙 과한 애니메이션을 자제할 수 있어야 함 Exercising Restraint + Business Theme CC 3D Launcher App Ranker 3D Launcher
- 65. 디자인 원칙 일관성을 유지할 수 있어야 함 Maintaining Consistency +
- 66. 디자인 원칙 일관성을 유지할 수 있어야 함 Maintaing Consistency +
- 67. 디자인 원칙 다양한 원칙들을 조합할 수 있어야 함 Compounding Complementary Principles +
- 68. 디자인 원칙 다양한 원칙들을 조합할 수 있어야 함 Compounding Complimentary Principles + + +
- 69. 그리고 이 모든 것은
- 70. 콘텐츠 돕는 중요 역할
- 71. 이렇게 중요한 트랜지션, 그리고 애니메이션 효과
- 72. 어떻게 만들면 될까?
- 74. 실제 실무에서는.. 이번 사이드 메뉴는 어떤 형태로 열리게 되나요? 왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요. 음, 그럼 애니메이션은 어떻게 넣을까요? 음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
- 75. 실제 실무에서는.. 이번 사이드 메뉴는 어떤 형태로 열리게 되나요? 왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요. 음, 그럼 애니메이션은 어떻게 넣을까요? 음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
- 76. 스르륵
- 77. 어떻게 만들면 될까?
- 78. 2가지 방법 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름 1 2
- 79. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://capptivate.co/
- 80. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://useyourinterface.com/
- 81. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://tympanus.net/Development/PageTransitions/
- 82. 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/
- 83. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1 http://www.airsquirrels.com/reflector/
- 84. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1
- 85. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1 https://play.google.com/store/apps/details?id=uk.org.invisibility.recordable&hl=ko
- 86. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1
- 87. 2가지 방법 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름 1 2
- 88. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
- 89. 2 Write a comment (anonymous) Post secret
- 90. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
- 91. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
- 92. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
- 93. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
- 94. 2 새로운 혁신은 만들기 나름 프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
- 95. 2 새로운 혁신은 만들기 나름 프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
- 96. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달 QUARTZ COMPOSER
- 97. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
- 98. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
- 99. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달 http://easings.net/
- 100. 쿼즈 컴포저 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/
- 101. 요약 및 결론
- 102. 써머리 NUI의 등장 Finger Lands Finger Lifted Idle Active Finger moving in air Finger moving on Device
- 103. 써머리 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 트랜지션은.. 애니메이션은.. T/A 이해하기
- 104. 써머리 T/A 이해하기 + 과한 애니메이션을 자제할 수 있어야 함 일관성을 유지할 수 있어야 함 다양한 원칙들을 조합할 수 있어야 함
- 105. 써머리 T/A 디자인하기 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름
- 106. 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
- 107. 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
- 108. 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
- 112. 참고자료 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
- 113. 감사합니다