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