39. Настройка скринсейвера

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

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

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

40. Голосовой ввод в Grok

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

В Grok решили сделать лучше: они просто подсветили поле градиентом — и красиво, и понятно, без лишнего визуального шума

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

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

#анимации
@references_burrow

41. Бенто-карточки

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

В этом примере автор делает карточки еще красивее и объемнее, как будто наводя на них софиты:
— подсвечивает паттерн и верхнюю часть бордера
— добавляет почти незаметные, мерцающие белые точки
— использует «светящиеся изнутри» иллюстрации

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

#карточка
@references_burrow

42. Фиксация соотношения сторон

Прекрасная фича Фигмы, которую не все замечали!

При закреплении, инпуты ширины и длины соприкасаются и «связываются» между собой, создавая стойкую метафору

Прекрасный пример, как микро-анимации могут оживить продукт и придать ему динамику 🙂


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

#анимации
@references_burrow

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

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

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

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

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

#анимации
@references_burrow

44. Метро в dynamic island

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

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

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

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

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

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

#карточка
@references_burrow

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

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

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

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

#ИИ
@references_burrow

48. Glass effect в Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

52. Dare to know

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

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

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

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

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

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

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

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

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