Das Entwerfen hochwertiger grafischer Benutzeroberflächen (GUI) für Geräte mit Hardwareeinschränkungen kann schwierig sein. Dieser Artikel zeigt jedoch einige Möglichkeiten zur Maximierung der Entwurfseffizienz, um es einfacher zu machen. Effizientere GUIs verbrauchen weniger Speicher, CPU- und GPU-Leistung beim Umgang mit beweglichen Teilen und Animationen und geben dem Designer mehr Raum, um mit seinen Designs kreativ zu sein, anstatt sich über Hardwarebeschränkungen Gedanken zu machen.
Design mit gemeinsamen Elementen
Das folgende Beispiel zeigt einen einfachen Menübildschirm mit einigen gemeinsamen Elementen:
- Jedes ICON_X ist eine Schaltfläche, die die GUI auf einen andersfarbigen Bildschirm umschalten würde.
- Die HOME-Taste bringt die GUI zum Startbildschirm zurück.
- Das Element HOURS:MINUTES:SECONDS bleibt für alle Bildschirme in der oberen rechten Ecke.
- Die ICON_X-Schaltflächen und die HOME-Schaltfläche bleiben an derselben Stelle, unabhängig davon, welche ICON_X-Schaltflächen ausgewählt sind.
Wenn ein GUI-Entwickler ein Menülayout durch Kopieren und Einfügen des Elements „TimeAndIconBanner“ (die obere Leiste zeigt STUNDEN:MINUTE:SEKUNDEN und die untere Leiste die Symbolschaltflächen) für jeden der Bildschirme in dieser GUI entwerfen würde, wäre das Ergebnis sind mehrere doppelte Objekte im GUI-Modell. In der Abbildung unten enthält jede Karte im Deck-Objekt, aus dem die „IconScreens“ bestehen, dasselbe TimeAndIconBanner-Element.
Das TimeAndIconBanner-Element ist ein Teil jedes einzelnen Bildschirms unter IconScreens, und die mehreren Instanzen von TimeAndIconBanner erfordern jedes Mal, wenn der Bildschirm geändert wird, ein Neuzeichnen dieses Elements, was zu unnötiger RAM- und CPU-Auslastung führt.
Um dieses und andere ähnliche Designs zu optimieren, sollten Designer die gemeinsamen Elemente, in diesem Fall TimeAndIconBanner, isolieren und sie wie unten gezeigt in eine einzige Instanz eine Ebene höher verschieben.
Nur ein TimeAndIconBanner-Element lebt jetzt auf der gleichen Ebene wie IconScreens. Diese Hierarchie veranschaulicht die effizienteste Anordnung von Designkomponenten, was zu einer entsprechenden Änderung der z-Reihenfolge dieser Gruppen innerhalb von Altia Design führt, was bedeutet, dass die TimeAndIconBanner-Gruppe der höchsten Ebene über der unteren IconScreens-Gruppe auf dem Display angezeigt wird.
Design mit beweglichen Teilen
Betrachten Sie einen animierten Tachometer. Wenn die GUI so gestaltet ist, dass der gesamte Bildschirm neu gezeichnet wird, anstatt nur die Nadel, wird mehr Speicher für diese GUI benötigt. Das Beibehalten des statischen Hintergrundbilds und Animieren nur der Nadel oben erzeugt das effizienteste und speichersparendste Design. Ein weiterer Ort, an dem Sie zusätzliche Leistung herausholen können, ist die Reduzierung Ihrer fps. Einige Animationen erfordern möglicherweise nicht die maximale Framerate der Hardware, um eine zufriedenstellende Glätte zu erzielen, und mit Altia Design ist es einfach, zu experimentieren und eine niedrigere fps zu finden, die in Ihrem Design funktioniert.
Wenn Sie mehr darüber erfahren möchten, wie Altia Ihnen helfen kann, Ihre GUIs zu optimieren, um mit dem geringsten Arbeitsspeicher und Stromverbrauch die beste Leistung zu erzielen, laden wir Sie dazu ein planen eine Demo mit einem Mitglied unseres Experten-GUI-Teams heute.