Нора референсов

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

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

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

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

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

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

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

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

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

#карточка@references_burrow

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

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

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

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

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

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

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

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

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

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

56. Формирование папок

Для поддержания порядка на канвасе, можно не только группировать объекты, но и объединять их в папки.

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

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

55. Тестирование чат-бота

Хочу обратить внимание на следующие детали:

1. Двухколоночная верстка — особенно удобна для сложных SAAS интерфейсов. В этом случае очень удобно настраивать параметры бота и сразу видеть отклик. Так, получаем бесшовный сценарий без лишних кликов и переходов

2. Серый фон формы настройки — она визуально выделяется и быстро считывается на фоне чата

3. Отображение тегов у сообщений бота — так легче отслеживать и настраивать технические параметры

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

54. Появление контекст-бара

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

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

53. Кастомизация трекера

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

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

52. Dare to know

Yarik сделал крышесносную анимацию для приложения погоды!

Классно, что анимация затрагивает не только иконку с планетой, но и поле ввода: создаётся ощущение, будто его заполняет туман

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

51. Группировка элементов на канвасе

Группировка — отличный способ избавиться от хаоса на холсте и структуировать идеи.

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

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

50. Сайдбар на магните

Приемы, основанные на физике процессов и гравитации, встречаются редко, но всегда выглядят эффектно и модно!

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

Берем на заметку!

💜Источник: ссылка
#анимации #скевоморфизм
@references_burrow

49. Перелистывание журнала

Очередной пример сквоморфизма 🔭

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

Так, каждый дневник открывается как маленькая записная книжка, где можно пролистать странички и найти нужную для начала записей. Получилось живо, уютно и по-настоящему

💜Источник: ссылка
#скевоморфизм
@references_burrow

48. Glass effect в Figma

До чего же зрелищный и яркий эффект!
Здесь автор использовал его на видео с цветами, сгенерированных в Midjorney 🌸

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

47. Анимация совершения транзакции

Нашла 2 референса на тему завершения транзакции в криптокошельке 😐

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

💜Источник: анимация шагов и анимация транзакции

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

46. Анимация папок

Случайно нашлись два референса, которые так хорошо дополняют друг друга! ❤️

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

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

💜Источник: папки в темной теме и анимация файлов

#анимации #скевоморфизм #карточка
@references_burrow

45. Концепт ввода в GPT

Не всегда же рассматривать только продуктовые референсы! Вот и я так подумала и принесла вам невероятно красивый шот 😂

Очень нравится:
— следование метафоре: UI-ный прием подчеркивает лейбл инпута. Свет, выходящий из курсора, отлично подчеркивает магию — то, с чем ассоциируется ИИ
— детализация: помимо приятного градиента, автор сохранил физику источения света и добавил маленькие летающие мушки

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

#ИИ
@references_burrow

44. Метро в dynamic island

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

Еще такое решение спасает от сбрасывания прогресса в приложении при долгом отсутствии. А когда такое случается, это невероятно раздражает!

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

И также меня смущает направления чтения: сверху располагается начало или конец пути? Кажется, пересадки должны появляться сверху и дозированно. А как вы думаете?

Но anyways, идея очень классная! Её можно масштабировать на другой транспорт и типы устройств, например, на apple watch

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

#карточка
@references_burrow

43. «До» и «После»

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

Еще нравится, что карточка, которая не выбрана, выходит за сетку, «выглядывая» и побуждая пользователя открыть и изучить её детальнее

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

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

#анимации
@references_burrow