Дизайн AR-проекта: 10 правил, чтобы проект досматривали до конца

Хороший AR-проект похож на фокус: человек знает, что кролик был в шляпе, но не видит, как его туда положили. Стоит фокусу «сломаться» — долгая загрузка, непонятно куда наводить камеру, контент выскакивает из ниоткуда, — и люди закрывают вкладку. Ниже 10 правил, которые помогают удержать зрителя до конца, и чек-лист перед публикацией.

1. Начните с места и ситуации

AR живёт в реальном мире, поэтому сначала ответьте на простые вопросы:

• Где человек увидит проект: дома, на улице, в магазине, в музее?
• Есть ли там нормальный мобильный интернет или Wi-Fi?
• Сколько у него времени: минута у полки или полчаса на диване?
• Он один или показывает экран друзьям?

От ответов зависит всё остальное: длина видео, размер текста, нужен ли звук.

Например, у полки в магазине у человека есть несколько секунд, а дома на диване — время на игру.

2. Скажите прямо на носителе, что здесь AR

Без понятного призыва никто не догадается, что упаковка или открытка «живая». Рядом с QR-кодом напишите, что делать и что будет: «Наведите камеру телефона на эту картинку — и она оживёт». Призыв должен быть заметен с того расстояния, с которого на носитель обычно смотрят.

3. Сделайте старт быстрым и узнаваемым

Первое, что видит человек, — экран загрузки. В Web-AR.Studio его можно персонализировать: свои цвета и логотип вместо безликого ожидания. Следите за весом проекта: тяжёлые модели и длинные видео удлиняют загрузку. Как облегчить файлы — в статье о ресурсах для AR.

4. Подскажите, куда навести камеру

Человек впервые в вашем проекте и не знает, чего от него ждут. Короткая подсказка на экране и подпись на самом носителе снимают вопрос «а что дальше?». Если проект открывают у стены или витрины, подпишите, на что именно навести камеру: «на афишу», «на этикетку». А хороший маркер находится быстро — как его подготовить, разобрано в статье о маркерах.

5. Пусть контент вырастает из картинки

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

Помогает хромакей: Web-AR.Studio поддерживает видео с альфа-каналом, поэтому снятый на зелёном фоне человек выглядит частью сцены, а не роликом в прямоугольнике.

6. Не теряйте зрителя, когда дрогнула рука

Если контент пропадает, как только маркер выходит из кадра, смотреть неудобно: телефон держат не штативом. В расширенных настройках проекта Web-AR.Studio есть фиксация на экране — проверьте, как ваш проект ведёт себя, когда камера уходит в сторону, и выберите удобный вариант.

7. Ломайте «четвёртую стену»

AR — не телевизор, зритель в нём участвует. Пусть персонаж смотрит на человека, а не в пустоту, машет ему, реагирует на нажатие. Смотреть снизу вверх с открытки на зрителя — простой приём, который сразу делает сцену живой.

8. Дайте что нажать

Интерактивность — главное преимущество AR перед роликом. В WAS Design Studio у каждого элемента можно настроить анимацию и действия, а сцены связать переходами. Но не перегружайте: одно понятное действие на экране лучше пяти мелких кнопок.

9. Текст — крупно и коротко

Мелкий текст на картинке в AR читать трудно: экран маленький, рука двигается. Пишите короткие фразы, используйте иконки вместо подписей там, где они понятны без слов, и проверяйте читаемость на телефоне, а не на мониторе.

10. Звук включается после касания

Браузеры на телефонах не запускают звук сами, пока человек не коснулся экрана. Поэтому не прячьте главный смысл в звуковую дорожку первых секунд, а если звук важен — дайте понятную кнопку или подпись «включите звук».

Как применить правила: три примера

Оживающая открытка

Подпись «Наведите камеру на открытку» рядом с QR-кодом (правило 2), первый кадр видео совпадает с рисунком (правило 5), поздравление голосом — с понятной подписью «включите звук» (правило 10).

Упаковка с игрой

Маркер на ровной матовой грани коробки, быстрый старт без тяжёлых моделей (правило 3), одно понятное действие на экране — «Нажмите, чтобы начать» (правило 8), приз на финальной сцене.

Плакат на мероприятии

Крупный призыв, который читается издалека (правило 2), проверка распознавания с того места, где обычно стоят люди (правило 1), короткий текст крупным шрифтом (правило 9).

Чек-лист перед публикацией

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

Как понять, что дизайн работает

Посмотрите встроенную аналитику Web-AR.Studio: сколько людей открыли проект, куда нажимали и как долго оставались в AR. Если многие уходят сразу — ищите проблему в загрузке и первом экране. Если смотрят, но не нажимают — в кнопках и призыве. Можно подключить и внешние счётчики, например от Google.

Частые вопросы

Нужен ли дизайнер, чтобы сделать AR?

Не обязательно. В Web-AR.Studio есть шаблоны проектов и сцен, а редактор работает без кода. Дизайнер пригодится, чтобы сделать проект в стиле бренда.

Где рисовать макеты для AR?

В любом привычном редакторе. Например, в курсе Web-AR.Studio есть отдельный модуль о дизайне для дополненной реальности в Figma.

Что важнее: красивая графика или быстрая загрузка?

Быстрая загрузка. Самую красивую сцену не увидят, если её не дождутся.

Как сделать, чтобы персонаж «вышел» из открытки?

Снимите его на зелёном фоне и добавьте в проект как видео с альфа-каналом. Поставьте так, чтобы он появлялся из рисунка, а не рядом с ним.

Сколько сцен делать в проекте?

Столько, сколько нужно истории. Для первого проекта хватит одной-двух: каждая лишняя сцена — ещё одно место, где зритель может уйти.

Как понять, что проекту не хватает интерактивности?

Если в аналитике видно, что люди смотрят несколько секунд и уходят, дайте им повод остаться: кнопку, выбор, следующую сцену.

Хотите применить правила на практике? Откройте WAS Design Studio и начните с шаблона — базовые возможности бесплатны.