In einem Microsoft Design Experiment

Geräteübergreifende Dimensionalität für alltägliche Anwendungen

Dimensionalität. Es ist ein Designkonzept, das dem Microsoft Design-Team am Herzen liegt, insbesondere, wenn wir unser Fluent Design System weiterentwickeln. Früher war es diese Dimensionalität - dieses immersive, interaktive Gefühl -, das beim Spielen und am Ende der Geschichte erwartet wurde. Aber jetzt fragen wir uns: Wie können Sie diese Erfahrung in alltäglichen Anwendungen nutzen und Menschen auf jedem Gerät einbeziehen? Ein kleines Team unserer Designer, technischen Künstler und App-Entwickler hat die Universal Windows Platform und die Demut-Wetter-App verwendet, um diese Frage zu beantworten.

Spoiler Alarm: Es war eine Herausforderung. Es ist weiterhin ein lebendiges Experiment im Bereich der Skalierbarkeit und Transzendenz: Wir lernen, passen an, optimieren, versagen, siegen und lernen wieder. Hier ist ein Blick darauf, was es bedeutet, über Dimensionen hinweg zu bauen.

Gebäude holographisch

Wir haben uns für HoloLens als Startlinie entschieden, um ein 3D-Erlebnis in gemischter Realität zu schaffen, das für Neulinge einfach zu erfassen und zu genießen ist. Von dort aus würden wir herausfinden, wie wir diese Erfahrung in eine 2D-Anwendung einbringen können. Die ganze Idee ist: Lasst uns Leute einladen; Verwenden Sie erfahrungsübergreifend dieselben Komponenten, um Vertrautheit, Reaktionsfähigkeit und ein Gefühl für den Ort zu entwickeln.

Warum eine Wetter-App? Es stellte sich heraus, dass Sie viel Spaß damit haben und in kurzer Zeit etwas Super-Ansprechendes bauen können. Außerdem basiert es auf der Realität, ist für alle bekannt und hat uns die Möglichkeit gegeben, einige coole Orte zu erforschen. Wir haben unsere Aufmerksamkeit auf Telefon, PC / Tablet und HoloLens gerichtet und sind von dort aus geflogen, um die Arbeit in wenigen Wochen abzuschließen und verschiedene Wege zu erkunden, um Dimensionalität und Freude in ein universelles Erlebnis zu bringen.

Das Projekt startete im Mai, eine feuchte und kühle Zeit hier in der Gegend von Seattle (schockierend), sodass wir sonnige Standorte an der Küste im Kopf hatten. Wir haben ein wenig experimentiert, um den richtigen Maßstab und Detaillierungsgrad für den Bau von vier atmosphärischen Dioramen in HoloLens zu finden: Toskana, Mykonos, Cape Cod und Monument Valley. Das Erlebnis beginnt an den Rändern jeder Szene: Ein Stück einer Miniaturwelt taucht in Ihre alltägliche Umgebung ein. Von dort aus werden Sie eingeladen, mit den Objekten zu interagieren - zu wahren Szenen, die sich anpassen, wenn Sie näher kommen und um sie herumgehen. Unser operatives Thema ist hier Engagement. Sie beginnen auf der Ebene der Informationsarchitektur: Wie ist die Temperatur in der Toskana? Dann laden wir Sie ein. Kommen Sie dem Gelände näher. Jetzt siehst du das Licht und die Atmosphäre. Als nächstes die detaillierten Bewegungs- und Raumgeräusche. Nun zu den erzählerischen Details. Jemand winkt dir mit schwankenden Bäumen zu.

Da sich HoloLens in einer gemischten Realität befindet, ist es möglich, dass jemand in Ihrer realen Welt durch Ihr Hologramm geht. Und du wirst absolut nein schreien! wie es passiert, weil du jetzt diese Umgebung lebst. Es geschieht schnell: Sie spüren etwas, Sie sind dabei und Sie sind emotional verbunden. Es ist so, als würde man sich in einer Schneekugel verirren. Ein dynamischer, faszinierender Ort an einem Ort.

Um die richtige Größe, Skalierung und Platzierung von Objekten zu erhalten, haben wir uns darauf verlassen, dass unser 3D-Künstler eng mit den Designern von Maya (3D-Animationssoftware) zusammenarbeitet. Hier haben wir die Blockierung durchgeführt, um die richtige Größe, Skalierung und Platzierung der Objekte in einer größeren Szene zu bestimmen, genau wie beim Regie führen eines Films. Jedes Element musste so dimensioniert werden, dass unabhängig von Betrachtungsabstand oder Betrachtungswinkel realistische Proportionen erhalten bleiben.

Konzeptskizze für Cape CodFrühe Blockierung der Cape-Cod-Szene, um den Umfang der Elemente zu bestimmen

Wir haben die besten Ergebnisse erzielt - und sind schnell vorangekommen -, als wir Schatten in die Texturen gebacken haben. Der Realismus jeder Szene beruhte auf sorgfältiger Liebe zum Detail und einem kunstvollen Auge. Zum Beispiel trugen die unterschiedliche Größe, Richtung und Bewegung der Wellen dazu bei, die Atlantikküste von einer Insel in der Ägäis zu unterscheiden (Details sind wichtig!). Der Übergang zwischen den Dioramen ist relativ schnell und einfach. Sie konzentrieren sich immer auf die Szene und das Gefühl, das sie hervorruft, nicht auf die Bewegung selbst.

Die endgültige Kunst ist bereit für Beleuchtung und Animationen

Was macht noch einen Auftritt? Sonnenanbeter. Ein Seemann. Möwen, Kühe, ein Traktor. Wir hatten viel Spaß daran, die Geschichte zu erzählen und Leute einzuladen. Wir haben subtile Animationen hinzugefügt und festgestellt, dass sich die Anzahl der Polygone, die Texturgröße und die Anzahl der steuernden Verbindungen auf die Glätte der Animation auswirken. Umgebungsgeräusche (Crashing Waves) und ausgeprägte Geräusche (Moo!) Waren der letzte Schliff, um alles zum Leben zu erwecken.

Einfache, minimal animierte Möwe und Sonnenanbeter in der Mykonos-Szene.

Skalierung auf 2D

Also haben wir für HoloLens eine hübsche, unterhaltsame, interaktive Sache geschaffen. Nun, wie skaliert man das auf Handy und Tablet zurück und macht 2D- und 3D-Inhalte, die auf natürliche Weise nebeneinander existieren? Können wir das Hologramm in einer flachen Benutzeroberfläche wiederverwenden und trotzdem ein ansprechendes Gefühl erzeugen? Wir haben das Glück, dass die universelle Windows-Plattform dies einfach macht. Sehen Sie sich diese detaillierte Anleitung in einer weiteren Beispiel-Wetter-App an, Atmosphere.

Die Umwandlung in einem Schritt ist immer noch ein Traum, und wir mussten einige manuelle Anpassungen vornehmen, damit das Diorama auf 2D-Geräten großartig aussieht. Wir haben die Shader für den Leuchtturmstrahl angepasst, um ein realistisches Aussehen zu erhalten, und die MIP-Kartenkomprimierung für die Diorama-Texturen deaktiviert. Wir experimentierten auch mit Farben, die dem Diorama entsprachen, bevor wir auf einem Graustufenhintergrund landeten.

Cape Cod Diorama optimiert für die 2D App

Adaptive Eingabe

Beim Fluent Design System dreht sich alles um Übersetzung und Zusammenhalt. Unser Ziel in diesem Experiment war es, jedes Element so zu übersetzen, dass es dem Gerätetyp und der verwendeten primären Eingabe (Berührung, Maus, Blick) entspricht. Wir haben uns zum Ziel gesetzt, die Kontinuität des Erlebens sowohl aus visueller als auch aus interaktiver Perspektive aufrechtzuerhalten und dabei sicherzustellen, dass die Dinge auf jedem Gerät auf natürliche und vertraute Weise funktionieren. Wir wollten, dass das HoloLens-Erlebnis der holographischen und 3D-Form treu bleibt, aber dennoch für neue Benutzer zugänglich und einfach ist - Gesten, Blicke und Sprache sollten so vertraut sein wie mit einem PC. Die 2D-Erfahrung musste für die verfügbare Bildschirmfläche optimiert werden und sich bei der Interaktion mit Berührung und Maus natürlich anfühlen, während sie sich immer noch so eindringlich anfühlt wie die gemischte Realität. Entwerfen außerhalb des Kastens, sozusagen innerhalb eines Kastens.

Hier ein kleiner Einblick in einige Arbeiten! Beachten Sie die Schaltfläche zum Umschalten zwischen den Szenen - ein gemeinsames Gestaltungselement für alle drei Formfaktoren, um die Orientierung zu erleichtern.

Frühe Skizzen zum adaptiven Verhalten

Die Mixed-Reality-Interaktion war voller Experimente mit Volumen und Umfang - als würde man den Schalter näher an den Betrachter bringen. Aber nicht alles profitiert von der Lautstärke. Wir haben den Typ zur besseren Lesbarkeit flach gehalten:

In der 2D-Erfahrung haben wir einige der neuen Bestandteile von Fluent Design System verwendet, um die Kontinuität zu verbessern und gleichzeitig die Erfahrung auf diesem Gerät zu optimieren - Dinge wie Licht, Tiefe und Bewegung erwecken Dinge zum Leben, auch in einem flachen Raum.

Hier zeigt eine physische Acrylscheibe den Effekt, der Acryl inspiriert hat:

Und hier wird Acryl in der Wetter-App angewendet, um die detaillierte Vorhersage anzuzeigen und gleichzeitig den Kontext des Dioramas im Blick zu behalten.

In der Telefonumgebung, in der eine kleinere Bildschirmgröße die Trennung von Navigationselementen und Inhalten bedeutet, bietet die verbundene Animation eine kontinuierliche, filmische Navigation, die das Eintauchen in 3D widerspiegelt.

Folgendes haben wir aus diesem Experiment gelernt:

  • Wenn Sie wie wir neu in der Entwicklung für HoloLens sind und mit einer eigenen App experimentieren möchten, sind die Mixed-Reality-Design-Anleitung und die Codebeispiele von Mixed Reality Design Labs eine hervorragende Hilfe für den Einstieg.
  • Der arbeitsintensivste Teil des Projekts war die Erstellung von vier wunderschönen 3D-Szenen und deren Implementierung in die HoloLens.
  • Der 2D-Teil der App hat sich sehr schnell mit den Fluent Design System-Bausteinen vereinigt.

Was wir weiter untersuchen möchten:

  • Die Tastenfelder, die wir in diesem Experiment verwendet haben, sind in 2D und 3D kohärent und vertraut, lassen sich jedoch möglicherweise nicht auf eine Mixed-Reality-Wetter-App mit Dutzenden oder Hunderten von Standorten skalieren. Mit einer größeren Standortliste müssten wir uns wahrscheinlich von der Vertrautheit der 2D-Tastenfelder zu etwas bewegen, das für gemischte Realität optimiert ist. Wie würde das aussehen? Gibt es andere Navigationsmuster in 2D, die einen reibungslosen Übergang zu einer Mixed-Reality-Erfahrung ermöglichen?
  • Welche anderen Möglichkeiten können wir die Freude an den 3D-Szenen in das 2D-Erlebnis bringen? Was sind die Zwischenschritte zwischen 2D und Mixed Reality, sowohl für einen Benutzer als auch für einen Entwickler?

Dankeschön an Creative Director Ramiro Torres, Oscar Murillo und das unerschrockene Team für die Arbeit an dieser App. Nächstes Mal werden wir diesen Hai hinzufügen.

Wir freuen uns über Feedback von der Community. Was halten Sie von unserem kleinen Wetterexperiment? Was möchten Sie noch von uns erkunden lassen? Was haben Sie mit Fluent Design erstellt und wie ist es gelaufen? Sprechen Sie uns in den Kommentaren unten an, beginnen Sie eine Unterhaltung in unserer LinkedIn-Gruppe oder besuchen Sie uns auf Twitter @MicrosoftDesign. Ich kann es kaum erwarten zu sehen, was Sie erstellen.

Um mit Microsoft Design auf dem Laufenden zu bleiben, folgen Sie uns auf Dribbble, Twitter und Facebook oder nehmen Sie an unserem Windows Insider-Programm teil. Wenn Sie sich unserem Team anschließen möchten, besuchen Sie aka.ms/DesignCareers.