Продуманные анимации придают интерфейсу завершенный вид, лоск мастерства. В человеко-ориентированном подходе, при котором пользователь находится в центре всего, анимация создает ощущение, что все идет как надо, как только пользователи ее видят. Как дизайнеру, вам очень важно понимать невидимость анимаций. Вам нужно создать что-то, что взаимодействует с пользователем на человеческом языке, и незаметно справляется со своей задачей.
Преимущества анимации
Анимация в мобильном приложении преследует ясную, логичную цель. Она сокращает нагрузку на мозг пользователя, не дает пользователю пропустить какие-то важные изменения, улучшает эффективность пространственных отношений элементов интерфейса. Но есть еще одна вещь. Анимация делает пользовательский интерфейс живым. В идеале, анимация внутри приложения должна:
- Давать четкий отклик в ответ на действия пользователя
- Демонстрировать статус системы пользователю
- Направлять и учить пользователя, как нужно взаимодействовать с интерфейсом.
Визуальный отклик
Визуальный отклик невероятно важен в дизайне пользовательских интерфейсов. В реальной жизни кнопки и другие элементы управления отвечают на наши действия, именно этого мы от них ожидаем. И взаимодействие с откликом побуждает пользователя к более глубокому освоению приложения через создание логических реакций на действия пользователя. После действия пользователя (события ввода) система всегда должна предоставить немедленное визуальное подтверждение.
Кнопки и регуляторы
Элементы пользовательского интерфейса вроде кнопок и регуляторов должны казаться осязаемыми, даже если сверху покрыты слоем стекла. Чтобы сохранить ощущение реальности, визуальные подсказки и признаки движения распознают ввод и мгновенно анимируют действие так, что оно кажется прямой манипуляцией.
Выводы
- Визуальный отклик работает, потому что он обращается к естественному желанию пользователя к осведомленности. Очень приятно кликать в приложении, и всегда чувствовать, что вы знаете, что происходит.
- Вносите ясность в действия пользователя через визуальные реакции на его ввод. Делайте радиальной визуальную реакцию на касание пользователя.
Статус системы
Пользователь хочет все контролировать и верить, что приложение ведет себя так, как от него ожидают. Можно даже сказать, что пользователи не любят сюрпризы. Анимация в реальном времени информирует статус процесса в приложении, помогая пользователю быстро разобраться, что происходит на данный момент.
Вывод
Обеспечьте мониторинг статуса системы в реальном времени. Реализуйте для пользователя возможность быстро понимать текущий статус и отвечать на вопрос “Где я?”, пока он находится в приложении.
Переходы со смыслом
Вы должны использовать анимацию для плавного переноса пользователей между контекстами навигации, пояснять изменения в организации элементов на экране и укреплять иерархию элементов. Интерактивный дизайн может эффективно направлять внимания пользователя, совмещая приятное с полезным.
Визуально соединяйте переходы
Вам следует создавать визуальные соединения между состояниями перехода посредством цветов и устойчивых элементов. Переход между двумя визуальными состояниями должно быть четким, плавным и легким.
Иерархическая синхронность
Анимация поддерживает иерархию информации, обозначая, какой контент наиболее важен, с помощью создания _ориентира для зрения пользователя.
Выводы
- Используйте визуальные связи. Пусть элементы направления сплоченно бродят по переходу. Всегда оценивайте, насколько передвижение определенного элемента способствует ясности перехода.
- Направляйте внимание пользователя. Все движущиеся элементы должны четко указывать, куда смотреть пользователю. Направляйте внимание пользователя с помощью координированных, упорядоченных движений.
Приятные детали
Самое базовое применение анимации - в переходах, но приложение может по-настоящему доставить удовольствие пользователю, когда анимация используется за рамками стандартных действий. Она может существовать во всех компонентах приложения, во всех масштабах, начиная с детализированных иконок, и заканчивая ключевыми переходами и действиями.
Анимация ради анимации
Анимация ради анимации - неудачный вариант (почти всегда). Когда анимация не несет никакой функциональной нагрузки, обычно она смотрится странно и очень раздражает. Также помните о длительности - будет ли раздражать анимация, проигрывая 100-й раз, или по-прежнему будет казаться ненавязчивой? Источник: Rachel Nabors
Вывод
Анимируйте с определенной целью. Вместо анимации сугубо ради удовольствия, нужно фокусироваться на практической стороне вопроса - чем анимация может быть полезна пользователю.
Заключение
Создавайте дизайн с заботой о пользователе. Внимание к каждой детали - это ключ к вашему успеху в реализации простоты взаимодействий между человеком и компьютером. Продуманные анимации дизайна, к тому же, позволяют им общаться намного эффективнее. Чем проще в использовании ваш продукт, тем вероятнее, что им будут пользоваться. Спасибо, что были с нами!
Перевод статьи babich.biz
Топ коментарі (0)