Los dispositivos Android están disponibles en una variedad de factores de forma, como teléfonos, tablets, plegables, 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, forma libre y pantalla en pantalla. Los dispositivos plegables pueden estar en varios estados o posiciones, como la de mesa o de libro.
Considera diferentes casos de uso para tu app a medida que comiences a diseñarla. Por ejemplo:
Los dispositivos de pantalla grande les brindan a los usuarios más espacio para interactuar con el contenido de tu app de contenido 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 usar una tablet para mantenerse conectados con videollamadas y ver a sus amigos y familiares con más 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 ofrecer más opciones de control en pantalla.
Los carruseles en una vista de exploración pueden ofrecer más variedad para lograr un mayor atractivo visual, o bien tu app de contenido multimedia puede mantener a los usuarios interesados ofreciendo un feed navegable junto con la reproducción.
Ten en cuenta que tu app de contenido multimedia tiene el mismo código que se ejecuta en un teléfono estándar, un 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 experiencias del usuario dañadas en tu app de contenido multimedia haciendo que el diseño de tu app sea adaptable en teléfonos, tablets, plegables y dispositivos ChromeOS.
Tu app debe 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 visualización disponible. Para obtener más información, consulta Cómo brindar compatibilidad con diferentes tamaños de visualización.
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 comenzar a diseñar para una pantalla grande. Para obtener más información, consulta Calidad principal de la app.
Tu app debe ofrecer una excelente experiencia del usuario, independientemente del 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ñar tu app según 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 ideal, pero se ejecuta en pantalla completa o en pantalla completa en el modo multiventana. No tiene formato letterbox ni se ejecuta en el modo de compatibilidad mode. 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 App lista 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 App optimizada para pantallas grandes.
Nivel 1:
Este es el mejor nivel de compatibilidad y le 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 las tareas múltiples y las posiciones plegables. Para obtener más información, consulta App diferenciada 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 contenido multimedia y redes sociales, expandes el alcance de tu app 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-detalles, feed y panel complementario) 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
Haz que tu app sea más usable implementando diseños específicos de contenido multimedia para lista-detalles, feed y panel complementario. Para obtener información sobre los diseños de MDX, Flutter y Compose, consulta Recursos de diseño.
Lista-detalles: Si diseñas tu app con un navegador de contenido multimedia interactivo, los usuarios podrán explorar diferentes contenido multimedia mientras miran o escuchan. Los títulos de contenido 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 preservar 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 quiosco de películas y TV en tu app. Para obtener más información, consulta Diseños de feed.
Panel complementario: Con áreas de visualización primarias y secundarias, tu app puede incorporar un panel complementario para el contexto, la relevancia o la 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 Diseños de panel complementario.
Para obtener una colección seleccionada de diseños de contenido multimedia, consulta la galería de contenido multimedia.
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 contenido multimedia para pantallas grandes puede aprovechar los diseños de lista-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 junto con los detalles para mantenerse al día con los últimos mensajes. 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 grandes grupos de contenido. Para obtener más información, consulta Diseños de feed.
Panel complementario: Las apps de búsqueda y referencias o una app 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 Diseños de panel complementario.
Para obtener una colección seleccionada de diseños de redes sociales, consulta la página de galería de redes sociales.
Prácticas recomendadas para apps de contenido multimedia para pantallas grandes
Usar las prácticas recomendadas para pantallas grandes te ayuda a evitar la repetición innecesaria de tu app. También hacen 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 posiciones 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. Aunque 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, la tablet se conecta en orientación horizontal. Si tu app está restringida a la orientación vertical, esto provoca el formato letterbox, que no es ideal para el usuario final. Tu app debe 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 a 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 el cambio de 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 en teclados físicos, como iniciar, detener, pausar, rebobinar 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 e incluir estas combinaciones 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 lo 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 poco ó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
El diseño de tu app de contenido multimedia para pantallas grandes incluye posiciones plegables. Por ejemplo, tu app puede permitir que un usuario tenga una configuración de mesa para la reproducción de contenido multimedia o use una pantalla posterior y un modo de pantalla doble para obtener vistas previas y capturar contenido.
Con las posiciones plegables incluidas en tu plan de desarrollo, tu app está disponible para más dispositivos y tiene un impacto más amplio. Amplías la experiencia de contenido multimedia para el usuario de formas que otros dispositivos no pueden hacer sin posiciones plegables. Para obtener más información, consulta Posiciones plegables.