Скриншоты

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

• Виды скриншотов
• Подготовка скриншота — от снятия до публикации
  • Шаг 1. Настройте разрешение монитора
  • Шаг 2. Заполните нужные поля
  • Шаг 3. Сделайте скриншот
  • Шаг 4. Правильно кадрируйте скрины
  • Шаг 5. Выполните постобработку
  • Шаг 6. Выберите формат и оптимизируйте вес
  • Шаг 7. Вставьте скрин в статью. Настройте размер и стиль

Виды скриншотов

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

• скриншоты интерфейсов сервисов Контура, в том числе адаптированных версий и мобильных приложений;
• скриншоты неконтуровких программ: Ехcel, Госуслуг, Личного кабинета налогоплательщика на сайте ФНС и пр.

Подготовка скриншота — от снятия до публикации

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

Шаг 1. Настройте разрешение монитора и масштаб в браузере

Качество скрина напрямую зависит от разрешения дисплея. 

В Windows. Перед началом работы проверьте разрешение в системных настройках:

1. Войдите «Пуск» → «Система» → «Дисплей».
2. Проверьте, что в разделе «Масштаб и макет» выставлены рекомендуемые масштаб и разрешение дисплея.

Mac OS. Перед началом работы проверьте разрешение в системных настройках:

1. Войдите «Системные настройки» → «Дисплеи».
2. Проверьте, что в миниатюрах разрешений выставлено разрешение «По умолчанию».

Помимо системных настроек, можно варьировать масштаб браузера. Вы можете сделать это через меню или одновременно зажав клавишу Ctrl на клавиатуре и крутя колесико мышки.

Используйте один и тот же масштаб браузера — 80% или 100% — для скриншотов в рамках одной статьи. Не делайте маленькие скриншоты отдельных элементов страницы в большем масштабе. Они увеличатся автоматически при выборе размера картинки в статье.

Шаг 2. Заполните нужные поля

Заполните данные в интерфейсе

Если на скриншоте есть поля — заполните их в интерфейсе сервиса. Это послужит дополнительной подсказкой для пользователя. Плюс если вы предзаполните данные до снятия скриншота, вам не потребуется постобработка и помощь дизайнера.

Подмените данные с помощью инспектора

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

Кроме того, данные можно менять с помощью плагинов для браузера, например, Edit Anything.

Не используйте реальные данные организаций и людей

Если нужно показать ИНН, КПП, телефон — используйте данные Контура или воспользуйтесь одним из генераторов фейковых данных:

1. Разработка Контура, в нем можно сгенерировать учетные данные: ИНН, КПП, ОКПО, ОГРН и др. 
2. Сторонняя разработка, ее используют наши тестировщики. В этом сервисе можно сгенерировать личные данные (ФИО, дату рождения, телефон, электронную почту), данные об образовании, автомобиле, платежную информацию и пр.

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

Шаг 3. Сделайте скриншот

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

1. Скриншоты получаются в 3 раза лучше, чем разрешение экрана.
2. Можно делать скриншот всей страницы, а не только видимой области.

Mozilla Firefox

Скриншот всей страницы

Способ 1. После закрытия панели разработчика вызовите контекстное меню, выберите «Сделать снимок экрана» → «Сохранить всю страницу».

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

Google Chrome

Шаг 4. Правильно кадрируйте скрины

Сначала полный скрин, потом детали

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

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

Выделяйте важное и подсвечивайте действия

Чтобы показать важное в интерфейсе, не обязательны стрелки и обводки. Вы можете подвести курсор к нужной кнопке, выбрать пункт меню, навести на ссылку, ввести данные в поле для заполнения, раскрыть выпадающий список. Элементы интерфейса изменятся, и пользователю станет понятно, как действовать. 

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

Базовые правила

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

Оставляйте достаточный отступ по краям от логотипа и других элементов интерфейса — примерно 10 px с каждой стороны. 

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

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

Шаг 5. Постобработка 

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

Мы подготовили сет акцентных элементов в Фигме и инструкцию, которая поможет самостоятельно наложить их на скриншот. Этот этап работы подробно разобран в разделе «Постобработка». 

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

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

Шаг 6. Выберите формат и оптимизируйте вес

Мы рекомендуем, чтобы вес иллюстрации не превышал 200-250 Кб. Большие иллюстрации могут медленно загружаться, особенно в статьях, где их много. Не используйте иллюстрации в формате BMP, TIFF. Файлы в таком формате в 10 раз больше весят, чем аналогичные файлы в других графических форматах. Рекомендуем использовать PNG.

Приложения для оптимизации графики

Запись летучки про оптимизацию графики

Шаг 7. Вставьте в статью. Настройте размер и стиль

Вставка

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

Полный вид макроса

Минимальный вид

Атрибуты

• url — Путь до картинки. Обязательный.
• style — Cтиль: interface, photo, border, none.
• description — Подпись под картинкой.
• alt — Альтернативный текст для SEO.
• wide — Выводить на всю ширину страницы.
• width — Ширина в пикселях.
• height — Высота в пикселях, отменяет ограничение 800 для скриншотов.

Размер

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

Ширина контентной области в статьях — 709 px (8 колонок). Все картинки, ширина которых больше этого значения, будут встраиваться в 709 px. Поскольку мы готовим картинку для ретины, размер ее должен быть в 2 раза больше — 1418 px. 

Если скриншот с большим количеством деталей, то следует размещать его во всю ширину страницы (12 колонок), т.е. выходить за границы текста. 

В таком случае не делайте картинку кликабельной — она уже большая. 

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

Рекомендуем использовать ширину 550 px, размер выгружаемой картинки 1100 px.

Рекомендуемая ширина скриншотов мобильных интерфейсов — 375 px.

Больше примеров в отдельной статье про размер графики.

Стиль

style=interface. Рекомендуем использовать его для скриншотов сервисов Контура. Они имеют белый фон, поэтому тень и скругление отделяют фон скриншота от фона статьи, где он размещен.

style=border. Используем для скриншотов чужих сервисов и программ. Например, модификаторов 1С, таблиц Excel, почтовых интерфейсов. 

Есть исключение. Бордер не нужен, если на скриншоте таблица или элемент интерфейса с понятными границами.

style=photo. Этот стиль только добавляет скругление картинкам. Подходит для скриншотов с фоном. Например, для частей интерфейсов, поставленых на серый фон.

style=none. Используем для псевдоинтерфейсов и если понимаем, что применение тени, скругления или бордера сделает иллюстрацию грязной и неаккуратной.

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