Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать круто

8,523 views

Published on

17-18 мая, Одесса
Конференция по дизайну Design Lab

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,523
On SlideShare
0
From Embeds
0
Number of Embeds
7,774
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать круто

  1. 1. Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать круто
  2. 2. Плоский дизайн Что дальше? Делаем больше акцента на контент Скевоморфизм
  3. 3. Пацаны из эппла подсказывают …делая большой упор на анимацию в интерфейсе iOS 7
  4. 4. На какой стадии анимация сейчас?
  5. 5. Всем понравилось и многие начали делать
  6. 6. Появилось много интерфейсной анимации
  7. 7. И ДАЖЕ ОЧЕНЬ МНОГО
  8. 8. Это определенно новый тренд. который раз делил дизайнеров на категории:
  9. 9. Дизайнер, который делает анимацию или хочет ее делать успешный, красавец, девочки любят
  10. 10. Дизайнер, который не делает анимацию и не понимает, зачем это нужно
  11. 11. Это не моушн-дизайн, а скорее интерактивный дизайн Важный момент Мы продаем не wow эффект, а интерфейс который помогает пользователю работать с продуктом
  12. 12. Как выглядит большинство интерфейсной анимации сегодня? с категориями разобрались
  13. 13. Вот так http://youtu.be/ZNFBBWcd9ns
  14. 14. Как понять хорошая анимация или плохая?
  15. 15. ХОРОШАЯClever use of animations http://youtu.be/wadNK-IA6Qc
  16. 16. Анимация, как дополнительный индикатор правильности работы интерфейса Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k
  17. 17. http://youtu.be/G6YjlBYA-Y8
  18. 18. http://youtu.be/TVFt9nHVtno
  19. 19. Анимация, как способ экономить место http://youtu.be/hLZD8jBVa_A
  20. 20. http://youtu.be/ibArzNkVKYk
  21. 21. http://youtu.be/qzh46aViaRc
  22. 22. Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект! http://youtu.be/0kihyo0Tplg
  23. 23. http://youtu.be/KqD1Xsw2kmk
  24. 24. Анимация, как способ фокусировать внимание пользователя в нужном месте http://youtu.be/i_sqwlsdYeI
  25. 25. Анимация, как способ скрыть косяки или отвлечь внимание пользователя
  26. 26. http://youtu.be/J-Oh7raZaic
  27. 27. Анимация, как способ обмануть пользователя Сейчас будет длинная история
  28. 28. Плохаяи очень плохая http://youtu.be/5u_K8J0L41o
  29. 29. http://youtu.be/8r1_jBmB4n0
  30. 30. http://youtu.be/yCYlwMnraW8
  31. 31. http://youtu.be/q_UK9H9HM0c
  32. 32. Плохая анимация – это когда: 1. Сложно объяснить ее необходимость 2. Она мешает пользоваться интерфейсом и заставляет пользователя ждать там, где этого не нужно 3. Стоимость ее разработки высока, а причин для ее использования нет
  33. 33. Резюмируем
  34. 34. Плоский дизайн Анимация Делаем больше акцента на контент В симбиозе с плоским дизайном Скевоморфизм
  35. 35. Плохая анимация Смещает фокус пользователя с нужных вещей и оставляет ощущение, что что-то происходит не так
  36. 36. Хорошая анимация Способна вывести пользовательский опыт на совершенно новый уровень работы с интерфейсом
  37. 37. Презентация ≠ Реальность Анимация для Dribbble/Behance и реальная работа интерфейса – это часто две большие разницы, помните об этом
  38. 38. Где проектировать анимацию? – After Effects – Flash – EDGE Animate – Quartz composer (живые прототипы) – etc…
  39. 39. Как реализовать анимацию? Любой язык программирования и немного математики
  40. 40. Как готовить анимацию для разработчиков? Простую Видео презентация + текстовая спецификация вида: Wait: 100ms Scale: 1.02x Opacity: 60%
  41. 41. Как готовить анимацию для разработчиков? Статичную сложную Отдаем в png по ка драм с прозрачностью http://youtu.be/Zm2vqDNqkuc
  42. 42. Интерактивную сложную Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота, ф - начальная фаза, Т - постоянная времени затухания Отдаем простыми формулами смягчения. Как готовить анимацию для разработчиков? http://youtu.be/ghhDSCYL_rw
  43. 43. Где делать простые интерактивные анимированные прототипы? www.invisionapp.com * www.flinto.com
  44. 44. Отдельно про WebFlow interactions.webflow.com
  45. 45. Чем же мы занимаемся в Chapps? http://youtu.be/HbAi7KaC2Rs
  46. 46. http://youtu.be/X9BtefEuzm4
  47. 47. http://youtu.be/SzxQoXMyVu8
  48. 48. http://youtu.be/US17kYBjlLw
  49. 49. http://youtu.be/9CKnpRfEwpU
  50. 50. Предоставьте возможность отключить анимацию тошнота, головная боль, сильное головокружение, боль в глазах, сонливость http://youtu.be/5st0ihI3JTI
  51. 51. Чем мы занимаемся: – Разработка мобильных приложений iOS/Android – Анимация для интерфейсов и приложений – Проектирование приложений и лендингов – Создание промо-роликов, моушн-дизайн – Дизайн интерфейсов для Mac – Каллиграфические логотипы и иконки
  52. 52. Спасибо за внимание! Дмитрий Чута @its_chapps ITSCHAPPS.COM dribbble.com/chapps Дизайн мобильных приложений и лендингов для стартапов facebook.com/dmitry.chuta behance.net/chapps

×