Guía panorámica de la enciclopedia de estilos de diseño de UI y terminología especializada

## I. Grandes Corrientes Visuales y Estilos Estéticos (Estilos Visuales)

*Determina el temperamento artístico, la primera impresión visual y los atributos temáticos de todo el producto/sitio web.*

### 1. Estilo Pixel Art (Pixel Art / 8-Bit / 16-Bit)

- **Características principales**: Utiliza píxeles cuadrados dentados como unidad de dibujo básica, renunciando deliberadamente a la alta resolución y a las curvas suaves, recreando la estética de las primeras consolas de videojuegos de los años 80-90.
- **Escenarios de aplicación**: Juegos retro (como "Stardew Valley", "Factorio"), plataformas Web3/NFT, sitios web oficiales de marcas para geeks y desarrolladores independientes.

### 2. Estilo Dibujo Animado / Ilustración Vectorial (Cartoon / Vector Illustration)

- **Características principales**: Utiliza líneas vectoriales suaves, combinaciones de colores brillantes y vivos, junto con ilustraciones de personajes o mascotas exageradas y humorísticas, para dar al producto una gran afinidad y diversión.
- **Representantes de ramas**: **Estilo de ilustración Notion / Corporate Memphis** (figuras planas con extremidades largas), **Modo Duolingo** (IP de marca profundamente integrada en la UI).
- **Escenarios de aplicación**: Páginas de destino de sitios web SaaS, aplicaciones de aprendizaje de idiomas/infantiles, ventanas emergentes de eventos de marca.

### 3. Estilo Cyberpunk (Cyberpunk / High-Tech Low-Life)

- **Características principales**: Fondo negro puro o azul oscuro, combinado con colores de neón fluorescentes extremadamente deslumbrantes (magenta brillante, azul eléctrico, verde tóxico), fusionando arte de fallos (Glitch), cuadrículas de datos, líneas mecánicas y elementos de UI de ciencia ficción.
- **Escenarios de aplicación**: Consolas de hardware de eSports, plataformas de criptomonedas/blockchain, interfaces de juegos/software de ciencia ficción hardcore.

### 4. Estilo Synthwave / Retrowave / Vaporwave (Synthwave / Retrowave / Vaporwave)

- **Características principales**: Homenaje a la cultura pop de los años 80. Lleno de cuadrículas degradadas de púrpura/rosa/naranja, atardeceres, siluetas de palmeras, bustos de yeso tridimensionales y el grano de nieve de las viejas cintas VHS.
- **Escenarios de aplicación**: Reproductores de música, sitios web de marcas de moda retro, páginas de inicio personalizadas y UI audiovisuales de exposiciones de arte.

### 5. Estilo Y2K / Acid Graphics (Y2K Aesthetic / Acid Graphics)

- **Características principales**: Recreación de la imaginación de la tecnología futura a finales del milenio (alrededor del año 2000). Uso extensivo de **textura de cromo metálico**, fuentes fluidas distorsionadas en 3D, colores arcoíris láser, estrellas brillantes y composiciones asimétricas y libres que rompen las convenciones.
- **Escenarios de aplicación**: Comercio electrónico de moda, aplicaciones de marcas de moda, productos musicales y sociales para jóvenes.

### 6. Estilo Claymorphism (Claymorphism)

- **Características principales**: Los elementos de la interfaz tienen una textura inflada en 3D similar a la plastilina/arcilla de colores. Con esquinas extremadamente redondeadas, sombras internas y externas suaves, visualmente cálido, lindo y lleno de elasticidad tridimensional.
- **Escenarios de aplicación**: Aplicaciones de educación infantil, UI de juegos casuales, generadores de metaverso/avatares virtuales.

### 7. Nuevo Brutalismo (Neo-Brutalism)

- **Características principales**: Ruptura deliberada de la "elegancia y refinamiento" de la UI tradicional. Utiliza contrastes de colores de alta saturación, bordes negros gruesos al 100% (2-4px), sombras duras sin desenfoque (Offset Hard Shadow) y una fuerte composición asimétrica.
- **Escenarios de aplicación**: Páginas de eventos operativos de Figma, plataforma de creadores de Gumroad, portafolios de desarrolladores independientes.

### 8. Diseño Skeuomórfico (Skeuomorphism)

- **Características principales**: Recreación extremadamente realista de materiales del mundo físico (como costuras de cuero, cepillado de metal, refracción de vidrio, vetas de madera simuladas, botones físicos en relieve).
- **Escenarios de aplicación**: Sistemas iOS 6 y anteriores, plugins DSP de audio profesional (simulando perillas de hardware), pantallas de control inteligentes para automóviles.

### 9. Diseño Plano (Flat Design)

- **Características principales**: Eliminación completa de sombras, degradados y texturas de materiales, construyendo la interfaz únicamente con bloques de color puro, formas geométricas simples y una tipografía clara, mejorando enormemente la eficiencia de la transmisión de información y el rendimiento de la adaptación multidispositivo.
- **Escenarios de aplicación**: UI Metro de Windows, interfaces modernas de dispositivos móviles iOS 7+.

### 10. Diseño de Materiales / Diseño Texturizado (Material Design - M2/M3)

- **Características principales**: Lenguaje de diseño sistemático propuesto por Google. Los elementos de la UI se comparan con "papel inteligente" con propiedades físicas reales, expresando la relación jerárquica de las tarjetas a través de la elevación y las sombras físicas reales.
- **Escenarios de aplicación**: Sistema nativo de Android, serie de herramientas Google Workspace, Material-UI (MUI).

### 11. Neumorfismo / Soft UI (Neumorphism / Soft UI)

- **Características principales**: El fondo y los componentes utilizan el mismo color de fondo, y a través de la combinación precisa de "resaltado blanco en la esquina superior izquierda" y "sombra oscura en la esquina inferior derecha", los componentes parecen estar "presionados hacia afuera" o "hundidos" en el material de fondo, dando una textura de silicona.
- **Escenarios de aplicación**: Paneles de control de domótica, cuadros de mando conceptuales, UI de relojes inteligentes.

### 12. Glassmorphism (Glassmorphism)

- **Características principales**: Fondo semitransparente + desenfoque gaussiano (Backdrop Blur), fondo degradado multicolor suave y un borde blanco semitransparente extremadamente delgado, que presenta una sensación de alta tecnología transparente y flotante.
- **Escenarios de aplicación**: macOS Big Sur/Sonoma, Windows 11 Fluent Design, tarjetas de notificación de actividades en tiempo real de iOS.

### 13. Estilo Memphis (Memphis Style)

- **Características principales**: Arte pop rebelde de los años 80. Lleno de líneas de ondas dispersas aleatoriamente, cuadrículas de puntos, triángulos, círculos y otros patrones geométricos básicos, con colores alegres, de alta saturación y sin restricciones de patrón.
- **Escenarios de aplicación**: Banners de eventos operativos, UI de productos infantiles, sitios web de agencias de diseño creativo.

### 14. Diseño Gráfico Suizo / Estilo Internacional (Swiss Style)

- **Características principales**: Énfasis en un riguroso sistema de cuadrícula matemática (Grid System), tipografías sans-serif (como Helvetica), composición asimétrica y una fuerte jerarquía visual, contenido, racional y solemne.
- **Escenarios de aplicación**: Aplicaciones de noticias (como Bloomberg), sitios web de marcas de alta gama, composiciones de texto densas.

### 15. Estilo Dibujo a Mano / Doodle (Hand-Drawn / Doodle)

- **Características principales**: Utiliza líneas dibujadas a mano con un temblor irregular, rellenos con textura de crayón/acuarela, tipografías manuscritas, eliminando la frialdad industrial del software, con un gran sentido de la humanidad y calidez.
- **Escenarios de aplicación**: Aplicaciones de agenda, herramientas de notas (como plantillas de GoodNotes), páginas de historias de productos creativos.

### 16. Estilo 2.5D / Isométrico (Isometric Style)

- **Características principales**: Dibuja escenas tridimensionales mediante proyección axonométrica oblicua de 30°, que puede mostrar estructuras espaciales y detalles arquitectónicos tridimensionales y ricos, sin la distorsión de la perspectiva de "lo cercano es grande y lo lejano es pequeño".
- **Escenarios de aplicación**: Diagramas de flujo de arquitectura empresarial, pantallas grandes de visualización de datos, UI de juegos de simulación de gestión.

### 17. Low Poly (Low Poly)

- **Características principales**: Utiliza una cantidad relativamente pequeña de mallas poligonales planas (generalmente triángulos) para ensamblar objetos tridimensionales, combinados con una iluminación simple, presentando una textura geométrica dura como la refracción de cristales o el plegado de papel.
- **Escenarios de aplicación**: Juegos independientes, gráficos vectoriales de fondo de productos tecnológicos, UI de promoción de exposiciones de arte.

### 18. Minimalismo / Estilo de Espacio en Blanco (Minimalism)

- **Características principales**: "Menos es más". Elimina todas las líneas decorativas y colores innecesarios, utilizando grandes áreas de espacio en blanco, monocromático minimalista y una tipografía de alta calidad.
- **Escenarios de aplicación**: Sitio web de Apple, comercio electrónico de lujo, aplicaciones de lectura (como WeChat Reading, Medium).

### 19. Modo Oscuro / Estilo OLED Negro Puro (Dark Mode / Pitch Black)

- **Características principales**: Utiliza negro puro (#000000) o gris muy oscuro (#121212) como color de fondo, combinado con texto de alto contraste y acentos de neón, que es agradable a la vista, ahorra energía y es muy inmersivo.
- **Escenarios de aplicación**: IDE de desarrollador (VS Code), terminales de intercambio/transacción de acciones, modo de lectura nocturna.

### 20. Estilo Line Art / Monoline (Line Art / Monoline)

- **Características principales**: Toda la interfaz se basa únicamente en líneas de grosor uniforme (Outlines) para delinear iconos y contornos de tarjetas, con casi ninguna área rellena, presentando una estética geométrica limpia y ligera.
- **Escenarios de aplicación**: Sitios web de arquitectura/diseño minimalista, bibliotecas de iconos vectoriales (como Heroicons, Lucide).

## II. Componentes de UI y Jerga de Espacio de Control (Component Vocabulary)

*Describe componentes de espacio de UI que describen formas estructurales específicas, niveles visuales o características interactivas.*

| **Jerga de Componente (Chino/Inglés)** | **Características Visuales y Forma Funcional**