Скриншот — единственный тип изображения, который читатель разглядывает по-настоящему: он ищет на нём кнопку. Разбираем, как его к этому подготовить.
Коротко
- Снимок нужен там, где есть действие.
- Персональные данные скрывают всегда.
- Выделять одно место, а не пять.
- Интерфейсы меняются — снимки устаревают.
Когда скриншот нужен
Помогает
- Показываете, где нажать
- Объясняете непонятную настройку
- Демонстрируете результат
- Показываете, как выглядит отчёт
- Доказываете, что так бывает
Мешает
- Снимок всего экрана вместо блока
- Очевидное действие
- Десять снимков подряд без текста
- Интерфейс, который уже изменился
- Картинка вместо объяснения
Первая строка правой колонки портит инструкции чаще всего. На снимке всего экрана нужная кнопка занимает несколько пикселей: читателю приходится искать её глазами, а он пришёл, чтобы не искать.
Как снимать
Снимать нужный блок
Не весь экран.
Оставлять ориентиры
Заголовок раздела, соседнее меню.
Держать одинаковый масштаб
Во всей серии.
Убирать лишние окна
Уведомления и закладки.
Снимать в типичном состоянии
Не с пустыми таблицами.
Проверить на телефоне
Читаются ли подписи в интерфейсе.
Второй шаг определяет, сориентируется ли читатель. Вырезанная кнопка без окружения не отвечает на вопрос «где это искать»: нужен хотя бы заголовок раздела, чтобы читатель нашёл то же место у себя.
Что обязательно скрыть
| Что | Почему |
|---|---|
| Имена и телефоны клиентов | Персональные данные |
| Адреса электронной почты | То же |
| Ключи, токены, пароли | Попадут в индекс |
| Внутренние адреса и идентификаторы | Лишняя информация о системе |
| Суммы по клиентам | Коммерческая тайна |
| Данные из чужих аккаунтов | Не ваши, чтобы публиковать |
Замазывать нужно поверх файла, а не средствами страницы. Чёрный прямоугольник, наложенный вёрсткой, убирается в браузере за секунду; размытие в некоторых случаях тоже восстанавливают. Надёжно — закрасить в редакторе и сохранить заново, проверив результат на итоговом файле.
Как выделять важное
| Приём | Когда уместен |
|---|---|
| Рамка вокруг элемента | Основной способ |
| Стрелка | Когда нужно указать направление |
| Номера на снимке | Если шагов несколько |
| Затемнение остального | Когда интерфейс перегружен |
| Подпись прямо на снимке | Короткая, одна |
Одно выделение на снимок. Пять рамок разного цвета означают, что на одном изображении показано пять вещей — проще разрезать его на несколько снимков, каждый со своим шагом.
Чужие интерфейсы и чужие сайты
| Случай | Как поступать |
|---|---|
| Свои системы и кабинеты | Свободно, скрыв данные |
| Публичный интерфейс сервиса в инструкции | Обычная практика, с указанием сервиса |
| Страница конкурента как пример | Лучше описать словами или нарисовать схему |
| Пачка чужих страниц для обзора | Не стоит |
| Кабинет клиента | Только с его разрешения |
Снимок чужой страницы — это копия чужого оформления и текста. Показать, как выглядит настройка в публичном сервисе, — обычная практика; собрать разбор из десяти скриншотов чужих сайтов — другое дело. Там, где можно обойтись схемой или описанием, надёжнее обойтись ими, а спорные случаи обсудить с юристом.
Что делать с устаревшими снимками
Записать, где какие скриншоты
Иначе не найдёте.
Не привязывать текст к точному виду
«Кнопка справа внизу» устаревает.
Проверять инструкции по расписанию
Раз в полгода.
Обновлять сразу после изменения
Пока помните, что менялось.
Ставить дату проверки
Читатель поймёт, насколько свежо.
Устаревший скриншот хуже отсутствующего. Читатель не находит показанного у себя и решает, что делает что-то не так, — а инструкция просто отстала. Про обновление материалов — в статье о том, как обновлять старые статьи.
Частые вопросы
Что снимать — весь экран или блок?
Блок с ориентирами: заголовком раздела или соседним меню. На снимке всего экрана нужная кнопка занимает несколько пикселей.
Как правильно скрывать данные на скриншоте?
Закрашивать в редакторе и сохранять файл заново. Прямоугольник, наложенный вёрсткой, убирается в браузере за секунду.
Можно ли публиковать скриншоты чужих сайтов?
Снимок публичного интерфейса в инструкции — обычная практика. Разбор из десяти скриншотов чужих сайтов лучше заменить схемами и описанием, а спорные случаи обсудить с юристом.
Что делать с устаревшими скриншотами?
Проверять инструкции по расписанию и не привязывать текст к точному расположению элементов. Устаревший снимок хуже отсутствующего.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
