Superficie esquemática
Zonas de un espacio y su relación.
Definición
La superficie esquemática dibuja una pantalla por zonas y dice de qué pieza del modelo sale cada una: un objeto, una propiedad, un enlace o una acción. La silueta de cada zona repite de qué pieza viene. Sirve para revisar si una pantalla responde al modelo de producto o tiene zonas sin origen.
- Datos
- ranura · zona · pieza · detalle · rol
- Buena para
- Comprobar que cada zona de una pantalla sale de una pieza del modelo.
- Evítala cuando
- Cuando todavía no hay un modelo de objetos acordado del que sacar las zonas.
- Se lee bien
- Entre 2 y 8 elementos; dibuja hasta 9
- Datos que faltan
- Se niega a dibujar y dice qué valor falta.
- Accesibilidad
- Lector de pantalla: tabla de datos · respeta «reducir movimiento»
Forma de los datos
Qué columnas pide
| Columna | Tipo | Para qué |
|---|---|---|
ranura | string | En qué ranura del arquetipo vive la zona. Obligatoria y CERRADA: un valor que no sea una ranura del arquetipo hace FALLAR con las que sí valen. |
zona | string | El rótulo de la zona. Obligatorio: «la zona de la ranura «cabecera» no tiene rótulo». |
pieza | string | De qué pieza del modelo sale la zona: objeto · propiedad · enlace · accion. Obligatoria y cerrada; es el argumento entero de la forma. |
detalle · opcional | string | La línea de apoyo dentro de la zona. |
rol · opcional | string | neutro · foco · alerta · ausente · favorable. `ausente` es la zona que el modelo pide y la pantalla no tiene. |
Tamaños
Ancha por necesidad
Esta pieza necesita anchura para que cada rótulo quepa entero. El motor prefiere decirlo a apretarla.
A menos de 480 px el motor se niega y explica por qué: Named slots: surface needs 630px; only 321px available
. En el móvil se ve la versión ancha, a tamaño legible y sin recortar, dentro de un marco que se desliza.
Cuándo usarla
Tres preguntas antes de elegirla
¿Cada zona sale de una pieza del modelo?
Si solo quieres ordenar ideas en casillas con nombre, el lienzo de ranuras basta.
Sí: quédate con superficie esquemática
No: usa Lienzo de ranuras
¿Explicas una pantalla y no un objeto con sus partes?
Si lo que describes es un objeto y sus partes nombradas, la anatomía anotada lo hace.
Sí: quédate con superficie esquemática
No: usa Anatomía anotada
¿Ya está decidido el modelo de objetos?
Si aún hay que definir los tipos y sus relaciones, empieza por el mapa de ontología.
Sí: quédate con superficie esquemática
No: usa Mapa de ontología
Código
La misma pieza, con tus datos
import { getPreset, renderComposition } from 'visx-render/node';
const spec = await getPreset('concept-surface');
spec.data.rows = misFilas; // ranura, zona, pieza
const { svg, warnings } = await renderComposition(spec);También en React con Chart y prepareComposition. Guía para desarrolladores →
Dudas
¿Qué es una ranura?
Un hueco fijo del arquetipo de pantalla, como la cabecera. Solo valen las ranuras del arquetipo; otra cualquiera hace fallar el dibujo.
¿Qué es una zona ausente?
La que el modelo pide y la pantalla no tiene. Se marca con el rol «ausente».
¿Qué hace si faltan datos?
Se niega a dibujar y dice qué valor falta.
¿Cómo se ve en el móvil?
A menos de 480 px el motor no la compone sin pisar o cortar rótulos, y lo dice. En el móvil se ve la versión ancha, a tamaño legible, dentro de un marco que se desliza.
Relacionadas
Otras formas de responder «cómo funciona algo»
Matriz de adyacenciaquién se conecta con quién en una red
Diagrama de arcosconexiones entre nodos ordenados en una línea
Diagrama de pajaritacausas y consecuencias de un riesgo central
Columnas enfrentadascontrastar dos o más posturas
Rejilla con casilla vacíaver qué combinación falta
Diagrama de Ishikawacausas posibles de un problema por familias