Embed Size (px)
DESCRIPTION
Сайт конференції: http://mdday.lviv.ua/ Відео: http://bit.ly/MDDayVids Linkedin: http://bit.ly/LMDDLIN
Citation preview
Интерактивная революцияили что нужно знать об анимациив интерфейсах, чтобы делать круто
Плоский дизайн
Что дальше?
Делаем больше акцента на контент
Скевоморфизм
Пацаны из эппла подсказывают…делая большой упор на анимацию
в интерфейсе iOS 7
На какой стадии анимация сейчас?
Всем понравилось и многие начали делать
Появилось много интерфейсной анимации
И ДАЖЕ ОЧЕНЬ МНОГО
Это определенно новый тренд.который разделил дизайнеров
на категории :
Дизайнер, который делает анимацию или хочет ее делать
успешный , красавец , девочки любят
Дизайнер, который не делает анимацию и не понимает,
зачем это нужно
Это не моушн-дизайн, а скорее интерактивный дизайн
Важный момент
Мы продаем не wow эффект, а интерфейс который помогает
пользователю работать с продуктом
Зачем это нужно?
– Поддержка идеи или концепции – Визуализация изменения состояния
– Анимация событий
Как выглядит большинство интерфейсной анимации сегодня?
с категориями разобрались
Как понять хорошая анимация или плохая?
Анимация, как дополнительный индикатор правильности работы интерфейса
Llumino Calculator for iPhonehttp://youtu.be/IC8mgnYji-k
Анимация, как способ экономить место
http://youtu.be/hLZD8jBVa_A
Позволяет предотвратить визуальную перегруженность
http://youtu.be/qzh46aViaRc
Позволяет сфокусироваться на важных элементах за счет открытия или закрытия визуальных областей
Элементы управления появляются только когда они необходимы и пропадают, когда не нужны
Анимация, как способ добавить реалистичности к интерфейсу и создать вау-эффект!
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
Спасибо за внимание!
Дмитрий Чута
@its_chapps
ITSCHAPPS.COM
dribbble.com/chapps
Дизайн мобильных приложенийи лендингов для стартапов
behance.net/chapps
не последний человек в
