QR Code Generator Введение
QR-код на плакате или на странице интрасети — часть дизайна, и чёрно-белый квадрат редко в него вписывается. QR Code Generator позволяет изменить форму точек, цвета и угловые метки кода. Настройки находятся в сворачиваемых разделах под вкладками данных, и каждое изменение сразу отражается на изображении кода. В этой статье описаны разделы Фигура, Цвета, Corner Square, Corner Dots и Error Correction и приведены правила, при которых оформленный код остаётся читаемым.
При открытии веб-части все разделы свёрнуты. Чтобы развернуть раздел, щёлкните его название.
Оформление по умолчанию
Новая веб-часть начинает работу со следующим оформлением:
| Параметр | Значение по умолчанию |
|---|---|
| Форма точек | Квадратная |
| Цвет точек, угловых квадратов и угловых точек | Синий, #166aae |
| Цвет фона | Полностью прозрачный |
| Gradient | Выключен |
| Тип угловых квадратов и угловых точек | Квадрат |
| Error Correction | Quartile |
Фигура
Раздел Фигура задаёт стиль мелких точек, несущих данные. Шесть стилей показаны картинками, и щелчок по картинке выбирает стиль:
- отдельные круглые точки;
- скруглённый — соседние точки сливаются в линии со скруглёнными концами;
- фигурный — точки с двумя срезанными углами;
- фигурный скруглённый — то же с более плавными углами;
- квадратный — классический вид QR-кода;
- сильно скруглённый — линии с сильно скруглёнными концами.
Форма меняет только внешний вид кода. Закодированные данные и количество точек остаются прежними.
Цвета
Раздел Цвета содержит два средства выбора цвета:
- Цвет — цвет точек;
- Цвет фона — цвет области за кодом.
В каждом из них есть цветовое поле, ползунок оттенка и ползунок прозрачности, а под ними — поля Hex, Красный, Зеленый, Синий и Прозрачность для точных значений. Чтобы использовать фирменный цвет, вставьте его код в поле Hex.
Когда прозрачность параметра Цвет фона равна 100, у кода нет фона и он принимает цвет того, что находится под ним: раздела страницы, слайда, печатного листа.
Gradient
Установите флажок Gradient, чтобы вместо одного цвета залить точки переходом между двумя цветами. Появятся ещё два параметра:
- тип градиента — Linear (линейный), от левого края кода к правому, или Radial (радиальный), от центра к краям;
- Second Color — цвет, которым градиент заканчивается. Начинается градиент с цвета, заданного в параметре Цвет.
Градиент применяется только к точкам. Угловые квадраты и угловые точки сохраняют собственные цвета.
Corner Square и Corner Dots
В трёх углах каждого QR-кода расположены метки позиционирования, по которым сканер находит код и определяет его ориентацию. Метка состоит из внешней рамки и внутренней точки, и у каждой из них свой раздел.
Corner Square — внешняя рамка:
- Тип — Круг, Квадрат или Скругленный прямоугольник;
- Цвет — цвет рамки.
Corner Dots — внутренняя точка:
- Тип — Точка или Квадрат;
- Цвет — цвет точки.
📝 Заметка
Цвет точек в разделе Цвета не меняет метки. Чтобы перекрасить весь код, задайте один и тот же цвет в трёх местах: Цвета > Цвет, Corner Square > Цвет и Corner Dots > Цвет.
Error Correction
QR-код содержит избыточные данные, благодаря которым сканер может прочитать его, даже если часть кода загрязнена, повреждена или закрыта. Раздел Error Correction (коррекция ошибок) определяет, сколько избыточности добавляется.
| Уровень | Доля кода, которую можно восстановить | Когда использовать |
|---|---|---|
| Низкий | Около 7% | Длинные данные на чистом экране, когда код должен быть как можно более разреженным |
| Средний | Около 15% | Коды на экранах и на качественных отпечатках |
| Quartile | Около 25% | Значение по умолчанию; подходит для большинства кодов, включая коды с небольшим логотипом |
| Высокий | Около 30% | Коды с крупным логотипом и отпечатки, которые могут износиться |
Более высокий уровень делает код устойчивее и — при тех же данных — плотнее: ему нужно больше точек, и каждая точка становится мельче.
Как сохранить читаемость кода
Сканеру контраст и чёткие метки нужны больше, чем красота. Несколько правил уберегут оформленный код от сбоев:
- Тёмное на светлом. Точки должны быть заметно темнее фона. Светлый код на тёмном фоне читает не каждый сканер.
- Помните о прозрачном фоне. Код с прозрачным фоном принимает фон того места, где он используется. Синий код, читаемый на белой странице, исчезает на тёмном разделе или тёмном слайде. Если вы не знаете, где будет использоваться код, задайте непрозрачный светлый Цвет фона.
- Не делайте точки прозрачными. Ползунок прозрачности параметра Цвет снижает контраст так же, как бледный цвет.
- Проверяйте оба конца градиента. И Цвет, и Second Color должны контрастировать с фоном; градиент, уходящий в светлый тон, делает часть кода нечитаемой.
- Сохраняйте метки различимыми. Угловые метки должны контрастировать с фоном не хуже, чем точки.
- Оставляйте поле. Размещая код в макете, оставляйте вокруг него пустую область шириной примерно в четыре точки.
❗ Важно
Прежде чем печатать или публиковать оформленный код, проверьте его как минимум на двух разных смартфонах. Изображение в веб-части имеет ширину 300 пикселей; проверьте код также в том размере и с того расстояния, с которого его будут сканировать на самом деле.
Итоги
Разделы оформления QR Code Generator меняют форму точек, цвета, градиент и угловые метки, а уровень Error Correction задаёт запас устойчивости. Оформление сохраняется вместе со страницей и данными, поэтому однажды оформленный код выглядит одинаково для каждого посетителя.
💡 Совет
О том, как поместить логотип в центр кода, см. статью KB10266. Как добавить логотип компании в QR-код. Размер изображения и форматы файлов описаны в статье KB10267. Скачивание и копирование QR-кода: PNG, JPEG, SVG и WebP.