Saltar al contenido
ssntl/ui

Patrones

Los componentes cuidan los detalles; la composición decide si una pantalla tiene sentido. Cada patrón se muestra mal y bien con las piezas de la propia librería.

La tarea primero

Empieza por la tarea que la persona vino a hacer. La navegación y el marco pasan a segundo plano hasta que se necesitan.

navegación primero
  • Inicio
  • Pedidos
  • Clientes
  • Reportes
  • Ajustes

Buscar un pedido

Incorrecto
tarea primero

Buscar un pedido

Correcto
La búsqueda es la pantalla, no una nota bajo el menú.

La estructura primero

Resuelve el diseño y la jerarquía con bloques neutros antes de agregar imágenes. La decoración nunca es el punto focal.

decoración

Taza de cerámica

Incorrecto
estructura

Taza de cerámica

Q 95 · 24 en inventario

Correcto
Un marco neutro guarda el lugar; la foto real llega después.

Ubicación de acciones

Una acción que se repite queda en el mismo lugar en cada fila, así se encuentra sin buscarla. En listas es el borde final (ListItemAction).

final, inicio, adentro
Reloj de pared
Taza de cerámica
Mochila de día
Incorrecto
final, siempre
Reloj de pared
Taza de cerámica
Mochila de día
Correcto
Un solo lugar para la acción, fila tras fila.

Nombres consistentes

Un concepto, una palabra, en todas partes: navegación, títulos y botones. Si en el menú es una tienda, en el botón también.

tres nombres

Menú: Espacios

Organizaciones

Incorrecto
un nombre

Menú: Tiendas

Tiendas

Correcto
Tres nombres hacen tres cosas; un nombre hace una.

Personalidad

Mantén una sola voz: títulos simples, descripciones directas, verbos en los botones, mayúscula solo al inicio. Sin exageraciones ni gritos.

tono mezclado

¡¡¡Ofertas locas!!!

te va a encantar, créenos

Incorrecto
una voz

Nuevo esta semana

Doce productos, repuestos hoy.

Correcto
Calmado y claro se lee seguro.

Estilos compartidos

La misma acción se ve igual dondequiera que aparezca. Elige su variante de Button una vez y repítela.

3 estilos
Incorrecto
1 estilo
Correcto
Tres botones Abrir, un estilo.