Sistema de Diseño para Internacionalización

Sistema de Diseño para Internacionalización (i18n)

Propósito

El skill del Sistema de Diseño para Internacionalización (i18n) proporciona una metodología para diseñar interfaces preparadas para una audiencia global. Va más allá de la simple traducción para abordar las implicaciones espaciales, tipográficas y visuales de diferentes idiomas y culturas. Este sistema garantiza que los layouts sean lo suficientemente flexibles para adaptarse a longitudes de texto variables, que los diseños bidireccionales (de derecha a izquierda) se reflejen correctamente y que las señales visuales sigan siendo culturalmente apropiadas.

Casos de Uso

• Diseñar una plataforma SaaS global o un sitio de comercio electrónico para su lanzamiento en múltiples regiones.
• Adaptar una interfaz existente solo en inglés para idiomas RTL (árabe, hebreo, persa).
• Establecer estándares tipográficos para scripts no latinos (CJK, cirílico, devanagari).
• Auditar componentes de UI para su "preparación para expansión" (manejar el crecimiento de texto en alemán o finlandés).
• Crear conjuntos de iconos que eviten sesgos culturales o direccionales.

Cuándo NO Usarlo

• Sitios de Una Sola Región/Idioma: Donde no hay un plan para futura expansión y las convenciones locales se conocen estrictamente.
• Sitios de Narrativa Puramente Visual: Donde el diseño es una expresión artística que se basa en relaciones espaciales fijas y no reajustables.
• Traducción Solo de Contenido: Si la tarea es estrictamente traducir el texto sin cambiar el comportamiento de la UI o el layout.

Entradas

1. Lista de Idiomas Objetivo: ¿Qué idiomas y scripts necesitan soporte?
2. Dirección de Lectura: ¿El idioma fluye de Izquierda a Derecha (LTR) o de Derecha a Izquierda (RTL)?
3. Activos Tipográficos: Pilas de fuentes localizadas que mantengan la voz de la marca en todos los scripts.
4. Contexto Cultural: Convenciones específicas de la región para colores, símbolos y formatos de datos (fechas, moneda).
5. Puntos de Quiebre de Layout: Del sistema-de-cuadricula-responsive.

Salidas

1. Especificación de Espejado Bidireccional (RTL): Un mapa de qué elementos se voltean y cuáles permanecen fijos (por ejemplo, barras de progreso vs. controles multimedia).
2. Matriz de Escala Tipográfica: Tamaños de fuente y alturas de línea ajustados para diferentes familias de scripts.
3. Plano de Expansión: Patrones de UI diseñados para manejar una variación de longitud de texto de +/- 40%.
4. Lógica de Iconografía: Directrices para iconos espejados vs. no espejados.
5. Tokens de Diseño de Localización: Propiedades lógicas (por ejemplo, padding-inline-start) definidas en la especificación de diseño.

Flujo de Trabajo

1. Diseñar para la Expansión de Texto

Nunca asuma que una etiqueta se mantendrá corta. Idiomas como el alemán o el italiano pueden ser un 30-50% más largos que el inglés.

• Contenedores Flexibles: Evite botones o tarjetas de ancho fijo; use min-width o fit-content.
• Ajuste de Texto: Asegúrese de que los elementos de la UI (como pestañas o elementos de menú) puedan ajustarse correctamente o transicionar a un menú de "desbordamiento".
• Centrado Dinámico: Si el texto se expande, asegúrese de que no se superponga a elementos adyacentes.

2. Implementar la Lógica de Espejado RTL

Para los idiomas de derecha a izquierda, el "modelo mental" de la página se voltea:

• Espejado de Layout: La barra lateral se mueve de izquierda a derecha; el logotipo se mueve de la esquina superior izquierda a la superior derecha.
• Propiedades Lógicas: Anote los diseños usando "Inicio" y "Fin" en lugar de "Izquierda" y "Derecha".
• Flujo de Navegación: Los botones de retroceso en LTR (apuntando a la izquierda) deben apuntar a la derecha en RTL para indicar "Volver al estado anterior".

3. Localizar la Tipografía y el Ritmo Vertical

Los scripts no latinos tienen diferentes alturas, densidades y requisitos de legibilidad:

• CJK (Chino, Japonés, Coreano): Requiere tamaños base ligeramente más grandes y una altura de línea más generosa (interlineado) debido a la complejidad de los caracteres.
• Árabe: Presenta ascendentes altos y descendentes profundos; aumente el espaciado vertical para evitar "choques" entre líneas.
• Pilas de Respaldo: Defina respaldos de fuentes del sistema que coincidan lo más posible con el peso y la altura-x de su fuente de marca principal.

4. Auditar la Direccionalidad de la Iconografía

No todo se voltea en RTL:

• Espejar: Iconos direccionales (flechas, aviones, bicicletas), barras de progreso e iconos que representan movimiento "adelante/atrás".
• No Espejar: Iconos de sentido horario/antihorario (relojes, recargar), controles de reproducción multimedia (Reproducir, Pausa, Buscar) y "marcas de verificación" (que son universales).
• Números: La mayoría de las regiones RTL usan numerales arábigos occidentales (1, 2, 3), que aún se leen de izquierda a derecha incluso dentro de texto RTL.

5. Establecer Estándares de Formato de Datos

• Fecha y Hora: Defina claramente DD/MM/AAAA vs MM/DD/AAAA para evitar confusiones.
• Moneda: Defina si el símbolo precede o sigue al monto (por ejemplo, $10 vs 10 €).
• Calendarios: Algunas regiones usan diferentes días de inicio de la semana (lunes vs domingo).

Reglas de Decisión

• La Regla del Espejado: Si un elemento de la UI representa "dirección" o "tiempo" (avanzar), DEBE espejarse en RTL. Si representa un objeto físico (como una cámara o un reloj), generalmente permanece fijo.
• La Regla del "Búfer del 35%": Deje siempre un 35% de espacio vacío en botones y etiquetas durante la fase de diseño en inglés para tener en cuenta la expansión.
• Tamaño Específico por Script: Si un script es altamente complejo (por ejemplo, devanagari), aumente el tamaño de fuente en un 10-15% en comparación con el equivalente latino para mejorar la legibilidad.
• Sensibilidad Cultural: Evite iconos que sean céntricos occidentales (por ejemplo, una alcancía para ahorros, que es inapropiada en muchas culturas).

Restricciones

• Accesibilidad: La expansión de texto no debe ocultar elementos interactivos ni causar desbordamiento horizontal. Los ratios de contraste deben mantenerse en todas las versiones localizadas.
• Adaptabilidad: Los layouts deben permanecer estables al cambiar las direcciones. Use padding-inline y margin-inline en las especificaciones.
• Jerarquía: La CTA principal debe seguir siendo el elemento más prominente, independientemente de la dirección de lectura.

Patrones de Falla Comunes

• La "Rotura por Expansión": Anchuras codificadas que hacen que el texto traducido se corte o se superponga.
• Espejado Perezoso: Espejar iconos que no deberían (como un botón de "Reproducir" o un reloj), lo que confunde a los usuarios.
• La Trampa del "Inglés-Primero": Diseñar una UI ajustada y minimalista en inglés que se vuelve completamente inutilizable en idiomas con palabras largas.
• Falta de Respaldo: No especificar fuentes para scripts no latinos, lo que resulta en "Tofu" (cuadros de caracteres rotos).
• Alineación Inconsistente: Mezclar un layout espejado con una alineación de texto no espejada, creando una sensación irregular y poco pulida.

Criterios de Validación

• El layout se espeja correctamente para las vistas RTL (intercambio de barra lateral/logotipo).
• Los componentes de la UI manejan una expansión de texto del 40% sin romperse ni superponerse.
• La escala tipográfica se ajusta por complejidad del script (por ejemplo, la altura de línea aumenta para árabe/CJK).
• La iconografía sigue la lógica de "Espejado vs. Fijo".
• Los diseños usan propiedades lógicas (Inicio/Fin) en lugar de absolutas (Izquierda/Derecha).
• Los formatos de fecha, moneda y número están localizados correctamente.
• Las pilas de fuentes de respaldo están definidas para todos los scripts objetivo.