Дмитрий Чута - Интерактивная революция или что нужно...
DESCRIPTION
17-18 мая, Одесса Конференция по дизайну Design LabTRANSCRIPT
![Page 1: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/1.jpg)
Интерактивная революцияили что нужно знать об анимации в интерфейсах, чтобы делать круто
![Page 2: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/2.jpg)
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
![Page 3: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/3.jpg)
Пацаны из эппла подсказывают…делая большой упор на
анимацию в интерфейсе iOS 7
![Page 4: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/4.jpg)
На какой стадии анимация сейчас?
![Page 5: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/5.jpg)
Всем понравилось и многие начали делать
![Page 6: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/6.jpg)
Появилось много интерфейсной анимации
![Page 7: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/7.jpg)
И ДАЖЕ ОЧЕНЬ МНОГО
![Page 8: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/8.jpg)
Это определенно новый тренд.который разделил дизайнеров
на категории :
![Page 9: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/9.jpg)
Дизайнер, который делает анимацию или хочет ее делать
успешный , красавец , девочки любят
![Page 10: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/10.jpg)
Дизайнер, который не делает анимацию и не понимает, зачем
это нужно
![Page 11: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/11.jpg)
Это не моушн-дизайн, а скорее интерактивный дизайн
Важный момент
Мы продаем не wow эффект, а интерфейс который помогает
пользователю работать с продуктом
![Page 12: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/12.jpg)
Как выглядит большинство интерфейсной анимации сегодня?
с категориями разобрались
![Page 14: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/14.jpg)
Как понять хорошая анимация или плохая?
![Page 16: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/16.jpg)
Анимация, как дополнительный индикатор правильности работы интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k
![Page 22: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/22.jpg)
Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект!
http://youtu.be/0kihyo0Tplg
![Page 24: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/24.jpg)
Анимация, как способ фокусировать внимание пользователя в нужном месте
http://youtu.be/i_sqwlsdYeI
![Page 25: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/25.jpg)
Анимация, как способ скрыть косяки или отвлечь внимание пользователя
![Page 26: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/26.jpg)
![Page 28: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/28.jpg)
Анимация, как способ обмануть пользователя
Сейчас будет длинная история
![Page 33: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/33.jpg)
Плохая анимация – это когда:
1. Сложно объяснить ее необходимость
2. Она мешает пользоваться интерфейсом и заставляет пользователя ждать там , где этого не нужно
3. Стоимость ее разработки высока , а причин для ее использования нет
![Page 34: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/34.jpg)
Резюмируем
![Page 35: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/35.jpg)
Плоский дизайн
Анимация
Делаем больше акцента на контент
В симбиозе с плоским дизайном
Скевоморфизм
![Page 36: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/36.jpg)
Плохая анимацияСмещает фокус пользователя с нужных вещей и оставляет ощущение , что что -то
происходит не так
![Page 37: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/37.jpg)
Хорошая анимацияСпособна вывести пользовательский опыт на совершенно новый уровень
работы с интерфейсом
![Page 38: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/38.jpg)
Презентация ≠ РеальностьАнимация для D r ibbb le /Behance и реальная работа интерфейса – это часто две большие
разницы , помните об этом
![Page 39: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/39.jpg)
Где проектировать анимацию?
– A f te r E f fec ts– F lash
– EDGE An imate – Quar t z composer (живые прототипы )
– e tc…
![Page 40: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/40.jpg)
Как реализовать анимацию?Любой язык программирования и
немного математики
![Page 41: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/41.jpg)
Как готовить анимацию для разработчиков?
Простую
Видео презентация + текстовая спецификация вида :
Wa i t : 100ms Sca le : 1 .02x
Opac i t y : 60%
![Page 42: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/42.jpg)
Как готовить анимацию для разработчиков?
Статичную сложную
Отдаем в png по кадрам с прозрачностью
http://youtu.be/Zm2vqDNqkuc
![Page 43: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/43.jpg)
Интерактивную сложную
Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота, ф - начальная фаза, Т - постоянная времени затухания
Отдаем простыми формулами смягчения .
Как готовить анимацию для разработчиков?
http://youtu.be/ghhDSCYL_rw
![Page 44: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/44.jpg)
Где делать простые интерактивные анимированные прототипы?
www. inv i s ionapp .com * www. f l i n to .com
![Page 51: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/51.jpg)
Предоставьте возможность отключить анимацию
тошнота , головная боль , сильное головокружение , боль в глазах ,
сонливостьhttp://youtu.be/5st0ihI3JTI
![Page 52: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/52.jpg)
Чем мы занимаемся :
– Разработка мобильных приложений iOS/Andro id
– Анимация для интерфейсов и приложений
– Проектирование приложений и лендингов
– Создание промо -роликов , моушн -дизайн
– Дизайн интерфейсов для Mac
– Каллиграфические логотипы и иконки
![Page 53: Дмитрий Чута - Интерактивная революция или что нужно знать об анимации в интерфейсах, чтобы делать](https://reader031.vdocuments.site/reader031/viewer/2022020217/5557d503d8b42af2178b4d32/html5/thumbnails/53.jpg)
Спасибо за внимание!Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложений и лендингов для стартапов
facebook.com/dmitry.chuta
behance.net/chapps