57. Мгновенный перевод

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

💜Источник: ссылка

#анимации #карточка
@references_burrow

58. Разделение для изменения

Приятно находить все больше примеров редактирования какой-либо сущности без использования попапов и диалогов 😂

В данном случае чипс с временем, при клике на кнопку, распадается на 2 редактируемые составляющие: часы, минуты, а также на кнопку сохранения.

Этот прием можно классно масштабировать на более сложные сущности и использовать в формах и экранах с личной информацией

💜Источник: ссылка

#анимации #редактирование
@references_burrow

59. Ховер на карточку

Самое частое дизайн-решение при ховере на сущность — едва заметное изменение фона. Решение бронебойное, но не всегда эстетически привлекательное

В данном примере край иконки пулл-реквеста дополнительно подсвечивается зеленым, создавая эффект глубины 🪷

💜Источник: ссылка

#карточка@references_burrow

60. Закрепление в дропдауне

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

Единственное, что смущает — механика применения этого закрепленного элемента. Кажется, прятать все в одну строчку и не давать возможности развернуть — неправильно

💜Источник: ссылка

#анимации #дропдаун
@references_burrow

61. Анимация реконнекта

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

Хороший пример показан в Linear — здесь дизайнеры анимировали иконку статуса вместо замены её на лоадер.

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

💜Источник: ссылка

#анимации
@references_burrow

62. Свечение на мониторе

Недавно команда OpenAI представила новый нейросетевой браузер — Atlas.

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

Честно говоря, такой приём вижу впервые. Но уже возникало ощущение, будто экран ноутбука сломался и поплыл ✌️

А что вы думаете? Как вам такой эффект?

💜Источник: ссылка

#анимации #ИИ
@references_burrow

64. Анимация вместо скелетона

Наткнулась на занимательную концепцию — использование анимацию пересчета данных вместо скелетона.

С одной стороны, тема достаточно бодрая, так как делает интерфейс разнообразнее и живее

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

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

💜Источник: ссылка
#анимации
@references_burrow

65. UI в мелочах

Все мы привыкли, что индикаторы загрузки по типу лоадеров — яркие четкие элементы, но а что, если добавить немного блюра?

Тогда получится достаточно интересный эффект мягкости, идеально подходящий для карточек и маленьких контейнеров

💜Источник: ссылка
#анимации
@references_burrow

66. Бесшовный онбординг

Иконки статусов активности плавно перестраиваются с экрана онбординга на выбор и настройку

💜Источник: ссылка
#анимации
@references_burrow

67. Первое впечатление

Редко встретишь такие приложения, которые с первого захода забирают все твое внимание и не оставляют без эмоций.
В Genie AI дизайнеры постарались сделать целое представление вместо базового онбординга — такое не оставляет равнодушным

💜Источник: ссылка
#анимации #онбординг

68. Превью карт

Понравился левый экран с деталями банковской карты — на нем представлен классный приём выделения объекта на однотонном фоне.

Карта будто светится изнутри, как северное сияние, создаёт эффект глубины и акцент на нейтральном фоне, без активного использования бордеров.

Что можно улучшить в рамках разгона:
— анимация сияния на карте сделает её более живой и эмоциональной
— плавный переход бирюзового фона в операции сделает экран более гармоничным
— контраст на экране замороженной карте, сообенно на кнопке разморозки, сделают страницу более легкой к восприятию и пониманию CTA

💜Источник: ссылка
#карточка

Дорогие, поздравляю вас с наступившими Праздниками! Желаю всего самого красивого и покорения новых карьерных и личностных высот 🤟
Искренне благодарю вас за то, что остаетесь со мной на этом канальчике


А в эту рабочую неделю врываемся с новым референсом: концепт верхнего меню на MacOS

💜Источник: ссылка

Анимация смены категории в пайчарте

Динамичная анимация, подкручивающая график под нажатую категорию трат, которая еще круто подсвечивается!

Сначала показалось, что такое взаимодействие слишком яркое, но учитывая, что просмотр статистики — не самое частое действие, такой UI кажется уместным 👀

#анимации
@references_burrow

💜Источник: ссылка

Параллакс в карточке

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

Кажется, такой прием можно классно адаптировать под экраны для произведения яркого первого впечатления ❤️‍🩹

#анимации
@references_burrow

💜Источник: ссылка