Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)

6,681 views

Published on

모바일에서의 소소해 보이지만 중요하고 재미있어보지지만 의미있는 UX인 트랜지션과 애니메이션에 대해서 정리해보았습니다.
* 페이지 내 대부분의 사례가 동영상이었는데 Slide Share에 PDF로 올리니 확인이 어려운건 아쉽네요. ^^;
(2014년 7월, UX월드 발표자료)

Published in: Mobile
  • Be the first to comment

소소하지만 재미있는 UX, 트랜지션과 애니메이션 (@UX월드/2014)

  1. 1. 다음커뮤니케이션 CX팀, 김기성 소소하지만 재미있는 유엑스이야기
  2. 2. 트랜지션
  3. 3. 애니메이션
  4. 4. @Mobile?
  5. 5. @Mobile
  6. 6. NUI의 등장
  7. 7. CLI GUI NUI
  8. 8. Strict Codified CLI
  9. 9. Metaphor Exploratory GUI
  10. 10. Direct Intuitive NUI
  11. 11. NUI Natural User Interface Natural User Interface
  12. 12. 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
  13. 13. Finger Lands Finger Lifted Idle Active Finger moving in air Finger moving on Device
  14. 14. 트랜지션과 애니메이션 이해하기
  15. 15. 트랜지션 【명사】 1. 변천, 추이, 변이, 전이; 과도기, 변하는 시기
  16. 16. 애니메이션 【명사】 1.[불] 생기, 활기(life, spirit), 쾌활, 기운
  17. 17. 트랜지션 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 1 2 3
  18. 18. 다음탑 모바일웹 길을 잃지 않도록 도와주는 트랜지션 1
  19. 19. CIRCA 길을 잃지 않도록 도와주는 트랜지션 1
  20. 20. YAHOO! NEWS DIGEST 길을 잃지 않도록 도와주는 트랜지션 1
  21. 21. 길을 잃지 않도록 도와주는 트랜지션 iOS 기본 트랜지션 1
  22. 22. 스토리텔링을 돕는 트랜지션 STELLER 2
  23. 23. 스토리텔링을 돕는 트랜지션 TIDY PHOTO ALBUM 2
  24. 24. 스토리텔링을 돕는 트랜지션 NESS 2
  25. 25. 다음앱 공간감을 만들어 주는 트랜지션 3
  26. 26. AIR BnB 공간감을 만들어 주는 트랜지션 3
  27. 27. iOS7 TOUCH AREA 공간감을 만들어 주는 트랜지션 3
  28. 28. 공간감을 만들어 주는 트랜지션 iOS7 SAFARI 3
  29. 29. TWEET BOT 공간감을 만들어 주는 트랜지션 3
  30. 30. 애니메이션 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 1 2 3 4 5
  31. 31. 행위에 대한 결과를 알려줌 1 previous iOS PASSWORD
  32. 32. 행위에 대한 결과를 알려줌 1 iOS7 PASSWORD
  33. 33. 행위에 대한 결과를 알려줌 1 iOS7 APP STORE
  34. 34. 현재 진행상태 를 보여줌 2 YAHOO! NEWS DIGEST
  35. 35. 현재 진행상태 를 보여줌 2 Flickr
  36. 36. 현재 진행상태 를 보여줌 2 FACEBOOK MESSENGER
  37. 37. 현재 진행상태 를 보여줌 2 iMESSENGER
  38. 38. 사용자 행위 를 유도함 3 iOS7 LOCKSCREEN
  39. 39. 사용자 행위 를 유도함 3 iOS7 CAMERA
  40. 40. 사용자 행위 를 유도함 3 KitKat CAMERA
  41. 41. 사용자 행위 를 유도함 3 MOLDIV
  42. 42. 부가적인 정보를 보여줌 4 FLIGHT
  43. 43. SOLAR 부가적인 정보를 보여줌 4
  44. 44. YAHOO WEATHER 부가적인 정보를 보여줌 4
  45. 45. 감성적 재미요소 를 제공함 5 YELP
  46. 46. TIMEHOP 감성적 재미요소 를 제공함 5
  47. 47. ZAPPOS 감성적 재미요소 를 제공함 5
  48. 48. INSTAFEEL 감성적 재미요소 를 제공함 5
  49. 49. PASSBOOK 감성적 재미요소 를 제공함 5
  50. 50. 트랜지션과 애니메이션 디자인하기
  51. 51. 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 디자인 원칙
  52. 52. 디자인 원칙 과한 애니메이션을 자제할 수 있어야 함 Exercising Restraint +
  53. 53. 디자인 원칙 과한 애니메이션을 자제할 수 있어야 함 Exercising Restraint + Business Theme CC 3D Launcher App Ranker 3D Launcher
  54. 54. 디자인 원칙 일관성을 유지할 수 있어야 함 Maintaining Consistency +
  55. 55. 디자인 원칙 일관성을 유지할 수 있어야 함 Maintaing Consistency +
  56. 56. 디자인 원칙 다양한 원칙들을 조합할 수 있어야 함 Compounding Complementary Principles +
  57. 57. 디자인 원칙 다양한 원칙들을 조합할 수 있어야 함 Compounding Complimentary Principles + + +
  58. 58. 그리고 이 모든 것은
  59. 59. 콘텐츠 돕는 중요 역할
  60. 60. 이렇게 중요한 트랜지션, 그리고 애니메이션 효과
  61. 61. 어떻게 만들면 될까?
  62. 62. 실제 실무에서는.. 나,App 개발자 나,UX 디자이너
  63. 63. 실제 실무에서는.. 이번 사이드 메뉴는 어떤 형태로 열리게 되나요? 왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요. 음, 그럼 애니메이션은 어떻게 넣을까요? 음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
  64. 64. 실제 실무에서는.. 이번 사이드 메뉴는 어떤 형태로 열리게 되나요? 왼쪽에서 오른쪽으로, 그리고 기사 상단으로 덮이는 형태면 돼요. 음, 그럼 애니메이션은 어떻게 넣을까요? 음, 빠르지만 자연스럽게. ‘스르륵’ 하는 형태로 열리면 좋겠어요.
  65. 65. 스르륵
  66. 66. 어떻게 만들면 될까?
  67. 67. 2가지 방법 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름 1 2
  68. 68. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://capptivate.co/
  69. 69. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://useyourinterface.com/
  70. 70. 세상 아래 새로운 것 없다 이미 다양하게 만들어져 있는 관련 정보 아카이빙 페이지들 1 http://tympanus.net/Development/PageTransitions/
  71. 71. 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/
  72. 72. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1 http://www.airsquirrels.com/reflector/
  73. 73. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1
  74. 74. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1 https://play.google.com/store/apps/details?id=uk.org.invisibility.recordable&hl=ko
  75. 75. 세상 아래 새로운 것 없다 이미 나와있는 앱이라면 내가 직접 레코딩하여 전달 1
  76. 76. 2가지 방법 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름 1 2
  77. 77. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
  78. 78. 2 Write a comment (anonymous) Post secret
  79. 79. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
  80. 80. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
  81. 81. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
  82. 82. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달
  83. 83. 2 새로운 혁신은 만들기 나름 프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
  84. 84. 2 새로운 혁신은 만들기 나름 프론트엔드 개발부서에 관련 애니메이션 요청, 지속적인 튜닝
  85. 85. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달 QUARTZ COMPOSER
  86. 86. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
  87. 87. 2 새로운 혁신은 만들기 나름 리치인터랙션이 가능한 프로토타이핑 도구를 활용, 협업부서에 전달
  88. 88. 2 새로운 혁신은 만들기 나름 내게 익숙한 툴을 이용, 쉽게 트랜지션/애니메이션 효과를 만들어 전달 http://easings.net/
  89. 89. 쿼즈 컴포저 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/
  90. 90. 요약 및 결론
  91. 91. 써머리 NUI의 등장 Finger Lands Finger Lifted Idle Active Finger moving in air Finger moving on Device
  92. 92. 써머리 행위에 대한 결과를 알려줌 현재 진행상태를 보여줌 사용자 행위를 유도함 부가적인 정보를 보여줌 감성적 재미요소를 제공함 길을 잃지 않도록 해줌 스토리텔링을 도와줌 공간감각을 만들어줌 트랜지션은.. 애니메이션은.. T/A 이해하기
  93. 93. 써머리 T/A 이해하기 + 과한 애니메이션을 자제할 수 있어야 함 일관성을 유지할 수 있어야 함 다양한 원칙들을 조합할 수 있어야 함
  94. 94. 써머리 T/A 디자인하기 세상 아래 새로운 것 없다 새로운 혁신은 만들기 나름
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. 소소하지만 재미있는 유엑스이야기 중요 의미
  99. 99. 질문 @pentaxzs heisk@daumcorp.com
  100. 100. 참고자료 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
  101. 101. 감사합니다

×