Periodensystem der ElementePeriodic Table of the Elements

Hinweis

In diesem Artikel wird ein exploratives Beispiel erläutert, das wir in den Entwurfs Labors für gemischte Realitäterstellt haben, einem Ort, an dem wir unsere Erkenntnisse und Vorschläge für die Entwicklung gemischter Reality-apps teilen.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. Unsere Entwurfs bezogenen Artikel und Code werden sich weiterentwickeln, wenn wir neue Ermittlungen durchführen.Our design-related articles and code will evolve as we make new discoveries.

Die periodische Tabelle der Elemente ist eine Open-Source-Beispiel-App aus den Mixed Reality-Entwurfs Labs von Microsoft.Periodic Table of the Elements is an open-source sample app from Microsoft's Mixed Reality Design Labs. Erfahren Sie, wie Sie mithilfe einer Objekt Auflistung ein Array von Objekten im 3D-Raum mit verschiedenen Oberflächentypen aufstellen.Learn how to lay out an array of objects in 3D space with various surface types using an Object collection. Außerdem wird beschrieben, wie Sie Objekt übergreifende Objekte erstellen, die auf Standard Eingaben aus hololens reagieren.Also learn how to create interactable objects that respond to standard inputs from HoloLens. Sie können die Komponenten dieses Projekts verwenden, um Ihre eigene Benutzeroberflächen Funktion für gemischte Realität zu erstellen.You can use this project's components to create your own mixed reality app experience.

Period-Tabelle der Elements-App

DemovideoDemo video

Aufgezeichnet mit hololens 2 mithilfe von Mixed Reality CaptureRecorded with HoloLens 2 using Mixed Reality Capture

Informationen zur APPAbout the app

Eine periodische Tabelle der Elemente visualisiert die chemischen Elemente und ihre Eigenschaften in einem 3D-Raum.Periodic Table of the Elements visualizes the chemical elements and each of their properties in a 3D space. Es umfasst die grundlegenden Interaktionen von hololens, wie z. b. "Blick" und "Air TapIt incorporates the basic interactions of HoloLens such as gaze and air tap. Benutzer können sich über die Elemente mit animierten 3D-Modellen informieren.Users can learn about the elements with animated 3D models. Sie können die Elektronen Shell eines Elements und den Kern, der aus den Protonen und den neutralen besteht, visuell verstehen.They can visually understand an element's electron shell and its nucleus - which is composed of protons and neutrons.

HintergrundBackground

Nachdem ich die ersten hololens erlebt habe, wusste ich, dass ich mit einer regelmäßigen Tabellen-app in gemischter Realität experimentieren wollte.After I first experienced HoloLens, I knew I wanted to experiment with a periodic table app in mixed reality. Da jedes Element viele Datenpunkte enthält, die mit Text angezeigt werden, dachte ich, dass es sich um die Untersuchung der typografischen Komposition in einem 3D-Raum handelt.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. Den Benutzern die Möglichkeit zu geben, das Elektronen Modell des Elements visuell darzustellen, war ein weiterer interessanter Bestandteil dieses Projekts.Giving users the chance to visualize the element's electron model was another interesting part of this project.

EntwurfDesign

In der Standardansicht der periodischen Tabelle habe ich dreidimensionale Felder vorgestellt, die das Elektronen Modell der einzelnen Elemente enthalten würden.For the default view of the periodic table, I imagined three-dimensional boxes that would contain the electron model of each element. Die Oberfläche jedes Felds wäre über scheinend, sodass der Benutzer einen groben Überblick über das Volume des Elements erhalten könnte.The surface of each box would be translucent so that the user could get a rough idea of the element's volume. Mit Blick und Luft tippen könnte der Benutzer eine ausführliche Ansicht der einzelnen Elemente öffnen.With gaze and air tap, the user could open up a detailed view of each element. Um den Übergang zwischen der Tabellenansicht und der Detailansicht reibungslos und natürlich zu gestalten, habe ich die physische Interaktion eines Box-Öffnens in der Praxis ähnlich gestaltet.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.

EntwurfsskizzeDesign sketch
EntwurfsskizzenDesign sketches

In der Detailansicht wollte ich die Informationen jedes Elements mit schön gerendertem Text im 3D-Raum visualisieren.In detail view, I wanted to visualize the information of each element with beautifully rendered text in 3D space. Das animierte 3D-Elektronen Modell wird im mittleren Bereich angezeigt und kann aus unterschiedlichen Winkeln angezeigt werden.The animated 3D electron model is displayed in the center area and can be viewed from different angles.

Interaktion

TyPrototypes
Interaktions PrototypenInteraction prototypes

Der Benutzer kann den Surface-Typ ändern, indem er auf die Schaltflächen am unteren Ende der Tabelle tippt. Sie können Zwischenebene, Zylinder, Kugel und Punkt umschalten.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.

In dieser APP verwendete allgemeine Steuerelemente und MusterCommon controls and patterns used in this app

Interactable-Objekt (Schaltfläche)Interactable object (button)

Das interactable-Objekt ist ein Objekt, das auf grundlegende hololens-Eingaben reagieren kann.Interactable object is an object, which can respond to basic HoloLens inputs. Sie wird als präfab/Skript bereitgestellt, das Sie problemlos auf jedes beliebige Objekt anwenden können.It's provided as a prefab/script, which you can easily apply to any object. Sie können z. b. einen Kaffeebecher in der Szene in der Szene zusammenstellen und auf Eingaben wie z. b. Blick, Luft tippen, Navigation und Manipulations Gesten reagieren.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. Weitere InformationenLearn more

nteractable-Objekt

ObjektsammlungObject collection

Die Objektsammlung ist ein Objekt, mit dem Sie mehrere Objekte in verschiedenen Formen anordnen können.Object collection is an object, which helps you lay out multiple objects in various shapes. Es unterstützt Ebene, Zylinder, Kugel und Punkt.It supports plane, cylinder, sphere, and scatter. Sie können zusätzliche Eigenschaften wie RADIUS, Anzahl der Zeilen und den Abstand konfigurieren.You can configure additional properties such as radius, number of rows and the spacing. Weitere InformationenLearn more

Objektsammlung

Technische DetailsTechnical details

Sie finden Skripts und Prefabs für die periodische Tabelle der Elements-App auf dem Mixed Reality Design Labs GitHub.You can find scripts and prefabs for the Periodic Table of the Elements app on the Mixed Reality Design Labs GitHub.

Portieren von Story für hololens 2Porting story for HoloLens 2

Lesen Sie den Artikel zum Aktualisieren der periodischen Tabelle der Elements-App mit den instanziellen Interaktionen von hololens 2.Read the story on how Periodic Table of the Elements app was updated with HoloLens 2's instinctual interactions.

Periodensystem der Elemente 2.0Periodic Table of the Elements 2.0

Informationen zum AutorAbout the author

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

Siehe auchSee also