Неоморфизм: где этот стиль уместен

Неоморфизм — оформление, при котором элементы выглядят слегка выдавленными или вдавленными в фон за счёт мягких теней. Приём выразительный, и в подборках дизайна он появляется регулярно. Но у него есть ограничение, из-за которого в коммерческие проекты его берут редко. Разберём, как устроен эффект, что именно с ним не так, где он работает и чем его можно заменить.

Как устроен эффект

Технически неоморфизм — это три условия, выполненных одновременно.

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

Вдавленное состояние получается тем же приёмом с обратным расположением теней: светлая уходит вниз, тёмная поднимается вверх. Отсюда типичное применение — переключатели, поля ввода и «нажатые» кнопки.

Важное следствие: стиль работает только на однотонном фоне средней яркости. На белом фоне светлой тени не видно, на чёрном не видно тёмной. Любая фотография, градиент или цветная подложка под элементом убивают эффект. Это сразу ограничивает применение: контентный сайт с картинками в таком языке собрать не получится.

Почему ломается контраст

Главная проблема заложена в самом определении стиля. Если элемент и фон одного цвета, контраст между ними близок к единице. Рекомендации по доступности требуют для границ элементов управления и значащей графики контраст не ниже 3:1, для текста — 4,5:1. Мягкие тени этих значений не дают.

Практические последствия видны без измерений:

• непонятно, что на экране кликабельно, а что просто оформление;
• кнопка, поле ввода и декоративная карточка выглядят одинаково;
• тонкие тени пропадают на телефоне при ярком свете и на дешёвых матрицах с плохой цветопередачей;
• при повышенной яркости или включённом режиме высокой контрастности интерфейс превращается в плоский однотонный лист;
• пользователи с ослабленным зрением перестают ориентироваться на экране.

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

Плюсы и минусы

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

Что ломается на практике

Состояния элементов

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

• Наведение. Тени можно чуть усилить, но разница получается на грани заметности. Обычно приходится добавлять смену оттенка, то есть отходить от чистого стиля.
• Нажатие. Единственное состояние, которое стиль отрабатывает хорошо: выпуклый элемент становится вдавленным, и это читается однозначно.
• Фокус с клавиатуры. Штатное решение — контрастная рамка вокруг элемента, а рамка ломает всю идею. Мы не советуем убирать её: без видимого фокуса интерфейс становится недоступен для клавиатурной навигации.
• Отключённое состояние. Обычно его показывают приглушением, но неоморфная кнопка и так приглушена. Отличить активную кнопку от неактивной почти невозможно.
• Ошибка и успех. Требуют цвета, а цвет в монохромной схеме выглядит инородно.

Итог предсказуем: чтобы довести неоморфный компонент до рабочего состояния, в него приходится добавить контрастные элементы, после чего от исходного стиля остаётся только фон карточек.

Тёмная тема и производительность

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

Отдельный вопрос — отрисовка. Каждая тень с размытием считается браузером на каждом кадре перерисовки. Когда теней две на элемент, а элементов на экране несколько десятков, это заметно:

• прокрутка списка карточек начинает подтормаживать на недорогих телефонах;
• анимация теней при наведении и нажатии даёт рывки;
• на больших экранах увеличивается расход батареи.

Частично лечится ограничением числа неоморфных элементов на экране и отказом от анимации самих теней в пользу лёгких свойств. Полностью проблема не снимается — она заложена в приёме.

Где стиль уместен, а где нет

Где применять можно

Есть класс задач, где ограничения неоморфизма почти не мешают.

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

Общее у этих случаев одно: пользователь не ищет, куда нажать, потому что вариантов немного и они на видном месте.

Где не стоит

• Каталоги и карточки товаров: кнопка «Купить» обязана быть контрастной.
• Формы и оформление заказа: поля должны отличаться от фона однозначно.
• Таблицы, отчёты, административные панели — везде, где на экране плотная информация.
• Сайты с фотографиями и цветными блоками: стиль просто не соберётся.
• Тексты и мелкие элементы: тонкие тени на них не работают ни на одном экране.

Компромисс: точечное применение

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

Главная кнопка при этом остаётся контрастной заливкой. Это правило мы держим жёстко: как только целевое действие теряет контраст, снижается доля людей, которые до него доходят.

Если нужна мягкость без потери читаемости, есть более безопасные решения:

• белые карточки с крупным радиусом и лёгкой тенью на сером фоне — мягко и при этом контрастно;
• тонкие границы вместо теней: дешевле по отрисовке и лучше видно;
• приглушённая палитра с сохранением контраста текста и кнопок;
• объём только на одном уровне иерархии, а не на всех элементах подряд.

Проверка перед внедрением

Если заказчик всё же хочет этот стиль, мы предлагаем короткую проверку до того, как макет уйдёт в вёрстку.

1. Измерить контраст элементов управления и текста относительно фона.
2. Открыть экран на телефоне при дневном свете на улице.
3. Посмотреть на недорогом устройстве с тусклым экраном, а не только на рабочем мониторе.
4. Показать страницу человеку со стороны и спросить, на что здесь можно нажать. Ответ обычно решает спор.
5. Пройти экран с клавиатуры и убедиться, что рамка фокуса видна.
6. Проверить состояния активной и отключённой кнопки рядом: различимы ли они.
7. Прокрутить длинный список на среднем телефоне и посмотреть на плавность.

Если хотя бы половина пунктов не проходит, стиль оставляем на декоративной части, а рабочие элементы делаем контрастными.

Проверим, мешает ли оформление пользоваться сайтом

Модный стиль стоит внедрять, когда он не мешает основным действиям. Мы смотрим на интерфейс с точки зрения задач посетителя и находим места, где оформление снижает результат: аудит юзабилити сайта заканчивается списком конкретных правок с приоритетами. Пришлите адрес — скажем, что смотреть в первую очередь.

Мы начинаем с задач пользователя, а не с макета: UX/UI-проектирование помогает не переделывать интерфейс после запуска.