AgentSkillsCN

common-region

被限定在特定区域内的元素，往往会形成一种天然的“群组”意识。在设计卡片式布局、分组模块、聚合表单，或各类视觉容器时，这一原则能够帮助设计师以更清晰的层级划分，强化元素间的逻辑联系。

SKILL.md
--- frontmatter
name: common-region
description:
  Elementos dentro de un área delimitada se perciben como grupo. Use cuando
  diseñe cards, secciones, formularios agrupados, o contenedores visuales.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: gestalt

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