Material Design на русском. Часть 30 — Об анимации
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.
Анимация помогает UI казаться выразительным и простым в использовании.
Принципы
Информативность
Анимация информирует пользователей, подчеркивая связи между элементами, доступность каких-либо действий и результат этих действий.
Фокусировка
Анимация фокусирует внимание на том, что важно, не отвлекая.
Выразительность
Анимация подчеркивает моменты во флоу пользователя, добавляя характер обычным действиям, помимо этого анимация может отражать стиль бренда.
Иерархия
Анимация может помочь пользователям ориентироваться, указывая на то как связаны элементы между собой.
Анимация показывает иерархию между родительским элементом (экран “Входящие”) и дочерним элементом (выбранное сообщение).
Нажатие на иконку меню «показать еще» отражена в простой анимации.
Анимация указывает на иерархию между вкладками “Собаки” и “Кошки”, равноправными элементами в навигации.
Бренд
Анимация может использоваться для отражения индивидуальности и стиля бренда.
Переходы
Переходы могут быть кастомизированы, чтобы отразить стиль и настроение бренда.
Стиль бренда Basil передается с помощью кастомных переходов, которые содержат параллакс-эффект.
Иконки и иллюстрации
Небольшая и короткая анимация в иконках, иллюстрациях и логотипах продуктов может положительно повлиять на пользовательский опыт.
Анимация иконок может усиливать или дополнять смысл.
Анимированные иконки образовательного приложения Owl ппредназначены чтобы подчеркнуть красочный бренд
Анимированный логотип добавляет стиль, закрепляет бренд, а еще может вызвать небольшой восторг.
Внедрение персонажной анимации может сделать системные ошибки более приятными для глаза.
Анимацию можно использовать, чтобы подчеркнуть ключевые действия пользователя.
На примере показана анимация, которая вознаграждает пользователя за выполнение задачи. Такие вещи можно делать чтобы ключевые действия в продукте у пользователя запоминались.
Отзывчивость и статус
Анимация позволяет своевременно доносить до пользователя текущее состояние системы в зависимости от его действий.
Анимированные элементы, реагируют на ввод с клавиатуры, обеспечивая обратную связь, и чтобы показать было ли действие успешным.
В этом примере анимированные элементы списка — это плейсхолдеоры (заглушки), которые отражают то, что контент загружается.
Анимация карточки показывает состояние выбора и перетаскивания.
Обучение пользователя
Анимация помогает пользователям обучаться и понимать то, как работает приложения или конкретные действия.
Иконка со стрелочками, которая показывает действие «свайпни чтобы открыть», анимирована, чтобы привлечь внимание и призвать к действию.
Анимация перемещения товара в корзину показывает и обучает пользователя тому, где находится корзина
Как следить за обновлениями гайдлайна и переводом?
- Структуированный документ в Notion
- Официальные обновления Google на странице what’s new