Привет! Меня зовут Светлана Моторкина, я 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 ускоряет работу, но контроль и ответственность остаются у пользователя.
Какие устойчивые тренды в дизайне интерфейсов заметили вы? Расскажите в комментариях.
