Стиль — Базовые — Принципы

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

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

Список клиентов под заголовком столбца «Клиент»: чекбоксы видны у всех трёх строк и в шапке

Неправильно

Тот же список: чекбокс есть только в шапке и у строки под курсором, которая подсвечена серым

Правильно

Сводите количество линий выравнивания контента и вложенностей к минимуму. Интерфейс должен легко адаптироваться при уменьшении экрана.

Карточка «ИП Иван Иванович»: в строке заголовка ещё значок запрета с текстом «Подписка закончилась» и жёлтая кнопка «Продлить», ниже список торговых точек с адресами

Неправильно

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

Правильно

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

Голубая карточка «Легко создать» с абзацем текста и синей ссылкой «Способы заполнения каталога»

Неправильно

Та же карточка на сером фоне: текст чёрный, ссылка «Способы заполнения каталога» тоже чёрная, со стрелкой вправо

Правильно

Контролы либо чёрные, либо в цвет продукта. Кроме красного и оранжевого.

Неправильно

Правильно

Подробнее — в гайде «Цвет».

Контрастная типографика. Без тонких шрифтов и начертаний, близких по толщине и кеглю:

Название «Минеральная вода» набрано крупно, но тем же обычным начертанием, что и строка «Остаток 18 шт» под ним

Неправильно

Название «Минеральная вода» набрано крупно и жирным, а строка «Остаток 18 шт» под ним — обычным

Правильно

Подробнее — в гайде «Экранная типографика».

Интерфейс плоский, без наслоений и объёма.

Схема экрана с боковым меню: белые блоки контента на сером фоне отбрасывают тени

Неправильно

Та же схема: белые блоки на сером фоне без теней

Правильно

Тень у объекта может быть, только если это другой слой: модальное окно, сайдпейдж, тултип.

У тёмных элементов не может быть тени — она смотрится грязно.

Неправильно: у тёмной панели массовых действий «Переместить», «Выгрузить», «Списать», «Ещё» поверх списка товаров есть тень

Чтобы зонировать контент, используйте отступы, разделители, заливки или рамки.

Рамки и линии не толще 1 px. Если у элемента есть свой цвет — рамка не нужна.

Блок одновременно с серой заливкой и рамкой

Неправильно

Два блока: один только с рамкой, другой только с серой заливкой

Правильно

Блоки в интерфейсе, контролы или выделенные области имеют скругление:

Для полей ввода — 2 px — так их можно отличить от кнопок;
Для маленьких блоков и контролов — 8 px — универсальное скругление для всех контролов;
Для больших блоков и больших попапов — 16 px — для сохранения соотношения скругления и размера элементов.

Невысокий серый блок со скруглением углов 8 px

Большой серый блок со скруглением углов 16 px

Блоки не должны быть слишком узкими, например, блок со скруглениями 16 px не может быть высотой 32 px, только 48 px и больше.

Узкий серый блок высотой 32 px со скруглением 16 px — его края полностью закруглены

Неправильно

Серый блок высотой 48 px с тем же скруглением 16 px

Правильно

У блоков со скруглением 16 px нужно применять оптическое выравнивание, когда левая и правая границы выходят за линии выравнивания на 4 px.

Схема оптического выравнивания: скруглённый серый блок выходит на 4 px за красные линии выравнивания слева и справа, а строки текста под ним стоят ровно по линиям

Стиль элементов

Визуальная чистота

Цвета

Типографика

Зонирование

Скругления