Tabla periódica de los elementosPeriodic Table of the Elements

Nota

En este artículo se describe un ejemplo de exploración que hemos creado en los laboratorios de diseño de realidad mixta, un lugar donde compartimos nuestros aprendizajes sobre y sugerencias para el desarrollo de aplicaciones de realidad mixta.This article discusses an exploratory sample we’ve created in the Mixed Reality Design Labs, a place where we share our learnings about and suggestions for mixed reality app development. Los artículos y el código relacionados con el diseño evolucionarán a medida que se realizan nuevas detecciones.Our design-related articles and code will evolve as we make new discoveries.

La tabla periódica de los elementos es una aplicación de ejemplo de código abierto de los laboratorios de diseño de la realidad mixta de Microsoft.Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. Obtenga información sobre cómo diseñar una matriz de objetos en el espacio 3D con varios tipos de superficie mediante una colección de objetos.Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. También aprenderá a crear objetos interactivos que respondan a entradas estándar de HoloLens.Also learn how to create interactable objects that respond to standard inputs from HoloLens. Puede usar los componentes de este proyecto para crear su propia experiencia de aplicación de realidad mixta.You can use this project's components to create your own mixed reality app experience.

Tabla de puntos de la aplicación Elements

Vídeo de demostraciónDemo video

Grabado con HoloLens 2 mediante la captura de realidad mixtaRecorded with HoloLens 2 using Mixed Reality Capture

Acerca de la aplicaciónAbout the app

La tabla periódica de los elementos visualiza los elementos químicos y cada una de sus propiedades en un espacio 3D.Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. Incorpora las interacciones básicas de HoloLens, como mira fijamente y el aire TAP.It incorporates the basic interactions of HoloLens such as gaze and air tap. Los usuarios pueden obtener información sobre los elementos con modelos 3D animados.Users can learn about the elements with animated 3D models. Pueden comprender visualmente el shell de electrones de un elemento y su núcleo, que se compone de protoneladas y neutrons.They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.

FondoBackground

Después de haber experimentado HoloLens, sabía que quería experimentar con una aplicación de tabla periódica en realidad mixta.After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. Puesto que cada elemento tiene muchos puntos de datos que se muestran con texto, pensé que sería una buena cuestión para explorar la composición tipográfica en un espacio 3D.Since each element has many data points that are displayed with text, I thought it would be great subject matter for exploring typographic composition in a 3D space. Dar a los usuarios la oportunidad de visualizar el modelo de electrones del elemento fue otra parte interesante de este proyecto.Giving users the chance to visualize the element's electron model was another interesting part of this project.

DiseñoDesign

En la vista predeterminada de la tabla periódica, se imaginan cuadros tridimensionales que contendrían el modelo de electrones de cada elemento.For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. La superficie de cada cuadro sería traslúcida, de modo que el usuario podría obtener una idea aproximada del volumen del elemento.The surface of each box would be translucent so that the user could get a rough idea of the element's volume. Con fijamente y TAP, el usuario podría abrir una vista detallada de cada elemento.With gaze and air tap, the user could open up a detailed view of each element. Para que la transición entre la vista de tabla y la vista de detalles sea suave y natural, lo hice de manera similar a la interacción física de una caja de apertura en la vida real.To make the transition between table view and detail view smooth and natural, I made it similar to the physical interaction of a box opening in real life.

Boceto de diseñoDesign sketch
Dibujos de diseñoDesign sketches

En la vista de detalle, quería visualizar la información de cada elemento con texto representado con un gran espacio en 3D.In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. El modelo de electrones 3D animado se muestra en el área central y se puede ver desde distintos ángulos.The animated 3D electron model is displayed in the center area and can be viewed from different angles.

Interacción

PrototiposPrototypes
Prototipos de interacciónInteraction prototypes

El usuario puede cambiar el tipo de superficie mediante la pulsación de los botones de la parte inferior de la tabla. puede cambiar entre plano, cilindro, esfera y dispersión.The user can change the surface type by air tapping the buttons on the bottom of the table - they can switch between plane, cylinder, sphere, and scatter.

Controles comunes y patrones usados en esta aplicaciónCommon controls and patterns used in this app

Objeto interactuable (botón)Interactable object (button)

El objeto interactuable es un objeto, que puede responder a entradas básicas de HoloLens.Interactable object is an object, which can respond to basic HoloLens inputs. Se proporciona como recurso prefabricado/script, que se puede aplicar fácilmente a cualquier objeto.It's provided as a prefab/script, which you can easily apply to any object. Por ejemplo, puede hacer que una copa de café en la escena sea interactuable y responder a entradas como, por ejemplo, gestos de mira, navegación y manipulación.For example, you can make a coffee cup in your scene interactable and respond to inputs such as gaze, air tap, navigation, and manipulation gestures. Más informaciónLearn more

objeto nteractable

Colección de objetosObject collection

Colección de objetos es un objeto, que le ayuda a diseñar varios objetos en varias formas.Object collection is an object, which helps you lay out multiple objects in various shapes. Admite plano, cilindro, esfera y dispersión.It supports plane, cylinder, sphere, and scatter. Puede configurar propiedades adicionales como RADIUS, el número de filas y el espaciado.You can configure additional properties such as radius, number of rows and the spacing. Más informaciónLearn more

Colección de objetos

Detalles técnicosTechnical details

Puede encontrar scripts y Prefabs para la tabla periódica de la aplicación Elements en el laboratorio de diseño de la realidad mixta de github.You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

Portabilidad de la historia de HoloLens 2Porting story for HoloLens 2

Lea el artículo sobre cómo se actualizó la tabla periódica de la aplicación Elements con las interacciones instinctual de HoloLens 2.Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

Tabla periódica de los elementos 2.0Periodic Table of the Elements 2.0

Acerca del autorAbout the author

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
Diseñador de experiencias de usuario @MicrosoftUX Designer @Microsoft

Consulte tambiénSee also