Entwicklung eines interaktiven App-Guides
Support-Teams haben oft Schwierigkeiten mit Apps, die sie noch nie installiert haben.
Ein PDF mit Screenshots ist die Standardlösung. Die meisten Menschen lesen keine PDFs. Ich wollte etwas Besseres bauen. Ich wollte einen Guide, der sich wie die echte App anfühlt. Man sieht den Startbildschirm, klickt auf einen Button und der nächste Bildschirm erscheint.
Ich habe einen interaktiven Guide mit echten Screenshots und anklickbaren Hotspots erstellt.
So funktioniert es
Ich habe Firebase Storage für die Bilder und Vanilla JavaScript für die Logik verwendet. Keine externen Bibliotheken.
- Jeder Bildschirm ist ein vollständiges Bild.
- Ich lege unsichtbare Rechtecke, sogenannte Hotspots, über das Bild.
- Diese Hotspots verwenden Prozentangaben statt Pixel. So bleiben sie auch bei einer Änderung der Fenstergröße korrekt ausgerichtet.
- Eine einfache State Machine übernimmt die Navigation. Jeder Bildschirm hat eine ID, ein Bild und eine Liste von Hotspots.
Der Editor
Das manuelle Messen von Koordinaten ist langsam. Ich habe einen eigenständigen HTML-Editor entwickelt, um den Prozess zu beschleunigen.
- Screenshot hochladen.
- Mit der Maus ziehen, um einen Hotspot zu zeichnen.
- Den Hotspot mit einem Zielbildschirm verknüpfen.
- Den Code direkt exportieren.
Design-Entscheidungen
Nicht jeder Bildschirm verfügt über eine vollständige Navigation. Um Verwirrung zu vermeiden, habe ich anklickbare Bereiche mit einem pulsierenden blauen Leuchten versehen. So sehen die Nutzer genau, wo sie tippen können.
Wichtige technische Erkenntnisse
- Firebase Storage: Erstellen Sie URLs nicht manuell. Verwenden Sie die SDK-Methode
getDownloadURL. Diese enthält den Auth-Token, der benötigt wird, um die Sicherheitsregeln zu umgehen. - CSS Flexbox: Wenn Sie
flex: 1in einem Spaltenlayout verwenden, muss das übergeordnete Element eine explizite Höhe haben. Setzen Siemin-height: 0beim Kindelement, um ein Überlaufen zu verhindern. - Performance: Jeder Klick, der Firebase aufruft, verursacht Verzögerungen. Ich habe einen In-Memory-Cache implementiert und alle Bilder vorab geladen, sobald das Modal geöffnet wird. Das macht die Navigation verzögerungsfrei.
- Skalierung: Verwenden Sie die CSS-Eigenschaft
transform: scale(). Dies stellt sicher, dass das Bild und die Hotspots unabhängig von der Bildschirmgröße perfekt ausgerichtet bleiben.
Das Ergebnis
- 20 Bildschirme, die sich wie ein echtes Telefon bedienen lassen.
- 52 Hotspots mit visuellen Hinweisen.
- Sofortiges Laden durch Preloading und Caching.
- Responsives Design, das sich jeder Modal-Größe anpasst.