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 el modo 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 cuando 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 multimedia de diferentes maneras.
Los usuarios pueden realizar varias tareas a la vez mientras miran un video en una configuración multiventana o aprovechar la pantalla más grande para aplicar ediciones más complejas después de capturar una imagen.
Los usuarios pueden recurrir 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 pantalla.
Los carruseles en una vista de exploración pueden presentar más variedad para un mayor atractivo visual, o tu app de contenido multimedia puede mantener la participación de los usuarios ofreciendo un feed que se puede explorar junto con la reproducción.
Ten en cuenta que tu app multimedia 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 comienzo del desarrollo de la app. Para obtener más información y ejemplos visuales, consulta la galería de pantallas grandes.
Haz que tu app de contenido multimedia sea responsiva de forma predeterminada
Evita las experiencias del usuario interrumpidas en tu app de contenido multimedia haciendo que el diseño de tu app sea adaptable en teléfonos, tablets, dispositivos plegables y dispositivos ChromeOS.
Tu app debería ser responsiva para 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 básica de las apps 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 una pantalla grande. Para obtener más información, consulta Calidad de la app principal.
Tu app debería ofrecer una excelente experiencia del usuario sin importar el factor de forma, el tamaño de la pantalla, el modo de visualización o la posición del dispositivo, por lo que debes diseñarla de acuerdo con los siguientes lineamientos de los niveles 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 aún debe cumplir 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 el ideal, pero se ejecuta en pantalla completa o en ventana completa en el modo multiventana. No tiene formato letterbox ni se ejecuta en el 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:
En este nivel, 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 compatibilidad y ofrece al usuario la experiencia más excelente 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 soltar, 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 para aspectos como la multitarea y las posturas de plegables. Para obtener más información, consulta Diferenciación para pantallas grandes.
Diseños optimizados
Aprovecha el espacio adicional 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 contenido multimedia y redes sociales, expandes su alcance y creas una mejor experiencia del usuario en todos los factores de forma de pantallas grandes (tablets, dispositivos 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-detalles, feed y panel de apoyo) 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 de contenido multimedia para la lista-detalles, el feed y el panel complementario, y mejora la usabilidad de tu app. Para obtener información sobre los diseños de MDX, Flutter y Compose, consulta Recursos de diseño.
Lista-detalles: Diseñar tu app con un navegador de contenido multimedia interactivo permite que los usuarios exploren diferentes contenidos multimedia mientras miran o escuchan. Los títulos multimedia se muestran junto a un archivo de audio o video en reproducción. Si cambia la orientación del dispositivo, un diseño de lista-detalles responde para conservar el estado de la app. Para obtener más información, consulta Diseños de lista-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 TV en tu app. Para obtener más información, consulta Diseños de feed.
Panel complementario: Con las áreas de visualización principal y secundaria, tu app puede incorporar un panel complementario para brindar contexto, relevancia o referencia, 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 Cómo admitir diseños de paneles.
Para obtener una colección seleccionada de diseños de contenido multimedia, consulta la Galería de contenido multimedia.
Diseños para 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 contenido multimedia para pantallas grandes puede aprovechar los diseños de lista-detalles, feed y panel complementario.
Lista-detalles: Este diseño 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-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 de importancia. Los usuarios pueden ver rápidamente grupos grandes 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 a mano para el 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 Galería de redes sociales.
Prácticas recomendadas para apps de contenido multimedia en pantallas grandes
Si usas las prácticas recomendadas para pantallas grandes, evitarás tener que volver a trabajar en tu app de forma innecesaria. También harás que tu app sea más fácil de usar en más dispositivos desde el principio, en especial en lo que respecta a la orientación, las combinaciones de teclas, la compatibilidad con la vista previa de la cámara y las posturas de los dispositivos plegables.
Orientación y cambio de tamaño
Si tu app de contenido multimedia 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 manera aceptable, la usabilidad disminuye en gran medida 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 produce el formato letterbox, que no es ideal para el usuario final. Tu app debería permitir que las personas usen su orientación preferida, por lo que debes aprovechar el tamaño disponible de una pantalla grande en tu diseño.
Cualquier restricción de la orientación reduce la forma en que los usuarios pueden interactuar con el contenido o consumir contenido multimedia, lo que limita el uso de tu app. Cambiar la orientación puede afectar el tamaño hasta cierto punto, 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 combinaciones de teclas en teclados físicos, como iniciar, detener, pausar, retroceder y avanzar, lo que hace que la experiencia del usuario sea coherente con un teclado.
Los usuarios esperan estas funciones en sus apps de contenido 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 y, luego, incluir estos importantes atajos 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 realmente renderiza la IU en tu app de contenido multimedia.
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 subóptima. Incluye compatibilidad con la vista previa de la cámara para pantallas grandes.
Para obtener más información, consulta Vista previa de CameraX o Vista previa de Camera2.
Posiciones plegables
Diseñar tu app de contenido multimedia para pantallas grandes incluye las posturas de los dispositivos plegables. Por ejemplo, tu app puede permitir que un usuario tenga una configuración de mesa para la reproducción de contenido multimedia o que use una pantalla posterior y el modo de pantalla doble para obtener vistas previas y capturas.
Con las posturas de plegables incluidas en tu plan de desarrollo, tu app estará disponible para más dispositivos y tendrá un impacto más amplio. Amplías la experiencia multimedia para el usuario de formas que otros dispositivos no pueden hacer sin las posiciones plegables. Para obtener más información, consulta Posturas de plegables.