Визуальные элементы

Скриншот

Скриншоты используются, чтобы:

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

Скриншоты не используются для примеров:

• кода;
• простых диалоговых окон, например выпадающего списка с 2–3 пунктами;
• окон подтверждения, текстов сообщений, индикаторов загрузки, приветственных окон и таблиц.

Требования к скриншотам

Общие требования:

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

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

Оформление надписи:

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

❌	✅

Карусель изображений

Карусель используется, чтобы показать вариативность, например:

• точек входа;
• расположения одного и того же интерактивного элемента на странице.

Пример

Чтобы настроить таблицу:

1. Нажмите .

1 из 2

Настройка таблицы списка палет

2. Внесите изменения.
3. Нажмите Сохранить.

Карусель не используется для визуализации алгоритма действий.

Обычно карусель размещается после маркированного списка или пункта такого списка.

Плашка

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

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

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

Голубая

Голубая плашка используется для дополнительной информации, которая может повлиять на действия пользователя. Если пользователи часто сталкиваются с какой-то проблемой, информацию о ней или её решение можно вынести в плашку как подсказку.

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

Жёлтая

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

Красная

Красная плашка используется для описания запретов системы или рисков, которые необратимо изменят систему для пользователя или помешают использовать её.

Таб

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

• одного процесса для разных операционных систем: iOS, Android;
• одинаковых действий для десктопной и мобильной версии;
• одинаковых действий для разных способов доставки: курьером или почтой.

Аккордеон

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

Пример

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