OpenSkillIndex← back to search
claude-codecreative

Claude-skill-registry common-region

Principio de Región Común

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/common-region-vjrivmon-setup-software-ia" ~/.claude/skills/majiayu000-claude-skill-registry-common-region && rm -rf "$T"
manifest: skills/data/common-region-vjrivmon-setup-software-ia/SKILL.md
tags
#ux-design#gestalt#ui-patterns#visual-hierarchy#design-principles#accessibility
source content

Principio de Región Común

Resumen

Los elementos que comparten un área cerrada o delimitada se perciben como pertenecientes al mismo grupo, incluso si no comparten otras características.

Origen

  • Autor: Stephen Palmer
  • Año: 1992
  • Fuente: "Common Region: A New Principle of Perceptual Grouping"

Fundamento Psicológico

Los límites visuales crean containers perceptuales que el cerebro interpreta como agrupadores. Es un principio más reciente, agregado a la Gestalt clásica, pero extremadamente relevante para interfaces digitales donde cards y containers son ubicuos.

Aplicación en Diseño

Cards y Containers

  • Cards con border o background diferenciado
  • Secciones con fondos alternos
  • Fieldsets con border visible
  • Well components para contenido agrupado

Formularios

  • Grupos de campos relacionados en sections
  • Fieldsets para datos de contacto, envío, pago
  • Inline grouping para campos relacionados
  • Step containers en wizards

Dashboards

  • Widgets en cards separadas
  • Métricas agrupadas por categoría
  • Paneles con bordes definidos
  • Data visualization containers

Listas y Tablas

  • Rows con alternating backgrounds
  • Headers en región separada
  • Footers delimitados
  • Grupos de filas relacionadas

Ejemplos

  • Material Design Cards: Elevated containers para contenido
  • Bootstrap Wells: Áreas con fondo diferenciado
  • Form Fieldsets: Grupos de campos con legend
  • Dashboard Widgets: Cada métrica en su card
  • Stripe Checkout: Secciones claramente delimitadas

Anti-patterns

  • ❌ Contenido relacionado sin container visual
  • ❌ Cards con bordes tan sutiles que no delimitan
  • ❌ Secciones sin separación clara
  • ❌ Formularios sin agrupación de campos
  • ❌ Demasiados niveles de nesting confusos

Métricas

  • Group Association Accuracy: Usuarios asocian contenido correctamente
  • Visual Boundary Clarity: Claridad de delimitaciones
  • Container Hierarchy: Niveles de anidamiento comprensibles
  • Scan Pattern Efficiency: Eye-tracking respeta regiones

Principios Relacionados

  • [[proximity]] - Cercanía dentro de región refuerza grupo
  • [[figure-ground]] - Región como figura sobre fondo
  • [[similarity]] - Styling de containers consistente

Referencias