lviv mdday 2014. Дмитро Чута “Інтерактивна революція чи що...
DESCRIPTION
Сайт конференції: http://mdday.lviv.ua/ Відео: http://bit.ly/MDDayVids Linkedin: http://bit.ly/LMDDLINTRANSCRIPT
![Page 1: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/1.jpg)
Интерактивная революцияили что нужно знать об анимациив интерфейсах, чтобы делать круто
![Page 2: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/2.jpg)
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
![Page 3: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/3.jpg)
Пацаны из эппла подсказывают…делая большой упор на анимацию
в интерфейсе iOS 7
![Page 4: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/4.jpg)
На какой стадии анимация сейчас?
![Page 5: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/5.jpg)
Всем понравилось и многие начали делать
![Page 6: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/6.jpg)
Появилось много интерфейсной анимации
![Page 7: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/7.jpg)
И ДАЖЕ ОЧЕНЬ МНОГО
![Page 8: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/8.jpg)
Это определенно новый тренд.который разделил дизайнеров
на категории :
![Page 9: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/9.jpg)
Дизайнер, который делает анимацию или хочет ее делать
успешный , красавец , девочки любят
![Page 10: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/10.jpg)
Дизайнер, который не делает анимацию и не понимает,
зачем это нужно
![Page 11: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/11.jpg)
Это не моушн-дизайн, а скорее интерактивный дизайн
Важный момент
Мы продаем не wow эффект, а интерфейс который помогает
пользователю работать с продуктом
![Page 12: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/12.jpg)
Зачем это нужно?
– Поддержка идеи или концепции – Визуализация изменения состояния
– Анимация событий
![Page 13: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/13.jpg)
Как выглядит большинство интерфейсной анимации сегодня?
с категориями разобрались
![Page 15: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/15.jpg)
Как понять хорошая анимация или плохая?
![Page 17: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/17.jpg)
Анимация, как дополнительный индикатор правильности работы интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k
![Page 20: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/20.jpg)
Анимация, как способ экономить место
http://youtu.be/hLZD8jBVa_A
Позволяет предотвратить визуальную перегруженность
![Page 22: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/22.jpg)
http://youtu.be/qzh46aViaRc
Позволяет сфокусироваться на важных элементах за счет открытия или закрытия визуальных областей
![Page 23: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/23.jpg)
Элементы управления появляются только когда они необходимы и пропадают, когда не нужны
![Page 24: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/24.jpg)
Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект!
http://youtu.be/0kihyo0Tplg
![Page 26: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/26.jpg)
Анимация, как способ фокусировать внимание пользователя в нужном месте
http://youtu.be/i_sqwlsdYeI
![Page 27: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/27.jpg)
Анимация, как способ скрыть косяки или отвлечь внимание пользователя
![Page 28: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/28.jpg)
![Page 30: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/30.jpg)
Анимация, как способ обмануть пользователя
Сейчас будет длинная история
![Page 35: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/35.jpg)
Плохая анимация – это когда:
1. Сложно объяснить ее необходимость
2. Она мешает пользоваться интерфейсом и заставляет пользователя ждать там , где этого не нужно
3. Стоимость ее разработки высока , а причин для ее использования нет
![Page 36: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/36.jpg)
Резюмируем
![Page 37: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/37.jpg)
Плоский дизайн
Анимация
Делаем больше акцента на контент
В симбиозе с плоским дизайном
Скевоморфизм
![Page 38: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/38.jpg)
Плохая анимацияСмещает фокус пользователя
с нужных вещей и оставляет ощущение , что что -то происходит не так
![Page 39: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/39.jpg)
Хорошая анимацияСпособна вывести пользовательский опыт на совершенно новый уровень
работы с интерфейсом
![Page 40: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/40.jpg)
Презентация ≠ РеальностьАнимация для D r ibbb le /Behance и реальная работа интерфейса – это часто две большие
разницы , помните об этом
![Page 41: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/41.jpg)
Где проектировать анимацию?
– A f te r E f fec ts– F lash
– EDGE An imate – Quar t z composer (живые прототипы )
– e tc…
![Page 42: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/42.jpg)
Как реализовать анимацию?Любой язык программирования
и немного математики
![Page 43: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/43.jpg)
Как готовить анимацию для разработчиков?
Простую
Видео презентация + текстовая спецификация вида :
Wa i t : 100ms Sca le : 1 .02x
Opac i t y : 60%
![Page 44: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/44.jpg)
Как готовить анимацию для разработчиков?
Статичную сложную
Отдаем в png прозрачностью
http://youtu.be/Zm2vqDNqkuc
![Page 45: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/45.jpg)
Интерактивную сложную
Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота, ф - начальная фаза, Т - постоянная времени затухания
Отдаем простыми формулами смягчения
Как готовить анимацию для разработчиков?
http://youtu.be/ghhDSCYL_rw
![Page 46: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/46.jpg)
Где делать простые интерактивные анимированные прототипы?
www. inv i s ionapp .com * www. f l i n to .com
![Page 53: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/53.jpg)
Предоставьте возможность отключить анимацию
тошнота , головная боль , сильное головокружение , боль в глазах , сонливость
http://youtu.be/5st0ihI3JTI
![Page 54: Lviv MDDay 2014. Дмитро Чута “Інтерактивна революція чи що потрібно знати про анімацію в інтерфейсах, щоб](https://reader033.vdocuments.pub/reader033/viewer/2022042715/5585e747d8b42a87608b5263/html5/thumbnails/54.jpg)
Спасибо за внимание!
Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложенийи лендингов для стартапов
behance.net/chapps
не последний человек в