Пять «показателей» на экране превратились в два, и от этого стало понятнее.

Пять «показателей» на экране превратились в два, и от этого стало понятнее.

Неделю назад я начал сводить все сервисы своей панели к одному дизайн-коду. Сначала потренировался на паре разделов, сегодня собрал через Claude Design полноценную дизайн-систему и докрутил внешний вид остальных. Пользователи уже написали, что стало удобнее и понятнее. Хвалят, и это приятно. Но интереснее, что именно у них там починилось.

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

Один акцент вместо палитры. Теперь три цвета состояния и ни одного декоративного.
#0B7C74 (в тёмной теме #2DD4BF) значит «в норме», кирпичный #C13B2A это отклонение, охра #8A6100 это внимание. Правило, которое всё держит: цвет обязан означать состояние, а не различать пункты. Двенадцать цветных ссылок раскрашивали навигацию и не сообщали ничего.

Самое дорогое правило свода: метрика без нормы на экран не ставится. «ДРР 0.9%» ничего не говорит человеку, который не помнит норму наизусть. «ДРР 0.9% при норме 3–8%» говорит. Каждая плитка светофора несёт четыре вещи: название, значение, норму, статус. Нормы нет, значит либо ищи её, либо убирай плитку с экрана. За пять переработанных сервисов правило вычистило десятки цифр, которые никто не мог прочитать. На месте пяти «показателей» осталось два, зато оба читаются с одного взгляда.

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

Дальше мелочи, которые дают половину ощущения «стало понятнее». Числа, коды и даты набраны IBM Plex Mono с табличными цифрами, интерфейс Manrope: разряды в таблице встают друг под друга, и колонку сравниваешь глазом, не вчитываясь в каждую строку. Теней нет, глубину держит линия, тень осталась только у всплывающей подсказки. Состояния в матрице доступов теперь различаются геометрией: пустой кружок, залитая левая половина, залитый кружок. Первая версия различала контур и заливку, и на одиннадцати пикселях в плотной строке это не читалось вообще.

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

Спор о цвете кнопки закончился в тот день, когда акцент стал один.

Откройте свою админку или недельный отчёт: сколько там цифр, к которым вы прямо сейчас не назовёте норму?

✍️ Синтаксис хаоса
Подпишись: TG / DZEN / VK