Interfaz de Usuario

Clasificación de interfaces

CLI : Basada en texto

GUI: utiliza imágenes y objetos gráficos.

Interfaz de usuario basada en menús.

TUI: Tacto a través de una pantalla.

VUI: Interactúa con dispositivos a través de comandos de voz.

Interfaz de Usuario Basada en Formularios: Utilizada para ingresar información específica y mostrar datos.

NUI: Permite interacción en lenguaje cotidiano.

Principios Básicos del diseño UI

Interfaces Simples: Menos es más

Interfaces Simples: Menos es más

Consistencia en el diseño: Elementos comunes, patrones de diseño.

Consistencia en el diseño: Elementos comunes, patrones de diseño.

Jerarquía y manejo de espacios: Importancia, atención, lectura.

Jerarquía y manejo de espacios: Importancia, atención, lectura.

Color y textura: Esencia de marca, atención dirigida y ajustes

Color y textura: Esencia de marca, atención dirigida y ajustes

Tipografía: Tamaños, fuentes, y disposición.

Tipografía: Tamaños, fuentes, y disposición.

Retroalimentación (Feedback): Informar, incertidumbre y ejemplo.

Retroalimentación (Feedback): Informar, incertidumbre y ejemplo.

HMI

La HMI se refiere a pantallas usadas para interactuar con equipos, especialmente en entornos industriales. Muestran datos en

La HMI se refiere a pantallas usadas para interactuar con equipos, especialmente en entornos industriales. Muestran datos en tiempo real y permiten el control de máquinas.

HMI y Sistemas SCADA

SCADA: Sistema de supervisión, control y adquisición de datos

SCADA: Sistema de supervisión, control y adquisición de datos

PLC: Controladores lógicos programables y sensores

PLC: Controladores lógicos programables y sensores

HMI: Visualización de datos en gráficos y representaciones visuales

HMI: Visualización de datos en gráficos y representaciones visuales

Tipos de pantallas HMI

Alta resolucion

Alta resolucion

Dispositivos móviles

Dispositivos móviles

Táctiles con protección IP

Táctiles con protección IP

Clasificación de elementos UI

Contenedores

Barra lateral

Etiquetas

Tablas

Tarjetas

Acordeones

Listas

Input Controls

Botones

Campos de texto

Checkbox

Radio buttons

Listas desplegables

Switch-Toogle

Campos de fecha

Componentes de navegación

Breadcumbs

Sliders

Cajas de búsqueda

Paginación

Tags

Barra de navegación

Componentes informativos

Tooltips

Íconos

Barras de progreso

Notificaciones

Caja de mensajes

Modales