Back to Details

aurora-ux

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Aurora UX Skill

Aurora UX Skill

Reglas de experiencia de usuario para formularios Aurora. Este skill complementa 
aurora-layout
(estructura visual) con el enfoque en el FLUJO COGNITIVO del usuario.
Aurora表单用户体验规则。该Skill是对
aurora-layout
（视觉结构）的补充，重点关注用户的认知流程。

Cuándo Usar

适用场景

  • Evaluar la experiencia de usuario de un formulario existente
  • Mejorar el flujo de completado de un formulario
  • Reordenar campos para optimizar la UX
  • Revisar si un formulario sigue buenas prácticas de usabilidad
  • 评估现有表单的用户体验
  • 优化表单的填写流程
  • 重新排序字段以提升UX
  • 审核表单是否符合可用性最佳实践

Principios de Ordenación de Campos

字段排序原则

1. Campos Requeridos Primero

1. 必填字段优先

Dentro de cada sección semántica, los campos 
required
van ANTES que los opcionales.
✅ CORRECTO                    ❌ INCORRECTO
┌─────────────────────┐        ┌─────────────────────┐
│ Name* (required)    │        │ Description         │
│ Code* (required)    │        │ Notes               │
│ Description         │        │ Name* (required)    │
│ Notes               │        │ Code* (required)    │
└─────────────────────┘        └─────────────────────┘
在每个语义分区内，
required
字段要放在可选字段之前。
✅ CORRECTO                    ❌ INCORRECTO
┌─────────────────────┐        ┌─────────────────────┐
│ Name* (required)    │        │ Description         │
│ Code* (required)    │        │ Notes               │
│ Description         │        │ Name* (required)    │
│ Notes               │        │ Code* (required)    │
└─────────────────────┘        └─────────────────────┘

2. Flujo Natural de Información

2. 自然信息流

Orden lógico para el usuario - lo que "ya sabe" antes de lo que "debe decidir":
1. Identificadores     → Código, ID externo (lo trae de otro sistema)
2. Datos básicos       → Nombre, descripción (lo sabe de antemano)
3. Clasificación       → Tipo, categoría (debe elegir)
4. Detalles            → Campos específicos del dominio
5. Contacto            → Email, teléfono (si aplica)
6. Configuración       → Flags, opciones (decisiones finales)
7. Estado              → isActive (usualmente al final)
符合用户逻辑的排序——“已知信息”在前，“需要决策的信息”在后：
1. 标识符     → 编码、外部ID（来自其他系统）
2. 基础数据   → 名称、描述（用户已知）
3. 分类信息   → 类型、类别（需要选择）
4. 详细信息   → 领域特定字段
5. 联系信息   → 邮箱、电话（如适用）
6. 配置项     → 标记、选项（最终决策）
7. 状态       → isActive（通常放在最后）

3. Progressive Disclosure

3. 渐进式披露

Campos avanzados u opcionales en expansion panels:
html
<!-- Campos principales visibles -->
<mat-form-field class="col-8">Nombre</mat-form-field>
<mat-form-field class="col-4">Código</mat-form-field>

<!-- Configuración avanzada colapsada -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>Configuración avanzada</mat-panel-title>
    </mat-expansion-panel-header>
    <!-- Campos opcionales aquí -->
</mat-expansion-panel>
高级字段或可选字段放在展开面板中：
html
<!-- 主字段可见 -->
<mat-form-field class="col-8">名称</mat-form-field>
<mat-form-field class="col-4">编码</mat-form-field>

<!-- 高级配置折叠 -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>高级配置</mat-panel-title>
    </mat-expansion-panel-header>
    <!-- 可选字段放在此处 -->
</mat-expansion-panel>

4. Dependencias de Campos

4. 字段依赖关系

Campos dependientes DEBAJO o AL LADO de su "padre":
html
<!-- País primero (padre) -->
<mat-form-field class="col-4">
    <mat-select formControlName="countryId">...</mat-select>
</mat-form-field>

<!-- Estado/Provincia después (dependiente) -->
<mat-form-field class="col-4">
    <mat-select
        [disabled]="!fg.get('countryId').value"
        formControlName="stateId"
    >
        ...
    </mat-select>
</mat-form-field>
依赖字段放在其父字段的下方或旁边：
html
<!-- 国家（父字段） -->
<mat-form-field class="col-4">
    <mat-select formControlName="countryId">...</mat-select>
</mat-form-field>

<!-- 州/省（子字段） -->
<mat-form-field class="col-4">
    <mat-select
        [disabled]="!fg.get('countryId').value"
        formControlName="stateId"
    >
        ...
    </mat-select>
</mat-form-field>

Matriz de Decisión: Orden de Campos

决策矩阵：字段排序

CriterioPesoEjemplo
Es requerido+3
name
(required) antes de 
description
Es identificador+2
code
antes de 
email
Usuario ya lo sabe+2
type
(elige) antes de 
calculatedField
Afecta otros campos+1
country
antes de 
state
(dependencia)
Es configuración/setting-1
isActive
al final de su sección
Es campo de auditoría-2
createdAt
, 
updatedAt
readonly o hidden
标准权重示例
必填字段+3
name
（必填）放在
description
之前
标识符字段+2
code
放在
email
之前
用户已知信息+2
type
（选择项）放在
calculatedField
之前
影响其他字段+1
country
放在
state
之前（依赖关系）
配置项/设置字段-1
isActive
放在分区最后
审计字段-2
createdAt
、
updatedAt
设为只读或隐藏

Aplicando la Matriz

矩阵应用示例

Campo: name        → required (+3) + identificador (+2) = 5  → PRIMERO
Campo: code        → required (+3) + identificador (+2) = 5  → PRIMERO
Campo: type        → required (+3) = 3                       → SEGUNDO
Campo: description → opcional = 0                            → TERCERO
Campo: isActive    → config (-1) = -1                        → CUARTO
Campo: createdAt   → auditoría (-2) = -2                     → ÚLTIMO/HIDDEN
字段: name        → 必填(+3) + 标识符(+2) = 5  → 第一位
字段: code        → 必填(+3) + 标识符(+2) = 5  → 第一位
字段: type        → 必填(+3) = 3                       → 第二位
字段: description → 可选 = 0                            → 第三位
字段: isActive    → 配置项(-1) = -1                        → 第四位
字段: createdAt   → 审计字段(-2) = -2                     → 最后一位/隐藏

Reglas por Tipo de Formulario

按表单类型划分的规则

Formulario de Alta (Create)

创建表单（Create）

  • Autofocus en primer campo editable
  • Pre-llenar defaults sensatos (isActive = true)
  • Campos calculados ocultos o readonly
  • Validación en blur para campos críticos
typescript
// En ngOnInit o después de crear el form
this.fg.get('name')?.markAsTouched(); // O usar cdkFocusInitial en el input
  • 自动聚焦在第一个可编辑字段
  • 预填充合理默认值（isActive = true）
  • 计算字段设为隐藏或只读
  • 关键字段在失焦时验证
typescript
// 在ngOnInit或创建表单后
this.fg.get('name')?.markAsTouched(); // 或在输入框上使用cdkFocusInitial

Formulario de Edición (Edit)

编辑表单（Edit）

  • Mostrar claramente qué campos son editables vs readonly
  • Preservar valores originales hasta guardar
  • Indicar cambios no guardados si hay modificaciones
  • 清晰区分可编辑字段与只读字段
  • 保留原始值直到保存
  • 若有修改，提示未保存的更改

Formulario de Filtros

筛选表单

  • Campos más usados primero
  • Permitir limpiar todos los filtros con un botón
  • Aplicar en tiempo real o con botón según cantidad de campos
  • 常用字段放在前面
  • 提供一键清空所有筛选条件的按钮
  • 根据字段数量选择实时应用或按钮触发应用

Feedback de Validación

验证反馈

Cuándo Mostrar Errores

错误提示时机

MomentoUsar para
On blurCampos críticos (email, código único)
On submitValidaciones complejas, campos cruzados
En tiempo realContadores de caracteres, formatos
时机适用场景
失焦时关键字段（邮箱、唯一编码）
提交时复杂验证、跨字段验证
实时字符计数器、格式验证

Patrón de Error

错误提示模板

html
<mat-form-field class="col-6">
    <mat-label>Email</mat-label>
    <input
        type="email"
        matInput
        formControlName="email"
    />
    <mat-error>
        @if (fg.get('email')?.hasError('required')) { {{
        t('validation.Required') }} } @if (fg.get('email')?.hasError('email')) {
        {{ t('validation.InvalidEmail') }} }
    </mat-error>
</mat-form-field>
html
<mat-form-field class="col-6">
    <mat-label>邮箱</mat-label>
    <input
        type="email"
        matInput
        formControlName="email"
    />
    <mat-error>
        @if (fg.get('email')?.hasError('required')) { {{
        t('validation.Required') }} } @if (fg.get('email')?.hasError('email')) {
        {{ t('validation.InvalidEmail') }} }
    </mat-error>
</mat-form-field>

Checklist de Revisión UX

UX审核清单

Antes de aprobar un formulario, verificar:
在批准表单前，请检查以下内容：

Estructura y Orden

结构与排序

  • ¿Los campos requeridos están primero en cada sección?
  • ¿El flujo sigue un orden lógico para el usuario?
  • ¿Los campos relacionados están agrupados?
  • ¿Las dependencias están claras (padre → hijo)?
  • 每个分区内的必填字段是否放在前面？
  • 流程是否符合用户的逻辑顺序？
  • 相关字段是否分组？
  • 依赖关系是否清晰（父字段→子字段）？

Interacción

交互

  • ¿Hay feedback claro de errores de validación?
  • ¿Los campos con dependencias se habilitan/deshabilitan correctamente?
  • ¿El formulario es navegable con Tab?
  • ¿El primer campo tiene autofocus en modo Create?
  • 是否有清晰的验证错误反馈？
  • 依赖字段是否正确启用/禁用？
  • 表单是否支持Tab键导航？
  • 创建模式下第一个字段是否自动聚焦？

Claridad

清晰度

  • ¿Los labels son claros y concisos?
  • ¿Hay hints/placeholders donde ayudan?
  • ¿Los campos required están marcados visualmente?
  • ¿Los campos readonly se distinguen de los editables?
  • 标签是否清晰简洁？
  • 需要的地方是否有提示/占位符？
  • 必填字段是否有视觉标记？
  • 只读字段是否与可编辑字段区分开？

Opcionales

可选项

  • ¿Los campos avanzados están en expansion panel?
  • ¿Hay defaults sensatos pre-llenados?
  • 高级字段是否放在展开面板中？
  • 是否预填充了合理的默认值？

Anti-patrones a Evitar

需避免的反模式

Anti-patrónPor qué es maloSolución
Campos required al finalUsuario completa todo y luego vuelve atrásRequeridos primero en cada sección
Todo en una sola columnaDesperdicia espacio, scroll excesivoUsar grid de 12 columnas
Campos sin relación juntosConfunde al usuarioAgrupar por dominio semántico
Labels ambiguosEl usuario no sabe qué ponerLabels descriptivos + hints
Validación solo al submitFrustración al finalValidar en blur para campos críticos
Campos ocultos sin contextoUsuario no sabe que existenMostrar disabled o en panel colapsable
Dependencias sin feedbackUsuario no entiende por qué está disabledTooltip o texto explicativo
Tabs order incorrectoNavegación por teclado confusaRevisar orden natural de campos
反模式问题原因解决方案
必填字段放在最后用户填写完所有内容后需返回修改每个分区内的必填字段放在前面
所有字段单列显示浪费空间、滚动过多使用12列网格布局
无关字段放在一起造成用户困惑按语义领域分组
标签模糊用户不知道该填写什么描述性标签 + 提示
仅在提交时验证最终提交时造成用户挫败感关键字段在失焦时验证
无上下文的隐藏字段用户不知道其存在设为禁用或放在折叠面板中
无反馈的依赖字段用户不理解为何字段被禁用提示框或说明文本
Tab键顺序错误键盘导航混乱检查字段的自然顺序

Gestión de Foco

焦点管理

Autofocus en Create

创建模式下的自动聚焦

html
<input
    matInput
    formControlName="name"
    cdkFocusInitial
/>
html
<input
    matInput
    formControlName="name"
    cdkFocusInitial
/>

Tab Order

Tab键顺序

El orden de Tab debe seguir el orden visual. Si usas CSS para reordenar visualmente, asegúrate de que el HTML mantenga el orden lógico.
html
<!-- ✅ CORRECTO: orden HTML = orden visual = orden Tab -->
<input formControlName="name" />
<!-- Tab 1 -->
<input formControlName="code" />
<!-- Tab 2 -->
<input formControlName="email" />
<!-- Tab 3 -->
Tab键顺序应遵循视觉顺序。如果使用CSS调整视觉顺序，请确保HTML结构保持逻辑顺序。
html
<!-- ✅ 正确：HTML顺序 = 视觉顺序 = Tab键顺序 -->
<input formControlName="name" /><!-- Tab 1 -->
<input formControlName="code" /><!-- Tab 2 -->
<input formControlName="email" /><!-- Tab 3 -->

Estados de Campos

字段状态

Campo Deshabilitado por Dependencia

因依赖关系禁用的字段

html
<mat-form-field class="col-4">
    <mat-label>Estado/Provincia</mat-label>
    <mat-select formControlName="stateId">
        @for (state of filteredStates; track state.id) {
        <mat-option [value]="state.id">{{ state.name }}</mat-option>
        }
    </mat-select>
    @if (!fg.get('countryId')?.value) {
    <mat-hint>Seleccione un país primero</mat-hint>
    }
</mat-form-field>
html
<mat-form-field class="col-4">
    <mat-label>州/省</mat-label>
    <mat-select formControlName="stateId">
        @for (state of filteredStates; track state.id) {
        <mat-option [value]="state.id">{{ state.name }}</mat-option>
        }
    </mat-select>
    @if (!fg.get('countryId')?.value) {
    <mat-hint>请先选择国家</mat-hint>
    }
</mat-form-field>

Campo Calculado

计算字段

html
<mat-form-field class="col-4">
    <mat-label>Total</mat-label>
    <input
        [value]="calculatedTotal"
        matInput
        readonly
    />
    <mat-hint>Calculado automáticamente</mat-hint>
</mat-form-field>
html
<mat-form-field class="col-4">
    <mat-label>总计</mat-label>
    <input
        [value]="calculatedTotal"
        matInput
        readonly
    />
    <mat-hint>自动计算</mat-hint>
</mat-form-field>

Relación con Otros Skills

与其他Skill的关系

SkillQué cubreCuándo usarlo con aurora-ux
aurora-layout
Grid, anchos, seccionesSIEMPRE - UX define orden, layout define estructura
aurora-components
Componentes específicosCuando elijas qué componente usar
aurora-development
Lógica de formulariosPara implementar las reglas de UX
Skill覆盖范围何时与aurora-ux一起使用
aurora-layout
网格、宽度、分区始终配合使用 - UX定义顺序，layout定义结构
aurora-components
特定组件选择组件时使用
aurora-development
表单逻辑实现UX规则时使用

Ejemplo de Evaluación UX

UX评估示例

Formulario Original (problemas)

原始表单（存在问题）

┌─────────────────────────────────────────────────────────┐
│ [Description: col-12]              ← Opcional primero   │
│ [isActive: col-4] [Notes: col-8]   ← Config mezclada    │
│ [Name*: col-8] [Code*: col-4]      ← Required al final  │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ [Description: col-12]              ← 可选字段在前       │
│ [isActive: col-4] [Notes: col-8]   ← 配置项与其他字段混合│
│ [Name*: col-8] [Code*: col-4]      ← 必填字段在最后      │
└─────────────────────────────────────────────────────────┘

Formulario Corregido

修正后的表单

┌─────────────────────────────────────────────────────────┐
│ [Code*: col-4] [Name*: col-8]      ← Required primero   │
│ [Description: col-12]              ← Opcional después   │
│ [Notes: col-12]                    ← Opcional después   │
│ [isActive: col-4]                  ← Config al final    │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ [Code*: col-4] [Name*: col-8]      ← 必填字段在前       │
│ [Description: col-12]              ← 可选字段在后       │
│ [Notes: col-12]                    ← 可选字段在后       │
│ [isActive: col-4]                  ← 配置项在最后        │
└─────────────────────────────────────────────────────────┘

Recursos

参考资源

  • Layout: Consultar 
    aurora-layout
    para reglas de grid y secciones
  • Componentes: Consultar 
    aurora-components
    para inputs específicos
  • 布局：参考
    aurora-layout
    获取网格和分区规则
  • 组件：参考
    aurora-components
    获取特定输入组件的使用方法