От 3D к 2D и обратно 

Исследуем Fluent Design System

Размерность (Dimensionality). Это концепция дизайна, которая очень близка команде разработчиков Microsoft, тем более, если учесть то, что мы сейчас активно работаем над развитием нашей Fluent Design System. Раньше предполагалось, что размерность - это захватывающее, интерактивное ощущение - будет использоваться только в играх, и на этом все. Но теперь вопрос в следующем: как использовать этот опыт в повседневных приложениях, привлекая людей на любом устройстве? Небольшая команда наших дизайнеров, технических художников и разработчиков приложений воспользовалась Universal Windows Platform и нашим приложением погоды, чтобы ответить на этот вопрос.

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

https://gfycat.com/SeveralNecessaryAnnelida

Создаем голографию

Мы выбрали HoloLens в качестве нашей линии старта, создав 3D-опыт в смешанной реальности, который был бы понятным и приятным в использовании даже для новичков. Оттуда мы бы выяснили, как перенести этот опыт в 2D-приложение. Вся идея была такой: приглашаем людей; используем одни и те же компоненты на разных этапах, чтобы создать ощущение знания и понимания места.

Почему мы взяли приложение погоды? Оказывается, с ним вы можете весело провести время и создать что-то сверхпривлекательное в очень короткие сроки. Кроме того, оно основано на реальности, всем известно, и дает нам возможность исследовать некоторые интересные места. Мы сосредоточили свое внимание на телефоне, ПК/планшете и HoloLens и отправились работать, имея это все на руках. Завершив работу в течение нескольких недель, мы исследовали различные способы привнести размерность и наслаждение в универсальный опыт.

Проект стартовал в мае, холодное и сырое время здесь, в районе Сиэтла, поэтому у нас на уме всегда были солнечные прибрежные места. Мы немного поэкспериментировали с целью найти правильную шкалу и уровень детализации для создания четырех атмосферных диорамов в HoloLens: Tuscany, Mykonos, Cape Cod, и Monument Valley. Таким образом мы смогли создать новый миниатюрный мир в вашей повседневной среде. Здесь вы можете взаимодействовать с объектами - они приспосабливаются по мере вашего приближения и движения вокруг. Наша главная цель здесь - вовлечение. Вы начинаете с уровня информационной архитектуры: какая температура в Тоскане (Tuscany)? Затем мы приглашаем вас. Приблизьтесь к местности. Теперь вы видите свет и атмосферу. Далее - подробное движение и пространственные звуки. Теперь - повествовательные детали. Кто-то машет вам рукой, деревья качаются.

На видео вертолет парит в Долине Монументов:

https://gfycat.com/MildDentalBubblefish

Поскольку вы находитесь в смешанной реальности HoloLens, кто-то в вашем реальном мире может взять и пройти сквозь вашу голограмму. И вы точно захотите заорать “нет”, если это произойдет, потому что теперь вы уже будете буквально жить в этой среде. Увлечение происходит быстро: вы чувствуете что-то - вы в нем - вы эмоционально связаны. Это похоже на то, как вы теряетесь, долго вглядываясь в снежный шар. Динамичное, завораживающее место в пределах места.

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

Мы получили самые лучшие результаты из возможных - и быстро двигались - когда добавили тени в текстуры. Реалистичность каждой сцены стала возможной благодаря пристальному вниманию к деталям и зоркому глазу членов команды. Например, определенный размер, направление и движение волн помогли отличить Атлантическое побережье от острова в Эгейском море (детали имеют значение!). Переход между диорамами вышел относительно быстрым и простым, сохраняющим ваше внимание на месте и ощущениях, а не в самом движении.

Что еще добавляет правдоподобности? Любители позагорать. Моряк. Чайки, коровы, трактор. Нам очень нравилось рассказывать историю и приглашать людей. Мы добавили детальной анимации и узнали, что polygon count, texture size и количество controlling joints - все вместе повлияло на гладкость анимации. Окружающие звуки (грохот волн) и отличительные звуки (му!) были последними штрихами, чтобы оживить всю картину.

Приспособление к 2D

Таким образом, мы создали красивую, интересную, интерактивную вещь для HoloLens. Теперь стоял вопрос: как приспособить ее к телефону и планшету, а также создать 2D и 3D-контент, которые будут сосуществовать естественно? Можем ли мы повторно использовать голограмму в flat UI и все еще заставить ее выглядеть привлекательной? Нам повезло, что Universal Windows Platform упростила эту процедуру.

Одноэтапная конверсия по-прежнему остается мечтой, поэтому чтобы диорама выглядела хорошо на 2D-устройствах, нам пришлось настраивать многое вручную. Мы скорректировали шейдеры для маяка, чтобы сохранить реалистичный вид, и отключили сжатие MIP-карты для текстур диорамы. Мы также экспериментировали с цветами, которые соответствовали диораме, прежде чем приступать к грейскейл бекграунду.

Адаптивный ввод

Fluent Design System - это трансформирование и сплоченность. Наша цель в этом эксперименте заключалась в том, чтобы каждый элемент подстраивался под тип устройства и первичный ввод, который используется (касание, мышь, взгляд). Мы разрабатывали с целью обеспечить непрерывность опыта как с визуальной, так и с интерактивной точки зрения, при этом убеждаясь, что на каждом устройстве все работает хорошо. Мы хотели, чтобы опыт HoloLens оставался верным голографической и 3D форме, но все же был доступным и легким для новых пользователей - делая жест, взгляд и голос такими же знакомыми, как и в работе с ПК. 2D-опыт нужен для оптимизации доступной экранной недвижимости и ощущения естественности при взаимодействии с сенсорным экраном и мышью, при этом сохраняя ощущение погружения в смешанную реальность.

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

Смешанная реальность была полна объемных и масштабных экспериментов - например, приближение кнопки переключателя к зрителю. Но далеко не все остается в плюсе от объема; мы сохранили текст плоским для читабельности:

Размещение типографических элементов на пейзаже Тосканы на видео:

https://gfycat.com/LeadingSlimAuk.

В 2D-опыте мы использовали некоторые из новых компонентов Fluent Design System, чтобы помочь обеспечить непрерывность при оптимизации опыта на этом устройстве - такие вещи, как свет, глубина и движение, придает месту жизни даже в плоском пространстве.

Здесь реальный лист акрила демонстрирует эффект, который вдохновил на создание Acrylic: 

https://gfycat.com/ForthrightVictoriousAnkolewatusi.

И здесь Acrylic применяется в приложении погоды, чтобы отобразить детальный прогноз, сохраняя при этом контекст диорамы видимым:

https://gfycat.com/RingedAcidicGalapagosdove.

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

Вот что мы узнали из этого эксперимента:

• Если, как и мы, вы новичок в разработке для HoloLens и хотите поэкспериментировать с вашим собственным приложением, руководство по дизайну смешанной реальности и Mixed Reality Design Labs code samples - отличные ресурсы, которые помогут вам начать работу.
• Создание четырех красивых 3D-сцен и их внедрение в HoloLens было самой трудоемкой частью проекта.
• 2D-часть приложения быстро объединилась с блоками Fluent Design System.

Что мы хотели бы исследовать дальше:

• Кнопки, которые мы использовали в этом эксперименте, хоть и согласованы в 2D и 3D, не всегда могут масштабироваться для mixed reality weather app с десятками или сотнями локаций. С увеличением списка местоположений нам, вероятно, нужно будет отказаться от фамильярности 2D панелей кнопок в пользу чего-то более оптимизированного для смешанной реальности. Как это будет выглядеть? Существуют ли другие схемы навигации в 2D, которые смогли бы обеспечить плавный переход к опыту в смешанной реальности?
• Каким еще образом можно перенести удовольствие 3D-пейзажей в 2D-опыт? Каковы промежуточные шаги между 2D и смешанной реальностью, как для пользователя, так и для разработчика?