Tavola periodica degli elementiPeriodic Table of the Elements

Nota

Questo articolo illustra un esempio esplorativo creato nei laboratori di progettazione della realtà mista, un posto in cui si condividono le informazioni e suggerimenti per lo sviluppo di app di realtà miste.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. Gli articoli e il codice correlati alla progettazione si evolveranno Man mano che si effettuano nuove individuazioni.Our design-related articles and code will evolve as we make new discoveries.

La tabella periodica degli elementi è un'app di esempio Open Source di Microsoft Mixed Reality Design Labs.Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. Informazioni su come disporre una matrice di oggetti nello spazio 3D con vari tipi di superficie usando una raccolta di oggetti.Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Viene inoltre illustrato come creare oggetti interagibili che rispondono agli input standard da HoloLens.Also learn how to create interactable objects that respond to standard inputs from HoloLens. È possibile usare i componenti di questo progetto per creare un'esperienza di app per realtà mista.You can use this project's components to create your own mixed reality app experience.

Tabella del periodo dell'app elementi

Video demoDemo video

Registrato con HoloLens 2 con l'acquisizione di realtà mistaRecorded with HoloLens 2 using Mixed Reality Capture

Informazioni sull'appAbout the app

La tabella periodica degli elementi Visualizza gli elementi chimici e ognuna delle relative proprietà in uno spazio 3D.Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. Incorpora le interazioni di base di HoloLens, ad esempio lo sguardo e il tocco aereo.It incorporates the basic interactions of HoloLens such as gaze and air tap. Gli utenti possono ottenere informazioni sugli elementi con i modelli 3D animati.Users can learn about the elements with animated 3D models. Possono comprendere visivamente la Shell degli elettroni di un elemento e il suo nucleo, composto da protoni e neutroni.They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.

SfondoBackground

Dopo aver sperimentato HoloLens, sapevo di voler sperimentare un'app di tabella periodica in realtà mista.After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. Poiché ogni elemento dispone di molti punti dati visualizzati con testo, ho pensato che sarebbe stato molto soggetto per l'esplorazione della composizione tipografica in uno spazio 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. Fornire agli utenti la possibilità di visualizzare il modello Electron dell'elemento era un'altra parte interessante di questo progetto.Giving users the chance to visualize the element's electron model was another interesting part of this project.

ProgettazioneDesign

Per la visualizzazione predefinita della tabella periodica, ho immaginato le caselle tridimensionali che contenevano il modello Electron di ogni 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 di ogni casella sarà translucida, in modo che l'utente possa ottenere un'idea approssimativa del volume dell'elemento.The surface of each box would be translucent so that the user could get a rough idea of the element's volume. Con lo sguardo e il tocco aereo, l'utente può aprire una visualizzazione dettagliata di ogni elemento.With gaze and air tap, the user could open up a detailed view of each element. Per fare in modo che la transizione tra la visualizzazione tabella e la visualizzazione dei dettagli sia uniforme e naturale, è stata creata in modo analogo all'interazione fisica di una scatola aperta in vita reale.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.

Schizzo di progettazioneDesign sketch
Schizzi di progettazioneDesign sketches

In visualizzazione dettagli, ho voluto visualizzare le informazioni di ogni elemento con un testo con rendering bello nello spazio 3D.In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. Il modello di elettroni 3D animato viene visualizzato nell'area centrale e può essere visualizzato da diverse angolazioni.The animated 3D electron model is displayed in the center area and can be viewed from different angles.

Interazione

PrototipiPrototypes
Prototipi di interazioneInteraction prototypes

L'utente può modificare il tipo di superficie per aria toccando i pulsanti nella parte inferiore della tabella, che possono spostarsi tra il piano, il cilindro, la sfera e la dispersione.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.

Controlli e modelli comuni usati in questa appCommon controls and patterns used in this app

Oggetto interagibile (pulsante)Interactable object (button)

L' oggetto interagibile è un oggetto che può rispondere agli input HoloLens di base.Interactable object is an object, which can respond to basic HoloLens inputs. Viene fornito come prefabbricato/script, che è possibile applicare facilmente a qualsiasi oggetto.It's provided as a prefab/script, which you can easily apply to any object. Ad esempio, è possibile rendere interattivo un caffè nella scena e rispondere a input come lo sguardo, il tocco aereo, la navigazione e i movimenti di manipolazione.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. Altre informazioniLearn more

oggetto nteractable

Raccolta di oggettiObject collection

La raccolta di oggetti è un oggetto che consente di disporre più oggetti in varie forme.Object collection is an object, which helps you lay out multiple objects in various shapes. Supporta piani, cilindri, sfere e dispersione.It supports plane, cylinder, sphere, and scatter. È possibile configurare proprietà aggiuntive, ad esempio raggio, numero di righe e spaziatura.You can configure additional properties such as radius, number of rows and the spacing. Altre informazioniLearn more

Raccolta di oggetti

Dettagli tecniciTechnical details

È possibile trovare gli script e i prefabbricati per la tabella periodica dell'app elementi nel progetto Mixed Reality Labs GitHub.You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

Storia di porting per HoloLens 2Porting story for HoloLens 2

Leggere la storia relativa alla modalità di aggiornamento della tabella periodica dell'app elementi con le interazioni istintive di HoloLens 2.Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

Tavola periodica degli elementi 2.0Periodic Table of the Elements 2.0

Informazioni sull'autoreAbout the author

Picture of Dong Yoon Park Dong Yoon ParkDong Yoon Park
Designer di esperienza utente @MicrosoftUX Designer @Microsoft

Vedere ancheSee also