60 lines
4.8 KiB
Markdown
60 lines
4.8 KiB
Markdown
|
# Comparación UI/UX v2.1 frente a v1
|
|||
|
|
|
|||
|
|
Mismas fixtures sintéticas y siete resoluciones. `antes/` contiene M01/M02 ya implementadas. Geometría en píxeles CSS; posiciones verticales de capturas desplazadas no se comparan como cambio de cabecera.
|
|||
|
|
|
|||
|
|
## Capacidad de Personas y perfiles
|
|||
|
|
|
|||
|
|
| Viewport | Card | Tabla antes → después | Primera fila antes → después | Columnas finales |
|
|||
|
|
| --- | ---: | ---: | ---: | --- |
|
|||
|
|
| 1600 | 755,1 | 1364,4 → 723,1 | 233 → 153 | Perfil, Cuenta, Estado, Configuraciones |
|
|||
|
|
| 1440 | 656,6 | 1364,4 → 624,6 | 233 → 193 | Perfil, Cuenta, Estado, Configuraciones |
|
|||
|
|
| 1280 | 919 | 1364,4 → 887 | 233 → 153 | Perfil, Persona, Cuenta, Estado, Configuraciones |
|
|||
|
|
| 1024 | 904 | 1364,4 → 872 | 233 → 153 | Perfil, Persona, Cuenta, Estado, Configuraciones |
|
|||
|
|
| 768 | 720 | 1364,4 → 688 | 233 → 173 | Perfil, Cuenta, Estado, Configuraciones |
|
|||
|
|
| 390 | 358 | 326 → 326 | 213 → 213 | Perfil, Configuraciones |
|
|||
|
|
| 320 | 288 | 256 → 256 | 301 → 301 | Perfil, Configuraciones |
|
|||
|
|
|
|||
|
|
Con una cuenta de 141 caracteres, a 1440 px la tabla pasa de 1364,4 a 624,6 px, dentro del Card de 656,6 px. La persona deja de competir en una columna mínima. La primera fila pasa de 233 a 193 px. En móvil se mantienen sus valores íntegros y la altura necesaria para leerlos.
|
|||
|
|
|
|||
|
|
Las configuraciones a 390 px pasan de 949 a 661 px con detalles técnicos cerrados (30,3 % menos). Nombre y estado quedan al principio de cada fila. La cuenta y ruta completas se comprueban también con el disclosure abierto.
|
|||
|
|
|
|||
|
|
La cabecera de perfiles a 320 px gana espacio vertical para conservar ambos botones completos. No se optimiza altura a costa de recortar una acción. Los límites medidos están en `narrowHeaderActions`.
|
|||
|
|
|
|||
|
|
## Umbrales reales de contenedor
|
|||
|
|
|
|||
|
|
| Card | Cabeceras finales | Tabla final / scrollWidth | Enlaces visibles por fila |
|
|||
|
|
| ---: | --- | ---: | ---: |
|
|||
|
|
| 599 | Perfil, Configuraciones | 567 / 567 | 3 |
|
|||
|
|
| 600 | Perfil, Cuenta, Estado, Configuraciones | 568 / 568 | 3 |
|
|||
|
|
| 601 | Perfil, Cuenta, Estado, Configuraciones | 569 / 569 | 3 |
|
|||
|
|
| 839 | Perfil, Cuenta, Estado, Configuraciones | 807 / 807 | 3 |
|
|||
|
|
| 840 | Perfil, Persona, Cuenta, Estado, Configuraciones | 808 / 808 | 3 |
|
|||
|
|
| 841 | Perfil, Persona, Cuenta, Estado, Configuraciones | 809 / 809 | 3 |
|
|||
|
|
|
|||
|
|
A 600–839 px se agrupan perfil/persona. Desde 840 px se recuperan cinco columnas; por debajo de 600 px se agrupan también cuenta y estado. No hay dos enlaces accesibles a la misma identidad en la fila.
|
|||
|
|
|
|||
|
|
## Capturas comparables
|
|||
|
|
|
|||
|
|
| Escenario | V1 | V2.1 |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| Principal y dos miembros | [Antes](../antes/principal-1440.png) | [Después](../despues/principal-1440.png) |
|
|||
|
|
| Personas y perfiles, 1440 | [Antes](../antes/perfiles-1440.png) | [Después](../despues/perfiles-1440.png) |
|
|||
|
|
| Perfiles, 320 y acciones completas | [Antes](../antes/perfiles-320.png) | [Después](../despues/perfiles-320.png) |
|
|||
|
|
| Cinco familias, escritorio | [Antes](../antes/configuraciones-1440.png) | [Después](../despues/configuraciones-1440.png) |
|
|||
|
|
| Carpeta con ruta extensa, móvil | [Antes](../antes/configuraciones-390.png) | [Después](../despues/configuraciones-390.png) |
|
|||
|
|
| Solo pendientes | [Antes](../antes/pendientes-390.png) | [Después](../despues/pendientes-390.png) |
|
|||
|
|
| Preview 5 de 50 / 5 de 80 | [Antes](../antes/denso-resumen.png) | [Después](../despues/denso-resumen.png) |
|
|||
|
|
| 50 activos | [Antes](../antes/denso-50.png) | [Después](../despues/denso-50.png) |
|
|||
|
|
| 60 con archivados | [Antes](../antes/denso-60-con-archivados.png) | [Después](../despues/denso-60-con-archivados.png) |
|
|||
|
|
| 80 miembros | [Antes](../antes/equipamiento-80.png) | [Después](../despues/equipamiento-80.png) |
|
|||
|
|
| Vacío estrecho | [Antes](../antes/vacio-320.png) | [Después](../despues/vacio-320.png) |
|
|||
|
|
|
|||
|
|
|
|||
|
|
Detalles completos: [390 px](../despues/detalles-tecnicos-390.png), [1440 px](../despues/detalles-tecnicos-1440.png). [Cobertura desconocida y revisión](../despues/cobertura-desconocida-pendiente.png), [error parcial](../despues/error-parcial-carpetas.png), [modo oscuro](../despues/configuraciones-oscuras-390.png), [reflow 200 %](../despues/reflow-200.png), [reflow 400 %](../despues/reflow-400.png).
|
|||
|
|
|
|||
|
|
## Resultados y límites
|
|||
|
|
|
|||
|
|
Los 13 métodos MCP pasan por tandas, incluidos cinco recorridos reutilizados de v1. Se comprobaron totales 0/1/5/6/50/60/80, refetch, errores, teclado, foco, rutas y aislamiento. Datos y resultados están en [mediciones.json](../mediciones.json) y [validaciones.json](../validaciones.json). El [manifiesto](../capturas.json) contiene las 61 capturas y sus hashes SHA-256, contrastados con los registros.
|
|||
|
|
|
|||
|
|
El zoom se emula mediante viewport/DPR; no se verificó el zoom nativo ni lector de pantalla. No se afirma conformidad WCAG completa. La incidencia del pool de la primera instalación y los fallos globales ajenos se describen en [el informe](../../../../implementacion-uiux-ficha-puesto-v2.1.md).
|