Одно действие —
разное оформление
Во входящих найдено 10 визуальных вариантов кнопок. Приоритет действий приходится считывать из подписей.
10 вариантов оформления B2B · Электронный документооборот
Документы.
В порядке.
ДИЗАЙН-СИСТЕМА / 01
Как я выстраиваю систему плотного интерфейса и работу с AI-агентом — от первого замера до нового сценария.
Посмотреть экраны DOCKAT / РАБОЧЕЕ ПРОСТРАНСТВО
Один источник истиныТокены → компоненты → экраны
МЕНЬШЕ СЛУЧАЙНЫХ РЕШЕНИЙ.БОЛЬШЕ ПОРЯДКА В РАБОТЕ.
ОбъектКабинет ЭДО для бизнеса
ФокусСистема · сценарии · проверка
ФорматИсследовательский редизайн
Результат8 экранов + витрина системы
01 / КОНТЕКСТСначала понять
Плотный интерфейс.
Слишком много
разных правил.
В кабинете ЭДО работают с актами, счетами, контрагентами и подписями. Важны детали: кто ждёт ответа, где сумма, что уже согласовано и какое действие следующее.
Аудит пяти экранов исходного кабинета показал разнобой в оформлении одинаковых сущностей. Я поставил задачу собрать общий визуальный язык и проверить его на основных сценариях.
Граница кейса
В основе — аудит доступной ИП-сессии Диадока. Dockat — самостоятельный прототип с собственной визуальной системой. Данных о внедрении и пользовательских метриках нет.
Одно действие —
Одни данные —
разный формат
Дата меняет вид между экранами. В карточке сумма теряет разделитель разрядов: 2640,00 ₽.
5 шаблонов датыФорма без
явных ориентиров
В исходном состоянии отправки скрипт не нашёл label и отметок обязательности. В прототипе они становятся частью поля.
0 label в исходном состоянии02 / БЫЛО → СТАЛОИз деталей складывается система
Те же данные.
Единые ориентиры.
ФРАГМЕНТЫ ИСХОДНОГО ИНТЕРФЕЙСАРазные локальные решения
СостояниеПодписанТребуется аннулирование
Данные
20 July23.12.20252640,00 ₽
Действие
Одинаковые сущности оформлены по-разному между экранами.
КОМПОНЕНТЫ DOCKAT Один набор правил
СостояниеПодписанТребуется действие
Данные
20 июл 202623 дек 20252 640,00 ₽
Действие
Статус, формат и приоритет действия узнаются на любом экране.
Укрупнённые фрагменты, воссозданные по аудиту. Это иллюстрация правил, а не скриншот исходного продукта.
03 / ДИЗАЙН-СИСТЕМАСобрать язык интерфейса
Решение принимается
один раз.
Цвет, отступ, радиус и состояние закреплены в токенах. Компоненты используют эти значения, экраны собираются из компонентов. Правка основы распространяется на весь прототип.
Открыть витрину системыЦВЕТ / СЕМАНТИКА
Бирюза с ролью
Основное действие, наведение и акцент используют разные ступени одной палитры.
700#00655A
600#008274
500#009B85
100#D8F1ED
Основная кнопка + белый текст4,72:1
ТИПОГРАФИКА / ИЕРАРХИЯ
Аа123
Четыре веса.
Понятная иерархия.
400500600700
Кириллица · табличные цифры12–32 px
КОМПОНЕНТЫ / СОСТОЯНИЯ
Общий словарь
ПодписанНа согласованииТребуется подписьОтклонён
Номер документа *
Акт №394
Подпись поля остаётся после вводаСостояние = текст + маркер + цвет
ГЕОМЕТРИЯ / РИТМ
Шаг 4 px
Семь значений отступов.
Три роли радиуса.
481216243248
48∞
04 / ЭКРАНЫПроверить систему в работе
Одна система.
Весь рабочий день.
От входящего документа до подписи.
Восемь сценарных макетов и витрина компонентов.
Документы, суммы и статусы собраны в одну таблицу. Выделение и массовое действие находятся рядом.
Открыть макетМакеты показывают оформление и состояния. Отправка, подписание и согласование документов не подключены к сервису. Имена, организации и реквизиты заменены демонстрационными.
05 / РАЗВИТИЕ ПРОДУКТАНовый сценарий на готовой основе
Гипотеза · внутренняя визаКто держит
Посмотреть очередь
Кто держит
документ?
Перед подписью документ может пройти бухгалтера, юриста и руководителя. Отдельная очередь помогает увидеть, где он остановился и чьё решение требуется.
В прототипе появились пакеты на согласовании: срок ожидания, текущий шаг и маршрут. Это проектное предложение; его влияние на срок обработки ещё предстоит проверить.
МАРШРУТ СОГЛАСОВАНИЯШаг 3 из 3
Акт сверки №394
Внутренняя проверка перед подписью
- БухгалтерПроверены суммы и реквизиты01
- ЮристСогласовано с замечанием02
- Руководитель · выОжидает вашей визы03
Понадобившиеся повторно шаги маршрута, баннер и пары «ключ — значение» перенесены из карточки в общую базу компонентов.
06 / МЕТОДДизайнер × агент
Я задаю правила.
Агент проверяет
их соблюдение.
В этом кейсе я выстраиваю сам процесс работы: задаю направление, определяю границы задачи и требую воспроизводимых чисел.
Агент переводит решения в код и измерения. Результат каждого этапа — артефакт, который можно открыть, проверить и изменить.
НА МОЕЙ СТОРОНЕ
Выбор задачи и объекта
Визуальное направление
Требования к доказательствам
НА СТОРОНЕ АГЕНТА
Замеры и сборка прототипа
Вынос общих компонентов
Повторная проверка правил
- 01
Измерить
Зафиксировать исходные значения по computed-стилям пяти экранов.
measure.js → before/*.json - 02
Систематизировать
Закрепить решения в токенах и собрать общие компоненты.
tokens.css → base.css - 03
Собрать
Проверить переносимость правил на разных сценариях и новой очереди.
make.py → 9 макетов - 04
Перепроверить
Найти отклонения тем же скриптом и исправить их в основе.
measure.js → after/*.json
ПРОВЕРКА НАШЛА ОШИБКУ В НАШЕЙ ЖЕ СИСТЕМЕЗаявленный контраст
Заявленный контраст
пришлось пересчитать.
Первый цвет основной кнопки не проходил порог для обычного текста. Исправление токена изменило кнопки на всех экранах.
Белый текст / основная кнопка3,48→4,72Порог 4,5:1 · WCAG 2.1
07 / РЕЗУЛЬТАТТо, что можно пересчитать
Система собрана.
Правила проверены.
Результат — HTML/CSS-прототип с общей основой и сохранёнными замерами. Оценка относится к согласованности интерфейса, а не к скорости работы пользователей.
7→3
Сопоставление одного экрана.
Без усреднения разных сценариев.
5→1
Объединение исследованных экранов.
Витрина системы исключена.
9экранов
Восемь сценарных макетов
и одна витрина компонентов.
0 отклоненийв проверенных значениях токенов
19 / 19проверок контрастных пар с порогом
Что именно проверено и где границы измерения
Один и тот же скрипт обходит DOM и читает вычисленные стили. Проверяются цвета текста и фона, размеры и веса шрифта, выбранные отступы, радиусы и высоты контролов. Нативные контролы и значения по умолчанию частично исключены.
Ноль отклонений относится к этой проверке. Он не означает полную проверку доступности, всех CSS-свойств или всех состояний. Проверка контраста охватывает 19 заданных пар с порогом, включая повторные направления пар.
«До» — пять экранов доступного кабинета, «после» — восемь сценарных макетов. Наборы и объём данных различаются. Поэтому в крупных показателях выше радиусы сравниваются на одном экране, а форматы даты — как объединение выборок. Меньшее число вариантов само по себе не доказывает улучшение UX.