Esta foto de Autor desconocido está
REGIONAL ATLANTICO
EVIDENCIA DE PRODUCTO: INTERFACES GRÁFICAS SEGÚN
REQUERIMIENTOS DEL PROYECTO. GA6-220501096-AA3-EV03.
HERNANDO LUIS HERNANDEZ SALAS.
MARIA ISABEL BERRIO RUA
ANALISIS Y DESARROLLO DE SOFTWARE.
2834928
Diciembre de 2024
Introducción
El presente documento detalla el diseño y desarrollo de la interfaz gráfica (UI) para el
Aplicativo de Gestión de Servicios (AGS), un sistema diseñado para gestionar
servicios de soporte TI. La interfaz gráfica busca cumplir con principios de usabilidad,
accesibilidad y diseño responsivo, asegurando una experiencia óptima para los
usuarios.
Objetivo
Definir y desarrollar una interfaz gráfica que cumpla con los requerimientos
funcionales y no funcionales del AGS, utilizando componentes y tecnologías
actuales, enfocándose en aplicaciones híbridas y diseño web moderno.
Análisis de Requisitos para la Interfaz Gráfica
Requerimientos Funcionales
1. Registro y gestión de usuarios.
2. Creación, asignación y seguimiento de servicios de soporte TI.
3. Generación de cotizaciones y reportes.
4. Gestión de activos de los clientes.
5. Navegación intuitiva y rápida entre las funcionalidades.
Requerimientos No Funcionales
1. Usabilidad: Interacción sencilla y fluida.
2. Accesibilidad: Diseño inclusivo para usuarios con diversas capacidades.
3. Estética: Uso de una paleta de colores profesional y moderna.
4. Compatibilidad: Adaptable tanto a dispositivos móviles, tablets y pc usando
navegadores web.
Diseño de la Interfaz Gráfica
Herramientas y Tecnologías Utilizadas
• Figma: Para el diseño de prototipos.
• Lenguaje de programación: Se utilizaron HTML, CSS y JavaScript como
tecnologías principales para el desarrollo de la interfaz.
• La paleta de colores incluye azul cielo, naranja, morado y verde,
seleccionados para crear un diseño atractivo y armonioso, que mejora la
experiencia visual de los usuarios.
Componentes de la Interfaz
Pantalla de Inicio de Sesión
• Elementos: Campos de usuario y contraseña, botón de "Iniciar sesión".
• Estilo: Fondo gris claro con formulario centrado. Botones con esquinas
redondeadas y sombra sutil.
Panel Principal (Dashboard)
• Secciones principales:
o Resumen de actividades.
o Notificaciones.
o Estadísticas generales.
• Menú de navegación lateral: Íconos con etiquetas claras (Inicio, Servicios,
Clientes, Técnicos, Activos, Configuración).
Gestión de Servicios
• Vista de lista: Servicios clasificados por estado (pendientes, en progreso,
completados).
• Acción rápida: Botón flotante para agregar un nuevo servicio.
• Modal emergente: Para ver y editar detalles del servicio.
Creación de Cotizaciones
• Formulario: Campos dinámicos para agregar ítems, costos y notas.
• Botón de exportar: Generar PDF o enviar por correo.
Reportes
• Visualización gráfica: Gráficos de barras y de torta para análisis de servicios.
• Filtros dinámicos: Por fecha, cliente o estado del servicio.
Anexos
• Prototipos realizados en Figma.
• Capturas de pantalla de las vistas principales.
• Códigos de ejemplo para componentes clave.
Conclusión
La interfaz gráfica del AGS busca proporcionar una experiencia de usuario eficiente y
agradable. Al integrar tecnologías modernas y principios de diseño centrados en el
usuario, se garantiza que el sistema cumpla con los estándares actuales de
desarrollo de software.
