Полная версия (с видео-примерами анимаций): http://youtu.be/RAP2HywPPtg?hd=1

1. АНИМАЦИЯ ИНТЕРФЕЙСА
АЛЕКСАНДР КИРОВ, MAIL.RU

2. ЗАЧЕМ ЭТО НУЖНО?
– ПОДДЕРЖКА ИДЕИ ИЛИ КОНЦЕПЦИИ
– ВИЗУАЛИЗАЦИЯ ИЗМЕНЕНИЯ СОСТОЯНИЙ
– АНИМАЦИЯ СОБЫТИЙ
– ОРГАНИЗАЦИЯ ОБРАТНОЙ СВЯЗИ

3. НЕ ИСПОЛЬЗОВАТЬ
– БЕЗДУМНО, ВЕЗДЕ ПОДРЯД
– ЕСЛИ АНИМАЦИЯ ОТВЛЕКАЕТ ОТ РАБОТЫ
– ПРИ СИЛЬНОМ СНИЖЕНИИ БЫСТРОДЕЙСТВИЯ

4. КЛАССИФИКАЦИЯ
6 ОСНОВНЫХ ТИПОВ АНИМАЦИИ В ИНТЕРФЕЙСАХ

5. СМЕНА ПОЛОЖЕНИЯ
– Cоздавает логическую связь между объектами и их
состояниями
– Позволяет указать расположение и структуру информации
– Помогает вовлечь пользователя в исследование
пользовательского интерфейса

6. РАСШИРЕНИЕ ПРОСТРАНСТВА
– Упрощение интерфейса, за счет расширения виртуального
пространства
– Позволяет сфокусироваться на важных элементах за счет
открытия или закрытия визуальных областей
– Оптимально для использования на мобильных устройствах,
экономя свободное место

7. АНИМАЦИЯ ЭЛЕМЕНТОВ
УПРАВЛЕНИЯ
– Элементы управления появляются только когда они
необходимы и пропадают, когда не нужны
– Позволяет пользователю экономить место на экране и
предотвратить визуальную перегруженность
– Необходимо в мобильных и медиа интерфейсах

8. СОЗДАНИЕ АКЦЕНТА
Позволяет привлечь внимание к необходимым объектам,
но не дает потерять общий контекст интерфейса

9. ОБРАТНАЯ СВЯЗЬ
– Позволяет визуально представить процесс выполнения
задачи
– Визуализирует успешный или ошибочный результат
операции

10. ВИЗУАЛЬНЫЕ ПОДСКАЗКИ
– Используются для подсказок о правильном взаимодействии
с элементами интерфейса
– Подготавливают пользователя к результату действия
– Позволяют более точно интерпретировать действие

11. КАК ПОКАЗАТЬ?
– РАСКАДРОВКА АНИМАЦИИ
– ИСПОЛЬЗОВАНИЕ ADOBE FLASH
– ИСПОЛЬЗОВАНИЕ HTML+CSS (ADOBE EDGE)

12. ЧТО ПОЧИТАТЬ?
– APPLE HID / WINDOWS UX GUIDELINES
– ГАЙДЛАЙНЫ ПЛАТФОРМ (FEEDBACK, ANIMATION)
– САЙТ UI-TRANSITIONS.COM

13. СПАСИБО!
АЛЕКСАНДР КИРОВ, MAIL.RU
TWITTER: @ALEXANDERKIROV