19 апреля 2011 в 18:42

Сделайте ваши QR-коды более красивыми перевод

imageГамильтон Чан является генеральным директором и основателем Paperlinks.
Используя свободное приложение для iPhone от Paperlinks, рекомендованное Apple как одно из самых нужных и важных приложений, пользователи могут сканировать и просматривать содержимое QR-кодов. Paperlinks также обеспечивает мощную платформу для создания QR-кодов, хранения и отслеживания их посещаемости.


QR-код: прекрасная штука или бельмо на глазу? Волшебные штрих-коды, которые могут быть считаны на смартфоне для запуска онлайновых приложений из офлайна, часто критикуют за их черно-белый скудный внешний вид. Те, кто сомневается, что QR-коды быстро пойдут в массы, приводят довод, что внешний вид QR-кодов будет сдерживать маркетологов и рекламодателей от их использования.

К счастью, QR-коды могут быть обработаны множеством различных способов, сохраняя при этом их читаемость. Да-да, это правда, QR-кодам вовсе не обязательно выглядеть ужасно, мы входим в новую фазу «дизайн кодов», и теперь они могут быть использованы в рекламных компаниях, имя при этом привлекательный вид.

QR-коды имеют такой большой потенциал с точки зрения дизайна, так что давайте взглянем на несколько приемов и методов, которые Вы должны иметь в виду при разработке кода для усиления вашего бренда и привлечения аудитории.

1. Добавьте цветовую палитру


Самый простой способ добавить стильности вашему коду — раскрасить его. Ваш QR-код не обязательно должен быть стандартным черно-белым для того, чтобы его можно было считать. Вы можете использовать несколько цветов или применить градиент, не испортив читаемости. Единственное правило гласит, что цвет кода должен быть, как правило, темным на светлом фоне. Убедитесь, что контраст достаточен, иначе код будет трудно считывать.
Светлые коды на темном фоне, как правило, не рекомендуются.

2. Сглаживание углов

image
Один из главных эстетических недостатков QR-кодов являются их многочисленные резкие углы. Вы можете исправить это, сглаживая некоторые из углов. Не обязательно сглаживать все углы, но смягчение краев кода определенно добавит ему дружественности.

3. Включение глубины для 3D-эффекта


Отличный способ повышения воздействия вашего кода — это размещение перед кодом изображений, такие как логотип. Таким образом можно наполнить код ощущением глубины. Обычный штрих-код вдруг становится одной из форм искусства, и можно действительно наполнить код индивидуальностью и стилем.

Интересной идеей является добавление логотипа в центр кода, также можно добавить интересные элементы для углов или сторон для еще более оригинального вида или добавлять изображения или символы между блоками.

4. Использование 30% коррекции ошибок


image


Если вы решили добавить логотип для создания 3D-эффекта QR-кода, вы должны решить, какую часть кода использовать для этого. Ключ к созданию кодов со сногсшибательным дизайном в использовании 30% от данных QR-кода, которые могут отсутствовать или быть испорченными, и при этом быть код является рабочим. QR-коды могут быть сгенерированны с 0%, 10%, 20% или 30% встроенной коррекцией ошибок. Генерация с 30% коррекцией добавляет много шума (экстра-блоки), но таким образом можно очистить 30% места в коде и использовать его для добавления логотипа или других дизайнерских элементов.

Если вы используете QR-код с 0% коррекции ошибок, код будет выглядеть более стройно, но возможности для брендирования кода очень ограничены. Удаление или воспрепятствование одного блока в таком QR-коде может сделать его нечитаемым.

Применение метода проб и ошибок


image


Технически, возможно математически вычислить, какие блоки в QR-коде могут быть удалены, но такие вычисления, как правило, не нужны. Применяя простой процесс проб и ошибок, любой человек может начать применять методы дизайна для кода, а затем проверять его считываемость.

Обязательно проверьте считываемость кода на нескольких устройствах, в идеале, на трёх или четырёх. Использование кода без тестирования на считываемость является злоупотреблением диайном и может вызвать серьезные проблемы с клиентами. Конечно же, даже разумные меры предосторожности в дизайне кодов могут по-прежнему привести к трудностям, так что вы всегда должны взвешивать сложность сканирования в отношении к преимуществам привлекательного дизайна кода. Если считывание такого кода занимает больше, чем несколько секунд, он, вероятно, должен быть упрощен.

Заключение


В конце концов, создание фирменных QR-кодов является как искусством, так и наукой. Математические качества QR-кодов и применение продуманного дизайна может действительно поднять QR-коды до уровня, где код становится одной из центральных частей маркетинга. Применение лучших методик дизайна будет способствовать повышению скорости считывания и увеличит эффективность взаимодействия с онлайном.

Это лишь вопрос времени, когда QR-коды станут очень популярными. Совместное использование технологий и дизайна, и реализация этого в QR-кодах — правильный путь для вашего бизнеса, это будет держать ваш бренд на передовом крае маркетинга и технологии.
Перевод: Hamilton Chan
Маршалов Александр @Amper
карма
151,2
рейтинг 0,0
Похожие публикации
Самое читаемое

Комментарии (88)

  • +20
    Спасибо, отличная статья. Интересно как раз было как сделать код, как на картинке, и тут вы. Благодарю.
    • +17
      Ваш не распознается. В статье все распознаются :)
      • +3
        распознался ScanLife'ом
        • +1
          В комментариях грех не упомянуть http://mojiq.kazina.com/ С его помощью можно сгенерировать себе QR-код с подписью, не прибегая к дизайну. Вот пример: image
          • +2
            Я сделал вот такой для пробы:
            image
          • 0
            Грех не упомянуть что не только японцы пишут на qr кодах, но и в рунете появились генераторы не страшных qr кодов))
            Можно и цвета настраивать!
            image
          • 0
            еще генератор www.unitaglive.com/qrcode
            image
      • +3
        Распознался QuickMark, хоть и дольше обычного
        • +2
          А у меня — мгновенно.
      • +1
        Извините, но вы не правы. Отойдите от компьютера или попробуйте распознать уменьшенный вариант:



        Да и код довольно извесный. Искать по «qr code Takashi Murakami» Тут вот тема там именно о нем речь.

        habrahabr.ru/blogs/infolust/57578/

        Ye b www.engadget.com/2009/04/23/takashi-murakami-and-louis-vuitton-make-qr-codes-fun-again/

        • +4
          с трудом, но уменьшенная версия распозналась
          • +1
            У меня таки вашим СканЛайфом все равно не распозналась…
        • 0
          Сканер штрих-кодов для андроид — не распознает ни большой, ни маленький
          • 0
            Barcode Scanner, произведённый ZXing Team, распознал уменьшенную версию, но не смог распознать крупную. Так же вёл себя и QR Droid, только уменьшенную версию ещё дольше, ещё нестабильнее распознавал.
            • 0
              (Я запускал их на HTC Desire.)
        • +2
          У меня Barcode Scanner не распознает ни уменьшенную ни большую версию (xperia x10 mini pro)

          Картинки из статьи распознает мгновенно при появлении их в видоискателе
      • +2
        Neo reader'ом тоже быстро распознался. )
    • +1
      QRDroid не осиливает
  • +3
    Мне такие QR коды напомнили старую игрушку- Digger
  • НЛО прилетело и опубликовало эту надпись здесь
    • +5
      Просто всё должно быть в меру
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Красиво и любопытно, но явно не для билбордов, распознается далеко не сразу.
  • +2
    Актуально только для кодов большого размера, если же требуется разместить код маленького размера, то он скорее всего не распознается…
    • 0
      Маленький распознается даже лучше. Например попробуйте с той картинкой наверху ;)
      • +1
        Я бы не сказал, что картинка сверху — маленькая.
        Ну а декорировать картинки маленького размера, имхо, ни к чему (ну разве что цвет изменить).
        • 0
          Я про то что оригинал с большой картинкой распознается заметно хуже, чем уменьшенный вариант. И кавайный зверек на маленьком вполне заметен и также субъективно вызывает интерес.
          • +1
            Похоже, мы с вами о разных картинках говорим :) Но всё-равно, о маленьком размере я уже высказался…
          • +1
            Вообще, с моего телефона (SE T700, Kaywa Reader) одинаково не распознаются, что маленький, что большой коды со зверьком, в то время как остальные коды из статьи распознаются отлично :)
  • +9
    мне почему-то в них мерещатся фигурки из тетриса…
    image
    • +4
      У Вас тут только две фигурки из тетриса :) В тетрисе каждая фигура из четырёх пикселей
      • +11
        • +1
          Красиво, но опять же — у меня не распознается, так что с опаской надо такое делать:)
          • +2
            У меня распознался моментально
            Tetris rules! :D
  • НЛО прилетело и опубликовало эту надпись здесь
    • +3
      со смартфонами наоборот — чаще сидишь и материшь, что QR не повесили
  • 0
    Сурово и практически бессмысленно :)
  • +2
    LG Optimus One и приложение Googles — распознал все коды.
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Когда-нибудь, так и будет )) жаль не застанем )
  • +1
    Насчет пойду или не пойдут в массы.
    «Массы» уже научились скачивать приложения и чекинится в 4SQ. Как только наберется критическая масса желающих «Кликать» на физические объеты, то и QR пойдут и NFC. :)
    Очень ждем этого момента с нашим проектиком т.к. пока только маркетинг типа VICHY их использует…
  • +7
    Очень порадовало то, что указанная программа для айфона читает и такие коды:
    image
    Не сочтите ради всего святого за рекламу.

    Рисовал такие коды, а приложения для айфона чтобы их считать найти не мог, кучу разных перепробовал.
    • +3
      Barcode Scanner — почти стандартное Андроидовское приложение — прочитало все коды влет, включая этот ;)
      • +1
        В том-то и дело, я знал что на андроиде нет проблем. А на айфоне я перепробовал с пяток самых популярных, и увы.
      • 0
        А у меня почему-то Barcode Scanner прочитал ТОЛЬКО последний из кодов. Остальные — пытался, но распознать не смог.

        HTC Desire, CyanogenMod 7
        • 0
          Может у вас в телефоне камера слабая/без автофокуса.

          От этого как я понимаю тоже многое зависит
          • 0
            Хотя вроде в дезайре написана камера 5мп и автофокус, странно тогда
            • 0
              В том то и дело. Автофокус есть, картинка ловится и показывается на экране вполне отчётливо. Но — не распознаёт.
        • 0
          HTC Desire, Oxygen
          Я минут пять пытался прочитать коды из статьи с помощью QR Droid и Barcode Scanner.
          Потом запустил Google Goggles — всё прочиталось мгновенно. С этим кодом он тоже справился, хотя и не так быстро.
    • +1
      В вашем примере не QR-код, а обычный штрих-код, к которому сверху пририсовали город.



      Он будет распознаваться без проблем даже обычными (hardware) сканерами-штрифкодов
      • +1
        я знаю, я же сам его разрисовывал :)
        просто у штрих-кодов есть разные системы кодирования, и те, в которых можно кодировать буквы, достаточно редкие. у меня на айфоне ничем не распозновалось.
        • +1
          к сожалению, сейчас в офисе нет железного сканера штрифкодов чтобы проверить, но barcode scanner под андроид его с легкостью раскодировал
          • +1
            Если будет возможность, проверьте пожалуйта! очень интересно :)
            • +2
              В офисе все-таки нашелся Voyager ms9520
              Для тех, кто не в курсе, это такой сканер штрихкодов, который подключается по USB и эмулирует клавиатуру. Т.е. наводишь на штрихкод и он его распознает и эмулирует нажатия клавиш и в конце клавишу энтер.

              В общем с первого раза у меня он распознал ваш штрих-код (с экрана он естественно не читает, распечатал на листе бумаги) как
              ШЕ ещцт
              . Пришлось переключить раскладку чтобы увидеть верную надпись
              IT town

              Очевидно, что распознал он верно, просто из-за особенностей работы (эмулирование нажатий клавиш) он в принципе не мог ввести английский текст сразу (он же только на клавиши «жмет», а вводится в текущей раскладке пользователя)

              В итоге могу сказать что мое изначальное заявление вполне верное, и hardware-сканеры прекрасно распознают ваш штрихкод.

              Пользуясь случаем хочу передать привет вашему дизайнеру/верстальщику, на сайте pasokon.ru/ у вас очень интересно сделана резиновая верстка с объектами, которые «разбросаны» по полу, но при уменьшении размеров экрана «ложатся» друг на друга :)

              Только, если ширина экрана 800 пикселей, элементы блока «реклама» вылезают за пределы блока (возможно, стоит ограничить минимальную ширину страницы)
              • +1
                1. Спасибо за тест.
                2. Я думаю он сам прочтет, но в общем мы сознательно не рассчитывали на устройства меньше 1024 px (на айфон кстати, отображается нормально).
                Это было выявленно в результате какого-то реального юзкейса, или просто вы страницу сдавливали в браузере, пока из нее не брызнуло? :)
                • +1
                  Страницу сдавливал, интересно было посмотреть как они ездят :)
                  • +1
                    rollers.su посмотрите, он мне не особо нравится, но там хедер вообще крэйзи.
              • +1
                Да с рекламой некрасиво, надо ширину ограничить, спасибо
  • +1
    dhd распознает только если перевернуть вверх ногами.
    • +1
      Вру, покрутил еще, в обычном (как обычно держу при съемке) положении распознает не сразу, но распознает, а если перевернуть — тогда мгновенно.
  • +1
    Прикольно конечно, но второй код в посте у меня не распознался. А читаемость этих кодов таки важнее внешнего вида.
  • +1
    Beetag (J2ME) распознал все, только первый, голубой со второго раза, пришлось чуть точнее целиться, я и не знал, что их можно сглаживать
  • +4
    А какой сервис посоветуете, чтобы генерировать код и можно было максимальную избыточность сделать, чтобы потом испортить дизайном?
  • +12
    Около месяца назад, тоже сделали себе QR-код совмещенный с логотипом и поместили в контакты :-)

    image
    • +4
      Красиво получилось)
    • +3
      И красиво и распознается мгновенно!
    • +3
      супер!
    • +5
      Улица программистов это круто!
  • +2
    А мне нравится идея. QR-коды в массы)
  • +2
    mBarCode (Nokia N900), распознал все QR и 1D (IT Town), без труда
  • +1
    QuirkMark на симбе в nokia 5800 распознал все qr-коды
    • +1
      Аналогично на Андроиде, LG Optimus One.
  • +1
    Не мог не вставить Лебедевскую ёлку image
    • +1
      мой Е71 стандартной прогой прочитал на раз-два =), из кодов коментах всего прочитал только с тетрисом.
      • +2
        интересно, к чему это я написал слово «всего»?
        • +1
          Видимо сначала начал писать «из всего что есть в комментах»
          Потом подумал это еще и текст, а не только коды
          Стер «что есть» и написал «из кодов коментах всего прочитал „
          • +1
            Видимо последняя кружка кофе была лишняя. Слишком быстро думаю.
  • +1
    У меня google goggles распознал все.
    дольше всего думал над синим с пальмами.
    • +1
      А кто-нибудь может подсказать простой способ, — скруглить углы в блоках qr-кода?
      А одиночные квадратики на кружки вручную заменять, или тоже есть секрет?
  • +1
    вот подарочный вариант
  • 0
    пакмана сделайте
  • 0
    а под Windows Phone есть годные проги, чет найти ни одну нормальную не могу, одни подделки читающие 1 код из 10.
    • 0
      Есть, i-nigma распознает почти все. Из статьи только пару штук не распознала.
  • 0
    Мои поделки:
    image image

  • 0
    Мой новые:

    image

    image
  • 0
    image

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.