Tabela periódica dos elementosPeriodic Table of the Elements

Observação

Este artigo discute um exemplo exploratório que criamos nos laboratórios de design de realidade misturada, um lugar onde compartilhamos nossas aprendeções e sugestões para o desenvolvimento de aplicativos de realidade misturada.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. Nossos artigos e códigos relacionados ao design irão evoluir à medida que fizermos novas descobertas.Our design-related articles and code will evolve as we make new discoveries.

A tabela periódica dos elementos é um aplicativo de exemplo de código-fonte aberto dos laboratórios de design de realidade misturada da Microsoft.Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. Saiba como dispor uma matriz de objetos no espaço 3D com vários tipos de superfície usando uma coleção de objetos.Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Saiba também como criar objetos que respondam às entradas padrão do HoloLens.Also learn how to create interactable objects that respond to standard inputs from HoloLens. Você pode usar os componentes deste projeto para criar sua própria experiência de aplicativo de realidade misturada.You can use this project's components to create your own mixed reality app experience.

Tabela de período do aplicativo de elementos

Vídeo de demonstraçãoDemo video

Registrado com o HoloLens 2 usando a captura de realidade misturadaRecorded with HoloLens 2 using Mixed Reality Capture

Sobre o aplicativoAbout the app

A tabela periódica dos elementos visualiza os elementos químicos e cada uma de suas propriedades em um espaço 3D.Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. Ele incorpora as interações básicas de HoloLens, como olhar e toque de ar.It incorporates the basic interactions of HoloLens such as gaze and air tap. Os usuários podem aprender sobre os elementos com modelos 3D animados.Users can learn about the elements with animated 3D models. Eles podem entender visualmente o Shell de um dos elementos do seu núcleo, que é composto de protoneladas e neutrons.They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.

Tela de fundoBackground

Depois de ter experimentado o HoloLens pela primeira vez, sabia que queria experimentar um aplicativo de tabela periódico em realidade misturada.After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. Como cada elemento tem muitos pontos de dados que são exibidos com texto, pensei que seria um ótimo assunto para explorar a composição tipográfica em um espaço 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 aos usuários a chance de visualizar o modelo de sem interspersão do elemento era outra parte interessante deste projeto.Giving users the chance to visualize the element's electron model was another interesting part of this project.

DesignDesign

Para a exibição padrão da tabela periódica, Imaginai caixas tridimensionais que conteriam o modelo de todos os elementos.For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. A superfície de cada caixa seria translúcida para que o usuário pudesse obter uma ideia aproximada do volume do elemento.The surface of each box would be translucent so that the user could get a rough idea of the element's volume. Com o olhar e o toque do Air, o usuário pode abrir uma exibição detalhada de cada elemento.With gaze and air tap, the user could open up a detailed view of each element. Para fazer com que a transição entre a exibição de tabela e a exibição de detalhes seja suave e natural, eu o fiz de forma semelhante à interação física de uma abertura de caixa na 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.

Esboço de designDesign sketch
Esboços de designDesign sketches

No modo de exibição de detalhes, eu queria visualizar as informações de cada elemento com o texto renderizado linda em espaço 3D.In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. O modelo de rede 3D animada é exibido na área central e pode ser exibido a partir de diferentes ângulos.The animated 3D electron model is displayed in the center area and can be viewed from different angles.

Interação

ProtótiposPrototypes
Protótipos de interaçãoInteraction prototypes

O usuário pode alterar o tipo de superfície por ar tocando nos botões na parte inferior da tabela-eles podem alternar entre plano, cilindro, esfera e dispersão.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 e padrões comuns usados neste aplicativoCommon controls and patterns used in this app

Objeto interagir (botão)Interactable object (button)

O objeto de interação é um objeto, que pode responder às entradas básicas do HoloLens.Interactable object is an object, which can respond to basic HoloLens inputs. Ele é fornecido como um pré-fabricado/script, que você pode aplicar facilmente a qualquer objeto.It's provided as a prefab/script, which you can easily apply to any object. Por exemplo, você pode fazer com que uma xícara de café em sua cena interaja e responda a entradas como olhar, toque de ar, navegação e gestos de manipulação.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. Saiba maisLearn more

objeto nteractable

Coleção de objetosObject collection

A coleção de objetos é um objeto, que ajuda você a dispor vários objetos em várias formas.Object collection is an object, which helps you lay out multiple objects in various shapes. Ele dá suporte a plano, cilindro, esfera e dispersão.It supports plane, cylinder, sphere, and scatter. Você pode configurar propriedades adicionais, como RADIUS, número de linhas e espaçamento.You can configure additional properties such as radius, number of rows and the spacing. Saiba maisLearn more

Coleção de objetos

Detalhes técnicosTechnical details

Você pode encontrar scripts e pré-fabricados para a tabela periódica do aplicativo de elementos no GitHub de laboratórios de design de realidade misturada.You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

A história do portador para o HoloLens 2Porting story for HoloLens 2

Leia a história sobre como a tabela periódica do aplicativo de elementos foi atualizada com as interações de instinctual do HoloLens 2.Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

Tabela periódica dos elementos 2.0Periodic Table of the Elements 2.0

Sobre o autorAbout the author

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
Designer de UX @MicrosoftUX Designer @Microsoft

Veja tambémSee also