Главная » Хабрахабр » [Перевод] Анимированные переходы в мобильных приложениях

[Перевод] Анимированные переходы в мобильных приложениях


Изображение: Ramotion

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

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

Осторожно: под катом много тяжёлых гифок.

Оповещения о состоянии системы

Если пользователь выполняет в системе какое-то действие, он ожидает увидеть чёткое и понятное подтверждение, что его запрос принят и обрабатывается. Вот несколько примеров того, как анимация позволяет повысить качество взаимодействия с пользователем.

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

Изображение: Колин Гарвен (Colin Garven)
Уведомите пользователей о результатах их действий.

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

Изображение: Ramotion
Простая анимация помогает пользователям понять, что происходит.

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

Изображение: UI8
С помощью анимации можно начать взаимодействие с пользователем ещё до полной загрузки приложения.

Последовательность шагов в многоэтапных процессах

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

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


Изображение: Якуб Анталик (Jakub Antalík)

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


Изображение: Ramotion


Изображение: Антон Скворцов

Представление новых элементов

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

image

Изображение: Вирджил Пана (Virgil Pana) С помощью анимации можно показать, откуда взялись объекты.

Навигация в приложении

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

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

Изображение: Джэ Сон Чон (Jae-seong, Jeong)
Ориентационная анимация позволяет определить, где вы находитесь по отношению к тому, где вы были раньше.

В примере ниже плавающая кнопка (floating action button, FAB) превращается в элемент заголовка, что позволяет пользователю понять, как связаны эти два объекта.

Изображение: Аниш Чандран (Anish Chandran)
Анимация визуализирует связи между элементами.

Минимизация когнитивной нагрузки

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

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

Во многих из них поля помечены подсказкой-заполнителем. Почти в каждом приложении пользователю необходимо заполнить какие-либо формы. В результате становится трудно понять, какую информацию необходимо ввести. Когда пользователь выбирает такое поле, подсказка пропадает. Всплывающие подсказки (floating label) позволяют пользователям не терять контекст и обеспечивают удобство при заполнении длинных форм.

Всю критически важную информацию необходимо оставить на виду.
Когда речь заходит о вводе данных пользователем, не стоит полагаться на его память. Изображение: MDS

Визуализация функциональных изменений

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

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

Изображение: Юрре Хауткамп (Jurre Houtkamp)
Анимация проигрывается при нажатии на кнопку, чтобы изменения были сразу заметны.

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

Изображение: Тамас Койо (Tamas Kojo)
Чётко покажите пользователям, что функция объекта изменилась.

Заключение

Если подойти к использованию анимации вдумчиво, её возможности окажутся поистине огромными. С её помощью можно оживить интерфейсы, сделав их по-настоящему «отзывчивыми» к действиям пользователя, и решить множество функциональных проблем. Для чего бы ни было предназначено ваше приложение, оно будет тесно взаимодействовать с пользователем. И именно анимация поможет сделать это взаимодействие по-настоящему захватывающим и эффективным.

Спасибо за внимание!


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Смешные и грустные истории про разработку компьютерных игр

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

Борщевик Сосновского. В МО ввели штрафы за распространение

1 ноября 2018 года Московская Область, без объявления войны (объявленной парой лет ранее), ввела финансовые санкции. Против собственников территорий, предоставляющих плацдарм для распространения борщевика Сосновского. Ура! Плантацию, встречающую гостей и жителей Москву сразу по прилёту в белокаменную. Мне, правда, интересно, ...