Embed Size (px)
DESCRIPTION
Слайды с моего доклада на Moscow Dribbble Meetup 2014
Citation preview
Интерактивная революцияили что нужно знать об анимации в интерфейсах, чтобы делать круто
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
Пацаны из эппла подсказывают…делая большой упор на
анимацию в интерфейсе iOS 7
На какой стадии анимация сейчас?
Всем понравилось и многие начали делать
Появилось много интерфейсной анимации
И ДАЖЕ ОЧЕНЬ МНОГО
Это определенно новый тренд.который разделил дизайнеров
на категории :
Дизайнер, который делает анимацию или хочет ее делать
успешный , красавец , девочки любят
Дизайнер, который не делает анимацию и не понимает, зачем
это нужно
Это не моушн-дизайн, а скорее интерактивный дизайн
Важный момент
Мы продаем не wow эффект, а интерфейс который помогает
пользователю работать с продуктом
Как выглядит большинство интерфейсной анимации сегодня?
с категориями разобрались
Как понять хорошая анимация или плохая?
Анимация, как дополнительный индикатор правильности работы интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k
Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект!
http://youtu.be/0kihyo0Tplg
Анимация, как способ фокусировать внимание пользователя в нужном месте
http://youtu.be/i_sqwlsdYeI
Анимация, как способ скрыть косяки или отвлечь внимание пользователя
Анимация, как способ обмануть пользователя
Сейчас будет длинная история
Плохая анимация – это когда:
1. Сложно объяснить ее необходимость
2. Она мешает пользоваться интерфейсом и заставляет пользователя ждать там , где этого не нужно
3. Стоимость ее разработки высока , а причин для ее использования нет
Резюмируем
Плоский дизайн
Анимация
Делаем больше акцента на контент
В симбиозе с плоским дизайном
Скевоморфизм
Плохая анимацияСмещает фокус пользователя с нужных вещей и оставляет ощущение , что что -то
происходит не так
Хорошая анимацияСпособна вывести пользовательский опыт на совершенно новый уровень
работы с интерфейсом
Презентация ≠ РеальностьАнимация для D r ibbb le /Behance и реальная работа интерфейса – это часто две большие
разницы , помните об этом
Где проектировать анимацию?
– A f te r E f fec ts– F lash
– EDGE An imate – Quar t z composer (живые прототипы )
– e tc…
Как реализовать анимацию?Любой язык программирования и
немного математики
Как готовить анимацию для разработчиков?
Простую
Видео презентация + текстовая спецификация вида :
Wa i t : 100ms Sca le : 1 .02x
Opac i t y : 60%
Как готовить анимацию для разработчиков?
Статичную сложную
Отдаем в png по кадрам с прозрачностью
http://youtu.be/Zm2vqDNqkuc
Интерактивную сложную
Например: A*sin (wt+ф) *exp(-t/T), w - угловая частота, ф - начальная фаза, Т - постоянная времени затухания
Отдаем простыми формулами смягчения .
Как готовить анимацию для разработчиков?
http://youtu.be/ghhDSCYL_rw
Где делать простые интерактивные анимированные прототипы?
www. inv i s ionapp .com * www. f l i n to .com
Предоставьте возможность отключить анимацию
тошнота , головная боль , сильное головокружение , боль в глазах ,
сонливостьhttp://youtu.be/5st0ihI3JTI
Чем мы занимаемся :
– Разработка мобильных приложений iOS/Andro id
– Анимация для интерфейсов и приложений
– Проектирование приложений и лендингов
– Создание промо -роликов , моушн -дизайн
– Дизайн интерфейсов для Mac
– Каллиграфические логотипы и иконки
Спасибо за внимание!Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложений и лендингов для стартапов
facebook.com/dmitry.chuta
behance.net/chapps
