Анимация в мобильном дизайне

Автор: Nick Babich    Источник: uxplanet.org
22.04.2016
874
0
img

Хорошо продуманная анимация дает ощущение отточенности. В подходе, ориентированном на пользователя, когда пользователь – это основной объект, анимация фактически создает ощущение удовольствия, как только пользователь ее замечает.

Для дизайнера понимание невидимости анимации так же важно, как и ее дизайн. Нужно создать что-то, что ощущается «человечным» и выполняет задачу.

Преимущества анимации

Анимация на мобильных устройствах имеет четкие и понятные цели. Упрощает познавательную нагрузку, не допускает моментальных изменений, лучше запоминается в пространственном отношении. Но есть еще одно. Анимация оживляет пользовательский интерфейс.

В идеале, анимация должна:

  • четко реагировать в ответ на действия пользователя;
  • показывать пользователю статус системы;
  • направлять и учить пользователя взаимодействовать с интерфейсом.

Визуальный отклик

Визуальный отклик крайне важен в дизайне интерфейса. В реальной жизни кнопки и переключатели реагируют на наши действия, это то, чего мы ожидаем от предметов. Визуальный отклик, создавая логические реакции на действия пользователя, способствует более глубокому изучению приложения. Система должна обеспечивать мгновенный отклик на событие ввода.

Кнопки и переключатели

Элементы интерфейса, такие как кнопки и переключатели, должны выглядеть реальными, даже если они за слоем стекла. Чтобы преодолеть это препятствие, нужно незамедлительно анимировать ввод таким образом, чтоб он выглядел и ощущался как непосредственная манипуляция.

Выводы

  • Визуальные отклики работают, потому что обращаются к естественному желанию пользователя к подтверждению своих действий. Это отлично, кликать в приложении и всегда понимать, что происходит.
  • Добавьте ясности вводу данных с помощью визуальных реакций, сделайте их радиальными.

Системный статус

Пользователи хотят все контролировать и надеются, что приложение будет вести себя именно так, как они ожидают. Можно даже сказать, что пользователи не любят сюрпризов. Анимация выдает сообщения в реальном времени о статусе всех процессов, позволяя пользователю быстро понять, что происходит.

Самая известная анимация этой группы – «потянуть вниз, чтобы обновить», которая инициализирует процесс обновления контента на мобильном устройстве.

Также анимация очень полезна для адаптации пользователя. Адаптация требует безупречного дизайна, а плавные переходы и хорошая анимация имеют огромное влияние на то, как пользователь впервые будет взаимодействовать с приложением.

Выводы

Обеспечьте мониторинг системы в реальном времени. Сделайте возможным для пользователя быстро понять текущий статус и ответить на вопрос «Где я?» внутри приложения.

Осмысленные переходы

Используйте анимацию для плавных переходов между навигационными контекстами, объясняйте изменения в расположении элементов на экране и укрепляйте их иерархию. Анимационный дизайн может эффективно вести внимание пользователя по нужному вам пути.

Визуальное объединение переходов

Создайте визуальную связь между переходными состояниями элементов. Переход должен быть четким, плавным и легким.

Иерархия

Анимация помогает иерархии информации, указывая какой контент самый важный, создавая путь для глаз.

Избегайте бессвязных переходов как в примере ниже.

Переход элементов должен протекать плавно как в примере ниже.

Последовательная анимация

Переход объектов должен быть скоординированным. Избегайте бессистемного движения как в примере ниже, это очень отвлекает.

Выводы

  • Используйте визуальные связи. На протяжении перехода элементы должны двигаться слажено. Рассмотрите, как движение каждого элемента вносит ясность в переход.
  • Направляйте внимание пользователя. Все двигающиеся элементы должны четко дать понять, куда смотреть. Направляйте внимание пользователя с помощью скоординированных, упорядоченных движений.

Приятные детали

Основной способ использования анимации – это переходы, но можно действительно порадовать пользователя, если анимация будет использоваться для нестандартных действий. Она может быть внутри любых компонентов приложения, от маленьких иконок до основных переходов и действий.

Забава

Анимация побуждает пользователя к взаимодействию, наполняет пользовательский опыт чувствами и эмоциями.

Анимация ради анимации

Анимация ради анимации – это (почти всегда) плохой дизайн. Если у анимации нет функциональной цели, то обычно она выглядит неуклюже и раздражающе. Так же не забывайте о долгом использовании, не будет ли анимация раздражать при использовании в сотый раз, или же она понятна и ненавязчива?

Выводы

Анимируйте с целью. Вместо того, чтобы анимировать только ради развлечения, сфокусируйтесь на практичных вещах, которые анимация делает для пользователя.

Заключение

Создавайте дизайн осторожно. Внимание к деталям – это ключ к успеху в создании легкого взаимодействия между человеком и компьютером. Продуманный анимационный дизайн может помочь нам взаимодействовать значительно эффективнее. Чем легче ваш продукт в использовании, тем вероятнее, что ним будут пользоваться.

Спасибо!

ПОХОЖИЕ СТАТЬИ: