- PVSM.RU - https://www.pvsm.ru -
Устройство для снимка экрана на первых компьютерах (Command-Shift-3)
Если вы когда-либо делали хелп или мануал [1] для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.
Ведь кажется, что скриншот — это “секунда работы, Alt+PrintScreen и Ctrl+V!”. Некоторые клиенты удивляются, когда слышат, что скриншот в мануале может стоить и $2 и даже $5.
В этой статье я расскажу, как правильно делать скриншоты, почему это не просто “два клика” и какие подводные камни встречаются на пути неопытного скриншотера. Рассматривайте ее как чеклист или список практических советов для тех, кто документирует ПО. Надеюсь, это поможет вам избежать разочарований и порадовать юзеров красочными понятными картинками.
Главный принцип: пользователь должен знать, где располагается данная страница (диалог, меню), и понимать конечный результат действий. Текст стоит грамотно разбить на абзацы, заголовки должны отражать основные действия. А скриншоты нужны, чтобы облегчить поиск элементов и дать пользователю подтверждение, что он “на правильном пути”, то есть на его экране всё выглядит так же, как на скриншоте.
Настройка окружения. Выберите единый стиль окон и шрифтов в вашей ОС. Если интерфейс “резиновый”, определите ширину и высоту окна браузера или программы и не меняйте ее на протяжении съемки.
Лайфхак: Если вы случайно закроете окно, его размеры могут сброситься, и, скорее всего, вы не сможете их точно восстановить. Чтобы не “потерять” размеры, сделайте скриншот окна и всего экрана и обведите уголки окна красным, а потом установите полученный файл в качестве обоев рабочего стола.
Может, кто-нибудь знает более простой и изящный способ?
Подготовка данных. Наполните приложение примерами, приближенными к жизни и решающими конкретные пользовательские задачи. Можно продумать несколько случаев: простых, как “хеллоуворлд”, и посложнее, для продвинутых юзеров.
Желательно, чтобы имена объектов и настройки не менялись в пределах одного раздела. Например, в 1-й главе пользователь Ипполит создал заметку “Как готовить рыбу”. А во 2-й главе нужно рассказать о кастомизации заметок. Естественно, лучше рассказывать про то, как Ипполит применяет к уже созданной заметке красную заливку. Такой нехитрый подход напомнит пользователю о предыдущих действиях, а также обеспечит полноту картины.
Не забудьте наполнить вашу систему “реальными” читабельными данными, сделать предварительные настройки, подготовить шаблоны, сделать бэкапы и т.д.
Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.
Съемка. Тут все зависит от ваших инструментов, но основные рекомендации такие:
а. По возможности снимайте только значимые зоны интерфейса и делайте скриншот как можно компактнее. Так он и на лист А4 поместится, и будет иметь малый размер.
b. Как и при фотографировании, следите за композицией, не отрезайте части элементов по краям скриншота. Постарайтесь делать скриншоты одинаковой ширины и высоты в рамках одного примера.
c. Чтобы сэкономить время, делайте сразу серию скриншотов. На всякий случай можно сделать “лишние”, незапланированные скрины – вдруг пригодятся при переделках или редактировании.
Редактирование. Не всегда получается подготовить красивые и разнообразные данные, избежать опечаток или смоделировать определённую ситуацию (ошибка, выход из строя, большой денежный баланс). В таких случаях есть как минимум 2 выхода:
a. Править код и стили страницы в браузере (правый клик > Inspect element и поехали), если речь идет о веб-приложении.
b. Менять надписи, комбинировать блоки из разных скриншотов в графическом редакторе.
Лучше всего уметь и то, и другое и комбинировать эти подходы в зависимости от ситуации.
Хочу отметить, что хотя при редактировании можно добавить к скрину рамку, обрезанные края и тени, лучше это делать стилями в вашем редакторе справки.
Сохранение. Давайте скриншотам говорящие уникальные имена, придерживаясь определённого формата, например, general_settings_privacy. Лучше не использовать пробелы и прописные буквы, а также слишком длинные названия. Такой подход гарантирует универсальность и работоспособность при размещении онлайн-справки на различных серверах.
Хранить скриншоты лучше в облаке с поддержкой шаринга, тэгов и версионности. Для удобства поиска лучше разбить папку со скринами на подпапки, соответствующие структуре интерфейса программы.
Вставка в текст. Об этом — ниже, в разделе "Оформление [2]".
Проверка. Отложите законченный раздел, проверьте его на следующий день. А лучше дайте прочитать текст и посмотреть скриншоты тестировщику или дизайнеру.
Во многих HAT (Help Authoring Tools) есть встроенные модули для снятия скриншотов:
Чтобы показать динамические действия (например, тегирование текста, появление автоподсказки, меню), скриншотов и текста бывает недостаточно. Можно снять видеоролик-туториал [18], но это довольно затратно, да и весит больше, чем изображения. Лучше записать GIF-анимацию (пример [19]). Эти инструменты вам помогут:
Определите оптимальный формат [25] для ваших скриншотов. Если коротко, то:
Каждый скриншот должен иметь id, alt, title, номер в пределах раздела или главы.
Выберите ширину и высоту, разрешение:
Помните, что текст на скриншоте должен быть читабельным без увеличения.
Продумайте расположение скриншота относительно текста, выравнивание. Если ширина скриншота небольшая, то следует рационально использовать свободное место и настроить обтекание текстом слева или справа.
Чтобы показать динамику, можно сделать комбинированный скриншот:
Если вы вырезали часть окна, то можно показать обрезанный край с неровной кромкой или прозрачностью:
Важные элементы или мелкие детали можно увеличить, чтобы сделать акцент:
Для акцента можно также использовать выделение с помощью цвета – оставить цвет у целевого элемента (панели), а остальные обесцветить:
Добавьте рамки, тени, стрелки, подписи, размытие по вкусу. Главное – соблюдайте единообразие и придерживайтесь ваших стайлгайдов:
Используйте интерактивные элементы (для HTML):
Старайтесь не вставлять иконки и изображения кнопок в текст, так как высота строки может измениться и верстка будет выглядеть непрофессионально. Лучше подпишите кнопки и иконки цифрами на большом скрине или вставляйте иконки и кнопки в отдельный столбец таблицы.
Переиспользуйте стандартные компоненты (иконки, панели, диалоги). Хороший пример — Confluence Inclusions Library [34].
Разместите список основных иллюстраций (лучше — со ссылками на иллюстрации) после содержания или в конце мануала.
Если скриншот содержит слишком много данных, попробуйте заменить его прототипом, схемой, таблицей.
Если вы делаете мануал для мобильного приложения, скорее всего, у вас будет очень много скринов. Покажите навигацию между скринами [35]. Так пользователь легче поймет взаимодействие и переходы, даже не читая текст.
Делайте скрины для всех языковых версий ПО одновременно. Тогда при локализации справки вам не понадобится просить переводчика о дополнительных услугах, а техническому писателю не понадобится учить йиксбара, например.
А еще рекомендую прочесть эту статью [36] с очевидными, но полезными советами.
Правильные скриншоты улучшают любой хелп или мануал, делают их понятными и наглядными. А чтобы сделать правильные скриншоты, надо хорошо подготовиться и затратить немало единиц времени, внимания и энергии. Например, в нашей практике встречались непростые продукты, скриншоты которых стоили не обычные $1-2 за штуку, а $5 и даже $10.
А вообще, идеальный скриншот (и мануал в целом) — это тот, который не надо делать. При правильном подходе к UX и UI можно задействовать привычные и очевидные пользователю паттерны навигации и поведения, не нуждающиеся в описании и пояснении.
Будет круто, если в комментариях вы поделитесь своим опытом по поводу создания скриншотов. Инструменты, процесс, размеры, подписи, стили, хранение, автоматизация — интересны любые практические советы!
P.S: Спасибо за статью нашему гуру создания технической документации Александру Зинчуку
Автор: alconost
Источник [37]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/88503
Ссылки в тексте:
[1] хелп или мануал: http://alconost.com/services/help-authoring?utm_source=habrahabr&utm_medium=article&utm_campaign=own_article&utm_content=screenshots
[2] Оформление: #1
[3] Snagit: https://www.techsmith.com/snagit.html
[4] Shutter: http://shutter-project.org/
[5] Adobe Photoshop: http://www.photoshop.com/products/photoshop
[6] GIMP: http://www.gimp.org/
[7] Здесь: http://habrahabr.ru/company/devexpress/blog/106611/
[8] ImageMagic: http://www.imagemagick.org/
[9] Visio: https://social.technet.microsoft.com/forums/office/en-US/1d7ea768-921d-4036-be7e-0645f9091128/attach-a-screenshot-in-a-visio-diagram
[10] Dropbox: https://www.dropbox.com/en/help/1964
[11] Joxi: http://joxi.ru/
[12] LightShot: https://app.prntscr.com/ru/
[13] Awesome Screenshot: http://awesomescreenshot.com/
[14] Fireshot: http://getfireshot.com/
[15] Dr.Explain: http://www.drexplain.com/
[16] Help+Manual: http://www.helpandmanual.com/
[17] MadCap Flare: http://www.madcapsoftware.com/products/flare/
[18] видеоролик-туториал: http://alconost.com/services/video-production#tutorial?utm_source=habrahabr&utm_medium=article&utm_campaign=own_article&utm_content=screenshots
[19] пример: http://2.bp.blogspot.com/-Ro3ugPfmIgU/UdxtiiOuCkI/AAAAAAAABUU/ZxTANvY1Q48/s1600/spreadsheet.gif
[20] GifCam: http://blog.bahraniapps.com/gifcam/
[21] ScreenFlow: http://www.telestream.net/screenflow/overview.htm
[22] LICEcap: http://www.cockos.com/licecap/
[23] ImageOptim: https://imageoptim.com/
[24] RIOT: http://luci.criosweb.ro/riot/
[25] оптимальный формат: http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg-when-best-to-use
[26] отличный пост про анимацию: http://habrahabr.ru/post/251709/
[27] особенности скриншотов, сделанных на Retina: https://cloudup.com/blog/the-retina-screenshot-problem
[28] Help+Manual: http://www.helpandmanual.com/help/hm_ref_variables_condlevels.htm
[29] Scroll Versions: https://www.k15t.com/display/VSN/Variant+Management+and+Conditional+Content
[30] Flare: http://www.madcapsoftware.com/company/presscenter/aug2011.aspx
[31] Confluence: https://confluence.atlassian.com/display/Cloud/Displaying+Files+and+Images
[32] пример 1: http://www.drexplain.com/help/insert_image_from_file.php?ms=EQAAIBA=&mw=MjUw&st=MA==&sct=MA==
[33] пример 2: http://alt-web.com/Tutorials/tooltips-on-image-maps.html
[34] Confluence Inclusions Library: https://confluence.atlassian.com/display/DOC/Creating+your+Technical+Documentation+Space#CreatingyourTechnicalDocumentationSpace-inclusions
[35] навигацию между скринами: http://developer.android.com/design/patterns/navigation.html
[36] эту статью: http://www.hanselman.com/blog/TakingProperScreenshotsInWindowsForBlogsOrTutorials.aspx
[37] Источник: http://habrahabr.ru/post/255373/
Нажмите здесь для печати.