Привет! Меня зовут Светлана Моторкина, я Head of Design в компании Friflex. Тренды в интерфейсах появляются регулярно, но, увы, большинство из них не проходит проверку продом. В этой статье я рассмотрю интерфейс не как набор визуальных приемов, а как систему: от цвета и формы до доступности, анимации и новых сценариев с AI.
Критерий простой: помогает ли прием пользователю быстрее, точнее и спокойнее решать задачу. И выдерживает ли он длительную работу с продуктом.
Цвет и акценты
Задача цвета — помочь пользователю разобраться в интерфейсе и не утомлять при длительной работе. Слишком агрессивная палитра быстро вызывает усталость и желание закрыть приложение или сайт. Поэтому в продуктовых интерфейсах почти всегда используют нейтральную базу. На таком фоне проще читать тексты и интерфейс дольше остается комфортным в работе.
Акцентных цветов, как правило, один-два. Они выразительные, но не кричащие. И главное, используются только там, где есть действие или важное состояние. По сути, это навигация для пользователя: куда смотреть и с чем можно взаимодействовать.
Светлую и темную темы в основном не делают зеркальными. В темной теме обычно выше контраст, меньше цветных бликов и декоративных элементов, чтобы не утомлять глаза. Различия между темами чаще строятся на форме, плотности и светлоте, а цвет лишь поддерживает иерархию, а не задает ее.
Контекст здесь критичен. Один и тот же оттенок может считываться по-разному: например, в финтехе зеленый ассоциируется с ростом и прибылью, а в медтехе со спокойствием и стерильностью. Эти ассоциации уже есть у пользователей, поэтому цвет лучше не выбирать абстрактно. Он может создать внутренний диссонанс, даже если все хорошо читается.
Глассморфизм
Эффект матового сте��ла уже вовсю используется как часть интерфейса. Но важна не сама размытость, а как элемент работает на фоне, сохраняется ли читаемость контента.
Базовая схема выглядит так: поверх фона используется легкий tint в диапазоне 8–16%. Иерархия задается через уровни и тени, привязанные к тем же elevation-токенам, что и у остальных компонентов. Текст на стекле тоже проверяется по WCAG: контраст не ниже 4.5:1 для обычного текста и 3:1 для крупного.
Анимация
С ростом мощности мобильных устройств UI-анимации перестали быть роскошью, а эффекты ради эффекта ушли. Сегодня важна кинематика, которая помогает понять логику интерфейса: откуда появляется элемент, куда он исчезает, какое действие подтвердилось. Это причинно-следственные переходы, микроанимации состояний и хорошо настроенные кривые движения.
Обычно такие анимации короткие и легкие, в пределах примерно 120–240 миллисекунд, с минимальными задержками. Они работают на transform и opacity. Без лишних перерисовок и с учетом системных настроек вроде prefers-reduced-motion, чтобы интерфейс был комфортным для всех пользователей.
3D и предпросмотр в реальном времени
Трехмерность вернулась, но не везде. 3D уместно добавить, если что-то нельзя показать на плоской схеме или изображении. Например, в конфигураторы мебели, техники и автомобилей, в карты, визуализации. В остальных случаях часто это избыточное решение. Есть альтернативы: статичное изображение, GIF или плоский рендер.
3D-предпросмотр лучше подгружать по запросу пользователя или только при стабильном соединении. Сцены стоит держать простыми: ограниченное количество полигонов, базовые материалы, мягкие тени — без тяжелых пост-эффектов. Так предпросмотр остается быстрым и не перегружает интерфейс.
UX-формы
Вход и регистрация часто воспринимаются как технический этап, но на практике именно здесь пользователи чаще всего отваливаются. Задача формы простая: пропустить пользователя дальше как можно быстрее. Поэтому в современных интерфейсах сначала предлагают passkeys или магическую ссылку, когда вход подтверждается в браузере, на телефоне или через письмо. Пароль остается запасным вариантом.
Требования к вводу лучше показывать сразу и, если возможно, обходиться без капч и лишних действий.
Автозаполнение стоит использовать по максимуму, чтобы браузер или менеджер паролей подставляли данные автоматически. Пароль можно временно показать. Ошибки отображаются сразу под полем, а введенные данные не сбрасываются: пользователь должен сохранять контроль над формой.
Персонализация
Рабочая персонализация убирает лишнее и сразу выводит полезную выдачу. Например, рекомендации, похожие товары, быстрый набор. Ее задача не показать больше, а сократить выбор до релевантного. Для этого система учитывает предыдущие действия, ограничения и предпочтения пользователя.
У пользователя может возникнуть вопрос: почему мне все это рекомендуют? Персонализация не ощущается навязчивой, когда понятно, откуда она берется. Для этого добавляют пояснения. Например, «уже покупали», «вам может понравиться», «покупают пользователи с похожим вкусом».
Важно, чтобы персонализацией можно было управлять: скрыть рекомендации, сбросить настройки или скорректировать выдачу через фильтры. Чтобы не создавать путаницу, такие контентные настройки стоит визуально отделять от базовых параметров интерфейса.
WCAG 3.0 и доступность
Обновления WCAG напрямую затронули дизайн-системы. На уровне библиотеки это означает пересмотр базовых компонентов: кнопок, полей, селектов, табов, меню, модалок, таблиц. Доступность здесь закладывается по умолчанию, а не проверяется вручную на каждом экране.
Вот правила, которые мы задаем при разработке пользовательского интерфейса:
Фокус виден. Контур не спрятан под тенью или свечением, есть заметный индикатор с контрастом к соседнему фону не ниже 3:1, толщиной от 2 px и небольшим outline-offset, чтобы обводка не съедалась.
Кликабельная зона — не меньше 24×24 px. Если иконка 16px, добираем паддингами.
Навигация с клавиатуры обязательна. Tab/Shift+Tab, Enter/Space, Esc и стрелки работают так, как предписывает паттерн.
Аутентификация — без капч. Можно использовать код или магическую ссылку, функцию «показать пароль».
Перетаскивание — не единственный способ. Есть кнопочные альтернативы, чтобы перемещать и сортировать элементы («вверх/вниз», «переместить…», «сортировать»).
Контраст для обычного текста задаем ≥ 4.5:1, для крупного ставим ≥ 3:1 (крупный — примерно от 18 pt обычного или от 14 pt полужирного).
AI-ассистенты
Чаще всего их применяют для поиска и подбора товаров, рутинных задач вроде заполнения длинных форм. Пользователь формулирует задачу: «подбери подарок на День рождения» и ассистент собирает варианты в корзину.
Ключевой принцип здесь — прозрачность. Пользователь видит, что именно делает ассистент: сначала можно посмотреть предлагаемые изменения, и только после этого применить результат. На любом шаге процесс можно остановить и вернуть все как было.
Ассистент показывает, откуда взял данные. Для чувствительных операций вроде оплаты, удаления данных или подключения рассылок всегда есть явное подтверждение. AI ускоряет работу, но контроль и ответственность остаются у пользователя.
Какие устойчивые тренды в дизайне интерфейсов заметили вы? Расскажите в комментариях.
