La relación máquina-humano siempre ha dependido fuertemente de la GUI, la interfaz gráfica del usuario – aunque debería ser interfaz gráfica para el usuario, ¿no? – Bueno, el caso es que por ello, desde las primeras interfaces gráficas se han ido probando soluciones para optimizar esta relación entre ordenadores y usuarios.
Así pues, con el tiempo y siguiendo una especie de darwinismo tecnológico, se ha llegado a un estándar de cómo deben construirse las interfaces gráficas y tú debes conocer estos componentes para poder ofrecer un buen diseño web, diseño de apps o de cualquier otro tipo de pantallas.
Componentes UI de entrada y selección
- Campo de texto – Text field
- Área de texto – Text area
- Entrada numérica – Number Input
- Barra de búsqueda – Search bar
- Desplegable – Dropdown
- Desplegable con auto-sugerencia – Combo box / Typeahead
- Formulario – Form
- Casilla de verificación – Checkbox
- Botón de radio – Radio button
- Interruptor / Conmutador – Toggle / switch
- Selector de fecha – Date Picker
- Barra de rango – Range Slider
- Calendario – Calendar
- Selector de color – Color Picker
- Cargador de archivos – File Uploader
- Valoraciones
Componentes UI de Navegación e Información
- Enlaces – Links
- Pestañas – Tabs
- Barra de navegación – Navigation bar
- Menú lateral – Side bar
- Migas de pan – Breadcrumbs
- Paginador – Pagination
- Etiquetas – Labels / Tags
- Barra de progreso – Progress bar
- Indicador de progreso tipo Stepper
- Indicador de progreso tipo Meter
Componentes UI de Notificación
- Tooltip
- Toggletip
- Notificaciones en línea – Banner / Snackbar
- Ventana emergente – Dialog / Modal / Alert
- Tostadas – Toasts
- Insignia de notificación – Notification Badge
Componentes UI de carga
Componentes UI organizadores de contenido
- Tarjeta – Card
- Separador – Divider
- Acordeón – Accordion
- Ver más – Collapse
- Carousel / Slider
- Tabla – Table
- Baldosas? – Tile
Componentes UI de acción
- Botones – Buttons
- Enlaces – Links
- Lista de acciones – Action list
Extras*
*Estos no son componentes como tal pero debemos incluirlos para mantener una relación visual correcta entre máquina y persona
