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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

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

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

Плоский дизайн

Что дальше?

Делаем больше акцента на контент

Скевоморфизм

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

Пацаны из эппла подсказывают…делая большой упор на

анимацию в интерфейсе iOS 7

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

На какой стадии анимация сейчас?

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

Всем понравилось и многие начали делать

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

Появилось много интерфейсной анимации

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

И ДАЖЕ ОЧЕНЬ МНОГО

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

Это определенно новый тренд.который разделил дизайнеров

на категории :

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

Дизайнер, который делает анимацию или хочет ее делать

успешный , красавец , девочки любят

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

Дизайнер, который не делает анимацию и не понимает, зачем

это нужно

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

Это не моушн-дизайн, а скорее интерактивный дизайн

Важный момент

Мы продаем не wow эффект, а интерфейс который помогает

пользователю работать с продуктом

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

Как выглядит большинство интерфейсной анимации сегодня?

с категориями разобрались

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

Вот так

http://youtu.be/ZNFBBWcd9ns

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

Как понять хорошая анимация или плохая?

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

ХОРОШАЯCleve r use o f an imat ions

http://youtu.be/wadNK-IA6Qc

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

Анимация, как дополнительный индикатор правильности работы интерфейса

Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k

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

http://youtu.be/G6YjlBYA-Y8

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

http://youtu.be/TVFt9nHVtno

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

Анимация, как способ экономить местоhttp://youtu.be/hLZD8jBVa_A

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

http://youtu.be/ibArzNkVKYk

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

http://youtu.be/qzh46aViaRc

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

Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект!

http://youtu.be/0kihyo0Tplg

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

http://youtu.be/KqD1Xsw2kmk

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

Анимация, как способ фокусировать внимание пользователя в нужном месте

http://youtu.be/i_sqwlsdYeI

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

Анимация, как способ скрыть косяки или отвлечь внимание пользователя

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

http://youtu.be/J-Oh7raZaic

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

Анимация, как способ обмануть пользователя

Сейчас будет длинная история

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

Плохаяи очень плохая

http://youtu.be/5u_K8J0L41o

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

http://youtu.be/8r1_jBmB4n0

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

http://youtu.be/yCYlwMnraW8

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

http://youtu.be/q_UK9H9HM0c

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

Плохая анимация – это когда:

1. Сложно объяснить ее необходимость

2. Она мешает пользоваться интерфейсом и заставляет пользователя ждать там , где этого не нужно

3. Стоимость ее разработки высока , а причин для ее использования нет

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

Резюмируем

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

Плоский дизайн

Анимация

Делаем больше акцента на контент

В симбиозе с плоским дизайном

Скевоморфизм

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

Плохая анимацияСмещает фокус пользователя с нужных вещей и оставляет ощущение , что что -то

происходит не так

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

Хорошая анимацияСпособна вывести пользовательский опыт на совершенно новый уровень

работы с интерфейсом

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

Презентация ≠ РеальностьАнимация для D r ibbb le /Behance и реальная работа интерфейса – это часто две большие

разницы , помните об этом

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

Где проектировать анимацию?

– A f te r E f fec ts– F lash

– EDGE An imate – Quar t z composer (живые прототипы )

– e tc…

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

Как реализовать анимацию?Любой язык программирования и

немного математики

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

Как готовить анимацию для разработчиков?

Простую

Видео презентация + текстовая спецификация вида :

Wa i t : 100ms Sca le : 1 .02x

Opac i t y : 60%

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

Как готовить анимацию для разработчиков?

Статичную сложную

Отдаем в png по кадрам с прозрачностью

http://youtu.be/Zm2vqDNqkuc

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

Интерактивную сложную

Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота, ф - начальная фаза, Т - постоянная времени затухания

Отдаем простыми формулами смягчения .

Как готовить анимацию для разработчиков?

http://youtu.be/ghhDSCYL_rw

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

Где делать простые интерактивные анимированные прототипы?

www. inv i s ionapp .com * www. f l i n to .com

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

Отдельно про WebFlow

i n te rac t ions .webf low.com

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

Чем же мы занимаемся в Chapps?

http://youtu.be/HbAi7KaC2Rs

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

http://youtu.be/X9BtefEuzm4

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

http://youtu.be/SzxQoXMyVu8

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

http://youtu.be/US17kYBjlLw

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

http://youtu.be/9CKnpRfEwpU

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

Предоставьте возможность отключить анимацию

тошнота , головная боль , сильное головокружение , боль в глазах ,

сонливостьhttp://youtu.be/5st0ihI3JTI

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

Чем мы занимаемся :

– Разработка мобильных приложений iOS/Andro id

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

– Проектирование приложений и лендингов

– Создание промо -роликов , моушн -дизайн

– Дизайн интерфейсов для Mac

– Каллиграфические логотипы и иконки

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

Спасибо за внимание!Дмитрий Чута

@its_chapps

ITSCHAPPS.COM

dribbble.com/chapps

Дизайн мобильных приложений и лендингов для стартапов

facebook.com/dmitry.chuta

behance.net/chapps