Documentacion Interfaz Grafica - jsyh1/practica_aplicada GitHub Wiki
Especificación de Diseño de Interfaz Gráfica
1. Introducción
1.1 Propósito
Este documento especifica el diseño de la interfaz gráfica de usuario (GUI) de la aplicación All Ten, presentando cada componente visual junto con la justificación de las decisiones de diseño adoptadas.
El objetivo es dejar registro formal de las decisiones tomadas durante el diseño de la interfaz, sirviendo como referencia para el equipo de desarrollo y como evidencia de trazabilidad del diseño para la evaluación del curso.
La especificación documenta tanto la pantalla principal del juego como las interfaces secundarias relacionadas con la navegación, consulta de partidas y reglas del juego.
1.2 Alcance
La especificación cubre las siguientes interfaces de la aplicación:
- Pantalla principal del juego "Reto de hoy".
- Menú principal de navegación.
- Interfaz de Consulta de Partidas.
- Interfaz de Reglas del juego.
- Elementos de navegación entre las diferentes interfaces.
- Paleta de colores utilizada en la aplicación.
- Justificación de la selección cromática desde criterios de usabilidad, jerarquía visual y psicología del color.
No cubre aspectos internos de implementación, persistencia de datos, autenticación ni configuración del sistema.
1.3 Definiciones y siglas
- GUI: Graphical User Interface (Interfaz Gráfica de Usuario).
- CTA: Call To Action (llamado a la acción).
- Reto: conjunto de cuatro números y diez resultados objetivo (1 a 10) que deben ser resueltos durante una ronda.
- Menú: interfaz que agrupa las funcionalidades secundarias de la aplicación.
- Partida: registro de una ronda de juego que contiene información como jugador, puntaje, tiempo y resultados obtenidos.
2. Vista general de la interfaz
La aplicación All Ten utiliza una estructura de interfaces independientes relacionadas mediante un menú de navegación. La pantalla principal concentra la actividad de juego, mientras que las funcionalidades secundarias se encuentran agrupadas en interfaces independientes.
2.1 Pantalla principal - Reto de hoy
La pantalla principal corresponde al espacio donde el usuario desarrolla el reto diario.
La interfaz contiene:
- Nombre de la aplicación.
- Indicador de reto actual.
- Contador de resultados resueltos.
- Diez casillas correspondientes a los objetivos del 1 al 10.
- Barra donde se muestra la expresión matemática construida.
- Teclado numérico.
- Operadores matemáticos.
- Botones de eliminación y reinicio.
- Botón Comprobar.
- Botón de acceso al menú.
La distribución busca mantener todos los elementos necesarios para resolver el reto dentro de una misma pantalla, evitando desplazamientos innecesarios.
2.2 Menú principal
El menú se accede mediante el botón representado por el icono ☰ ubicado en la pantalla principal.
Su función es agrupar las funcionalidades secundarias de la aplicación sin sobrecargar la interfaz principal.
El menú contiene las siguientes opciones:
- Instrucciones: acceso a información relacionada con el funcionamiento del juego.
- Compartir: acción relacionada con compartir información de la partida.
- Consultar Partida: acceso al historial o consulta de partidas.
- Dificultad: acceso a las opciones relacionadas con la dificultad del reto.
Esta organización permite separar las acciones principales del juego de las funcionalidades complementarias.
2.3 Consulta de partidas
La interfaz Consulta de Partidas permite visualizar información correspondiente a partidas realizadas anteriormente.
Cada partida se presenta mediante una tarjeta que contiene:
- Nombre o identificación del jugador.
- Fecha de la partida.
- Puntaje obtenido.
- Tiempo utilizado.
- Cantidad de resultados obtenidos.
- Botón Compartir.
Las partidas se organizan verticalmente para facilitar su lectura y comparación.
El botón Volver ubicado en la parte inferior permite regresar a la interfaz anterior.
2.4 Reglas del juego
La interfaz Reglas del juego presenta las instrucciones necesarias para comprender el funcionamiento de All Ten.
La información incluye:
- Objetivo general del juego.
- Uso de los cuatro números disponibles.
- Operadores permitidos.
- Uso de paréntesis.
- Posibilidad de utilizar fracciones.
- Posibilidad de obtener resultados negativos intermedios.
- Posibilidad de unir números.
- Condición necesaria para completar la ronda.
El botón Volver permite regresar a la interfaz anterior.
3. Consideraciones y justificación de diseño
3.1 Paleta de colores
La interfaz utiliza una paleta basada principalmente en tonos verdes, morados, grises y un fondo oscuro.
| Color | Código HEX | Uso principal |
|---|---|---|
| Verde | #057210 |
Resultados o casillas completadas |
| Morado | #867CA3 |
Resultados pendientes |
| Morado oscuro | #4F378A |
Números disponibles para construir expresiones |
| Gris oscuro | #2C2C2C |
Operadores y botones secundarios |
| Gris claro | #D9D9D9 |
Superficie principal de las interfaces |
| Fondo oscuro | #1F1F1F |
Fondo general de la aplicación |
Nota: los valores HEX deben mantenerse sincronizados con los valores definitivos establecidos en Figma para evitar diferencias entre el prototipo y la implementación.
La selección de colores no se basa únicamente en criterios estéticos. Los colores también cumplen una función de identificación de estados, jerarquía visual y diferenciación entre tipos de controles.
3.2 Psicología y función de los colores
La selección cromática aprovecha asociaciones visuales comunes en interfaces digitales y permite transmitir información sin depender exclusivamente del texto.
Verde
El verde se utiliza para representar las casillas que ya han sido resueltas.
En interfaces digitales, el verde suele asociarse con estados positivos, confirmación, progreso o finalización. En All Ten permite que el usuario identifique rápidamente qué objetivos ya fueron completados.
Su utilización como indicador de progreso reduce la necesidad de revisar individualmente cada resultado.
Morado
El morado se utiliza para representar los objetivos que todavía están pendientes.
Este color proporciona una diferenciación clara respecto al verde y permite mantener una identidad visual propia para los elementos relacionados con el reto.
Además, el tono morado utilizado para los números disponibles establece una relación visual entre los números que el usuario puede utilizar y los objetivos que todavía debe resolver.
Morado oscuro
El morado oscuro se utiliza principalmente en los botones correspondientes a los números disponibles.
La utilización de un tono relacionado con el morado de las casillas pendientes permite establecer una asociación visual entre:
- Los números disponibles.
- Los objetivos pendientes.
- El proceso de resolución del reto.
De esta manera, el usuario puede identificar rápidamente qué elementos corresponden a los datos utilizados para resolver las expresiones.
Gris oscuro
El gris oscuro se utiliza en operadores, botones de utilidad y acciones secundarias.
Al tratarse de un color neutro y menos llamativo que el verde o el morado, permite diferenciar las acciones sobre la expresión matemática de los elementos que representan estados del juego.
Gris claro
El gris claro funciona como superficie principal de las interfaces.
Su carácter neutro permite que los elementos interactivos y los colores de estado tengan mayor protagonismo visual sin generar una saturación excesiva de colores.
Fondo oscuro
El fondo oscuro se utiliza para generar separación visual entre las diferentes superficies claras de la aplicación.
También permite que las tarjetas y paneles de contenido sean percibidos como elementos independientes dentro de la interfaz.
Consideración general
La selección cromática no depende exclusivamente de asociaciones psicológicas. También responde a criterios de:
- Jerarquía visual.
- Diferenciación de estados.
- Consistencia entre interfaces.
- Facilidad de reconocimiento.
- Reducción de carga cognitiva.
- Separación entre información y acciones.
3.3 Codificación por color
Se utiliza el color como uno de los principales canales de retroalimentación de estado.
El verde comunica que un resultado ha sido resuelto, mientras que el morado representa un resultado pendiente.
Para los botones numéricos se utiliza el morado oscuro, relacionado visualmente con las casillas pendientes. Esta asociación permite identificar los números disponibles como elementos utilizados para completar los objetivos todavía no resueltos.
Esta decisión permite que el usuario pueda reconocer el estado de la partida de manera rápida sin tener que interpretar individualmente cada elemento.
3.4 Jerarquía visual y agrupación de controles
Los elementos de la interfaz se organizan mediante tamaño, posición y color.
La jerarquía principal se establece de la siguiente manera:
- Título de la interfaz: identifica inmediatamente la pantalla actual.
- Información principal: muestra el estado o contenido relevante.
- Elementos interactivos: permiten introducir información o ejecutar acciones.
- Acciones principales: reciben mayor espacio y protagonismo visual.
- Acciones secundarias: se mantienen agrupadas y visualmente diferenciadas.
En la pantalla principal, los números disponibles se diferencian de los operadores mediante el color.
Los operadores y herramientas utilizan gris oscuro, mientras que los números utilizan morado oscuro.
El botón Comprobar ocupa todo el ancho disponible y se encuentra en la parte inferior del teclado. Esta ubicación y tamaño lo convierten en la acción principal después de construir una expresión.
En las interfaces secundarias se utiliza una estructura basada en tarjetas y bloques de información para mantener agrupados los datos relacionados.