Concevoir des interfaces utilisateur graphiques (GUI) de haute qualité pour des appareils avec des contraintes matérielles peut être difficile. Mais cet article montre quelques façons de maximiser l'efficacité de la conception pour la rendre plus facile. Des interfaces graphiques plus efficaces utilisent moins de mémoire, de CPU et de puissance GPU lors de la gestion des pièces mobiles et de l'animation, et permettent au concepteur d'être plus créatif avec leurs conceptions, au lieu de se soucier de leurs contraintes matérielles.
Concevoir avec des éléments communs
L'exemple ci-dessous montre un écran de menu simple avec quelques éléments communs :
- Chaque ICON_X est un bouton qui changerait l'interface graphique en un écran de couleur différente.
- Le bouton HOME ramène l'interface graphique à l'écran d'accueil.
- L'élément HOURS:MINUTES:SECONDS reste dans le coin supérieur droit pour tous les écrans.
- Les boutons ICON_X et le bouton HOME restent au même emplacement, quels que soient les boutons ICON_X sélectionnés.
Si un développeur d'interface graphique devait concevoir une disposition de menu en copiant et collant l'élément "TimeAndIconBanner" (la barre supérieure affichant HOURS:MINUTES:SECONDS et la barre inférieure affichant les boutons d'icône) pour chacun des écrans de cette interface graphique, le résultat est plusieurs objets en double dans le modèle GUI. Dans l'image ci-dessous, chaque carte de l'objet Deck qui compose les "IconScreens" contient le même élément TimeAndIconBanner.
L'élément TimeAndIconBanner fait partie de chaque écran individuel sous IconScreens, et les multiples instances de TimeAndIconBanner nécessitent un redessin de cet élément chaque fois que l'écran est modifié, ce qui entraîne une utilisation inutile de la RAM et du processeur.
Pour optimiser cette conception et d'autres similaires, les concepteurs doivent isoler les éléments communs, TimeAndIconBanner dans ce cas, et les déplacer vers une instance unique d'un niveau supérieur, comme indiqué ci-dessous.
Un seul élément TimeAndIconBanner vit désormais au même niveau que IconScreens. Cette hiérarchie illustre la disposition la plus efficace des composants de conception, ce qui entraîne un changement correspondant dans l'ordre z de ces groupes dans Altia Design, ce qui signifie que le groupe TimeAndIconBanner de niveau le plus élevé est affiché au-dessus du groupe IconScreens inférieur sur l'écran.
Conception avec pièces mobiles
Considérez un compteur de vitesse animé. Si l'interface graphique est conçue de telle sorte que tout l'écran est redessiné, au lieu de simplement l'aiguille, plus de mémoire sera nécessaire pour cette interface graphique. Maintenir l'image d'arrière-plan statique et animer uniquement l'aiguille sur le dessus crée la conception la plus efficace et la plus économe en mémoire. Un autre endroit pour obtenir des performances supplémentaires peut être de réduire vos fps. Certaines animations peuvent ne pas nécessiter la fréquence d'images maximale du matériel pour obtenir une fluidité satisfaisante, et avec Altia Design, il est simple d'expérimenter et de trouver un fps inférieur qui fonctionne dans votre conception.
Si vous souhaitez en savoir plus sur la façon dont Altia peut vous aider à optimiser vos interfaces graphiques pour offrir les meilleures performances en utilisant le moins de mémoire et de puissance, nous vous invitons à planifier une démo avec un membre de notre équipe d'experts GUI aujourd'hui.