Componentes

Elementos para presentar datos y funciones.

Barra superior

Indicador de pantalla activa y funciones principales.

Pantalla de inicio

Con botón de menú lateral.

Sin menú lateral y con botón obligatorio de información de la aplicación. Usar sólo si la aplicación no tiene más pantallas que la de inicio.

Con menú de pestañas integrado.

Sección

Con botón de volver y nombre de sección.

Con botón de volver y funciones. Si el título es muy grande, la barra superior debe quedar sin texto y el título debe aparecer en el cuerpo de la pantalla.

Controles

Elementos para ejecutar funciones.

Botón relleno

Botón primario y estandar, dentro de grupos diferentes.

Botón institucional para funciones de único uso.

Botón simple

Botón apilable para una línea.

Listado de botones.

Selección binaria

Checkbox para selección múltiple.

Radiobox para selección única.

Switch para activar o desactivar opciones.

Delizador

Indicador de valor numérico y rango entre 2 conceptos.

Formulario

Pantallas con campos de texto y selección para cargar datos.

Pantallas

Registro o ingreso.

Formulario de uso frecuente.

Estados de campos y validación

Campo en uso con etiqueta desplazada y resto de los campos vacíos.

Campo con dato inválido y descripción del error.

Campo de texto de múltiples líneas con límite de caracteres.

Listado

Grupo de vistas previas de entradas con varias formas de mostrar datos y funciones.

Listado simple

Sólo texto.

Texto e imagen.

Dentro de pantalla con otra información. No usa líneas divisorias.

Categorías desplegables.

Grilla

Miniaturas con imágen y título.

Íconos con pictograma y nombre de categoría.

Tarjetas para múltiples funciones

Vista previa detallada.

Contactos.

Grilla.

Listado vacío, con mensaje y funciones para continuar.

Menú desplegable

Grupo de funciones accesible desde una misma pantalla desde un elemento temporario.

Dos grupos. El primero indica una selección múltiple o única.

Funciones de contacto con íconos.

Menú de pestañas

Agrupa las pantallas principales de la aplicación o grupos de datos principales de una sección.

Pantallas principales.

Menú con desplazamiento para cuando hay muchas secciones. Con espacio para flechas.

Microalerta

Alertas con datos y funciones no críticas.

Alerta simple y con función relacionada al mensaje.