Кнопки

Высота одна на все, скругление и минимальная ширина тоже — числа берутся из вида набора, а не пишутся здесь. Порядок в ряду: слева второстепенные, справа главная.

Ряд кнопок в окне и в полосе сохранения ставится так: «По умолчанию · Отменить · Сохранить».

Поля ввода

Кегль на телефоне не мельче 16 точек: иначе iOS увеличивает страницу при касании.

Переключатели и флажки

Сам тумблер мелкий намеренно, но зона нажатия у него добита до нормы в 24 точки — иначе пальцем не попасть.

Метки состояний

Слова с заглавной буквы, цвет — по смыслу: зелёный работает, жёлтый требует внимания, красный не работает.

Карточки и строки настроек

Строка настройки — один образец на всю панель: слева название и пояснение, справа управление.

Списки

На телефоне строки складываются в карточки: прокрутка вбок прячет правый край с кнопкой, и владелец её не находит.

Выбор одного из нескольких

Когда вариантов больше двух, несколько тумблеров подряд читаются как независимые, хотя выбрать можно только один. Для такого случая — сегменты.

Таблицы

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

Полосы заполнения и заглушки

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

Боковое меню

Боковое меню — когда разделов много и они равноправны. Горизонтальное — когда их пять-шесть, а место по бокам дорого.

Боковое меню с переключателем

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

Строка с почтой стоит НАД переключателем: сперва человек убеждается, что он в нужной учётной записи, и только потом переключает раздел. Наоборот — и переключение уходит не туда, куда он думал.

Шапка сайта

Готовый кусок для витрины и лендинга. Собран из тех же кнопок и меню. Подвал живёт отдельным блоком — «Подвал сайта» ниже по списку.

Вход и регистрация

Одна карточка на все случаи — вход, регистрация, восстановление пароля. Отличаются набором полей, а не оформлением. Эта же карточка стоит на входе покупателя, на регистрации и на входе в управление.

Вторая карточка входа в наборе была лишней: .form-card осталась от панели и не работала ни на одной странице. Осталась одна — та, что держит вход покупателя, регистрацию и вход в управление.

Поиск по сервису

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

Выбранный пункт подсвечивается заливкой, а не рамкой: рамка прыгает при движении стрелками и рябит.

Плашки и загрузка

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

Меню, подсказки, всплывающие

Меню действий — что можно сделать. Карточка — что это такое. Подсказка — что значит значок. Путать их нельзя, иначе человек ищет действие там, где показаны данные.

Раскрывашки и шаги

Раскрывашка прячет то, что нужно не всем: редкие настройки, подробности. Прятать за ней главное нельзя — не найдут. Шаги показывают, сколько всего и где человек сейчас.

Мелочи

Аватарки, значки, клавиши, строки списка. Именно из-за них интерфейс выглядит собранным или сшитым наспех.

Шторки и подтверждения

Окно — короткое действие. Боковая шторка — работа рядом с содержимым: страница остаётся видна. Нижняя — то же на телефоне, до неё дотягивается большой палец.

Особый ввод и ползунки

Обычное поле закрывает почти всё. Здесь случаи, где его не хватает.

Календарь

Выбор даты окончания подписки и периода отчёта. Клетка ростом с мелкую кнопку — в календарь тычут пальцем чаще, чем куда-либо ещё.

Переписка

Наши сообщения справа, клиента слева — как в любом мессенджере, спорить с привычкой незачем. Время и признак прочтения внутри пузыря, иначе они рвут ленту.

Текст

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

Дополнение

Инструменты над таблицей, поле с календарём, карточка по наведению, выделение в тексте и опросник.

Плитки показателей

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

Цифры моноширинные: сводка обновляется каждую минуту, и от прыгающей ширины цифр плитки дёргались бы.

Шапка карточки

Заголовок, пояснение и управление в одной строке. На узком экране действие переезжает под заголовок: имя карточки важнее кнопки, обрезать его нельзя.

Вкладки

Вкладка переключает набор одних и тех же данных. Если за ней прячется другое содержимое — это раздел, и ему место в меню.

Поле телефона

Номер вводят чаще любого другого поля — и ошибаются в нём чаще всего: каждый пишет по-своему. Приставка «+7» стоит внутри поля и не стирается, цифры сами встают как «900 000-00-00».

Форме уходит номер целиком, «+79001234567»: скрытое поле рядом подставляется при отправке. Видимое остаётся читаемым для человека.

Чат с посетителем

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

<div class="чат" data-чат
     data-опрос="/api/chat/poll"
     data-отправка="/api/chat/send">
  <button class="чат-вызов" data-чат-кнопка aria-label="Чат">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5h16v10H8.5L4 19z"/><path d="M8 9.5h8"/><path d="M8 12.5h5"/></svg>
    <span class="чат-счёт" data-чат-счётчик hidden></span>
  </button>

  <div class="чат-окно" hidden data-чат-окно role="dialog">
    <div class="чат-шапка">
      <b>Чат с магазином</b>
      <button class="чат-закрыть" data-чат-закрыть>✕</button>
    </div>
    <div class="чат-лента" data-чат-лента></div>
    <form class="чат-форма" data-чат-форма>
      <textarea class="field" data-чат-поле data-рост placeholder="Напишите сообщение"></textarea>
      <button class="btn btn-primary">Отправить</button>
    </form>
  </div>
</div>
<script src="/static/chat.js" defer></script>

От сервера нужны две ручки. Опрос отвечает {"сообщения":[{"номер":7,"сторона":"shop","текст":"…"}]}, отправка принимает {"текст":"…","страница":"/cart"}. Адреса задаются в разметке, поэтому у каждого сайта они свои. На телефоне окно открывается во весь экран — как в мессенджерах.

Обложка и блоки страницы

Куски страницы, из которых собирается лендинг и главная магазина: первый экран, блок возможностей, вопросы, контакты, баннер.

Карточка товара и сетка

Карточка отвечает на четыре вопроса по порядку: что это, как называется, сколько стоит, можно ли купить сейчас. Остальное — на странице товара.

На телефоне сетка встаёт в две колонки, а не в одну: одна колонка превращает каталог в бесконечную ленту, и до третьего товара не долистывают.

Шапка магазина: три вида

Четыре вещи, ради которых открывают шапку: найти товар, попасть в каталог, увидеть корзину, войти к себе. Верхняя строка — служебная, нижняя липнет к верху при листании.

Полоса акции не липнет к верху нарочно: на телефоне она съедает высоту экрана, а сообщение в ней читают один раз.

Меню каталога и крошки

Одно дерево разделов в трёх видах: столбцом на странице каталога, раскрытием во всю ширину из шапки и путём над заголовком.

Раскрытие держится на скрытом флажке, а не на наведении: открытое по наведению меню закрывается, стоит увести мышь на пиксель.

Подвал сайта

Справочная страницы: телефон с адресом и то, чего не нашли в меню — доставка, возврат, договор. Колонки неравные нарочно, первая про магазин.

На телефоне колонки ссылок сворачиваются, а первая остаётся открытой: телефон прятать нельзя, за ним и приходят.

Напишите нам и как найти

Две секции про одно: как до вас достучаться. Полей в форме ровно три — каждое лишнее поле в обратной связи стоит десятой части отправивших, а уточнить можно и по телефону.

Место под карту задано заранее: без этого страница прыгает, когда врезка догрузится, и человек промахивается мимо кнопки.

Свойства, история и карточка действия

Три вещи, без которых не обходится ни один разбор: карточка заказа, страница клиента, свойства товара. До сих пор каждый экран рисовал их по-своему — отсюда и разнобой в управлении.

Опасное действие помечено рамкой и красным заголовком, но фон обычный: красная заливка кричит на человека каждый раз, когда он просто листает настройки.

Картинка с текстом, сетка и разделитель

Мелочи, из которых собрана половина экранов: товар в списке, человек в переписке, файл во вложениях, ряды карточек и линия с подписью посреди содержимого.

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

Видео, лента и спецпредложения

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

Срок показан приглушённо: крикливый таймер читается как обман, а именно срок и заставляет решать сейчас.

Загрузка файлов

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

Полоса загрузки идёт прямо в строке файла: отдельная полоса под списком не показывает, какой именно файл ещё едет.

Доставка и оплата

Про доставку спрашивают до того, как положат товар в корзину. Пока ответа нет на странице, его спрашивают в чате — или уходят. Два вида: карточки для страницы условий и сжатая полоса под кнопкой на странице товара.

Срок и цена стоят в одной строке и в самом низу карточки: способы сравнивают, ведя взглядом по одной линии. «Бесплатно» показано цветом «хорошо» — это довод, а не цена, и среди рублей соседних способов оно теряется.

Фильтры и сортировка

Фильтры работают, только когда видно и что можно выбрать, и что уже выбрано. Поэтому выбранное вынесено отдельной строкой над товарами, а число товаров стоит у каждого значения.

Число товаров у значения не украшение: без него ставят галочку и получают пустой каталог, а это уже похоже на поломку магазина.

Страница товара

Всё, что отвечает на «точно ли то самое», стоит на первом экране: фото, название, цена, наличие, кнопка. Галерея и блок покупки липкие — человек читает описание, не теряя товар из виду.

Варианты — плашками, а не выпадающим списком: из списка не видно, чего нет в наличии, а перебирать по одному — работа.

Корзина

Последняя проверка перед деньгами: тот ли товар, сколько штук, сколько за них. Итог держится липким справа и не уезжает при листании.

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

Оформление заказа

Место, где теряют больше всего покупателей. Шаги пронумерованы, сумма не исчезает, способы доставки и оплаты — крупными плашками.

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

Отзывы и оценка

Отзывам верят, когда видно распределение оценок и живого человека: имя, дату, что именно купил. Магазин со ста пятёрками выглядит хуже магазина с тремя двойками и ответом.

Звёзды сделаны одним приёмом: серый ряд снизу, жёлтый сверху обрезан по ширине оценки. Половинки получаются сами, отдельной картинки не нужно.

Тарифы

Списки в колонках совпадают построчно — иначе сравнение превращается в чтение трёх разных текстов. Средний приподнят и подписан честно: «Берут чаще всего», а не «Лучший выбор».

Годовая цена показана за месяц с пометкой о списании разом: крупная сумма за год отпугивает, спрятанная — злит при оплате.

Разделы и подборки

Главная отвечает на вопрос «что тут есть». Плитки отвечают быстрее списка: картинка узнаётся раньше, чем читается слово. Первая крупнее — раздел, который продаёт лучше всех.

На телефоне остаются две колонки: одна растягивает десять разделов на три экрана, и до нижних не долистывают.

Призыв к действию и подписка

Человек дочитал и согласен — ему должно быть куда нажать. Кнопка ровно одна: две равные превращают призыв в выбор, и на нём останавливаются.

Мелкая строка под кнопкой снимает последнее возражение: «без карты», «отмена в один клик». Работает лучше ещё одного абзаца выше.

Возможности, показатели, команда

Три способа сказать «нам можно верить». Работают только конкретные цифры: «10 480 заказов за 2025 год» вместо «более 10 000 клиентов».

Роль пишем понятную покупателю, а не должность из штатного расписания: «Отвечает на вопросы о доставке» вместо «Менеджер отдела логистики».

Блог: карточки и статья

Статьи держат людей на сайте и приводят из поиска. Колонка текста узкая нарочно: строка во всю ширину монитора не читается — глаз теряет начало следующей.

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

Страницы ошибок и состояний

На них попадают в худшую минуту: что-то не нашлось, сломалось или человек только что отдал деньги. Устроены одинаково — знак, короткий заголовок, строка объяснения, одно действие.

На странице ошибки не пишем «Ошибка 404» заголовком: это код для нас. Номер оставляем мелко внизу — по нему человек опишет проблему в поддержке.

Кабинет покупателя

Кабинет открывают ради одного вопроса: где мой заказ. Поэтому заказы первым пунктом, а состояние показано словами и полосой шагов, а не цветной точкой.

У отменённого заказа шаги серые целиком: зелёная половина полосы у отменённого заказа выглядит издевательством.

Пустые состояния

Все одинаковые: значок, короткая фраза и подсказка, что сделать. Не смешивать «Пусто», «Нет данных» и «Ничего нет».

Цвета

Берутся из общего набора токенов, а не пишутся числом. Акцент задаётся владельцем в настройках и меняется вместе с темой.

Из чего собрано

Оформление лежит по разделам в web/styles/, одна тема — один файл. В браузер уходит один собранный файл: командой python tools/build_styles.py. Список собран из того, что лежит на диске прямо сейчас, — руками его не правят.

Раздел «Панель» в другие проекты не едет: там внутренности панели управления. Всё остальное переносится командой python tools/export_kit.py.