Sección 4 · Diseño

Bocetos iniciales

Primera versión de las pantallas, hecha a mano antes de pasar a Figma. Son los bocetos de baja fidelidad (D-1) que fijaron la estructura de la navegación; las decisiones visuales finales están en la sección 5.

Boceto → wireframe → prototipo

Cada pantalla pasó por tres estados: boceto de baja fidelidad (esta sección, hecho a mano), wireframe de alta fidelidad en Figma (§4) y prototipo funcional en Android Studio (§7). El boceto valida la estructura y el orden de la información; se esperó a la alta fidelidad para decidir colores y tipografía.

6.1 Bocetos de las pantallas

Boceto de la pantalla Resumen — **Boceto 1 ·** Resumen (pantalla inicial). La cifra disponible del mes ocupa el bloque superior y la única acción principal está en la mitad inferior (P-3, H-3).

Boceto del paso de monto del registro — **Boceto 2 ·** Registro, paso 1: captura del monto con teclado numérico propio, con gasto como valor por omisión (P-2).

Boceto del paso de categoría del registro — **Boceto 3 ·** Registro, paso 2: selección de categoría y tipo de movimiento, con nota opcional.

Boceto de la pantalla Historial — **Boceto 4 ·** Historial: lista agrupada por día con subtotales diarios y filtros (RN-10).

Qué cambió entre el boceto y el wireframe

El boceto ubicó una sola acción principal en la mitad inferior y la cifra disponible arriba. En la alta fidelidad (§4) se añadió la gráfica de gasto por categoría y se separaron ingresos y gastos con color; la estructura ordenada aquí se conservó intacta.