11. Wireframes & Spatial Layout
Fase: 04 — Modelado del Sistema
Entregable: 11 de 15
Proyecto: NoteVault (PC Windows, macOS, Linux, Android, iOS / iPhone)
Estado: Formalizado y Certificado
1. Distribución Espacial de la Interfaz (Desktop & Móvil)
NoteVault implementa una arquitectura visual simétrica optimizada para el factor de forma de cada dispositivo:
1.1 Entorno de Escritorio: Arquitectura de Tres Paneles
┌──────────────────────────────────────────────────────────────────────────────────────────┐
│ TopBar: [Logo NoteVault] [Selector Bóveda] [Search Ctrl+O] [Pomodoro: 48:20 🍅] [⚙] │
├─────────────┬─────────────────────────────────────────────────────────────┬──────────────┤
│ Barra Iconos│ Barra de Pestañas: [Nota 1.md ×] [Lienzo.canvas ×] [+] │ Panel Der. │
│ ─────────── ├──────────────────────────────┬──────────────────────────────┤ ──────────── │
│ [Home] │ │ │ [Metadatos] │
│ [Notas] │ Editor Markdown │ Vista Previa / KaTeX │ │
│ [Canvas] │ (CodeMirror 6) │ (Milkdown / Preview) │ [Backlinks] │
│ [Calendario]│ │ │ - Nota A │
│ [Hábitos] │ # Teorema de Taylor │ Teorema de Taylor │ - Nota B │
│ [Gimnasio] │ │ │ │
│ [Tareas] │ $$f(x) = \sum \dots$$ │ f(x) = \sum_{n=0}^{\infty} │ [Índice TOC] │
│ [Proyectos] │ │ │ # Teorema │
│ [Finanzas] │ │ │ ## Demostrac.│
│ [Estudio] │ │ │ │
│ [Inglés] │ │ │ │
├─────────────┴──────────────────────────────┴──────────────────────────────┴──────────────┤
│ StatusBar: [Sincronizado Local] [mtime: 10:45:00] [Palabras: 1,420] [UTF-8] [Zoom 100%] │
└──────────────────────────────────────────────────────────────────────────────────────────┘
1.2 Entorno Móvil: Navegación Inferior con una Mano
┌─────────────────────────────────┐
│ [NoteVault] [Buscar 🔍] │
├─────────────────────────────────┤
│ Hoy · Martes 20 Octubre │
│ ───────────────────────────── │
│ [Progreso del Día: 75%] │
│ [==================== ] │
│ │
│ Tareas para Hoy: │
│ [ ] Entregar MkDocs (P1) │
│ [x] Repaso de Álgebra (SRS) │
│ │
│ Hábitos: │
│ (✓) Meditación (15d racha) │
│ ( ) Lectura 20m │
│ │
│ Entrenamiento: │
│ [Push Hipertrofia] -> Iniciar │
├─────────────────────────────────┤
│ (+) Botón Flotante Acción │
├─────────────────────────────────┤
│ [Hoy] [Hábitos] [Gym] [Tareas] │
│ 🏠 ✓ 💪 ☑ │
└─────────────────────────────────┘
2. Marco Conceptual: Nodo de Layout Espacial
1. **Entidad principal e independiente.**
2. **Es la entidad líder del conjunto de datos:** posee un identificador global único que fija la topología de la ventana (`layout_profile_id`: `LAY-DESKTOP-TRIPLE-PANEL`), consultado por el gestor de estado visual (`navState.ts`).
3. **Existe por sí misma en la configuración de la interfaz sin depender del contenido cargado**, y es la única responsable de calcular las dimensiones porcentuales y anchos mínimos de las columnas antes de renderizar los paneles.
4. **Punto de entrada y límite de consistencia:** Si el ancho de la pantalla decrece por debajo de 900px, colapsa automáticamente los paneles laterales para prevenir desbordamientos horizontales.