Summer Intensive Mobile App Design in British Higher School of Art and Design (Moscow)

1. MADMADMADMADMADMADMADMA
MADMADMADMADMADMADMADMA
MADMADMADMADMADMADMADMA
АНИМАЦИЯ
ОЛЬГА САРТАКОВА / VOLTMOBI

2. BHSAD 2017, MAD Intensive
Ольга Сартакова
— Старший UX / UI дизайнер и аналитик в студии мобильной
разработки VoltMobi
— Окончила «Дизайн мобильных приложений» в Британке

3. Задачи дизайна
Aarron Walter
VP of Design Educa[on at InVision. Founded UX
prac[ce at MailChimp.
Быть
функциональным
Быть надежным
Быть удобным
Приносить
удовольствие

4. BHSAD 2017, MAD Intensive
Задачи интерфейсной анимации
— Помочь выполнить задачу
— Объяснить, что происходит
— Помочь сориентироваться
— Порадовать

5. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой

6. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
Длительность
Движение небольших объектов на малые дистанции —150-200 мс.
Движение больших объектов на большие расстояния — 300-400 мс.

7. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
Ускорение
У объектов должна быть инерция: в начале движения он должен
постепенно ускоряться, в конце — постепенно замедляться.

8. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
Траектория
Движение по параболе, словно под действием гравитации

9. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
3. Зависимой
от окружения
Сходное поведение сходных
объектов
Взаимодействие
с окружением
Карточка увеличивается
и «расталкивает» соседние

10. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
3. Зависимой
от окружения
4. Продуманной
Взаимосвязь элементов
Ведет пользователя
от одного шага к другому
Состояние элементов
Может показать, доступно
действие или нет

11. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
Взаимосвязь элементов
Ведет пользователя
от одного шага к другому
Состояние элементов
Может показать, доступно
действие или нет
Акцент
Помогает сфокусировать
внимание на том, что важно
здесь и сейчас

12. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
3. Зависимой
от окружения
4. Продуманной
5. Ясной и чистой

13. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
3. Зависимой
от окружения
4. Продуманной
5. Ясной и чистой

14. BHSAD 2017, MAD Intensive
Какой должна быть интерфейсная анимация?
1. Отзывчивой
2. Естественной
3. Зависимой
от окружения
4. Продуманной
5. Ясной и чистой
6. Обеспечивать
легкость
и непрерывность
восприятия

15. BHSAD 2017, MAD Intensive
Стандартные переходы между экранами
1. Fade In
2. Push Lez / Right
3. Slide Ud / Down
4. Flip Lez / Right

16. BHSAD 2017, MAD Intensive
Когда и что использовать?
Зависит от:
— Иерархии экранов
— Положения элемента управления, который вызвал переход

17. BHSAD 2017, MAD Intensive
Где быстро посмотреть?
h€ps://www.flinto.com/lite h€ps://www.invisionapp.com/
h€ps://marvelapp.com/

18. BHSAD 2017, MAD Intensive
Нестандартная анимация
Ограничена только вашей
фантазией и здравым смыслом

19. BHSAD 2017, MAD Intensive
Где проектировать?

20. ЖЕРТВЫ ПРИЛОЖЕНИЙ.
GALTSEV SERGEY
MADMADMADMADMADMADMADMA
MADMADMADMADMADMADMADMA
MADMADMADMADMADMADMADMA
СПАСИБО ЗА ВНИМАНИЕ!
BRITISHDESIGN.RU/COURSES/MOBILE-DESIGN
FACEBOOK.COM/GROUPS/BHSAD.MAD
BEHANCE.NET/BHSAD-MAD