Интерактивная революция
или что нужно знать об анимации в
интерфейсах, чтобы делать круто
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
Пацаны из эппла подсказывают
…делая большой упор на
анимацию в интерфейсе 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
Дизайн мобильных приложений и
лендингов дл...
Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать круто
Upcoming SlideShare
Loading in …5
×

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

16,380
-1

Published on

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

Published in: Design
0 Comments
56 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,380
On Slideshare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
89
Comments
0
Likes
56
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×