Los gehts

Erstellen Sie Ihre AI Glasses-App mit dem Jetpack Compose Glimmer-UI-Framework für Augmented Reality-Erlebnisse, die auf allen AI Glasses funktionieren. Jetpack Compose Glimmer ist eines der ersten UI-Frameworks, das für transparente Displays und den Formfaktor von KI-Brillen optimiert ist.

1. Kaufprozesse festlegen

Konzentriere dich auf wichtige Nutzeraktionen (Critical User Journeys, CUJs), die mit den Prinzipien für schnell erfassbare Informationen des Formfaktors von KI-Brillen kompatibel sind. Das kann mit einer minimalen Benutzeroberfläche oder nur mit Audio erfolgen, sodass der Nutzer seine Umgebung weiterhin wahrnehmen kann. Um Möglichkeiten zu finden, sollten Sie Einstiegspunkte in Ihrer aktuellen App in Betracht ziehen, die von Google Glass profitieren würden.

Ein Nutzer kann beispielsweise von einer detaillierten Routenführung für Fußgänger profitieren, die er per Sprachbefehl aufrufen kann, um zu seinem Ziel zu gelangen.

Bei der Auswahl des User Journey sollten auch die Grundsätze für Sicherheit, Komfort und Leistung berücksichtigt werden. Wählen Sie beispielsweise keine Aufgaben aus, für die die Kamera des Nutzers unnötig lange benötigt wird oder die die Privatsphäre des Nutzers verletzen.

Grundlegende Prinzipien

Extrahieren Sie Funktionen aus Ihrer mobilen App, die vom Brillenformfaktor profitieren. Zum Beispiel auf einen Blick erfassbare Informationen.
Portieren Sie nicht die gesamte Smartphone-App auf die Datenbrille, da sie nicht an den Formfaktor der Datenbrille angepasst wird.

2. Minimieren und übersetzen

Beginnen Sie für die Benutzeroberfläche im Displaymodus mit einem CUJ aus Ihrer Kern-App:

  • Layouts für den Fokus optimieren: In Layouts werden wichtige Informationen priorisiert. Die Anzahl der Aktionen und visuellen Elemente wird reduziert, um den Fokus der Nutzer aufrechtzuerhalten.

  • Tiefe für Hierarchie verwenden: Die Tiefe wird verwendet, um die Priorität von Elementen zu kommunizieren.

  • Von unten nach oben entwerfen: Beginnen Sie beim Erstellen von Mockups unten und ordnen Sie die Komponenten nach oben an.

  • Visuelle Komponenten übersetzen: Verwenden Sie für KI-Brillen mit Display Jetpack Compose Glimmer-Komponenten und Layoutmuster.

Weitere Informationen zu Komponenten und App-Ansicht

Die Einkaufslisten-App reduziert die Listenansicht auf eine minimale Liste und benötigt nur eine Feedback-Benutzeroberfläche.
Abbildung 1: Eine Einkaufslisten-App, die für die Display AI-Brille übersetzt wurde. Die Systemleisten sind visuell deutlich zu erkennen, die KI-Brillen sind in der Regel leer. Hier könnte die App-Leiste in einen Titel-Chip und die Material-Listenelemente in die Jetpack Compose-Glimmer-Liste übersetzt werden.

Optimierte Komponenten

A. Oberflächenfarbe: Die Oberflächenfarbe von Komponenten ist schwarz, um den Kontrast für Karteninhalte zu maximieren.

B. Umriss und Markierung: Die Umrissfarbe ist für den Kontrast optimiert. Durch die Verwendung einer Hervorhebung wird eine visuelle Darstellung ermöglicht, die für bestimmte Arten von Eingaben verwendet werden kann.

C. Form: Ein weicheres Formsystem wird verwendet, um die Lesbarkeit zu verbessern, indem die Schärfe der Ecken reduziert und der Tragekomfort erhöht wird. Oberflächenfarbe: Die Oberflächenfarbe von Inhalten ist Weiß, um den Kontrast zur Umgebung zu maximieren.

D. Typografie: Die Typografieskala von Glimmer verwendet eine kleine Anzahl von optimierten Textkörper- und Titelformaten, bei denen Kerning, Größe und Gewicht für optimale Lesbarkeit optimiert sind.

E. Ikonografie: Die Verwendung von abgerundeten Material-Symbolen passt zur abgerundeten Typografieskala.

Glimmer-Komponenten sind für die transparente Darstellung optimiert.
Abbildung 2: Hier steht die Bildunterschrift.

3. Audiofluss und Hinweise

Sprechen Sie mit dem Audio. Audio sollte einen großen Teil Ihrer AI Glasses-App ausmachen, ohne den Nutzer zu überfordern. Sie müssen aber auch eine reine Audioausgabe für bestimmte Geräte berücksichtigen. Dazu können Sie eine Flussübersicht nur für Audio erstellen. Interaktionen und Feedback mit Audio-Hinweisen und Dialogen kennzeichnen.

Erstellen Sie ein reines Audio-Flussdiagramm, um dialogorientierte Kommunikation zu planen, die den Nutzer nicht überfordert.

4. Eingabesteuerelemente für die Karte

Achten Sie darauf, die Eingaben für die Gerätesteuerung und die Gesten zuzuordnen. Sie können damit beginnen, grundlegende App-Interaktionen wie das Tippen in ein Trackpad-Tippen zu übersetzen.

Weiter zu den Eingaben.

Eine für XR optimierte App bietet eine Nutzererfahrung, die speziell für XR entwickelt wurde, und implementiert Funktionen, die nur auf XR verfügbar sind.

5. System‑UI

Berücksichtigen Sie andere Systemschnittstellen.

Ihre App wird im Home-Bereich und in anderen Systemfunktionen wie Benachrichtigungen angezeigt, sofern sie verwendet werden. Diese können in der Systemleiste angezeigt werden.

Weitere Informationen zur System-UI

Erstellen Sie ein reines Audio-Flussdiagramm, um dialogorientierte Kommunikation zu planen, die den Nutzer nicht überfordert.

6. Zusätzliche Angaben

Auf KI-Brillen können verschiedene Szenarien für Ihre App auftreten, z. B. Verbindungs- oder Berechtigungsprobleme. Berücksichtigen Sie diese verschiedenen Status sowohl in Ihrer Haupt-App als auch in Ihrer Brillen-App.

Fordern Sie Berechtigungen für Gerätefunktionen an.

Denken Sie daran, dass Sie diese Aspekte über die visuelle Benutzeroberfläche und Audio berücksichtigen müssen. Geben Sie beispielsweise Audio-Feedback, um mitzuteilen, dass ein Berechtigungsablauf auf dem Mobilgerät abgeschlossen werden muss, oder um Fehler vorzulesen.

Berücksichtigen Sie verschiedene App-Status sowohl in Ihrer Haupt-App als auch in der Brillen-App.