27. Быстрое удаление

Мне одновременно очень нравится и не нравится, насколько плавным стал этот флоу 🤔

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

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

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

#анимации #удаление #дропдаун

28. Руководство пользователя с перелистываемыми страничками

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

Прекрасный пример использования скевоморфизма — руководство пользователя в Halide. Ребята даже переиспользовали шрифт, который использовался бы в печатной версии. Получаем полное погружение, так сказать 🧞‍♀️

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

#скевоморфизм

29. Замена попапу

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

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

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

#дропдаун

30. Автофокус на первый вариант

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

Тема классная, но достаточно неожиданная, потребует привыкания, но зато в будущем сэкономит клики и время на перемещение курсора 🏃‍♂️

Подсмотрела в канале у Никиты Семенова: ссылка

#дропдаун

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