Визуальная проверка: колонки, текст и фотографии на разных экранах
Отсутствие переполнения не гарантирует удобного чтения. Перед публикацией изменений проверьте пропорции, длинный контент и взаимодействия.
Шесть повторяемых проверок
Выберите типовые страницы
Проверьте главную, категорию, статью, услугу, форму и таблицу. Включите длинный заголовок, язык с письмом справа налево и несколько фотографий.
Сравните колонки
Проверьте ширины 320, 390, 768, 1280, 1440 и 1920 px. Оцените выравнивание, порядок чтения и интервалы. Не скрывайте дефекты с помощью скрытого переполнения.
Увеличьте текст
Проверьте текст при 200 % и перестроение при ширине 320 CSS-пикселей. Информация и элементы управления должны оставаться доступными; таблицы могут прокручиваться отдельно.
Проверьте фотографии
Проверьте кадрирование, сюжет, размеры и автора. Фото не должно растягиваться по высоте соседнего текста. Описывайте видимое и обозначайте снимки из фотобанка.
Проверьте взаимодействия
Используйте клавиатуру для меню, фильтров, вопросов и форм. Проверьте фокус, ошибки и сохранение ввода, не отправляя реальный запрос.
Сохраните доказательства
Запишите URL, язык, ширину, браузер, дефект и результат исправления. Дополните лабораторные измерения данными пользователей при достаточном объёме трафика.
Протокол проверки
- URL и язык
- Экран и масштаб
- Дефект и снимок экрана
- Исправление и результат повторной проверки
Рабочая методика, а не подтверждение соответствия. Адаптируйте объём проверки и документируйте исключения.
Перед публикацией: шесть проверок функций
- Пройти меню, ссылки, загрузки и переключение языка; проверить фактический адрес назначения.
- Использовать вымышленные данные: пустые поля, неверные адреса, разные алфавиты и длинные тексты.
- Проверить, что ошибки называют поле, доступны с клавиатуры и сохраняют полезный ввод.
- Проверить и серверную валидацию: ограничения браузера можно обойти.
- Отличать подтверждение приёма от фактической доставки; использовать разрешённый тестовый адрес.
- Проверить работу без JavaScript, отказы и повторные действия; не включать секреты в доказательства.
Ситуации и подходящие проверки
На небольшом экране прокручивайте таблицу по горизонтали. При работе с клавиатурой переведите фокус на таблицу и используйте стрелки.
| Ситуация | Что это означает | Полезная проверка |
|---|---|---|
| Элемент управления исчезает при увеличении текста до 200 %. | Задача перестаёт быть доступной после увеличения. | Адаптировать макет и проверить с клавиатурой. |
| Фото растягивается или оставляет большой пробел на компьютере. | Пропорции нарушают баланс соседнего содержимого. | Проверить ограничения размеров и порядок чтения. |
| overflow: hidden обрезает таблицу. | Данные скрыты. | Добавить таблице собственную прокрутку с клавиатуры и перенос текста в ячейках. |
| Переведённый заголовок обрезается. | Проверки одного языка недостаточно. | Проверить длинные строки, языки RTL и реальное переключение языка. |
Вымышленный пример
Вымышленная страница услуги выглядит правильно при 1 440 пикселях. При 320 длинный перевод заголовка обрезается; при увеличении текста до 200 % элемент FAQ становится недоступным.
Ограничьте фото, разрешите сжатие колонок и перенос текста. Повторите задачу при 320, 390, 768 и 1 440 пикселях с увеличением текста и клавиатурой. Зафиксируйте оставшиеся дефекты и проверьте исправления.
Критерии приёмки
- Информация и элементы управления читаемы при представительных ширинах и языках.
- Увеличение текста и клавиатура позволяют завершить задачу.
- Записаны версия, браузер, язык и результаты повторной проверки.
Практические вопросы
Достаточно ли снимка экрана?
Нет. Он показывает одно состояние. Проверьте длинный контент, клавиатуру, раскрытые, отфильтрованные и ошибочные состояния.
Есть ли универсальный размер шрифта?
Нет. Оцените читаемость, длину строк, масштаб и контраст. Размер сам по себе не гарантирует доступность и баланс.
Как понимать Core Web Vitals?
Пороги хорошего опыта: LCP ≤ 2,5 s, INP ≤ 200 ms и CLS ≤ 0,1 на 75-м процентиле. Они оценивают загрузку, взаимодействие и стабильность, но не заменяют визуальную проверку.
Нужен ли снимок для каждого возможного устройства?
Выберите основные типы страниц, полезные задачи и браузеры с обнаруженными различиями. Укажите пределы покрытия: несколько снимков не подтверждают работу всех устройств.
Как расставлять приоритеты исправлений?
Сначала устраните блокировку задач, скрытые данные и проблемы читаемости. Затем улучшайте пропорции, выравнивание и интервалы, проверяя работу других страниц.