Downloaded 139 times
![애니메이션
【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운](https://image.slidesharecdn.com/uxfin34pdf-140801195256-phpapp01/85/UX-UX-2014-26-320.jpg)
Uploaded bykeesung kim
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
모바일에서의 소소해 보이지만 중요하고 재미있어보지지만 의미있는 UX인 트랜지션과 애니메이션에 대해서 정리해보았습니다. * 페이지 내 대부분의 사례가 동영상이었는데 Slide Share에 PDF로 올리니 확인이 어려운건 아쉽네요. ^^; (2014년 7월, UX월드 발표자료)
![[실습] Ux디자인실무 20141203_4조](https://cdn.slidesharecdn.com/ss_thumbnails/ux201412034-141218224202-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[122]네이버의모던웹라이브러리 박재성](https://cdn.slidesharecdn.com/ss_thumbnails/122-161023161034-thumbnail.jpg?width=640&height=640&fit=bounds)
![[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation](https://cdn.slidesharecdn.com/ss_thumbnails/nexters4-htmlandroidanimation-160927091904-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs](https://cdn.slidesharecdn.com/ss_thumbnails/egjs-161115043853-thumbnail.jpg?width=640&height=640&fit=bounds)
소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)
- 1.
- 2.
- 3.
- 4.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. NUI Natural User Interface NaturalUser Interface
- 19. Out of Range Tracking Engaged Moving Mouse in-air sliding mouse ontable Move mouse on table Mouse replaced on table Button is depressed Mouse lifted from table Button is released
- 20.
- 23.
- 24. 트랜지션 【명사】 1. 변천,추이, 변이, 전이; 과도기, 변하는 시기
- 26. 애니메이션 【명사】 1.[불] 생기,활기(life, spirit), 쾌활, 기운
- 28. 트랜지션 길을 잃지 않도록해줌 스토리텔링을 도와줌 공간감각을 만들어줌 1 2 3
- 29. 다음탑 모바일웹 길을 잃지 않도록 도와주는트랜지션 1
- 30. CIRCA 길을 잃지 않도록 도와주는트랜지션 1
- 31. YAHOO! NEWS DIGEST 길을 잃지않도록 도와주는 트랜지션 1
- 32. 길을 잃지 않도록 도와주는트랜지션 iOS 기본 트랜지션 1
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. 애니메이션 행위에 대한 결과를알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 1 2 3 4 5
- 42. 행위에 대한 결과를 알려줌 1 previousiOS PASSWORD
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 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.
- 73.
- 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 inair Finger moving on Device
- 103. 써머리 행위에 대한 결과를알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 트랜지션은.. 애니메이션은.. T/A 이해하기
- 104. 써머리 T/A 이해하기 + 과한 애니메이션을자제할 수 있어야 함 일관성을 유지할 수 있어야 함 다양한 원칙들을 조합할 수 있어야 함
- 105. 써머리 T/A 디자인하기 세상 아래새로운 것 없다 새로운 혁신은 만들기 나름
- 106. Animation is agreat 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 senseof 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 theworld 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
- 110.
- 111.
- 112. 참고자료 NUI - BraveNUI 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.