Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Интерактивная революция
или что нужно знать об анимации в
интерфейсах, чтобы делать круто
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
Пацаны из эппла подсказывают
…делая большой упор на
анимацию в интерфейсе iOS 7
На какой стадии
анимация сейчас?
Всем понравилось и многие
начали делать
Появилось много
интерфейсной анимации
И ДАЖЕ ОЧЕНЬ МНОГО
Это определенно новый тренд.
который раз делил дизайнеров
на категории:
Дизайнер, который делает
анимацию или хочет ее делать
успешный, красавец,
девочки любят
Дизайнер, который не делает
анимацию и не понимает, зачем
это нужно
Это не моушн-дизайн, а скорее
интерактивный дизайн
Важный момент
Мы продаем не wow эффект,
а интерфейс который помогает
по...
Как выглядит большинство
интерфейсной анимации сегодня?
с категориями разобрались
Вот так
http://youtu.be/ZNFBBWcd9ns
Как понять хорошая
анимация или плохая?
ХОРОШАЯClever use of animations
http://youtu.be/wadNK-IA6Qc
Анимация, как
дополнительный
индикатор
правильности
работы
интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnY...
http://youtu.be/G6YjlBYA-Y8
http://youtu.be/TVFt9nHVtno
Анимация, как способ экономить место
http://youtu.be/hLZD8jBVa_A
http://youtu.be/ibArzNkVKYk
http://youtu.be/qzh46aViaRc
Анимация, как способ добавить реалистичности к
интерфейсу и создать вау-эффект!
http://youtu.be/0kihyo0Tplg
http://youtu.be/KqD1Xsw2kmk
Анимация, как способ фокусировать внимание
пользователя в нужном месте
http://youtu.be/i_sqwlsdYeI
Анимация, как способ скрыть косяки или
отвлечь внимание пользователя
http://youtu.be/J-Oh7raZaic
Анимация, как способ обмануть
пользователя
Сейчас будет длинная
история
Плохаяи очень плохая
http://youtu.be/5u_K8J0L41o
http://youtu.be/8r1_jBmB4n0
http://youtu.be/yCYlwMnraW8
http://youtu.be/q_UK9H9HM0c
Плохая анимация –
это когда:
1. Сложно объяснить ее
необходимость
2. Она мешает пользоваться
интерфейсом и заставляет
поль...
Резюмируем
Плоский дизайн
Анимация
Делаем больше акцента на контент
В симбиозе с плоским дизайном
Скевоморфизм
Плохая анимация
Смещает фокус пользователя с нужных
вещей и оставляет ощущение, что что-то
происходит не так
Хорошая анимация
Способна вывести пользовательский
опыт на совершенно новый уровень
работы с интерфейсом
Презентация ≠ Реальность
Анимация для Dribbble/Behance и реальная
работа интерфейса – это часто две большие
разницы, помни...
Где проектировать
анимацию?
– After Effects
– Flash
– EDGE Animate
– Quartz composer (живые прототипы)
– etc…
Как реализовать анимацию?
Любой язык программирования и
немного математики
Как готовить анимацию для
разработчиков?
Простую
Видео презентация + текстовая
спецификация вида:
Wait: 100ms
Scale: 1.02x...
Как готовить анимацию для
разработчиков?
Статичную сложную
Отдаем в png по ка драм с
прозрачностью
http://youtu.be/Zm2vqDN...
Интерактивную сложную
Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота,
ф - начальная фаза, Т - постоянная времени з...
Где делать простые интерактивные
анимированные прототипы?
www.invisionapp.com *
www.flinto.com
Отдельно про WebFlow
interactions.webflow.com
Чем же мы
занимаемся в Chapps?
http://youtu.be/HbAi7KaC2Rs
http://youtu.be/X9BtefEuzm4
http://youtu.be/SzxQoXMyVu8
http://youtu.be/US17kYBjlLw
http://youtu.be/9CKnpRfEwpU
Предоставьте возможность
отключить анимацию
тошнота, головная боль, сильное
головокружение, боль в глазах,
сонливость
http...
Чем мы занимаемся:
– Разработка мобильных приложений iOS/Android

– Анимация для интерфейсов и приложений

– Проектировани...
Спасибо за внимание!
Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложений и
лендингов дл...
Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать круто
Nächste SlideShare
Wird geladen in …5
×

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

17.717 Aufrufe

Veröffentlicht am

Слайды с моего доклада на Moscow Dribbble Meetup 2014

Veröffentlicht in: Design
  • Dating for everyone is here: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  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

×