Бланки и образцы документов
Бланки и образцы документов нужны, чтобы помочь пользователю разобраться, как заполнять отчеты и прочие документы. Бланки — это формы для заполнения. Если официально утвержденной формы нет, а есть, например, перечень рекомендованных реквизитов, мы используем выверенные экспертами образцы.
Виды
Подготовка бланка — от предзаполнения до публикации
Подготовка бланка или образца документа — это задача редактора, выпускающего статью. Эта инструкция поможет сделать качественное изображение без участия дизайнера.
Шаг 1. Заполните нужные данные
Даем бланки и образцы документов в статье предзаполненными: это послужит дополнительной подсказкой для пользователя. Заполняйте данные в редакторе, если есть такая возможность. Например, если бланк в pdf, word, exсel или любом редактируемом формате.
Не используйте реальные данные организаций и людей. Если нужно показать ИНН, КПП, телефон — используйте данные Контура или воспользуйтесь одним из генераторов фейковых данных:
- Разработка Контура, в нем можно сгенерировать учетные данные: ИНН, КПП, ОКПО, ОГРН и др.
- Сторонняя разработка, ее используют наши тестировщики. В этом сервисе можно сгенерировать личные данные (ФИО, дату рождения, телефон, электронную почту), данные об образовании, автомобиле, платежную информацию и пр.
Шаг 2. Сохраните документ в pdf-формате и конвертируйте в jpg
Бланки и образцы чаще всего создают из текстовых или табличных документов на компьютере или в браузере. Это word, excel и их аналоги из гугл-документов.
Сделать скриншот всей страницы в гугл-документах получится только через Mozilla Firefox. Но есть несколько нюансов: на скриншоте всегда будет интерфейс редактора, и вы не сможете использовать изображение сразу после сохранения. Потребуется кадрировать его под размер страницы документа. Это трудозатратно, когда речь идёт о многостраничном файле. Поэтому способ, описанный в разделе «Скриншоты», здесь не подойдет.
Из десктопных программ скриншот хорошего качества тоже не снять, особенно если нужно уменьшать масштаб, чтобы образец вошёл на экран полностью.
Поэтому мы сохраняем документ в pdf-формате и конвертируем его в jpg.
Как скачать файл из гугл-документов. Выберите «Файл» → «Скачать» → «Документ PDF»
Как скачать файл из word/excel. Нажмите «Файл» → «Сохранить как» → выберите папку на компьютере и тип файла → кликните «Сохранить».
- Нажмите «Файл» → «Сохранить как» → Откройте нужную папку на компьютере;
- Ведите Имя файла и выберите Тип «PDF*.pdf»;
- Нажмите «Сохранить».
Как конвертировать файл из pdf в jpg. Мы рекомендуем использовать smallpdf.com и convertio.co. В других сервисах, которые мы тестировали, картинка получается менее качественной. Вот как конвертировать файл через smallpdf.com.
Если файл многостраничный, сохраните каждую страницу как отдельное изображение.
Шаг 3. Правильно кадрируйте
Если вы хотите показать не весь документ, а только его часть, вам понадобится кадрирование.
По возможности сохраняйте охранные поля при кадрировании. Это поможет изображению выглядеть хорошо, если в будущем вы захотите применить стиль картинок по умолчанию.
Перед снятием скриншота проверьте, что на него не попадут вспомогательные элементы и лишние данные.
Если нужно снять часть формы и нет возможности оставить охранные поля, кадрируйте в края.
Шаг 4. Постобработка и добавление акцентных элементов
Если вам нужно отредактировать предзаполненный бланк или сфокусировать внимание читателя на конкретных полях и данных, отредактируйте изображение в фигме, используя сет акцентных элементов.
Виды акцентных элементов:
- Маркерное выделение.
- Текст для образца заполнения.
- Текст для дополнительных подписей — когда нужно уточнение поверх формы или таблицы.
- Стрелки.
- Квадратные выделения.
- Обводка от руки.
- Цифры.
Не злоупотребляйте акцентными элементами: они перекрывают изображение и делают его шумным.
Маркерное выделение и подчеркивание
Используйте маркерное выделение, когда вам нужно сфокусировать внимание на тексте в бланке или образце заполнения.
Подчеркивание не подходит, когда мы выделяем несколько строк текста подряд. В этом случае вместе с текстом такое выделение создает много параллельных линий и и образует чересполосицу.
Текст для образца заполнения
Используйте, когда нужно показать, как заполнить бланк или ввести другие данные.
Не закрашивайте данные и размывайте часть изображения. Это делает бланки и образцы неаккуратными и менее понятным. Скрыв часть информации, вы лишаете пользователя нужной информации. Кроме того, читатель может подумать, что там находятся реальные данные.
Текст для дополнительных подписей
Используйте, когда нужно уточнение в виде текста поверх формы или таблицы.
Квадратная обводка
Используйте, когда нужно показать область на бланке, конкретный объект или несколько объектов.
Шаг 5. Выберите формат и оптимизируйте вес
В идеале вес иллюстрации не должен превышать 250 Кб. Большие иллюстрации могут медленно загружаться, особенно в статьях, где их много. Не используйте иллюстрации в формате BMP, TIFF. Такие файлы весят в 10 раз больше, чем аналогичные в других графических форматах. Рекомендуем использовать PNG.
Приложение для оптимизации графики
Запись летучки про оптимизацию графики
Шаг 6. Вставьте в статью. Настройте размер и стиль
Вставка
Для вставки картинки в статью мы рекомендуем использовать макрос. Выберите в админке в редакторе статьи блок «Вставка макроса — Img».
В появившемся лайтбоксе настройте параметры картинки.
Размер
Старайтесь, чтобы картинки в одной статье были одной ширины или нескольких вариантов. Статья, где все картинки разного размера, выглядит шумно и хаотично.
Ширина контентной области в статьях — 709 px (8 колонок). Все картинки, ширина которых больше этого значения, будут встраиваться в 709 px. Поскольку мы готовим картинку для ретины, размер ее должен быть в 2 раза больше — 1418 px.
Если бланки и образы документов с большим количеством деталей, то следует размещать его во всю ширину страницы (12 колонок), т.е. выходить за границы текста.
Чтобы сделать картинку большой, в лайтбоксе поставьте галочку «Сделать больше ширины текста».
Подробнее обо всех размерах графики в статье.
Стиль
Скругления и тени. Рекомендуем использовать этот стиль для всех бланков и образцов документов. Бланки имеют белый фон, поэтому тень и скругление хорошо отделяют их от фона статьи.
Без стиля. Если у вас скрин таблицы по границам ячеек или часть большой формы, стили не нужны. Они сделают иллюстрацию грязной и неаккуратной.
Выше были описаны только стили используемые в бланках и образцах. Все стили справочной подробно разобраны в статье.
Чтобы задать картинке стиль, в лайботксе выберите нужный из списка.
