Dentro de un experimento de diseño de Microsoft

Aportando dimensionalidad a las aplicaciones cotidianas en todos los dispositivos.

Dimensionalidad Es un concepto de diseño cercano al corazón del equipo de diseño de Microsoft, especialmente a medida que continuamos evolucionando nuestro sistema de diseño fluido. Solía ​​ser esa dimensionalidad, esa sensación inmersiva e interactiva, que se esperaba en los juegos, al final de la historia. Pero ahora nos preguntamos: ¿cómo abrazar esa experiencia en las aplicaciones cotidianas, involucrando a las personas en cualquier dispositivo? Un pequeño equipo de nuestros diseñadores, artistas técnicos y desarrolladores de aplicaciones utilizó la Plataforma universal de Windows y la aplicación de clima humilde para responder esa pregunta.

Alerta de spoiler: fue un desafío. Sigue siendo un experimento vivo en los ámbitos de la escalabilidad y la trascendencia: estamos aprendiendo, adaptando, afinando, fallando, triunfando y aprendiendo nuevamente. Aquí hay un vistazo de lo que significa construir en todas las dimensiones.

Edificio holográfico

Elegimos HoloLens como nuestra línea de partida, creando una experiencia 3D en realidad mixta que sería fácil de entender y disfrutar para los recién llegados. A partir de ahí, descubriremos cómo llevar esa experiencia a una aplicación 2D. La idea es: invitemos personas; use los mismos componentes en las experiencias para construir familiaridad y capacidad de respuesta y un sentido de lugar.

¿Por qué una aplicación meteorológica? Resulta que puedes divertirte mucho con él y construir algo súper atractivo en un corto período de tiempo. Además, se basa en la realidad, es conocido por todos y nos dio la oportunidad de investigar algunos lugares interesantes. Centramos nuestra atención en el teléfono, PC / tableta y HoloLens, y volamos desde allí, completando el trabajo en unas pocas semanas que explora diferentes formas de llevar la dimensionalidad y el deleite a una experiencia universal.

El proyecto comenzó en mayo, un tiempo húmedo y frío aquí en el área de Seattle (impactante), por lo que tuvimos ubicaciones costeras y soleadas en el cerebro. Experimentamos un poco para encontrar la escala y el nivel de detalle adecuados para construir cuatro dioramas atmosféricos en HoloLens: Toscana, Mykonos, Cape Cod y Monument Valley. La experiencia se abre en los bordes de cada escena: una porción de un mundo en miniatura se deja caer en su entorno cotidiano. A partir de ahí, te invitamos a interactuar con los objetos, convirtiéndote en verdaderas escenas que se adaptan a medida que te acercas y caminas alrededor de ellos. Nuestro tema operativo aquí es el compromiso. Comienzas en el nivel de la arquitectura de la información: ¿cuál es la temperatura en la Toscana? Luego, te invitamos a entrar. Acércate al terreno. Ahora ves la luz y la atmósfera. A continuación, el movimiento detallado y los sonidos espaciales. Ahora, detalles narrativos. Alguien que te saluda, los árboles se mecen.

Debido a que estás en una HoloLens de realidad mixta, es posible que alguien en tu mundo real pase por tu holograma. ¡Y gritarás absolutamente que no! como sucede porque ahora vives en este entorno. Ocurre rápido: sientes algo, estás dentro y estás conectado emocionalmente. Es como perderse en una bola de nieve. Un lugar dinámico y fascinante dentro de un lugar.

Para obtener el tamaño, la escala y la ubicación correctos de los objetos, confiamos en nuestro artista 3D para trabajar en estrecha colaboración con los diseñadores en Maya (software de animación 3D). Aquí es donde bloqueamos para determinar el tamaño correcto, la escala y la ubicación de los objetos dentro de una escena más grande, al igual que dirigir una película. Cada elemento necesitaba ser dimensionado para mantener proporciones realistas independientemente de la distancia o ángulo de visión.

Bosquejo del concepto de Cape CodBloqueo temprano de la escena de Cape Cod para determinar la escala de los elementos.

Obtuvimos los mejores resultados, y nos movimos rápidamente, cuando horneamos sombras en las texturas. El realismo de cada escena provino de una cuidadosa atención al detalle y un ojo ingenioso. Por ejemplo, el tamaño, la dirección y el movimiento distintivos de las olas ayudaron a diferenciar la costa atlántica de una isla en el Mar Egeo (¡los detalles importan!). La transición entre dioramas es relativamente rápida y simple, manteniendo su enfoque en la escena y la sensación que trae, no el movimiento en sí.

Arte final listo para iluminación y animaciones.

¿Qué más hace una aparición? Bañistas Un marinero. Gaviotas, vacas, un tractor. Nos divertimos mucho contando la historia e invitando a la gente a entrar. Agregamos animaciones sutiles y aprendimos que el recuento de polígonos, el tamaño de la textura y la cantidad de juntas de control afectaron la suavidad de la animación. Los sonidos ambientales (olas rompientes) y los sonidos distintos (¡muu!) Fueron los toques finales para darle vida a todo.

Simple, mínimamente animada gaviota y tomar el sol en la escena de Mykonos.

Escalando a 2D

Así que creamos una cosa bonita, divertida e interactiva para HoloLens. Ahora, ¿cómo escalar eso de nuevo a teléfono y tableta, y crear contenido 2D y 3D que coexista naturalmente? ¿Podríamos reutilizar el holograma dentro de una IU plana y aún así hacerlo sentir atractivo? Somos afortunados de que la Plataforma universal de Windows lo haga fácil: consulte este tutorial detallado en otra aplicación meteorológica de muestra, Atmosphere.

La conversión en un solo paso sigue siendo un sueño, y tuvimos que hacer una adaptación manual para que el diorama se vea genial en dispositivos 2D. Ajustamos los sombreadores para el haz del faro para mantener una apariencia realista, y desactivamos la compresión del mapa MIP para las texturas de diorama. También experimentamos con colores que combinaban con el diorama antes de aterrizar en un fondo de escala de grises.

Diorama de Cape Cod optimizado para la aplicación 2D

Entrada adaptativa

El Sistema de Diseño Fluido tiene que ver con la traducción y la cohesión. Nuestro objetivo en este experimento era hacer que cada elemento se tradujera de manera apropiada para el tipo de dispositivo y la entrada principal (táctil, mouse, mirada) que se usa. Diseñamos mantener la continuidad de la experiencia desde una perspectiva visual e interactiva, a la vez que nos aseguramos de que las cosas funcionen de forma natural y familiar en cada dispositivo. Queríamos que la experiencia HoloLens se mantuviera fiel a la forma holográfica y 3D, pero que fuera accesible y fácil para los nuevos usuarios, haciendo que el gesto, la mirada y la voz sean tan familiares como el uso de una PC. La experiencia en 2D necesitaba optimizarse para el espacio disponible en la pantalla y sentirse natural con las interacciones táctiles y del mouse, sin dejar de ser tan inmersiva como la realidad mixta. Diseño fuera de la caja, dentro de una caja, por así decirlo.

¡Aquí hay un vistazo al trabajo! Tome nota del botón para cambiar entre escenas, un elemento de diseño común para los tres factores de forma para ayudar con la orientación.

Bocetos tempranos de comportamiento adaptativo

La interacción de realidad mixta estuvo llena de experimentación de volumen y escala, como acercar el botón de cambio al espectador. Pero no todo se beneficia del volumen; mantuvimos el tipo plano para facilitar la lectura:

En la experiencia 2D, utilizamos algunos de los nuevos ingredientes del Sistema de diseño fluido para ayudar a brindar continuidad mientras optimizamos la experiencia en ese dispositivo: cosas como la luz, la profundidad y el movimiento dan vida incluso en un espacio plano.

Aquí, una lámina física de acrílico muestra el efecto que inspiró al acrílico:

Y aquí se aplica Acrílico en la aplicación del clima para mostrar el pronóstico detallado mientras se mantiene el contexto del diorama a la vista.

En la experiencia del teléfono, donde un tamaño de pantalla más pequeño significa separar los elementos de navegación y el contenido, la animación conectada brinda una navegación continua y cinematográfica que se hace eco de la inmersión en 3D.

Esto es lo que aprendimos de este experimento:

  • Si, como nosotros, es nuevo en el desarrollo de HoloLens y desea experimentar con una aplicación propia, la guía de diseño de realidad mixta y los ejemplos de código de Mixed Reality Design Labs son excelentes recursos para ayudarlo a comenzar.
  • Crear cuatro hermosas escenas 3D e implementarlas en HoloLens fue la parte más laboriosa del proyecto.
  • La parte 2D de la aplicación se unió realmente rápido con los bloques de construcción del Sistema de diseño fluido.

Lo que nos gustaría investigar más a fondo:

  • Los paneles de botones que utilizamos en este experimento tienen coherencia y familiaridad en 2D y 3D, pero podrían no ajustarse a una aplicación de clima de realidad mixta con docenas o cientos de ubicaciones. Con una lista de ubicaciones más grande, probablemente tendríamos que alejarnos de la familiaridad de los paneles de botones 2D a algo más optimizado para la realidad mixta. Como se veria eso? ¿Existen otros patrones de navegación en 2D que hagan una transición suave a una experiencia de realidad mixta?
  • ¿De qué otras maneras podemos traer el deleite de las escenas 3D a la experiencia 2D? ¿Cuáles son los pasos intermedios entre la realidad 2D y la realidad mixta, tanto para un usuario como para un desarrollador?

Un agradecimiento al Director Creativo Ramiro Torres, Oscar Murillo y al intrépido equipo por su trabajo en esta aplicación. La próxima vez agregaremos ese tiburón.

Nos encanta escuchar los comentarios de la comunidad. ¿Qué opinas de nuestro pequeño experimento meteorológico? ¿Qué más te gustaría vernos explorar? ¿Qué has construido usando Fluent Design y cómo te fue? Comuníquese con nosotros en los comentarios a continuación, inicie una conversación en nuestro grupo de LinkedIn o contáctenos en Twitter @MicrosoftDesign. No puedo esperar para ver lo que creas.

Para mantenerse informado con Microsoft Design, síganos en Dribbble, Twitter y Facebook, o únase a nuestro programa Windows Insider. Y si está interesado en unirse a nuestro equipo, diríjase a aka.ms/DesignCareers.