170 lines
5.2 KiB
Markdown
170 lines
5.2 KiB
Markdown
# Guía de la Interfaz de Usuario - Nexus AI
|
|
|
|
## 🎨 Diseño Moderno Inspirado en ChatGPT
|
|
|
|
La interfaz de usuario de Nexus AI ha sido diseñada siguiendo las mejores prácticas de UI/UX modernas, inspirada en el diseño limpio y funcional de ChatGPT.
|
|
|
|
## 📋 Características Principales
|
|
|
|
### 1. **Diseño Responsive**
|
|
- ✅ Sidebar colapsable en dispositivos móviles
|
|
- ✅ Diseño adaptativo para tablets y móviles
|
|
- ✅ Navegación optimizada para touch
|
|
|
|
### 2. **Componentes Principales**
|
|
|
|
#### Sidebar (Barra Lateral)
|
|
- **Nueva conversación**: Botón para iniciar un chat nuevo
|
|
- **Historial de chats**: Lista de conversaciones recientes
|
|
- **Perfil de usuario**: Información del usuario y configuración
|
|
- **Diseño colapsable**: Se oculta automáticamente en móviles
|
|
|
|
#### Área de Chat
|
|
- **Mensajes del usuario**: Fondo distinguible con avatar personalizado
|
|
- **Respuestas de IA**: Estilo limpio con avatar del asistente
|
|
- **Indicador de escritura**: Animación de puntos mientras la IA responde
|
|
- **Auto-scroll**: Desplazamiento automático a mensajes nuevos
|
|
|
|
#### Área de Input
|
|
- **Textarea expandible**: Se ajusta automáticamente al contenido
|
|
- **Botón de adjuntar**: Para futuras funcionalidades de archivos
|
|
- **Botón de envío**: Se activa/desactiva según el contenido
|
|
- **Soporte para Shift+Enter**: Para saltos de línea
|
|
|
|
#### Tarjetas de Sugerencias
|
|
- **Ideas creativas**: Ayuda con brainstorming
|
|
- **Escribir código**: Asistencia de programación
|
|
- **Resolver problemas**: Análisis y soluciones
|
|
- **Aprender**: Explicaciones de conceptos
|
|
|
|
### 3. **Paleta de Colores**
|
|
|
|
```css
|
|
/* Colores Principales */
|
|
--bg-primary: #0f0f0f /* Fondo oscuro principal */
|
|
--bg-secondary: #171717 /* Fondo oscuro secundario */
|
|
--bg-tertiary: #2f2f2f /* Fondo terciario */
|
|
|
|
/* Textos */
|
|
--text-primary: #ececec /* Texto principal */
|
|
--text-secondary: #b4b4b4 /* Texto secundario */
|
|
--text-tertiary: #8e8e8e /* Texto terciario */
|
|
|
|
/* Acentos */
|
|
--accent-primary: #19c37d /* Verde principal (botones) */
|
|
--accent-hover: #1aa874 /* Verde hover */
|
|
--accent-active: #148f5f /* Verde activo */
|
|
```
|
|
|
|
### 4. **Tipografía**
|
|
- **Familia**: Inter, -apple-system, BlinkMacSystemFont
|
|
- **Peso**: 300 (light) a 700 (bold)
|
|
- **Anti-aliasing**: Optimizado para pantallas retina
|
|
|
|
### 5. **Animaciones y Transiciones**
|
|
- ✅ Transiciones suaves (150ms - 300ms)
|
|
- ✅ Animación de aparición de mensajes (fadeIn)
|
|
- ✅ Animación del indicador de escritura
|
|
- ✅ Hover effects en todos los elementos interactivos
|
|
- ✅ Efectos de scale en botones al hacer click
|
|
|
|
### 6. **Accesibilidad**
|
|
- ✅ Etiquetas ARIA para lectores de pantalla
|
|
- ✅ Contraste de colores cumple con WCAG AA
|
|
- ✅ Navegación por teclado optimizada
|
|
- ✅ Focus visible en elementos interactivos
|
|
|
|
## 🚀 Características Técnicas
|
|
|
|
### Responsive Breakpoints
|
|
```css
|
|
/* Tablet y móvil */
|
|
@media (max-width: 768px) {
|
|
- Sidebar fijo con overlay
|
|
- Header móvil visible
|
|
- Grid de sugerencias en 1 columna
|
|
}
|
|
|
|
/* Móvil pequeño */
|
|
@media (max-width: 480px) {
|
|
- Padding reducido
|
|
- Fuentes ajustadas
|
|
}
|
|
```
|
|
|
|
### Optimizaciones de Performance
|
|
- **CSS Variables**: Para cambios de tema dinámicos
|
|
- **GPU Acceleration**: Transform para animaciones suaves
|
|
- **Lazy Loading**: Carga progresiva de mensajes
|
|
- **Request Animation Frame**: Para scroll suave
|
|
|
|
## 📱 Funcionalidades JavaScript
|
|
|
|
### Gestión de Estado
|
|
```javascript
|
|
- isTyping: Control del estado de escritura
|
|
- conversationId: ID de la conversación actual
|
|
- Socket.IO: Comunicación en tiempo real
|
|
```
|
|
|
|
### Eventos Principales
|
|
- `handleSubmit`: Envío de mensajes
|
|
- `handleInputChange`: Actualización del textarea
|
|
- `toggleSidebar`: Control del sidebar móvil
|
|
- `setupSuggestionCards`: Interacción con sugerencias
|
|
- `formatMessage`: Markdown básico (bold, italic, code, links)
|
|
|
|
### Persistencia
|
|
- LocalStorage para última conversación
|
|
- Auto-guardado antes de cerrar ventana
|
|
- Recuperación de conversación al recargar
|
|
|
|
## 🎯 Mejoras Futuras Sugeridas
|
|
|
|
1. **Temas**: Modo claro/oscuro
|
|
2. **Personalización**: Colores y avatares personalizados
|
|
3. **Markdown Completo**: Soporte para listas, tablas, etc.
|
|
4. **Archivos**: Subida y visualización de archivos
|
|
5. **Voice Input**: Entrada por voz
|
|
6. **Shortcuts**: Atajos de teclado personalizables
|
|
7. **Exportar Chat**: Guardar conversaciones en diferentes formatos
|
|
8. **Búsqueda**: Buscar en el historial de conversaciones
|
|
|
|
## 🛠️ Desarrollo
|
|
|
|
### Estructura de Archivos
|
|
```
|
|
public/
|
|
├── index.html # Estructura HTML principal
|
|
├── css/
|
|
│ └── styles.css # Estilos CSS con variables
|
|
└── js/
|
|
└── app.js # Lógica de la aplicación
|
|
```
|
|
|
|
### Guía de Estilos
|
|
- Usar variables CSS para colores y espaciados
|
|
- Seguir nomenclatura BEM para clases
|
|
- Comentar secciones principales
|
|
- Mantener selectores específicos y no anidados
|
|
|
|
## 📝 Notas de Implementación
|
|
|
|
### Compatibilidad
|
|
- ✅ Chrome 90+
|
|
- ✅ Firefox 88+
|
|
- ✅ Safari 14+
|
|
- ✅ Edge 90+
|
|
|
|
### Dependencias
|
|
- Socket.IO (cliente): Para comunicación en tiempo real
|
|
- Google Fonts (Inter): Tipografía moderna
|
|
- Sin frameworks adicionales (Vanilla JS)
|
|
|
|
---
|
|
|
|
**Versión**: 1.0.0
|
|
**Última actualización**: 2026-02-13
|
|
**Diseño inspirado en**: ChatGPT UI Kit
|
|
|