Nivel 2: Optimización adaptable

Las apps optimizadas admiten todos los tipos de pantallas y estados de dispositivo, incluidas las transiciones de estado.

Representación de los tres niveles de calidad como capas apiladas verticalmente, con el nivel medio destacado.

Lineamientos

Crea tu app para que se adapte a todos los tamaños de pantalla y estados del dispositivo.

Interfaz de usuario

Guideline ID Test IDs Description
Responsive_adaptive_layouts T-Layout_Flow

La app tiene diseños responsivos y adaptables para todos los tamaños de pantalla. Todos los diseños son responsivos (consulta Cómo migrar tu IU a diseños responsivos). La implementación de diseños adaptables se determina con las clases de tamaño de ventana.

La IU de la app puede incluir lo siguiente:

  • Rieles de navegación del extremo inicial que se expanden en tamaños de ventanas más grandes para ocupar paneles de navegación completos
  • Diseños de cuadrícula que escalan la cantidad de columnas para adaptarse a los cambios de tamaño de la ventana
  • Columnas de texto en pantallas grandes
  • Paneles del extremo final que se abren de forma predeterminada en tamaños de pantalla de computadoras, en pantallas cerradas y en pantallas pequeñas

Crea diseños de varios paneles (cuando sea apropiado) para aprovechar el espacio de pantalla grande. Consulta Diseños canónicos.

La incorporación de actividades permite que las apps basadas en actividades creen diseños de varios paneles mostrando las actividades en paralelo.
UI_Secondary_Elements T-Layout_Flow

Los modales, los menús contextuales y otros elementos secundarios tienen el formato adecuado en todos los tipos de pantalla y estados de dispositivos, por ejemplo:

  • Las hojas inferiores no ocupan todo el ancho en pantallas grandes (aplica un ancho máximo para evitar estiramientos). Consulta el comportamiento en Sheets: bottom.
  • Los botones no ocupan todo el ancho en las pantallas grandes. Consulta el comportamiento en botones.
  • Los campos de texto y las casillas no ocupan todo el ancho en pantallas grandes. Consulta el comportamiento en la sección de campos de texto.
  • Los modales o menús de edición pequeños no abarcan toda la pantalla y mantienen el contexto para el usuario tanto como sea posible. Ver Menus.
  • Los menús contextuales aparecen junto al elemento que el usuario seleccionó. Consulta el tema sobre menús contextuales en Menus.
  • Los rieles de navegación reemplazan las barras de navegación para mejorar la ergonomía en pantallas grandes. Consulta Navigation rail.
  • Los paneles laterales de navegación se actualizan a rieles de navegación expandidos. Consulta Navigation drawer.
  • Los cuadros de diálogo se actualizan al componente de material más reciente. Consulta Dialogs.
  • Las imágenes se muestran con una resolución adecuada y no se estiran ni se recortan.
Touch_Targets T-Touch_Targets Los objetivos táctiles tienen al menos 48 dp. Consulta los lineamientos de diseño y tipografía de Material Design.
Drawable_Focus T-Drawable_Focus Se crea un estado enfocado para los elementos de diseño personalizados que son interactivos. Un elemento de diseño personalizado es cualquier elemento visual de la IU que no proporcione el framework de Android. Si los usuarios pueden interactuar con un elemento de diseño personalizado, el elemento de diseño debe poder enfocarse cuando el dispositivo no está en el modo táctil y debe mostrarse de manera evidente una indicación visual del estado enfocado.

Teclado, mouse y panel táctil

Guideline ID Test IDs Description
Keyboard_Navigation T-Keyboard_Navigation Los flujos principales de tareas en la app admiten la navegación con teclado, incluida la navegación con la tecla Tab y las teclas de flecha. Consulta Compila apps más accesibles.
Keyboard_Shortcuts T-Keyboard_Shortcuts La app admite combinaciones de teclas para acciones de uso general, como seleccionar, cortar, copiar, pegar, deshacer y rehacer. Consulta el documento sobre compatibilidad de entrada.
Keyboard_Media_Playback T-Keyboard_Media_Playback El teclado se puede utilizar para controlar la reproducción de contenido multimedia. Por ejemplo, la barra espaciadora reproduce y pausa el contenido.
Keyboard_Send T-Keyboard_Send La tecla Intro del teclado realiza una función de enviar en las aplicaciones de comunicación.
Context_Menus T-Context_Menus Se puede acceder a los menús contextuales con el botón derecho del mouse y el panel táctil (botón secundario del mouse o presión secundaria).
Content_Zoom T-Content_Zoom Se puede acercar el contenido de la app con la rueda del mouse (junto con la presión de la tecla Control o Ctrl) y los gestos de pellizcar en el panel táctil.
Hover_States T-Hover_States Los elementos prácticos de la IU tienen estados de colocar el cursor sobre un elemento (cuando corresponde) para indicar a los usuarios de mouse y panel táctil que los elementos son interactivos.

Pruebas

Para asegurarte de que tu app esté optimizada y sea responsiva a todas las configuraciones de pantalla, realiza las siguientes pruebas.

Interfaz de usuario

Test ID Guideline IDs Description
T-Layout_Flow Responsive_adaptive_layouts,
UI_Secondary_Elements

Ejecuta la app en dispositivos que tengan una amplia variedad de tamaños de pantalla, incluidos teléfonos, teléfonos plegables, tablets pequeñas y grandes, y dispositivos de escritorio. Además, ejecuta la app en el modo multiventana en los dispositivos.

Verifica que el diseño de la app responda y se adapte a diferentes tamaños de pantalla y ventana. Comprueba si la app expande y contrae los rieles de navegación, ajusta la cantidad de columnas en los diseños de cuadrícula, adapta el flujo de texto a las columnas, etcétera. Observa si el formato de los elementos de la IU es estético y funcional.

Para las apps que utilizan incorporación de actividades, prueba si las actividades se muestran una al lado de la otra en pantallas grandes o apiladas en pantallas pequeñas.
T-Touch_Targets Touch_Targets Verifica que los objetivos táctiles mantengan una posición y un tamaño coherentes y accesibles, y que no estén ocultos ni oscurecidos por otros elementos de la IU para todos los tamaños y las configuraciones de pantalla. Para obtener información sobre accesibilidad, consulta la Prueba de accesibilidad.
T-Drawable_Focus Drawable_Focus En cada pantalla de la app que contenga un elemento de diseño personalizado interactivo, verifica que el elemento de diseño pueda enfocarse con un teclado externo, un pad direccional o algún otro dispositivo que permita que se enfoquen los elementos de la IU. Verifica que se muestre de manera evidente una indicación visual del estado enfocado. Para obtener información relacionada, consulta Modo táctil.

Teclado, mouse y panel táctil

Test ID Guideline IDs Description
T-Keyboard_Navigation Keyboard_Navigation Navega por los componentes enfocables de la app con las teclas de flecha y la tecla Tab de un teclado externo.
T-Keyboard_Shortcuts Keyboard_Shortcuts Usa combinaciones de teclas en un teclado externo para realizar acciones de seleccionar, cortar, copiar, pegar, deshacer y rehacer.
T-Keyboard_Media_Playback Keyboard_Media_Playback Usa un teclado externo para iniciar, detener, pausar, retroceder y adelantar la reproducción de contenido multimedia.
T-Keyboard_Send Keyboard_Send Usa la tecla Intro de un teclado externo para enviar datos.
T-Context_Menus Context_Menus Usa la función del botón secundario del mouse o del panel táctil para acceder al menú contextual de los elementos interactivos.
T-Content_Zoom Content_Zoom Usa la rueda del mouse (junto con la tecla Control o Ctrl) y los gestos de pellizcar del panel táctil para acercar o alejar el contenido.
T-Hover_States Hover_States Coloca el cursor del mouse o el panel táctil sobre los elementos prácticos de la IU para activar el estado de desplazamiento del elemento.