Михаил Рубанов написал о дизайне слайдера для быстрой оплаты.
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
Хабр
Анимации и вибрации: как задизайнить фидбэк слайдера оплаты
Кофе — продукт, который можно покупать и пить хоть несколько раз в день. Заказ в приложении Дринкит должен быть супер-пупер быстрым. В идеале, чтобы можно было даже не запускать его, а заказывать из...
Алёна Сарокина написала, зачем нужна интерфейсная анимация.
— Объяснить суть действия. Галочка в чекбоксе может появляться так же, как человек поставил бы её на бумаге;
— Показать структуру. Анимацией при переключении табов можно показать, что пользователь не переходит глубже в структуре приложения, а остаётся на том же уровне;
— Отразить какое-то временное состояние системы. Например, что стартовала загрузка файла;
— Подсказать жесты. Если гамбургерное меню выезжает слева, возможно, оно закроется свайпом влево;
— Облегчить работу мозга: ему не надо самостоятельно достраивать переходы между состояниями элементов интерфейса и экранами.
#animation
— Объяснить суть действия. Галочка в чекбоксе может появляться так же, как человек поставил бы её на бумаге;
— Показать структуру. Анимацией при переключении табов можно показать, что пользователь не переходит глубже в структуре приложения, а остаётся на том же уровне;
— Отразить какое-то временное состояние системы. Например, что стартовала загрузка файла;
— Подсказать жесты. Если гамбургерное меню выезжает слева, возможно, оно закроется свайпом влево;
— Облегчить работу мозга: ему не надо самостоятельно достраивать переходы между состояниями элементов интерфейса и экранами.
#animation
Medium
5 причин почему нужна UI анимация
Анимация в интерфейсе — это спорный момент в процессе разработки продукта. Разработчики, аналитики, менеджеры, а иногда и дизайнеры…
В PROFSOFT написали о роли анимации в интерфейсе.
— Анимацией можно выделить ключевые элементы интерфейса;
— Анимация перемещения между разделами помогает построить ментальную модель: как организована структура приложения, как по нему перемещаться;
— Обратная связь и прогресс обработки запроса показывают, что система отреагировала и работает, а также сколько продлится процесс;
— Предварительный просмотр: анимация при перетаскивании элементов в списке позволяет увидеть результат перемещения и избежать ошибок;
— Анимация позволяет плавнее и естественнее изменять состояния элементов;
— Визуальная подсказка: анимация при наведении курсора на кнопку показывает, что на неё можно нажать.
#animation
— Анимацией можно выделить ключевые элементы интерфейса;
— Анимация перемещения между разделами помогает построить ментальную модель: как организована структура приложения, как по нему перемещаться;
— Обратная связь и прогресс обработки запроса показывают, что система отреагировала и работает, а также сколько продлится процесс;
— Предварительный просмотр: анимация при перетаскивании элементов в списке позволяет увидеть результат перемещения и избежать ошибок;
— Анимация позволяет плавнее и естественнее изменять состояния элементов;
— Визуальная подсказка: анимация при наведении курсора на кнопку показывает, что на неё можно нажать.
#animation
vc.ru
Как анимация в интерфейсе помогает пользователю — Дизайн на vc.ru
На сегодняшний день анимация встречается почти в каждом интерфейсе, будь то сайт или мобильное приложение. Она играет ключевую роль в создании привлекательной и интуитивно понятной пользовательской среды.