Михаил Рубанов написал о дизайне слайдера для быстрой оплаты.

— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.

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

В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».

#slider #animation

Алёна Сарокина написала, зачем нужна интерфейсная анимация.

— Объяснить суть действия. Галочка в чекбоксе может появляться так же, как человек поставил бы её на бумаге;
— Показать структуру. Анимацией при переключении табов можно показать, что пользователь не переходит глубже в структуре приложения, а остаётся на том же уровне;
— Отразить какое-то временное состояние системы. Например, что стартовала загрузка файла;
— Подсказать жесты. Если гамбургерное меню выезжает слева, возможно, оно закроется свайпом влево;
— Облегчить работу мозга: ему не надо самостоятельно достраивать переходы между состояниями элементов интерфейса и экранами.

#animation

В PROFSOFT написали о роли анимации в интерфейсе.

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

#animation