Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
loading

Разработка AR и VR для веб-сайтов


В течение последних нескольких лет дизайнеры расширяют границы современных веб-браузеров, предлагая новые способы рассказывать истории через веб-сайты. Такие технологии, как WebGL, WebSockets и API-интерфейсы трехмерного рендеринга, такие как three.js, помогли создателям цифровых технологий переосмыслить поведение традиционной веб-страницы. Веб-сайты больше не должны быть серией прокручиваемых статических страниц, которые связаны гиперссылками. Вместо этого они могут быть интерактивными игровыми площадками, которые погружают их соответствующих пользователей. Виртуальная реальность и дополненная реальность являются наиболее обсуждаемыми из этих появляющихся технологий, и в настоящее время компании поощряют дизайнеров и создателей контента использовать их в своей повседневной практике.

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

Определение цели

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

Виртуальная реальность великолепна в использовании новых возможностей для рассказывания историй благодаря использованию 360-градусных видеороликов и захватывающих сред. Пользователь может пользоваться этими возможностями браузера через гарнитуру или перетаскивая контент в браузере. Emergence Magazine использует опыт веб-виртуальной реальности в качестве основы для своей обложки “Sanctuary of Silence”. С его помощью они показывают, как Национальный парк Олимпия является одним из самых тихих и спокойных мест в Северной Америке. Такое использование виртуальной реальности привлекает пользователя и помогает раскрыть суть истории в захватывающей и восхитительной форме.

Скриншот захватывающего опыта 360º VR в Emergence MagazineПогружение в журнал Emergence Magazine с 360-градусным обзором.

Дополненная реальность предоставляет пользователям новые способы взаимодействия с физическими продуктами и объектами, не выходя из собственного дома. Это может также показать уникальные особенности этих объектов интересными способами. Последняя интеграция Shopify с 3D Warehouse позволяет пользователям просматривать 3D-изображения продуктов и размещать их в реальных пространствах с помощью ARKit. InstantPot, программируемая скороварка, позволяет потенциальным клиентам увидеть, как продукт выглядит на их кухне, прежде чем они совершат покупку. Такое использование AR является умным способом придать клиентам уверенность, необходимую для совершения осознанной покупки.

Сайт InstantPot.Веб-сайт InstantPot позволяет пользователям увидеть продукт на своей кухне перед покупкой.

Смешивание многих сред

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

Чтобы поддержать свою кампанию Супер кубка 2018 года, Pepsi создала захватывающий опыт веб-виртуальной реальности, который объединяет видео, 3D-модели автомобилей, музыку и даже плакат Синди Кроуфорд, чтобы показать знаковые моменты в истории бренда. Этот опыт под названием «Pepsi Go Back» перемещается между этими различными средами таким образом, что поддерживает цель кампании. Чтобы рассказать историю бренда и культурное влияние в увлекательной форме.

Pepsi Go BackPepsi Go Back помещает вас на место водителя в 3D-копии автомобиля Джеффа Гордона.

Поскольку AR предоставляет интерактивные модели в реальных пространствах, у него есть уникальные конструктивные соображения. Двумя наиболее важными, как определено в этой статье Google, являются «экологические соображения» и «визуальные возможности». Пользователи должны знать о визуальном пространстве, необходимом для взаимодействия с объектом AR, и они также должны знать, с каким объектом они могут взаимодействовать. Дизайнер Google UX, Alesha Unpingco, отмечает, что «визуальные подсказки, такие как учебный текст или анимация персонажей, могут направлять пользователей перемещаться по своим физическим пространствам», а трехмерные объекты должны «выделяться как интерактивные компоненты», чтобы не вводить пользователей в заблуждение.

Освоение новых инструментов

Есть много инструментов и программ, которые дизайнеры могут использовать, чтобы начать создавать свои первые веб-VR & AR. Mozilla создала фреймворк с открытым исходным кодом под названием A-Frame, который позволяет дизайнерам создавать возможности веб-виртуальной реальности с использованием HTML. С его помощью они предоставили подробную документацию и примеры, чтобы помочь сделать этот опыт доступным для начинающих.

A-Frame, платформа Mozilla с открытым исходным кодом для WebVRA-Frame, платформа Mozilla с открытым исходным кодом WebVR, является отличным способом начать создание виртуальной реальности.

Инструменты 3D-рендеринга, такие как Cinema4D и Blender, существуют уже некоторое время, но у них, как правило, крутые кривые обучения. Такие стартапы, как Vectary, облегчают дизайнерам создание трехмерных моделей и экспортируют их в веб-форматы файлов, такие как .obj и .usdz (используемые для ARKit).

Создание 3D объектов в VectaryСоздание 3D-объектов в Vectary может быть таким же простым, как импорт SVG и его выдавливание.

По мере того, как дизайнеры внедряют новые инструменты и методы, они должны изучать основы 3D-дизайна, включая механику освещения и материалы на объектах. Обладая этими знаниями, они могут создавать интересные объекты, которые волнуют пользователей и повышают заинтересованность. Кроме того, поскольку цифровые дизайнеры традиционно работали в 2D-плоскости, изучение того, как создавать объемные проекты с глубиной и пространством, будет иметь решающее значение, чтобы помочь пользователям в их проектах.

Создание четкой иерархии и разборчивости

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

Google Petra VR Experience использует комбинацию описательного текста, пульсирующих элементов пользовательского интерфейса, стрелок и четкой карты, чтобы помочь пользователям понять, как ориентироваться в окружающей среде. Эти элементы помогают создать четкий признак того, как маневрировать в пространстве и контекстной информации, на что смотрит пользователь.

Google Petra VR опытЭлементы пользовательского интерфейса и типографика помогают пользователям получить четкие указания о том, как взаимодействовать с опытом.

Поскольку AR & VR являются новыми средами, для дизайнеров важно направлять пользователей способами, которые способствуют как исследованию, так и интерактивности. Кроме того, эти направляющие элементы должны быть знакомы и понятны по своему назначению. Взаимодействие с элементом должно вести себя так, как считает пользователь (стрелки должны перемещать содержимое, кнопки «x» должны закрывать содержимое и т. Д.), И эти шаблоны проектирования должны быть согласованы на протяжении всего процесса.

Оптимизация производительности

Большинство веб-VR и AR-операций могут потребовать больших вычислительных ресурсов для рендеринга трехмерных объектов в браузере. Чтобы пользователи могли получать доступ к этим функциям, где бы они ни находились, важно по возможности оптимизировать их.

Когда Google создал прототип 3D-модели, чтобы подчеркнуть мощь браузеров с поддержкой AR, они отметили несколько способов обеспечения ее плавности и плавности. Модели с низким числом полигонов, ограниченное количество источников света в сцене и уменьшенное разрешение теней помогут вашим трехмерным объектам выглядеть гладкими и естественными для ваших пользователей. Дизайнеры должны оптимизировать свои возможности веб-VR и AR, чтобы каждый мог использовать их, даже в областях с низкой пропускной способностью.

Астраунаут иллюстрацииGoogle оптимизировал их 3D-модель, чтобы она могла хорошо работать даже в неидеальных сценариях.

Проектирование для доступности

Доступ к Интернету в настоящее время является горячей темой в цифровом дизайне, и на то есть веская причина. Подобно разработке инклюзивного опыта для традиционных веб-сайтов, дизайнеры должны позаботиться о том, чтобы создать инклюзивный опыт для всех пользователей. В настоящее время неясно, как доступность проявится в продвижении Web VR & AR, но компании в настоящее время делают первые шаги, чтобы гарантировать, что эта появляющаяся технология является всеобъемлющей для всех.

Microsoft недавно анонсировала «canetroller», который дает тактильные отзывы пользователям с нарушениями зрения. Пользователи могут держать контроллер VR, который напоминает вспомогательную трость, чтобы помочь им перемещаться по виртуальным мирам. Это помогает тремя способами: физическое сопротивление применяется при прикосновении к виртуальному объекту, «вибротактивная» обратная связь моделирует вибрации, а звуковая обратная связь моделирует звуки взаимодействия тростника в реальном мире. Несмотря на то, что на момент написания статьи эта технология еще не была приобретена, это хороший шаг на пути к расширению доступности Web VR & AR в будущем.

Microsoft canetrollerПосмотрите на canetroller, созданный Microsoft.

Будущее веб VR и AR

Поскольку эти технологии становятся все более заметными на веб-сайтах, дизайнеры должны будут создавать систематические способы создания фирменного и привлекательного опыта в масштабе. Шаблоны UI и UX будут стандартизированы, визуальные системы станут более распространенными, и пользователи будут более привыкать к этой форме контента. Никогда не было лучшего времени, чтобы начать экспериментировать с этими новыми технологиями и разрабатывать новый опыт с ними.

iT Новости

_

Раздел в разработке

_
image
Дмитрий Служба поддержки в России

Нью йорк
Берлин
Москва
Санкт-Петербург
Новосибирск
Екатеринбург
Нижний Новгород
Казань
Самара
Омск
Челябинск
Ростов-на-Дону
Уфа
Волгоград
Пермь
Красноярск
Воронеж
Саратов
Краснодар
Тольятти
Барнаул
Ижевск
Ульяновск
Владивосток
Ярославль
Иркутск
Тюмень
Хабаровск
Новокузнецк
Кемерово
Рязань
Томск
Астрахань
Пенза
Набережные Челны
Липецк
Тула
Калининград
Иваново
Бийск
×

×

Оставьте заявку и мы свяжемся с вами

×