Для дизайн-ревью снимите всю страницу в режиме Вся страница, отметьте места, по которым вам нужен отзыв, и поделитесь PDF, который ревьюеры читают постранично. В OpenScreenShot инструмент Spotlight затемняет всё за пределами обсуждаемой области, а Текст и Стрелка добавляют выноски. Используйте Снимок элемента, когда ревью касается одного компонента, например карточки, графика или таблицы.
Подготовить страницу к ревью шаг за шагом
- Откройте страницу при той ширине окна, которую хотите проверить. Снимок показывает макет при текущей ширине, поэтому для проверки другой точки перелома сначала измените размер окна.
- Прокрутите страницу один раз, чтобы загрузились отложенные изображения, затем вернитесь наверх. Закройте баннеры cookie и виджеты чата, которые не относятся к ревью.
- Нажмите на значок OpenScreenShot. С настройками по умолчанию он запускает съёмку Вся страница. Не уходите с вкладки, пока не откроется редактор.
- Проверьте первый и последний разделы, шапку и все области с движением, например карусель.
- Выберите Spotlight (
O) и проведите по каждой области, на которую должны посмотреть ревьюеры. Несколько вырезов сливаются в один затемняющий слой. - Добавьте заметку Текст (
T) рядом с каждой областью и Стрелка (A) там, где заметка должна указывать на мелкую деталь. - Нажмите Сохранить изображение, чтобы открыть диалог Экспорт. Выберите PDF и выполните шаги экспорта ниже.
Снять один компонент
Нажмите на страницу правой кнопкой, откройте подменю OpenScreenShot и выберите Снимок элемента. Наведите курсор на компонент, пока он не будет обведён, затем нажмите на него или Enter, чтобы снять его границы. Нажмите ↑, чтобы выбрать родительский элемент, например раздел, в котором лежит карточка, и ← или →, чтобы перейти к соседнему.
Снимок элемента даёт плотное изображение без ручной обрезки, что удобно для сравнения двух версий одного компонента. Если элемент не полностью виден на экране, выбор элемента предлагает вместо этого снимок всей страницы.
Отмечайте отзывы так, чтобы ревьюеры могли их понять
Вырезы spotlight бывают прямоугольными, скруглёнными прямоугольными или эллиптическими. Используйте одно изображение со spotlight на одну тему: на изображении с множеством подсвеченных областей ревьюерам приходится гадать, какая заметка к какой области относится. Для нумерованных отзывов ставьте Номер шага (S) в каждой точке и ссылайтесь на номера в обсуждении ревью. Номера считают сами и перенумеровываются, когда вы удаляете один из них.
Инструмент Фигура (R) обводит область, не затемняя остальную страницу. Инструмент Стрелка предлагает заполненный, открытый, двойной и точечный наконечники, а её средний маркер можно потянуть, чтобы изогнуть стрелку вокруг другого содержимого.
Поделиться ревью в PDF
В диалоге Экспорт выберите PDF, выберите A4 или Letter в Размер страницы и включите Разбить на несколько страниц. Соседние страницы перекрываются на 5 мм, поэтому строка текста на границе страниц видна на обеих. Выберите Целиком в Размер страницы, чтобы оставить страницу одной высокой страницей PDF для чтения на экране.
PDF хранит скриншот как изображение вместе с вашими аннотациями. Выделяемого текста в нём нет. Руководство по сохранению скриншота в PDF сравнивает варианты раскладки, а справка по экспорту перечисляет другие форматы.
Ограничения снимка всей страницы
Снимок всей страницы фиксирует страницу в том виде, в каком она отрисовывается, пока расширение её прокручивает. Часть содержимого меняется во время прокрутки:
- Фиксированная шапка снимается на первой плитке и один раз добавляется сверху. Проверьте, что другие закреплённые элементы, например боковые или нижние панели, оказались там, где вы ожидаете.
- Изображения, которые загружаются только при появлении в зоне видимости, могут выглядеть пустыми блоками, если съёмка дойдёт до них раньше. Прокрутите страницу перед съёмкой.
- Карусели, анимации, живые счётчики и бесконечные ленты могут меняться между плитками. Остановите их или снимите вместо этого важную область.
Страница выше 32 000 физических пикселей сохраняется в виде не более чем шести изображений, каждое в своей вкладке редактора. Руководство по скриншотам всей страницы содержит больше советов по устранению проблем. О скриншотах для справочных статей см. скриншоты для документации.