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

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

Ты открываешь инспектор и проверяешь ещё раз. Цифры сходятся. Ошибки нет.

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

Круг должен быть больше квадрата

Правильный — B, тот, который больше.

По цифрам одного размера — A: его высота и ширина совпадают с квадратом до пикселя. Но круг при равной высоте занимает на пятую часть меньше площади. Углов нет, края уходят внутрь, массы меньше — и глаз видит фигуру мельче. Чтобы фигуры выглядели одинаково, круг увеличивают на 2–5%.

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

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

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

Треугольник в кнопке стоит правее центра

Правильный — B, тот, что сдвинут вправо.

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

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

Треугольник — самый заметный случай, но не единственный. Стрелка «назад» в шапке всегда чуть смещена от математического центра кружка. Иконка «отправить» — бумажный самолётик — тоже несимметрична и требует правки. Любой шеврон в аккордеоне. Буква в круглом аватаре-заглушке: центрируешь бокс глифа — получаешь букву, которая висит слишком высоко, потому что оптический центр строки выше геометрического.

Кстати, то же самое работает по вертикали и в больших масштабах. Заголовок на первом экране, поставленный ровно посередине высоты вьюпорта, всегда выглядит опущенным. Оптический центр композиции лежит выше геометрического примерно на несколько процентов высоты — поэтому модалки и hero-блоки поднимают.

Внешний радиус больше внутреннего

Правильный — B, у него внешний радиус больше.

Если радиусы одинаковые, дуги не параллельны: поле между ними сужается в углу и разъезжается на прямых. Читается как брак, хотя цифры «ровные» — 16 и 16, всё аккуратно, всё из одного токена.

Правило простое: внешний радиус равен внутреннему плюс поле между ними. Внутри 16, паддинг 24 — снаружи 40. Считается за секунду и не требует глазомера.

Вложенных скруглений в интерфейсе больше, чем кажется. Карточка с картинкой внутри. Кнопка внутри карточки. Инпут внутри формы. Аватар внутри блока. Модалка внутри затемнённой подложки, если у неё есть рамка. Скриншот приложения внутри рамки телефона. Везде, где одна скруглённая форма лежит в другой, одинаковый радиус даёт кривые дуги.

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

Ни одна из этих поправок не видна по отдельности. Видно другое: у одних макетов всё сидит, у других вроде по сетке — а смотреть неприятно. Разница почти всегда здесь.

Серые одинаковые

Правильного ответа нет. Это один и тот же цвет.

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

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

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

И ещё одно следствие, менее очевидное. Сравнивать два цвета можно только в том окружении, где они будут жить. Палитра, красиво разложенная на белом артборде, ничего не говорит о том, как она поведёт себя на реальном экране с фотографиями, тенями и соседними блоками.

Что с этим делать

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

1. 1.

   Отойди от экрана на два метра или уменьши макет до 25%. Мелочь исчезает, остаётся композиция — и сразу видно, что провалилось, а что вылезло.

2. 2.

   Прищурься. Детали смазываются, макет распадается на пятна разной массы. Так проверяются оптические центры и вес блоков.

3. 3.

   Отзеркаль макет по горизонтали. Глаз перестаёт узнавать привычное и замечает перекосы, которые ты уже разучился видеть.

4. 4.

   Переверни вверх ногами. Текст перестаёт читаться, остаётся геометрия.

5. 5.

   Сделай скриншот в чёрно-белом. Если иерархия развалилась — она держалась на цвете, а не на структуре.

6. 6.

   Смотри цвет на его настоящем фоне и в обеих темах, а не на белом артборде.

Дальше — привычка задавать себе один вопрос. Не «совпадают ли числа», а «выглядит ли одинаково». Это разные вопросы, и второй главнее. Числа — способ добиться результата, а не сам результат.

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

И последнее. Если макет по цифрам ровный, а смотреть на него неприятно — верь глазу. Он не капризничает, он видит то, чего не видит инспектор.