# Контур.Гайды

> Контур.Гайды — первоисточник требований к дизайну интерфейсов веб-сервисов Контура: принципы, компоненты и ресурсы для продуктовых дизайнеров. Библиотека React UI (`@skbkontur/react-ui`) наиболее точно воплощает эти требования в компонентах.

Гайды на русском, разделы повторяют меню сайта. Формат строки: название (английское название компонента): описание. [Storybook] — документация React-компонента. Пометка «для сотрудников» — гайд открыт только сотрудникам Контура.

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

## Принципы — Базовые

- [Лейаут](https://guides.kontur.ru/principles/base/layout/): Описание и шаблоны оформления лейаутов для сервисов Контура
- [Стиль](https://guides.kontur.ru/principles/base/style/): Визуальный стиль интерфейсов Контура: чистота и показ элементов только тогда, когда они нужны
- [Цвет](https://guides.kontur.ru/principles/base/color/): Цвет в интерфейсе — это инструмент управления вниманием: серые, продуктовые и статусные цвета
- [Тёмная тема](https://guides.kontur.ru/principles/base/dark-theme/): Тёмная тема — это цветовая схема, в которой элементы интерфейса светлые, а фон тёмный
- [Адаптивность](https://guides.kontur.ru/principles/base/adaptivity/): Адаптивность — это способность интерфейса меняться в зависимости от типа и размера устройства
- [Модуль](https://guides.kontur.ru/principles/base/grid/): Модуль в 8 пикселей — базовая размерная единица интерфейсов Контура
- [Отступы и выравнивание](https://guides.kontur.ru/principles/base/indents/): Правила отступов и выравнивания: теория близости и правило внутреннего и внешнего
- [Иллюстрации](https://guides.kontur.ru/principles/base/illustrations/): Как использовать иллюстрации в интерфейсе, чтобы разнообразить его и привлечь внимание пользователей (для сотрудников)

## Принципы — Текст

- [Текст в интерфейсе](https://guides.kontur.ru/principles/text/styleguide/): Рекомендации о том, как написать хороший текст для интерфейса в стиле Контура
- [Экранная типографика](https://guides.kontur.ru/principles/text/typography/): Правила экранной типографики для сервисов Контура
- [Данные в макетах](https://guides.kontur.ru/principles/text/layouts-data/): Почему в макетах нужны реалистичные данные: ИНН, названия организаций, ФИО и адреса
- [Текстовые стили](https://guides.kontur.ru/principles/text/text-styles/): Набор текстовых стилей интерфейсов Контура и основной шрифт Lab Grotesque K
- [Глоссарий](https://guides.kontur.ru/principles/text/glossary/): Слова, которые нужно использовать в общении с пользователями: в интерфейсе, новостях и разговоре

## Принципы — Обучение

- [Контекстное обучение](https://guides.kontur.ru/principles/onbording/contextual-hints/): Контекстное обучение рассказывает о возможностях продукта прямо в интерфейсе и в нужный момент

## Принципы — Доступность

- [Принципы доступности](https://guides.kontur.ru/principles/accessibility/accessibility/): Принципы создания интерфейсов, доступных всем пользователям, независимо от возможных физических, технических или программных ограничений
- [Управление клавиатурой](https://guides.kontur.ru/principles/accessibility/keyboard/): Как обеспечить управление интерфейсом с клавиатуры: фокус, порядок обхода и горячие клавиши

## Принципы — Интерактивность

- [Время отклика](https://guides.kontur.ru/principles/interactivity/responsetime/): Как скорость отклика интерфейса влияет на пользовательский опыт и как держать её под контролем
- [Бесконечный скролл](https://guides.kontur.ru/principles/interactivity/endlesscroll/): Бесконечный скролл подгружает контент по мере скролла страницы
- [Залипающие элементы](https://guides.kontur.ru/principles/interactivity/sticky-elements/): Залипающие элементы и островки, которые фиксируются на экране при скролле

## Принципы — Данные

- [Сохранение данных](https://guides.kontur.ru/principles/data/data-saving/): Как проектировать интерфейс, чтобы пользователь не терял работу: автосохранение и малый квант редактирования
- [Инлайн-редактирование](https://guides.kontur.ru/principles/data/inline-editing/): Инлайн-редактирование — подход, при котором пользователь изменяет отдельные поля, а не всю форму сразу
- [Валидация](https://guides.kontur.ru/principles/data/validation/): Валидация — это проверка введённых пользователем значений и отображение найденных ошибок

## Принципы — Взаимодействие с клиентом

- [Уведомления](https://guides.kontur.ru/principles/interaction/notifications/): Уведомление — способ сообщить пользователю о важном событии: релевантность, своевременность и ясность коммуникации
- [Анонсы](https://guides.kontur.ru/principles/interaction/announces/): Анонс — это уведомление о событии или рассказ о новой возможности продукта (для сотрудников)
- [Реклама](https://guides.kontur.ru/principles/interaction/advertising/): Как оформлять баннеры, анонсы и ссылки на другие продукты Контура, чтобы они не считались рекламой (для сотрудников)
- [Согласия](https://guides.kontur.ru/principles/interaction/legal-consents/): Как собирать юридические согласия в интерфейсе: согласие на обработку персональных данных и согласие на получение рекламных сообщений (для сотрудников)
- [Капча](https://guides.kontur.ru/principles/interaction/captcha/): Капча — это тест, отличающий человека от бота, и рекомендации по её осторожному применению

## Принципы — Таблицы

- [Таблицы (Table)](https://guides.kontur.ru/principles/tables/tables/): Таблицы наравне с формами — основа интерфейсов Контура: как правильно верстать строки и столбцы [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/table_table--docs)
- [Табличные фильтры](https://guides.kontur.ru/principles/tables/table-filters/): Как устроены фильтры в шапке таблицы и как собрать их из чекбоксов, полей с датами и поиска

## Принципы — Остальное

- [Мобильные приложения](https://guides.kontur.ru/principles/other/mobile/): Как проектировать мобильные приложения, опираясь на привычные для платформ нативные паттерны
- [Суббренды и продукты](https://guides.kontur.ru/principles/other/sub-brands/): Что такое суббренд и как он соотносится с отдельными продуктами Контура (для сотрудников)

## Принципы — Продуктовый дизайнер

- [Продуктовый дизайнер](https://guides.kontur.ru/principles/uidesigner/uidesigner/): Портрет продуктового дизайнера интерфейсов в продуктовой команде Контура: знания, практики и навыки
- [Цели](https://guides.kontur.ru/principles/uidesigner/goals/): Как ставить и достигать цели дизайнера — точки развития, которые фиксируются в Контур.Матрице
- [Вёрстка макета](https://guides.kontur.ru/principles/uidesigner/layouts/): Как организовать макет: структурировать элементы и выделять повторяющиеся сущности в компоненты
- [Тест-сессии](https://guides.kontur.ru/principles/uidesigner/test-session/): Тест-сессия — это экспертная оценка интерфейса, когда команда сама проходит пользовательские сценарии
- [Дизайн-процессы](https://guides.kontur.ru/principles/uidesigner/design-process/): Процессы и дизайн-культура в команде, которые помогают улучшить качество дизайна и продукта (для сотрудников)
- [Как писать гайды](https://guides.kontur.ru/principles/uidesigner/guides/): Как писать гайды в едином стиле Контура: информационный стиль и полезные советы

## Принципы — Пользовательские исследования

- [UX-исследователь](https://guides.kontur.ru/principles/user-research/usabilityspecialist/): Список навыков и умений, присущих UX-исследователю
- [Принципы пользовательских исследований](https://guides.kontur.ru/principles/user-research/usabilityresearch/): Общие принципы пользовательских исследований в Контуре помогают исследователям и командам разработки договариваться и создавать полезные сервисы для людей
- [UX-ревью интерфейса](https://guides.kontur.ru/principles/user-research/interfacecheck/): Принципы и вопросы для проверки интерфейса готового продукта и прототипов
- [Подготовка прототипа к ЮТ](https://guides.kontur.ru/principles/user-research/preparingprototype/): Принципы подготовки прототипа к юзабилити-тестированию, чтобы он был удобным и эффективным
- [Выбор метода ЮТ](https://guides.kontur.ru/principles/user-research/choosingresearch/): Как выбрать метод исследования и в чём суть юзабилити-тестирования
- [Анализ данных исследования](https://guides.kontur.ru/principles/user-research/resultanalysis/): Как проанализировать собранные данные исследования: убрать искажения и выбрать метод анализа
- [Артефакты исследований](https://guides.kontur.ru/principles/user-research/artifacts/): Артефакт — это любая информация, которую фиксируют в процессе работы над исследованием

## Компоненты — Поля

- [Поле ввода (Input)](https://guides.kontur.ru/components/input-fields/input/): Поле ввода помогает вводить текст и числа с клавиатуры [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-input--docs)
- [Поле с маской (MaskedInput)](https://guides.kontur.ru/components/input-fields/mask/): Маска помогает не ошибиться при вводе значения и форматирует его [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-maskedinput--docs)
- [Поле с валютой (CurrencyInput)](https://guides.kontur.ru/components/input-fields/currency/): Поле с валютой предназначено для ввода сумм в рублях, долларах и пр [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-currencyinput--docs)
- [Поле с паролем (PasswordInput)](https://guides.kontur.ru/components/input-fields/password/): Однострочное поле для ввода пароля, в котором символы заменяются на точки [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-passwordinput--docs)
- [Поле с телефоном (Input)](https://guides.kontur.ru/components/input-fields/phone/): Поле для ввода номера телефона [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-input--docs#type)
- [Поле с датой (DatePicker)](https://guides.kontur.ru/components/input-fields/calendar/): Поле с датой помогает вводить дату с клавиатуры и выбирать дату курсором в календаре [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_date-components-datepicker--docs)
- [Поле с временем (TimePicker)](https://guides.kontur.ru/components/input-fields/timepicker/): Поле с временем помогает вводить время с клавиатуры и выбирать его из списка мышью [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-timepicker--docs)
- [Поле с токенами (TokenInput)](https://guides.kontur.ru/components/input-fields/tokens/): Поле с токенами — это поле ввода с подсказками. Используется, когда нужно указать много однородных элементов — токенов [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-tokeninput--docs)
- [Многострочное поле (Textarea)](https://guides.kontur.ru/components/input-fields/textarea/): Многострочное поле — это поле ввода, которое позволяет работать с несколькими строками текста [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-textarea--docs)
- [Комбобокс (ComboBox)](https://guides.kontur.ru/components/input-fields/combobox/): Комбобокс — это поле ввода с подсказками, которые появляются по мере ввода текста [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-combobox--docs)
- [Загрузка файла (FileUploader)](https://guides.kontur.ru/components/input-fields/file-uploader/): Контрол для выбора файла на компьютере и отображения статуса его отправки на сервер [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-fileuploader--docs)

## Компоненты — Действия

- [Ссылка (Link)](https://guides.kontur.ru/components/actions/hyperlink/): Ссылка помогает перейти на другую страницу. Ссылка может заменять кнопку, но она визуально легче кнопки [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_button-link--docs)
- [Кнопка (Button)](https://guides.kontur.ru/components/actions/button/): Кнопка в интерфейсе используется, чтобы запустить действие, выполнить команду [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_button-button--docs)
- [Кнопка-меню (Dropdown)](https://guides.kontur.ru/components/actions/menu-button/): Кнопка-меню содержит несколько команд, объединённых по смыслу [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_menu-dropdown--docs)
- [Кебаб-меню (Kebab-menu)](https://guides.kontur.ru/components/actions/kebab-menu/): Контекстное меню, открывающееся по клику на иконку-кебаб [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_menu-kebab--docs)
- [Панель массовых действий (MassActionsPanel)](https://guides.kontur.ru/components/actions/batch-actions/): Панель массовых действий предлагает набор команд, которые можно применить сразу к нескольким объектам, выбранным из списка [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/mass-actions-panel_massactionspanel--docs)

## Компоненты — Элементы выбора

- [Чекбокс (Checkbox)](https://guides.kontur.ru/components/selection-elements/checkbox/): Группа чекбоксов используется для выбора нескольких значений из списка [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-checkbox--docs)
- [Тогл (Toggle)](https://guides.kontur.ru/components/selection-elements/toggle/): Тогл переключает состояния. Например, включает или отключает уведомления в настройках [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-toggle--docs)
- [Радиокнопки (RadioGroup)](https://guides.kontur.ru/components/selection-elements/radio/): Группа радиокнопок используется для выбора одного значения из нескольких [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs)
- [Переключатель (Switcher)](https://guides.kontur.ru/components/selection-elements/switcher/): Переключатель — это замена группе радиокнопок [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_button-switcher--docs)
- [Раскрывающийся список (Select)](https://guides.kontur.ru/components/selection-elements/select/): Раскрывающийся список используется для выбора одного значения из заранее известного списка из 5 — 25 элементов [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-select--docs)

## Компоненты — Навигация

- [Табы (Tabs)](https://guides.kontur.ru/components/navigation/tabs/): Табы группируют контент и помогают в навигации [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-tabs--docs)
- [Пейджинг (Paging)](https://guides.kontur.ru/components/navigation/paging/): Способ представления большого количества однородной информации, когда контент разбивается на страницы [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-paging--docs)
- [Ещёкалка](https://guides.kontur.ru/components/navigation/eschekalka/): Ещёкалка показывает часть контента, а остальное подгружает по команде пользователя

## Компоненты — Попап-элементы

- [Хинт (Hint)](https://guides.kontur.ru/components/popup-elements/hint/): Хинт — это подсказка, появляющаяся при наведении на элемент [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-hint--docs)
- [Тултип (Tooltip)](https://guides.kontur.ru/components/popup-elements/tooltip/): Тултип — это подсказка, которую пользователь открывает сам, кликом по элементу [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-tooltip--docs)
- [Тост (Toast)](https://guides.kontur.ru/components/popup-elements/toast/): Короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-toast--docs)
- [Модальное окно (Modal)](https://guides.kontur.ru/components/popup-elements/modal/): Модальное диалоговое окно, появляющееся поверх основного содержимого страницы в ответ на действия пользователя [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-modal--docs)
- [Сайдпейдж (SidePage)](https://guides.kontur.ru/components/popup-elements/sidepage/): Модальное окно, которое открывается поверх основной страницы и занимает всю высоту окна браузера [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_overlay-sidepage--docs)

## Компоненты — Индикаторы прогресса

- [Спиннер (Spinner)](https://guides.kontur.ru/components/progress-indicators/spinner/): Индикатор выполнения операции, загрузки или обновления контента [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-spinner--docs)
- [Прогресс-бар](https://guides.kontur.ru/components/progress-indicators/progress-bar/): Индикатор процесса выполнения задачи с отображением прогресса
- [Глобальный лоадер (GlobalLoader)](https://guides.kontur.ru/components/progress-indicators/global-loader/): Индикатор процесса загрузки данных с сервера [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_display-data-globalloader--docs)

## Компоненты — Экраны

- [Приветственные страницы](https://guides.kontur.ru/components/screens/welcomepage/): Шаблоны приветственных страниц сервисов Контура
- [Страницы ошибок](https://guides.kontur.ru/components/screens/errorpages/): Шаблоны страниц для 400-х и 500-х ошибок
- [Шапка (Top bar)](https://guides.kontur.ru/components/screens/topbar/): Единая шапка сервисов Контура [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui-addons_topbar--docs)
- [Пустые состояния (EmptyState)](https://guides.kontur.ru/components/screens/emptystate/): Пустое состояние показывает, что на странице нет контента, и подсказывает пользователю доступные действия [Storybook](https://tech.skbkontur.ru/kontur-ui/?path=/docs/empty-state_emptystate--docs)
- [Подвал (Footer)](https://guides.kontur.ru/components/screens/footer/): Шаблон и описание единого подвала сервисов Контура

## Компоненты — Остальное

- [Центр поддержки](https://guides.kontur.ru/components/widgets/support-center/): Центр поддержки объединяет все каналы связи с Контуром и встраивается в продукт в виде виджета
- [Письма](https://guides.kontur.ru/components/widgets/letters/): Единый шаблон писем-рассылок Контура для уведомлений и новостных дайджестов

## Ресурсы — Библиотеки

- [Библиотеки](https://guides.kontur.ru/re/sources/library/): Библиотеки контролов, цвета и типографики для дизайнеров и сторибук для фронтендеров
- [Шаблоны](https://guides.kontur.ru/re/sources/templates/): Готовые шаблоны сервисов Контура с консистентной структурой и единым стилем
- [Интерфейсные иконки](https://guides.kontur.ru/re/sources/icons/): Набор интерфейсных иконок Контура и рекомендации по их использованию
- [Логотипы](https://guides.kontur.ru/re/sources/logos/): Логотипы Контура и продуктов, правила их использования и файлы для скачивания
- [Иконки продуктов](https://guides.kontur.ru/re/sources/icons-products/): Иконки продуктов Контура для списков сервисов, favicon и иконок мобильных приложений

## Optional

- [Kontur UI в Storybook](https://tech.skbkontur.ru/kontur-ui/): документация React-компонентов Контура
- [Брендбук Контура](https://kontur.ru/brandbook): фирменный стиль