Плоский стиль убрал из интерфейсов объём ради простоты, но задача, которую объём решал, никуда не делась. Человеку нужно понимать, что лежит на странице, что находится поверх неё и что временно перекрывает всё остальное. Без этой информации выпадающий список сливается с текстом, модальное окно кажется частью страницы, а всплывающая подсказка выглядит как ошибка вёрстки. Ниже разбираем, какими средствами задаётся глубина, как построить из них систему и что меняется в тёмной теме.
Клейморфизм: объём как у пластилина
Клейморфизм — один из стилей, которые вернули в плоский интерфейс объём. Элементы выглядят как мягкие фигурки из пластилина или глины: крупные скругления, пастельные цвета и сразу несколько теней. Внешняя мягкая тень отрывает элемент от фона, а внутренние — светлая сверху и тёмная снизу — придают ему выпуклость.
- Где уместен. Иллюстрации, иконки, промо-блоки, детские и развлекательные проекты, приложения с небольшим числом крупных элементов.
- Где мешает. Таблицы, формы, каталоги и личные кабинеты: когда объёмным становится каждый элемент, слои перестают различаться, а страница выглядит перегруженной.
- О чём помнить. Пастельные цвета и мягкие тени дают низкий контраст — текст и границы кнопок нужно проверять отдельно, а кликабельность не должна держаться только на объёме.
По сути клейморфизм — это тот же набор инструментов глубины, что разобран ниже, только доведённый до декоративного эффекта. Поэтому и правила те же: ограниченное число уровней, единый источник света и проверка на телефоне при дневном свете.
Зачем интерфейсу слои
Слой — это ответ на два вопроса: что сейчас активно и что произойдёт, если нажать мимо. Когда открыто модальное окно, всё под ним недоступно, и человек должен видеть это до того, как попробует нажать. Когда раскрыт выпадающий список, он временный и закроется при клике снаружи. Когда карточка приподнята при наведении, она реагирует на действия.
Всё это можно сообщить визуально, и тогда подсказки не нужны. Или не сообщить — и тогда пользователь выясняет правила методом проб, а поддержка получает вопросы вроде «почему у меня ничего не нажимается».
Инструменты глубины
| Приём | Что сообщает | Где уместен |
|---|---|---|
| Мягкая тень | Элемент выше фона | Карточки, выпадающие списки, всплывающие панели |
| Разница фона | Смена смысловой зоны | Чередование секций, боковые панели |
| Граница | Границы блока без отрыва от плоскости | Формы, таблицы, поля ввода |
| Затемнение подложки | Всё остальное недоступно | Модальные окна, мобильное меню |
| Смещение при наведении | Элемент интерактивен | Кнопки, карточки, ссылки-плитки |
| Размытие фона | Слой поверх содержимого | Закреплённые шапки, панели поверх контента |
| Перекрытие элементов | Один объект ближе другого | Аватары в стопке, изображение поверх блока |
| Масштаб и кегль | Ближе и важнее | Первый экран, акцентные блоки |
Тень — самый очевидный инструмент, но не единственный и не всегда лучший. Разница фона работает мягче и не создаёт визуального шума, а для таблиц и форм граница почти всегда уместнее тени.
Система вместо случайных значений
Главная причина неопрятного вида — тени, подобранные на глаз для каждого элемента отдельно. Взгляд считывает несогласованность быстрее, чем сознание её формулирует: карточки выглядят разными, хотя дизайнер их задумывал одинаковыми.
Мы задаём три-четыре уровня и используем только их:
- Плоскость страницы. Ничего не приподнято, только фон и границы.
- Приподнятый элемент. Карточки, кнопки, блоки, с которыми взаимодействуют. Тень едва заметная.
- Всплывающий слой. Выпадающие списки, подсказки, меню. Тень заметнее, есть небольшое смещение.
- Модальное окно. Максимальная тень плюс затемнённая подложка.
Каждому уровню соответствуют собственные значения тени, радиуса скругления и порядка наложения. Дальше дизайнер и разработчик выбирают уровень, а не придумывают параметры. Это ускоряет работу и делает интерфейс собранным без дополнительных усилий.
Как выглядит правдоподобная тень
Тень читается естественно, когда она подчиняется одному источнику света, а он в интерфейсах условно расположен сверху. Отсюда несколько практических правил:
- Смещение по вертикали больше нуля, по горизонтали — ноль. Тени, уходящие вбок, выглядят инородно.
- Чем выше слой, тем больше смещение и размытие и тем меньше плотность. Близкая к поверхности тень маленькая и чуть более плотная.
- Цвет тени — не чистый чёрный, а затемнённый оттенок фона. Чёрная полупрозрачная тень на цветном фоне выглядит грязной.
- Две тени лучше одной: короткая плотная для контакта с поверхностью и длинная мягкая для общего объёма.
- Прозрачность в пределах десяти-пятнадцати процентов для обычных карточек. Всё, что заметно темнее, выглядит тяжело.
Частые ошибки
- Тень у каждого элемента. Если приподнято всё, не выделяется ничего, а страница выглядит рябой.
- Тяжёлые тёмные тени. На светлом фоне они мылят изображение и удешевляют вид.
- Тень как единственный признак кликабельности. Не считывается на мобильных, где нет наведения, и не работает для тех, кто пользуется клавиатурой.
- Разные радиусы скругления у соседних блоков. Разрушает ощущение единой системы сильнее, чем разные тени.
- Модальное окно без затемнения. Неясно, доступна ли страница под ним.
- Тень на элементе, который не поднимается. Заголовок или абзац с тенью выглядит случайностью.
- Слишком много уровней. Семь степеней приподнятости человек не различает, а поддерживать их приходится.
Тёмная тема
В тёмной теме тени почти не видны: чёрное на тёмном не читается. Глубина передаётся иначе — чем выше слой, тем светлее его фон. Модальное окно оказывается самым светлым элементом экрана, карточка чуть светлее страницы, страница темнее всего.
Это стоит закладывать в систему сразу, если тёмная тема планируется. Тогда каждому уровню соответствуют две величины: тень для светлой темы и оттенок фона для тёмной. Попытка добавить тёмную тему позже, к готовому набору теней, обычно заканчивается тем, что интерфейс в ней выглядит плоским и слои перестают различаться.
Второй момент — затемнение подложки. В тёмной теме привычный полупрозрачный чёрный слой почти не заметен, поэтому его делают плотнее или дополняют размытием.
Доступность: глубина не должна быть единственным сигналом
Тень и приподнятость — вспомогательные признаки. Если элемент кликабельный, это должно быть понятно и без них: по форме, подписи, курсору, состоянию фокуса. Отдельно стоит проверить видимый фокус при перемещении клавишей табуляции — он часто теряется как раз на карточках, у которых интерактивность выражена только тенью.
То же касается контраста: слои, различающиеся только очень близкими оттенками фона, не читаются на дешёвых матрицах и при ярком свете. Разница между уровнями должна быть заметна при взгляде с расстояния вытянутой руки.
Как проверить результат
Простой приём: посмотрите на экран прищурившись. Должно быть понятно, что здесь основной слой, а что вспомогательный, и где находится активная область. Если всё сливается в одну плоскость — глубины не хватает. Если от теней рябит и взгляд не находит опоры — её слишком много.
Второй приём: откройте макет на телефоне при дневном свете. Мягкие тени, красиво выглядевшие на мониторе, часто исчезают полностью, и оказывается, что вся структура держалась на них одних.
Если нужна система, а не набор экранов
Уровни слоёв, радиусы, состояния и поведение элементов мы описываем на этапе прототипа, до отрисовки макетов и вёрстки — так интерфейс остаётся согласованным, когда в нём появляются новые разделы. Посмотрите наше проектирование пользовательских интерфейсов и напишите нам, если хотите привести оформление к единому виду.
Такую логику мы закладываем на этапе прототипа — это проектирование пользовательских интерфейсов до начала разработки.
