Los dispositivos Android están disponibles en una variedad de factores de forma, como teléfonos, tablets, plegables y dispositivos ChromeOS, que incluyen una gran gama de tamaños de pantalla. Android admite muchos modos de visualización, incluidos el modo multiventana, varias pantallas, formato libre y pantalla en pantalla. Los dispositivos plegables pueden estar en varios estados o posiciones, como de mesa o de libro.
Considera diferentes casos de uso para tu app a medida que comiences a diseñarla. Por ejemplo:
Los dispositivos con pantalla grande les brindan a los usuarios más espacio para interactuar con el contenido de tu app de medios de diferentes maneras.
Los usuarios pueden realizar varias tareas a la vez mientras miran un video en una configuración de varias ventanas o aprovechar la pantalla más grande para aplicar ediciones más complejas después de capturar una imagen.
Es posible que los usuarios recurran a una tablet para mantenerse en contacto con videollamadas y ver a sus amigos y familiares con mayor detalle. Tu app puede mostrar un contexto más enriquecido sobre un título o una escena en una superposición de reproducción personalizada, o bien ofrecer más opciones de control en la pantalla.
Los carruseles en una vista de exploración pueden ofrecer más variedad para un mayor atractivo visual, o bien tu app de contenido multimedia puede mantener a los usuarios interesados ofreciendo un feed de exploración junto con la reproducción.
Ten en cuenta que tu app de medios tiene el mismo código que se ejecuta en un teléfono estándar, un dispositivo plegable, una tablet y dispositivos ChromeOS, por lo que debes diseñar para pantallas grandes desde el principio del desarrollo de la app. Para obtener más información y ver ejemplos visuales, consulta la galería de pantallas grandes.
Haz que tu app de contenido multimedia sea responsiva de forma predeterminada
Evita experiencias del usuario interrumpidas en tu app de medios haciendo que su diseño sea adaptable en teléfonos, tablets, dispositivos plegables y dispositivos ChromeOS.
Tu app debe ser responsiva para tener en cuenta los diferentes tamaños de pantalla, orientaciones y factores de forma. Un diseño adaptable cambia en función del espacio de pantalla disponible. Para obtener más información, consulta Cómo brindar compatibilidad con diferentes tamaños de pantalla.
Diseña según los lineamientos
La calidad principal de la app es la base de todas las apps para Android, independientemente del tamaño de la pantalla, la posición del dispositivo o cualquier otra consideración específica del dispositivo. Tu app debe cumplir con estos requisitos básicos antes de que comiences a diseñar para pantallas grandes. Para obtener más información, consulta Calidad principal de la app.
Tu app debe ofrecer una excelente experiencia del usuario sin importar el factor de forma del dispositivo, el tamaño de la pantalla, el modo de visualización o la posición, por lo que debes diseñarla según los siguientes lineamientos de nivel 1, 2 y 3.
Los lineamientos definen un conjunto integral de requisitos de calidad para la mayoría de los tipos de apps para Android.
Nivel 3:
En este nivel básico, tu app debe seguir cumpliendo con los requisitos de IU y gráficos. Tu app está lista para pantallas grandes y los usuarios pueden completar flujos de tareas críticos, pero con una experiencia del usuario poco óptima.
Es posible que el diseño de la app no sea ideal, pero se ejecuta en pantalla completa o en pantalla completa en el modo multiventana. No tiene formato letterbox y no se ejecuta en modo de compatibilidad. La app ofrece compatibilidad básica con dispositivos de entrada externos, como teclado, mouse y panel táctil. Para obtener más información, consulta Preparación para pantallas grandes.
Nivel 2:
Aquí, tu app implementa optimizaciones de diseño para todos los tamaños de pantalla y configuraciones del dispositivo, junto con compatibilidad mejorada para dispositivos de entrada externos. Para obtener más información, consulta Optimización de las apps para pantallas grandes.
Nivel 1:
Este es el mejor nivel de asistencia y ofrece al usuario la mejor experiencia con tu app, ya que especifica funciones y capacidades premium.
Cuando corresponda, la app admite el modo multitarea, las posiciones plegables, la función de arrastrar y la entrada de la pluma stylus. En este nivel, las apps están muy diferenciadas, por lo que debes prestar mucha atención a los lineamientos sobre aspectos como la realización de múltiples tareas y las posiciones plegables. Para obtener más información, consulta Diferenciación para pantallas grandes.
Diseños optimizados
Aprovecha el mayor espacio de las pantallas grandes sin formato letterbox (debido a la restricción de la orientación) ni estiramiento. Si optimizas el diseño de tu app para los medios y las redes sociales, expandes su alcance y creas una mejor experiencia del usuario en todos los factores de forma de pantallas grandes (tablets, plegables y dispositivos ChromeOS), además de admitir todos los tamaños de teléfonos.
Los componentes del panel lateral y riel de navegación brindan una navegación despejada para lograr una IU cómoda y controlada. Los componentes también complementan los diseños canónicos (lista de detalles, feed y panel de asistencia) colocando los destinos principales de navegación en un lugar de fácil alcance y ocupando un mínimo de espacio en la pantalla.
Diseños de contenido multimedia
Implementa diseños específicos para medios en los diseños de lista y detalles, feed y panel complementario para que tu app sea más fácil de usar. Para obtener información sobre los diseños de MDX, Flutter y Compose, consulta Recursos de diseño.
Lista-detalle: Diseñar tu app con un navegador de contenido multimedia interactivo permite que los usuarios exploren diferentes medios mientras miran o escuchan contenido. Los títulos de contenido multimedia se muestran uno al lado del otro junto con un archivo de audio o video en reproducción. Si cambia la orientación del dispositivo, un diseño de lista-detalles responde para preservar el estado de la app. Para obtener más información, consulta Diseños de lista y detalles.
Feed: Un diseño de feed dispone elementos de contenido equivalentes en una cuadrícula configurable para permitir una visualización rápida y conveniente de una gran cantidad de contenido, como un feed de música o un kiosco de películas y programas de TV en tu app. Para obtener más información, consulta Diseños de feed.
Panel complementario: Con áreas de visualización principal y secundaria, tu app puede incorporar un panel complementario para brindar contexto, relevancia o referencias, como una lista de desplazamiento de títulos similares, opiniones publicadas u obras adicionales de los mismos artistas o actores. Para obtener más detalles, consulta Compatibilidad con diseños de paneles.
Para ver una colección seleccionada de diseños de medios, consulta la Galería de medios.
Diseños de redes sociales
Las pantallas grandes les brindan a los usuarios de redes sociales más espacio para crear contenido, realizar varias tareas a la vez, arrastrar contenido entre apps y compartirlo. Con funciones y capacidades distintivas que no son posibles en dispositivos con pantallas pequeñas, tu app de medios para pantallas grandes puede aprovechar los diseños de lista y detalles, feed y panel complementario.
Lista-detalles: Es ideal para apps de mensajería, administradores de contactos o navegadores de archivos. Por ejemplo, tu app puede mostrar una lista de conversaciones en paralelo con los detalles para mantenerte al día con los mensajes más recientes. Para obtener más información, consulta Diseños de lista y detalles.
Feed: Los componentes comunes en este estilo de diseño son las tarjetas y las listas. Por ejemplo, crea un collage de publicaciones en un formato de cuadrícula flexible o usa el tamaño y la posición para captar la atención hacia las publicaciones destacadas. Los usuarios pueden ver rápidamente grandes grupos de contenido. Para obtener más información, consulta Diseños de feeds.
Panel complementario: Las apps de búsqueda y referencias, o las apps de productividad, pueden beneficiarse de este estilo de diseño. Mantiene las herramientas de creación de contenido al alcance del usuario. Por ejemplo, tu app puede permitir que los usuarios ajusten la configuración, accedan a paletas de colores, apliquen efectos y vean los cambios al instante. Para obtener más información, consulta Cómo admitir diseños de paneles.
Para ver una colección seleccionada de diseños de redes sociales, consulta la página de la galería de redes sociales.
Prácticas recomendadas para apps de contenido multimedia en pantallas grandes
Usar las prácticas recomendadas para pantallas grandes te ayuda a evitar la reelaboración innecesaria de tu app y a que sea más fácil de usar en más dispositivos desde el principio, especialmente en lo que respecta a la orientación, los atajos de teclado, la compatibilidad con la vista previa de la cámara y las posiciones de los dispositivos plegables.
Orientación y cambio de tamaño
Si tu app de medios declara restricciones de orientación y cambio de tamaño, Android activa un modo de compatibilidad. Si bien el modo de compatibilidad garantiza que tu app se comporte de forma aceptable, la usabilidad disminuye considerablemente y la experiencia del usuario se ve afectada.
Por ejemplo, si tu app está en una tablet, esta se acopla en orientación horizontal. Si tu app está restringida a la orientación vertical, se producirá un efecto de letterboxing, lo que no es ideal para el usuario final. Tu app debe permitir que las personas usen la orientación que prefieran, por lo que debes aprovechar el tamaño disponible de una pantalla grande en tu diseño.
Cualquier restricción a la orientación reduce la forma en que los usuarios pueden interactuar con el contenido o consumir medios, lo que limita el uso de tu app. Cambiar la orientación puede afectar el tamaño en cierta medida, pero cambiar el tamaño no necesariamente cambiará la orientación.
Combinaciones de teclas
En una pantalla más grande, es más probable que se usen las combinaciones de teclas de los teclados físicos, como iniciar, detener, pausar, rebobinar y avanzar, lo que hace que la experiencia del usuario sea coherente con el uso de un teclado.
Los usuarios esperan estas funciones en sus apps multimedia. Para reducir los puntos de fricción para los usuarios, considera probar tu app con un teclado físico. Esto te ayuda a notar e incluir estos atajos importantes en tu app al comienzo del diseño.
Compatibilidad con la vista previa de la cámara
Con las pantallas grandes, puedes tener más problemas con el estiramiento, el recorte y la rotación. Por lo tanto, no puedes suponer que el tamaño de la vista previa de la cámara es el que renderiza la IU de tu app de medios.
Por ejemplo, si un usuario toma una foto con su tablet, pero en la pantalla de la tablet se renderiza al revés, esta es una experiencia poco óptima. Incluye compatibilidad con la vista previa de la cámara en pantallas grandes.
Para obtener más información, consulta Vista previa de CameraX o Vista previa de Camera2.
Posiciones plegables
El diseño de tu app de medios para pantallas grandes incluye las posiciones de plegado. Por ejemplo, tu app puede permitir que un usuario tenga una configuración de mesa para la reproducción de contenido multimedia o usar una pantalla posterior y el modo Dual Screen para obtener vistas previas y capturar contenido.
Si incluyes las posturas plegables en tu plan de desarrollo, tu app estará disponible para más dispositivos y tendrá un mayor impacto. Amplías la experiencia multimedia para el usuario de formas que otros dispositivos no pueden hacer sin posiciones plegables. Para obtener más información, consulta Posturas plegables.