Componentes de la interfaz

Las vistas de una aplicación web se construyen combinando diferentes componentes de interfaz.

Un componente es un elemento reutilizable que cumple una función concreta dentro de la interfaz, como permitir la navegación, introducir información, ejecutar una acción o mostrar datos.

A continuación se presentan algunos de los componentes más habituales que pueden utilizarse al diseñar las vistas de una aplicación.

Contenido básico

Los componentes de contenido permiten presentar la información y las acciones básicas que forman una interfaz.

Heading

Título o encabezado utilizado para identificar una vista, sección o bloque de contenido y establecer una jerarquía visual.

Puede utilizarse como título principal de una página o para organizar su contenido mediante diferentes niveles de encabezados.

Text

Elemento utilizado para mostrar información textual.

Puede utilizarse para descripciones, instrucciones, información complementaria o cualquier otro contenido escrito de la aplicación.

Image

Elemento utilizado para mostrar contenido gráfico o fotográfico.

Puede utilizarse para fotografías, ilustraciones, imágenes de productos, elementos multimedia u otros recursos visuales.

Icon

Representación gráfica sencilla utilizada para identificar visualmente una acción, objeto o concepto.

Puede utilizarse de forma independiente o acompañando a otros componentes como botones, enlaces, menús o campos de formulario.

Link

Elemento que permite navegar a otra vista, sección o recurso.

Puede utilizarse para establecer relaciones entre contenidos o proporcionar accesos a otras partes de la aplicación.

Button

Elemento interactivo que permite ejecutar una acción.

Puede utilizarse para iniciar sesión, enviar un formulario, guardar cambios, crear un objeto, eliminarlo o realizar cualquier otra acción disponible en una vista.

Divider

Elemento visual utilizado para separar diferentes bloques o grupos de contenido.

Puede utilizarse para mejorar la organización visual de una vista cuando contiene varias secciones relacionadas.

Avatar

Representación visual de un usuario o entidad, normalmente mediante una imagen, fotografía, icono o iniciales.

Puede utilizarse en perfiles de usuario, barras de navegación, comentarios, listados o elementos relacionados con una cuenta.

Navegación

Los componentes de navegación permiten al usuario desplazarse entre las diferentes vistas, secciones o conjuntos de información de la aplicación.

Navbar

Barra de navegación que proporciona acceso a las principales secciones o funcionalidades de la aplicación.

Puede utilizarse como sistema de navegación principal y contener elementos como el logotipo, enlaces, menús o acciones relacionadas con el usuario.

Sidebar

Panel lateral utilizado para organizar y mostrar opciones de navegación.

Resulta especialmente útil en aplicaciones con numerosas secciones, como dashboards o aplicaciones de gestión.

Breadcrumbs

Indican la posición actual del usuario dentro de la estructura de navegación de la aplicación.

Pueden utilizarse cuando existen varios niveles de navegación para facilitar el regreso a niveles anteriores.

Tabs

Permiten organizar diferentes grupos de información dentro de una misma vista y cambiar entre ellos.

Pueden utilizarse, por ejemplo, para separar los datos generales, documentos, actividad u otros apartados en la vista de detalle de un objeto.

Pagination

Permite dividir un conjunto elevado de resultados en diferentes páginas y desplazarse entre ellas.

Se utiliza habitualmente en listados de objetos cuando no resulta conveniente mostrar todos los resultados simultáneamente.

Entrada de datos

Los componentes de entrada permiten al usuario introducir, seleccionar o modificar información.

Text field

Campo que permite introducir texto u otros datos mediante el teclado.

Puede utilizarse en formularios de login o registro, buscadores y formularios de creación o edición de objetos.

Select

Permite seleccionar una opción de entre un conjunto de valores disponibles.

Puede utilizarse en formularios o filtros cuando el usuario debe escoger un valor entre varias posibilidades.

Checkbox

Permite activar o desactivar una opción de manera independiente.

Puede utilizarse, por ejemplo, para aceptar condiciones, seleccionar preferencias o escoger varios elementos de un conjunto.

Radio button

Permite seleccionar una única opción entre varias alternativas excluyentes.

Puede utilizarse cuando el usuario debe escoger necesariamente entre diferentes posibilidades, como un tipo de cuenta, modalidad o configuración.

Acciones

Los componentes de acción permiten al usuario ejecutar operaciones dentro de la aplicación.

Button

Elemento interactivo que permite ejecutar una acción.

Puede utilizarse para iniciar sesión, enviar un formulario, guardar cambios, crear un objeto, eliminarlo o realizar cualquier otra acción disponible en una vista.

Presentación y organización

Estos componentes permiten estructurar y presentar la información de forma clara dentro de las diferentes vistas.

Card

Contenedor visual que agrupa información y acciones relacionadas.

Puede utilizarse para representar objetos de un listado, accesos rápidos en un dashboard, productos, viviendas, cursos u otros elementos.

Table

Organiza información estructurada mediante filas y columnas.

Puede utilizarse para representar listados con numerosos objetos y varios datos asociados a cada uno de ellos, como clientes, pedidos, facturas o usuarios.

Información y feedback

Estos componentes permiten comunicar información al usuario o solicitar su atención ante determinadas situaciones.

Alert

Muestra un mensaje relevante relacionado con una acción o con el estado de la aplicación.

Puede utilizarse para comunicar errores, advertencias, información o la confirmación de que una operación se ha realizado correctamente.

Modal / Dialog

Ventana que aparece sobre la vista actual para mostrar información o solicitar una interacción concreta sin abandonar dicha vista.

Puede utilizarse para solicitar una confirmación, mostrar información adicional o realizar una operación breve.