El diseño de interfaces gráficas de usuario (GUI) de alta calidad para dispositivos con restricciones de hardware puede ser difícil. Pero este artículo demuestra algunas formas de maximizar la eficiencia del diseño para hacerlo más fácil. Las GUI más eficientes usan menos memoria, CPU y GPU cuando manejan partes móviles y animaciones, y permiten que el diseñador tenga más espacio para ser creativo con sus diseños, en lugar de preocuparse por las limitaciones de su hardware.
Diseño con elementos comunes
El siguiente ejemplo muestra una pantalla de menú simple con algunos elementos comunes:
- Cada ICON_X es un botón que cambiaría la GUI a una pantalla de color diferente.
- El botón INICIO devuelve la GUI a la pantalla de inicio.
- El elemento HORAS:MINUTOS:SEGUNDOS permanece en la esquina superior derecha de todas las pantallas.
- Los botones ICON_X y el botón INICIO permanecen en la misma ubicación, independientemente de los botones ICON_X seleccionados.
Si un desarrollador de GUI diseñara un diseño de menú copiando y pegando el elemento "TimeAndIconBanner" (la barra superior muestra HORAS: MINUTOS: SEGUNDOS, y la barra inferior muestra los botones de iconos) para cada una de las pantallas en esta GUI, el resultado hay varios objetos duplicados en el modelo GUI. En la imagen de abajo, cada Carta en el Deck Object que compone las “IconScreens” contiene el mismo elemento TimeAndIconBanner.
El elemento TimeAndIconBanner es parte de cada pantalla individual en IconScreens, y las múltiples instancias de TimeAndIconBanner requieren que se vuelva a dibujar ese elemento cada vez que se cambia la pantalla, lo que genera un uso innecesario de RAM y CPU.
Para optimizar este diseño y otros similares, los diseñadores deben aislar los elementos comunes, TimeAndIconBanner en este caso, y moverlos a una sola instancia un nivel más arriba, como se muestra a continuación.
Solo un elemento TimeAndIconBanner ahora vive en el mismo nivel que IconScreens. Esta jerarquía ilustra la disposición más eficiente de los componentes de diseño, lo que da como resultado un cambio correspondiente en el orden z de estos grupos dentro de Altia Design, lo que significa que el grupo TimeAndIconBanner de nivel más alto se muestra sobre el grupo IconScreens más bajo en la pantalla.
Diseño con partes móviles
Considere un velocímetro animado. Si la GUI está diseñada de tal manera que se vuelve a dibujar toda la pantalla, en lugar de solo la aguja, se necesitará más memoria para esta GUI. Mantener la imagen de fondo estática y animar solo la aguja en la parte superior crea el diseño más eficiente y que ahorra memoria. Otro lugar para obtener un rendimiento adicional puede ser reducir sus fps. Es posible que algunas animaciones no requieran la velocidad de fotogramas máxima del hardware para lograr una fluidez satisfactoria, y con Altia Design es fácil experimentar y encontrar un fps más bajo que funcione en su diseño.
Si desea obtener más información sobre cómo Altia puede ayudarlo a optimizar sus GUI para brindar el mejor rendimiento con la menor cantidad de memoria y energía, lo invitamos a programa una demostración con un miembro de nuestro equipo experto en GUI hoy.