La progettazione di interfacce utente grafiche (GUI) di alta qualità per dispositivi con vincoli hardware può essere difficile. Ma questo articolo mostra alcuni modi per massimizzare l'efficienza della progettazione per renderlo più semplice. GUI più efficienti utilizzano meno memoria, potenza della CPU e della GPU durante la gestione di parti mobili e animazioni e consentono al progettista più spazio per essere creativo con i propri progetti, invece di preoccuparsi dei propri vincoli hardware.

Design con elementi comuni

L'esempio seguente mostra una semplice schermata di menu con alcuni elementi comuni:

  • Ogni ICON_X è un pulsante che cambierebbe la GUI in uno schermo colorato diverso.
  • Il pulsante HOME riporta la GUI alla schermata iniziale.
  • L'elemento ORE:MINUTI:SECONDI rimane nell'angolo in alto a destra per tutte le schermate.
  • I pulsanti ICON_X e il pulsante HOME rimangono nella stessa posizione indipendentemente dai pulsanti ICON_X selezionati.

Blog per sviluppatori serie_1

Se uno sviluppatore di GUI dovesse progettare un layout di menu copiando e incollando l'elemento "TimeAndIconBanner" (la barra in alto che mostra ORE:MINUTI:SECONDI e la barra in basso che mostra i pulsanti icona) per ciascuna delle schermate di questa GUI, il risultato sono diversi oggetti duplicati nel modello GUI. Nell'immagine sottostante, ogni Carta nell'Oggetto Deck che compone gli “IconScreens” contiene lo stesso elemento TimeAndIconBanner.

L'elemento TimeAndIconBanner fa parte di ogni singola schermata in IconScreens e le istanze multiple di TimeAndIconBanner richiedono un ridisegno di tale elemento ogni volta che viene modificata la schermata, con conseguente utilizzo di RAM e CPU non necessario.

Per ottimizzare questo progetto e altri simili, i progettisti dovrebbero isolare gli elementi comuni, in questo caso TimeAndIconBanner, e spostarli in una singola istanza di un livello superiore, come mostrato di seguito.

Solo un elemento TimeAndIconBanner ora vive allo stesso livello di IconScreens. Questa gerarchia illustra la disposizione più efficiente dei componenti di progettazione, determinando una modifica corrispondente nell'ordine z di questi gruppi all'interno di Altia Design, il che significa che il gruppo TimeAndIconBanner di livello più alto viene visualizzato sopra il gruppo IconScreens inferiore sul display.

Design con parti mobili

Considera un tachimetro animato. Se la GUI è progettata in modo tale che l'intero schermo venga ridisegnato, anziché solo l'ago, sarà necessaria più memoria per questa GUI. Il mantenimento dell'immagine di sfondo statica e l'animazione solo dell'ago in alto crea il design più efficiente e salva memoria. Un altro modo per ottenere prestazioni extra può essere la riduzione degli fps. Alcune animazioni potrebbero non richiedere il frame rate massimo dell'hardware per ottenere una fluidità soddisfacente e con Altia Design è semplice sperimentare e trovare un fps inferiore che funzioni nel tuo progetto.

Contapassi semplice

Se desideri saperne di più su come Altia può aiutarti a ottimizzare le tue GUI per offrire le migliori prestazioni utilizzando il minimo di memoria e potenza, ti invitiamo a programmare una demo con un membro del nostro team di esperti GUI oggi.