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