Компоненты

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

1050px-Adobe_XD_CC_icon.svg

Поле ввода

Устройство компонента
Текст описания поля ввода располагается над полем действия. Он включает заголовок, подсказку и знак обязательного ввода (опционально).

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

Текстовое поле

Устройство компонента

Заголовок текстового поля располагается над ним. Само поле включает заголовок, подсказку и знак обязательного ввода (опционально).

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

Селектор

Устройство компонента

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

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

Визуализация состояния «выбор» зависит от браузерной системы в которой работает пользователь. Таким образом данный компонент адаптируется в привычный для пользователя интерфейс, и не отвлекает от действия.

Чекбокс

Устройство компонента

Чекбоксы используются как в списках, так и отдельно, для увеличения функциональности контента. Чекбокс состоит из контейнера и текстового описания (ссылки). 

Реакция компонента
Компонент чекбокс — имеет 5 состояний. Основное назначение чекбоксов — это возможность выбора пользователем нескольких опций из предложенного списка. 

Радио-кнопка

Устройство компонента
Радиокнопки используются как в списках, так и отдельно, для увеличения функциональности контента. Она состоит из контейнера и текстового описания (ссылки). 

Реакция компонента
Радиокнопка — имеет 5 состояний. В отличие от чекбокса радио-кнопка позволяет сделать уникальный выбор из предложенного списка. Она применяется, когда необходимо ограничить возможность выбора пользователя.

Кнопки

Устройство компонента
Компонент состоит из фигуры и текста внутри нее. Основная кнопка используется с заливкой, второстепенная – с рамкой, мимикрическая — зависит от контента внутри которого находится. Например, кнопка в компоненте Нотификаторы является мимикрической, так как ее стили зависят от окружения.

Основная кнопка
Основная кнопка необходима для обозначения ключевого действия на странице. В одной видимой области страницы сайта возможно использование только одной основной кнопки (прим. Видимая область — текущая часть страницы на которой находится пользователь. Ее размер зависит от параметров окна браузера). Возможно повторное воспроизведение кнопки на странице в случае появления диалогового окна, модального контейнера, или в форме обратной связи.

Второстепенная кнопка
Используется, когда компонент не должен привлекать повышенного внимания пользователя, а также в случае, если расположение классической ссылки не возможно. Второстепенная кнопка — «спасательный круг» для поддержания функциональности контента. 

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

Ссылки

Устройство компонента
Ссылка состоит из текстовой части слева и иконки справа (опционально). Компонент имеет 4 различных типа.

Тип 1 — классическая ссылка с иконкой стрелки, используется для перехода внутри сайта на следующую (внутреннюю) страницу. 

Тип 2 — ссылка с иконкой «перехода на внешний ресурс». Часто используется на одной линии с Основной кнопкой. Например, возможность забронировать встречу с менеджером AxxonSoft (ITV Group) — «book a meeting» требует повышенного внимания, по сравнению с получением электронного билета на стороннем ресурсе «Register». Поэтому локус внимания пользователя в первую очередь обращен на кнопку, и только потом на ссылку.

Тип 3 — ссылка «спойлер» с иконкой стрелки направленной вниз, используется для раскрытия скрытой части контента.

Тип 4 — классическая ссылка, используется в текстовых блоках. Данный тип позволяет выделить большую часть текста ссылкой. 

Компонент «ссылка» — имеет 5 состояний. Все состояния подходят для всех типов ссылок.

Контейнер Лента

Устройство компонента
Это интерактивный компонент модульной системы. Состоит из картинки (16:9), тега, заголовка, описания и ссылки (опционально). Размерность компонента 3/4 от 4-колоночного модуля. Высота компонента не фиксированная, поэтому ее ограничение зависит от размера строк текста в компоненте.

Заголовок должен быть не более 2 строк, параграф описания — не более 3 строк (≈ 120 символов).

Контейнер Блок

Устройство компонента
Это интерактивный компонент модульной системы. Состоит из картинки (16:9), тега, заголовка и ссылки (опционально). Размерность компонента 1/4 от 4-колоночного модуля. Заголовок должен быть не более 3 строк (≈ 62 символа).

Хелперы

Реакция и устройство компонента
Компонент состоит из иконки, заголовка, ссылки и горизонтальной линии. На одной странице возможно использование нескольких хелперов. Компоненты используются на страницах с большим количеством текста. Основное назначение — предоставить (или скачать) дополнительную информацию по теме. Хелпер располагается всегда слева в пределах контейнера (никогда не перекрывает главное меню, и футер) с высоким Z-индексом, и следует за пользователем в пределах видимости экрана и логики контента. 

Нотификаторы

Реакция и устройство компонента
Данный компонент — это отдельный контейнер. Строится по принципу уведомления для привлечения внимания и состоит из фона, заголовка, описания, Мимикрической кнопки и поддерживающей графики, и кнопки «закрыть». Нотификатор располагается поверх страницы с максимальным Z-индексом. Никогда не перекрывает текстовую область в главном модуле (main-content 1140 px), а располагается за ее пределами. Назначение нотификатора — привлечь внимание пользователя к новой информации.

В дальнейшем будет описано несколько типов данного компонента.

Раздел в процессе наполнения…