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

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

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

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

#slider #animation

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

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

#animation

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

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

#animation

Михаил Нежник подготовил гайд по анимации в Фигме.

— Если на экран ведут несколько элементов, можно их выделить и потянуть связь до целевого фрейма. Переход будет настроен для всех выделенных элементов;
— Можно скопировать анимацию (выделить её, нажав слева от названия триггера на панели Interactions, и скопировать) и вставить выделенным элементам;
— Также можно её отредактировать или удалить у всех выделенных элементов;
— Настройка «Sticky, stop at top edge» фиксирует элемент при прокрутке внутри блока, а при достижении границ блока прокручивать его уже вместе со страницей (лучше увидеть);
— Для экшена прокрутки (Scroll to) можно выбрать объект и положительное или отрицательное количество пикселей. Тогда прокрутка остановится на это количество после или до объекта. Не забудьте настроить Overflow для прокручиваемого фрейма;
— Смарт-анимация смотрит, что изменилось на связанных фреймах. Если элемент с одним названием изменил размер или переместился, получится плавный переход между состояниями;
— Ease in — анимация начинается медленно и ускоряется к концу;
— Ease in back — элемент сначала отходит назад (а потом как Ease in);
— Ease out back — анимация начинается быстро, замедляется к концу, элемент пролетает немного дальше точки назначения, но возвращается к ней.

#figma #animation