Стандартный чёрно-белый QR-код функционален, но скучен. Кастомизация помогает вписать код в брендинг и повысить вовлечённость. Однако любое изменение влияет на читаемость. В этой статье — как кастомизировать QR без потери надёжности распознавания. Создать QR можно в QR Generator на reChecker. Бизнес-сценарии и типы кодов — в QR-коды для бизнеса.
Баланс дизайна и читаемости
QR-код содержит избыточность (коррекция ошибок Реда–Соломона). До 30% модулей можно повредить или изменить — код останется читаемым. Это даёт пространство для дизайна, но не безграничное. Каждый эксперимент нужно проверять сканированием.
Принципы:
- Тестируйте — несколько устройств, разные условия освещения
- Сохраняйте контраст — разница между тёмным и светлым должна быть достаточной
- Не трогайте угловые маркеры — они критичны для ориентации
- Используйте высокий уровень коррекции — H (30%) даёт больше свободы для изменений
Структура QR-кода
Три угловых маркера (finder patterns) — квадраты в углах. Они позволяют декодеру определить ориентацию и масштаб. Область выравнивания (alignment pattern) в центре — для крупных кодов. Область данных — остальная матрица. При кастомизации не затрагивайте finder patterns и zone of silence (белую рамку).
Уровни коррекции ошибок
| Уровень | Восстановление | Применение |
|---|---|---|
| L | 7% | Минимальные изменения |
| M | 15% | Стандарт, лёгкая кастомизация |
| Q | 25% | Логотип в центре |
| H | 30% | Максимальная кастомизация |
Для кодов с логотипом или цветовой кастомизацией выбирайте уровень H. Он увеличивает плотность матрицы — при малом размере печати может снизить читаемость. Тестируйте итоговый результат.
Цвета
Инверсия
Белый QR на тёмном фоне работает так же, как чёрный на светлом. Важно сохранить контраст: тёмные модули должны чётко отличаться от светлых. Рекомендуемый контраст — минимум 4:1.
Брендовые цвета
Замена чёрного на цвет бренда (синий, зелёный, красный) обычно не влияет на распознавание. Камеры обрабатывают контраст, а не абсолютные цвета. Избегайте:
- Светлых цветов для тёмных модулей (низкий контраст с белым)
- Тёмных цветов для светлых модулей
- Пары цветов с похожей яркостью
Градиенты
Градиенты рискованны: переход от тёмного к светлому может «смазать» границы модулей. Если используете — делайте градиент слабым и проверяйте на разных устройствах.
Логотип в центре
Центральная область QR менее критична для декодирования. Логотип до 25–30% площади кода при уровне H обычно не мешает. Рекомендации:
- Размер — не более 30% от размера кода
- Фон — белый или светлый, контрастный с модулями
- Форма — квадрат или круг, без тонких линий
- Позиция — центр, без перекрытия угловых маркеров
Плохо читаемые коды часто связаны с чрезмерно большим логотипом или низким контрастом.
Форма модулей
Стандартные модули — квадраты. Альтернативы:
Скруглённые углы
Модули со скруглёнными углами выглядят мягче. При умеренном скруглении читаемость сохраняется. Сильное скругление может сливать соседние модули.
Круги и точки
Модули в виде кругов — популярный приём. Работает при достаточном размере и контрасте. Мелкие точки на малой печати хуже распознаются.
Специфичные формы
Сердечки, звёзды и т.п. — рискованно. Декодеры ожидают определённую геометрию. Экспериментируйте только с тестированием.
Обрамление и контекст
Рамка
Тонкая рамка вокруг QR визуально отделяет код от фона. Не путать с зоной тишины — рамка не должна заходить в область, необходимую для распознавания. Оставьте минимум 4 модуля белого пространства между кодом и любыми элементами.
Текст и призыв
«Отсканируйте для скидки» или «Узнайте больше» повышают конверсию. Размещайте текст вне зоны тишины, шрифт должен быть читаемым на целевом носителе.
Интеграция в макет
QR может быть частью плаката, визитки, упаковки. Согласуйте цвета с общим дизайном, но не жертвуйте контрастом.
Форматы вывода
| Формат | Применение |
|---|---|
| PNG | Веб, экраны, печать при высоком разрешении |
| SVG | Масштабирование без потери качества |
| Печать, векторный вывод | |
| EPS | Профессиональная печать |
Для печати используйте разрешение минимум 300 DPI. Векторные форматы (SVG, PDF) предпочтительны для крупных носителей.
Типичные ошибки
- Слишком маленький размер — на визитке 1.5×1.5 см код может не читаться
- Низкий контраст — серый на светло-сером не сработает
- Нарушение зоны тишины — текст и графика вплотную к коду
- Изменение угловых маркеров — декодер не определит ориентацию
- Чрезмерная кастомизация — «красиво» не должно ломать функциональность
Чек-лист перед печатью
- Уровень коррекции H при кастомизации
- Контраст достаточный (4:1 и выше)
- Зона тишины сохранена (4+ модуля)
- Угловые маркеры не изменены
- Логотип не более 30% площади
- Тест на 3+ устройствах
- Разрешение для печати 300 DPI и выше
Создать и кастомизировать QR-код можно в QR Generator на reChecker. Сценарии применения в бизнесе — в статье QR-коды для бизнеса.
Инструменты для кастомизации
Онлайн-платформы (QR Generator, QR Code Generator) предлагают визуальный редактор: выбор цвета, размер, добавление логотипа. Для программной генерации — библиотеки: qrcode (Node.js), python-qrcode, phpqrcode. Они позволяют задавать цвета, уровень коррекции ошибок и форму модулей.
Печать и материалы
Для печати на визитках и буклетах минимальный размер — 15×15 мм. Для наружной рекламы (билборды, витрины) — от 200×200 мм. На глянцевых поверхностях используйте матовую ламинацию или выбирайте угол без бликов.
Анимация
Некоторые генераторы поддерживают анимированные QR (APNG). Практическая польза ограничена: не все сканеры корректно обрабатывают анимацию, отвлекает внимание. Используйте только для специальных кампаний с тестированием.
Резюме
Кастомизация QR должна сохранять читаемость. Цвета, логотип и форма модулей — допустимы при соблюдении контраста и зоны тишины. Тестируйте на реальных устройствах перед массовой печатью.