Der Konfigurator kann als dynamische Visualisierung des Systembetriebs genutzt werden, wie er von den Produktdesign-Teams definiert wurde. Er wird schnell zu einem nützlichen Tool für verschiedene Abteilungen, mit dem Nutzer die Echtzeit-Leistung des Klimageräts, die Materialzusammensetzung sowie die Maße und das User Interface im Blick behalten können. Zudem ist der Klimageräte-Konfigurator eine digitale Visualisierung, mit der Verbraucher das Kühlsystem in Echtzeit einrichten und testen können, indem sie Details zu Kühlanforderungen und Energieeffizienz-Präferenzen auswählen.
Das Ziel dieses Klimageräte-Konfigurators ist es, alle Funktionen mithilfe von individuellen Floating UI, Interaktionen und Animationen.
Die Floating UI muss:
Die Animation soll:
Das Projekt wurde von Grund auf in Vectary Studio modelliert, unter Verwendung von Grundkörpern, dem Edit-Modus und Modifikatoren. Der obere Teil des Klimageräts wurde zuerst in Figma gezeichnet und als .svg-Datei importiert, dort in Geometrie umgewandelt und in einer Booleschen Operation verwendet, um den Ausschnitt zu erstellen.
Lass uns dieses Projekt in einige Kategorien unterteilen, beginnend mit den Animationen. Es gibt insgesamt vier Animationen: Start, Stop, Fan und Swing-Modus. Wie die Namen schon vermuten lassen, erfüllt jede eine ganz bestimmte Funktion.
Das Erstellen mehrere Animationen statt nur einer geben dir mehr Kontrolle darüber. Beim Einrichten von Interaktionen kannst du das Gefühl einer kontinuierlichen Animation erzeugen, indem du Verzögerungen basierend auf deren Dauer einstellst. Auf diese Weise startet eine Animation, sobald die vorherige endet. Diese Methode bietet dir später eine viel bessere Kontrolle über die Animationen, wenn du sie mit Floating-UI-Elementen kombinierst und Interaktionen einrichtest. Vergiss nicht, die passenden Bedingungen einzurichten; andernfalls funktioniert die Reihenfolge möglicherweise nicht. Zum Beispiel löst der Swing-Modus die Swing-Animation aus, die erst abgespielt werden kann, wenn die Start-Animation beendet ist.
Die gesamte Szene ist in einem neutralen, hellgrau-weißen Farbschema gehalten. Indoor-Klimaanlagen fügen sich meist unauffällig in den Raum ein, weshalb wir uns für eine weiße Farbe und metallische Materialien entschieden haben. Ein cooles Design-Feature dieser speziellen Klimaanlage ist die Frontabdeckung, die die internen Komponenten verdeckt, wenn das Gerät nicht in Betrieb ist. Auf der Abdeckung befindet sich ein dünnes Geometrieteil mit einem Glasmaterial , das angewendet wurde, was ihm Tiefe und schöne Reflexionen verleiht. Temperatur und Icons befinden sich unter diesem Glaspanel. Auf den äußeren Teilen wurde eine Lightmap gebacken, während Ambient Occlusion (AO) für die internen Teile verwendet wurde. AO-Texturen sind kleiner im Vergleich zu Lightmaps, was sie ideal für Bereiche macht, in denen keine hohe Detailgenauigkeit erforderlich ist.
Animierte Materialien werden auf zwei Ebenen mit Noise- und Bend-Modifikatoren angewendet, unter Verwendung von Lottie-Dateien im .json-Format, wobei beide auf Emissive eingestellt sind und eine gewisse Deckkraft aufweisen.
Tipp: Die Bodenebene kann nicht rotiert werden. Um einen schönen, gleichmäßig verteilten Schatten auf der Wand hinter der Klimaanlage zu erzielen, verwende eine Ebene mit einer gebackenen AO-Map.
Die schwebende UI bildet eine vereinfachte Version einer echten Klimaanlagen-Fernbedienung nach. Sie enthält eine Ein-/Aus-Taste, Tasten zum Erhöhen/Senken der Temperatur sowie Tasten zum Ein-/Ausschalten des Swing-Modus und der Luftfilterung. Die Sichtbarkeit der FUI kann durch Klicken auf das Logo-Icon in der Ecke umgeschaltet werden, was sicherstellt, dass die FUI das Canvas nicht ständig verdeckt.
Das Luftreiniger-Icon steuert die Sichtbarkeit von zwei Icon-Zuständen: einer mit einer Farbe, die „Aus“ anzeigt, und einer in Grün, der „An“ anzeigt. Es löst außerdem die Sichtbarkeit eines 3D-Blatt-Icons in der eigentlichen Klimaanlage aus.
Der Swing-Modus löst die Swing-Animation unter der Bedingung aus, dass die Start-Animation abgeschlossen ist.
Das Power-Button-Icon nutzt einen Trick, bei dem zwei Icons durch Ein-/Ausblend-Interaktionen wechseln, wodurch das Definieren von Bedingungen überflüssig wird. Der Power-Button löst mehrere Aktionen aus, wie das Anzeigen des Luftstroms mit animierten Materialien, das Anzeigen des Power-Button-Zustands als „An“, das Abspielen der Start-Animation und das Anzeigen der Temperatur mit 3D-Text. Das Ausschalten des Power-Buttons löst dann die Stop-Animation aus und blendet die animierten Luftstrom-Materialien mit Pfeilen aus.
Der wichtigsten Aspekt dieses Projekts ist die Verwendung von Events, die eine bestimmte Logik basierend auf dem Verhalten von Elementen definieren. In dieser Szene steuern Events die Temperatureinstellungen. Zuerst musst du den On-Load-Event-Wert festlegen. Wir verwenden den Event-Typ „Number“, bei dem ein neues Temp_def-Event mit dem Wert 24 erstellt wird. Das bedeutet: Sobald du das Projekt öffnest, wird die Standardtemperatur in der FUI und auf der Klimaanlage auf 24 gesetzt. Du kannst dieses Temp_def in andere Elemente in Studio einfügen, wie zum Beispiel in 3D-Text oder das Textfeld der schwebenden UI.
Als Nächstes musst du definieren, dass sich Temp_def bei Klick um eine Einheit erhöht. Die neue Interaktion sieht wie folgt aus:
Die Interaktion zur Verringerung der Temperatur ist auf „On click“ auf das Down-Icon eingestellt, mit einer Bedingung für das minimale Event, Typ Number, Event Temp_def und Wert größer als 18. Die Aktion ist dann auf Event, Typ Number, Event Temp_def und Wert Temp_def-1 eingestellt.
Dieses Setup stellt sicher, dass das Klicken auf die Up- oder Down-Icons die Temperatur um 1 erhöht oder verringert, mit einem Minimum von 18 und einem Maximum von 28.
