Diseño de confirmación protegida

La interfaz de usuario (IU) de la Confirmación de protección consta de seis elementos obligatorios. Algunos elementos se pueden personalizar, pero hay requisitos que se deben cumplir. Usa los siguientes lineamientos cuando personalices la IU y asegúrate de que se cumplan los requisitos. Si un elemento está marcado con Requisito:, debe usar la propiedad que se indica.

En los siguientes lineamientos, se usa la familia de fuentes Roboto, que puedes descargar desde fonts.google.com.

IU con botones de hardware

La Confirmación protegida de Android puede usar los botones de hardware del dispositivo para confirmar y cancelar la entrada.

Diseño

Íconos

Ícono de escudo

Ícono Ícono de escudo de Confirmación protegida
Descargar Protección de seguridad
Tamaño del ícono 32 dp

Ícono de flecha

Ícono Ícono de flecha del teclado
Descargar Flecha hacia la derecha del teclado
Tamaño del ícono 24 dp
Radio de esquina del contenedor 4 dp

Mensajes de entrada

Existen dos tipos de entrada que se usan en la Confirmación protegida: confirmar y cancelar.

Cadena de confirmación

Este mensaje debe indicar qué botón se usa como confirmación.

Mensaje Presiona dos veces (el botón) para confirmar.
Longitud máxima Requisito: El mensaje de confirmación no puede tener más de dos líneas.
Color #000000 87%
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 14 sp
Altura de línea Requisito: 20 dp

Cadena de cancelación

El mensaje de cancelación debe ser claramente visible y distinguirse fácilmente del botón de confirmación. Usa las siguientes propiedades junto con la palabra única Cancelar.

Mensaje Cancelar
Color #000000 87%
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 14 sp
Altura de línea Requisito: 20 dp

Texto del encabezado

Incluye el texto del encabezado Confirmación protegida de Android en la IU de confianza para identificar la función. Usa las siguientes propiedades para el texto del encabezado.

Mensaje Requisito: Confirmación de protección de Android
Color #000000 87%
Tipo de fuente Roboto-Regular
Tamaño de la fuente Requisito: 22sp
Altura de línea Requisito: 28 dp

Texto del cuerpo

Usa las siguientes propiedades cuando implementes el elemento de texto del cuerpo. El desarrollador de la API (desarrollador de la app) escribe el mensaje real.

Mensaje El texto del cuerpo lo proporciona el desarrollador de la app que llama a la Confirmación protegida.
Color #000000 87%
Tipo de fuente Roboto-Regular
Tamaño de la fuente Requisito: 16 sp
Altura de línea Requisito: 24 dp

Texto del encabezado secundario

Usa el texto del encabezado secundario para explicar por qué el usuario ve la pantalla de Confirmación protegida. Coloca este texto en la parte inferior de la pantalla y usa las siguientes propiedades.

Mensaje Requisito: Esta confirmación proporciona una capa adicional de seguridad para la acción que estás a punto de realizar.
Longitud máxima Requisito: El mensaje de confirmación no puede tener más de cuatro líneas.
Color #000000 87%
Tipo de fuente Roboto-Regular
Tamaño de la fuente Requisito: 14 sp
Altura de línea Requisito: 20 dp

IU con botones de software

La Confirmación protegida de Android puede usar botones de software para confirmar y cancelar la entrada. En los siguientes lineamientos, se describe la IU con botones de software.

Diseño de software de la IU de confirmación

Ícono de escudo

Descarga el recurso del ícono en Ícono de escudo de confirmación protegida de Android. Coloca el ícono en la parte superior de la pantalla.

Ícono de escudo

El ícono de escudo de Confirmación protegida es un elemento obligatorio. El color del escudo se puede personalizar, pero debe ser claramente visible.

Entrada

Dimensiones de los botones de software

Usa la forma de un botón principal y uno secundario para las entradas de confirmación y cancelación.

Etiqueta del botón Usa mayúscula inicial para las etiquetas de los botones.
Radio del botón 4 dp
Color de los elementos destacados #1a73e8
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 14 sp

Texto del encabezado

Incluye el texto del encabezado Confirmación protegida de Android en la IU de confianza para identificar la función. Usa las siguientes propiedades para el texto del encabezado.

Mensaje Requisito: Confirmación de protección de Android
Color #000000 87%
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 24sp
Altura de línea Requisito: 20 dp

Texto del cuerpo

Usa las siguientes propiedades cuando implementes el elemento de texto del cuerpo. El desarrollador de la app escribe el mensaje real.

Mensaje El texto del cuerpo lo proporciona el desarrollador de la app que llama a la Confirmación protegida.
Color #000000 87%
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 16 sp
Altura de línea Requisito: 24 dp

Texto del encabezado secundario

Usa el texto del encabezado secundario para explicar por qué el usuario ve la pantalla de Confirmación protegida. Coloca este texto en la parte inferior de la pantalla y usa las siguientes propiedades.

Mensaje Requisito: Esta confirmación proporciona una capa adicional de seguridad para la acción que estás a punto de realizar.
Longitud máxima Requisito: El mensaje de confirmación no puede tener más de cuatro líneas.
Color #000000 54%
Tipo de fuente Roboto-Medium
Tamaño de la fuente Requisito: 14 sp
Altura de línea Requisito: 20 dp

Localización

Puedes encontrar localizaciones para los componentes descritos en una implementación en C autónoma de una tabla de búsqueda como parte del AOSP.