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.

Animations in UX design

Animations in user experience -
How to justify them, how to make them look great and how to create them

  • Login to see the comments

Animations in UX design

  1. 1. ‫ממשק‬ ‫משתמש‬ ‫אפשר‬ ‫להסביר‬
  2. 2. ‫נדבר‬ ‫על‬ … Ø  Ø  Ø  ‫איך‬ ‫מצדיקים‬ ‫אנימציות‬ ‫איך‬ ‫גורמים‬ ‫להן‬ ‫להראות‬ ‫טוב‬ ‫איך‬ ‫מייצרים‬ ‫אותן‬
  3. 3. ‫מוסיפים‬ … POP UP
  4. 4. ‫מוסיפים‬ ‫אנימציה‬ …
  5. 5. ‫ועוד‬ ‫אנימציה‬ …
  6. 6. 4 1 7 5 2 8 6 3 9 ‫תשע‬ ‫משפחות‬ ‫לוגיות‬ ‫להצדקת‬ ‫אנימציות‬
  7. 7. ‫אוריאנטציה‬ 1 ‫כי‬‫אין‬‫דבר‬‫בחיים‬‫שמגיע‬‫משום‬‫מקום‬- ‫ברור‬‫למשתמש‬‫מאיפה‬‫החלון‬‫פתאום‬‫הגיע‬,‫ולאן‬‫נעלם‬ ‫כדי‬‫שהמשתמש‬‫לא‬‫יהיה‬‫מופתע‬‫כשהממשק‬‫משתנה‬‫לו‬ ‫כי‬‫יותר‬‫קל‬‫להיחשף‬‫לתכנים‬‫חדשים‬‫בהדרגה‬
  8. 8. Orienta5on Video credit: Tomas Skarba 1
  9. 9. Orienta5on Video credit: Arthur GuillerminHZN 1
  10. 10. B A ‫מבליט‬‫שינוי‬‫בלתי‬‫צפוי‬‫שהתרחש‬‫בפעולה‬‫של‬‫לחצן‬ ‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2
  11. 11. ‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2 Video credit: Google
  12. 12. ‫אותו‬ ‫הלחצן‬ ,‫פעולה‬ ‫חדשה‬ 2 Video credit: Jardson Almeida
  13. 13. ‫הרחבה‬ ZOOM IN – 3
  14. 14. ‫הרחבה‬ 3 Video credit: Brandon Termini, dribbble
  15. 15. ‫הרחבה‬ 3 Video credit: Brandon Termini, dribbble 1 2 3
  16. 16. ‫הרחבה‬ 3 Video credit: Heileng, dribbble ‫אובייקט‬‫מאוד‬‫מזוהה‬ 1 ‫האובייקט‬‫זז‬‫והופך‬‫לדומיננטי‬ 2 ‫מופיע‬‫לחצן‬‫חזרה‬‫אחורה‬ 3
  17. 17. Video credit: Virgil Pana, dribbble
  18. 18. 1.  Orienta5on 2.  Same buQon, new ac5on 3.  Zoom IN 4.  Hint 5.  Highlight 6.  Simula5on 7.  Visual feedback 8.  Follow a process 9.  Marke5ng with purpose ‫פונקציונליות‬ .‫לפני‬ ‫הכל‬!
  19. 19. ‫כוריאוגרפיה‬
  20. 20. ‫כוריאוגרפיה‬ ‫אלסטיות‬ ‫תנועת‬‫קשת‬(ARC) ‫כח‬‫משיכה‬(EASE IN)
  21. 21. ‫כוריאוגרפיה‬ Video credit: Mohammed Bilal, dribbble Overlapping Action Secondary Action
  22. 22. ‫פונקציונליות‬ )‫מטרה‬ ‫ומשמעות‬ ( ‫גרפיקה‬ ‫כוריאוגרפיה‬ )‫תנועה‬ (
  23. 23. ‫כלי‬ ‫אנימציה‬ 2016 Tumult Hype Adobe A/er Effects Adobe Animate CC Principle Mo;on Avocado Origami Adobe Experience Design Form Atomic
  24. 24. 3‫סוגים‬ ‫של‬ ‫כלים‬ Timeline Events Patches
  25. 25. TIMELINE Tumult Hype Adobe A/er Effects Adobe Animate Invision Mo5on
  26. 26. PATCH Avocado (IDEO) Form (Google) Origami (Facebook)
  27. 27. EVENTS Adobe Experience Design (Google)
  28. 28. Tumult Hype Adobe A/er Effects Adobe Animate CC Principle Mo;on Avocado Origami Adobe Experience Design Form Framer JS Atomic Adobe Animate CC Adobe A/er Effects Windows Mac Web
  29. 29. ‫כוריאוגרפיה‬ ‫פונקציונליות‬ Tumult Hype Avocado Origami Form Atomic Adobe Animate CC Adobe A/er Effects Principle ? ‫מורכבות‬ ‫הממשק‬
  30. 30. ‫נסכם‬ … ‫אנימציות‬ ‫הן‬ ‫קודם‬ ‫כל‬ ‫פונקציונליות‬ Ø  ‫כוריאוגרפיה‬ ‫זה‬ ‫שלב‬ ‫נפרד‬, ‫וגם‬ ‫התמחות‬ Ø  ‫יש‬ ‫המון‬ ‫כלי‬ ‫אנימציה‬ .‫ה‬ ‫שילוב בתהליך האיפיון עוד לא מושלם‬ Ø 

×