Los dispositivos Android están disponibles en una variedad de factores de forma, como teléfonos, tablets, plegables y dispositivos ChromeOS, que incluyen una amplia variedad de tamaños de pantalla. Android admite muchos modos de visualización, incluidos el modo multiventana, pantallas múltiples, 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 aplicación cuando 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 música 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 en más detalle. Tu app puede mostrar un contexto más amplio 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 navegación pueden tener una mayor variedad para aumentar el atractivo visual, o tu app de música puede mantener la participación de los usuarios si ofrece un feed explorable junto con la reproducción.
Ten en cuenta que tu app de música tiene el mismo código en ejecución 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 tu app. Para obtener más información y ejemplos visuales, consulta Galería de pantallas grandes.
Cómo hacer que tu app de música sea responsiva de forma predeterminada
Evita las experiencias del usuario dañadas en tu app de música. Para ello, haz que el diseño de la app se adapte a los teléfonos, las tablets, los dispositivos plegables y los 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 pantalla disponible. Para obtener más información, consulta Cómo brindar compatibilidad con diferentes tamaños de pantalla.
Diseña de acuerdo con los lineamientos
La calidad principal de las apps es la base de todas las apps para Android, independientemente del tamaño de la pantalla, la posición del dispositivo y otras consideraciones específicas 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 básica de las apps.
Tu app debería 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 tanto, diseña tu app de acuerdo con los siguientes lineamientos de los niveles 1, 2 y 3.
Estos 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 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íticas, 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 ventana completa en el modo multiventana. No está en formato letterbox ni se ejecuta en el modo de compatibilidad. La app proporciona 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 las configuraciones del dispositivo, junto con compatibilidad mejorada con dispositivos de entrada externos. Para obtener más información, consulta Optimización para pantallas grandes.
Nivel 1:
Este es el mejor nivel de asistencia y ofrece al usuario la experiencia más excelente con tu app, ya que especifica funciones y capacidades premium.
Cuando corresponde, la app admite la realización de varias tareas a la vez, las posiciones plegables, el arrastre y la entrada de la pluma stylus. En este nivel, las apps se diferencian mucho, por lo que debes prestar mucha atención a los lineamientos sobre aspectos como las posiciones plegables y la realización de varias tareas a la vez. Para obtener más información, consulta Diferenciación de las apps para pantallas grandes.
Diseños optimizados
Aprovecha el mayor espacio de las pantallas grandes sin formato letterbox (debido a restricciones de la orientación) ni estiramientos. Si optimizas el diseño de tu app para el contenido multimedia 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 de panel lateral y riel de navegación proporcionan una navegación desordenada para la comodidad y el control de la IU. Los componentes también complementan los diseños canónicos (lista-detalles, feed y panel complementario) porque posicionan destinos de navegación principales cerca y ocupan un mínimo de espacio de pantalla.
Diseños multimedia
Haz que tu app sea más fácil de usar 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: Diseña la app con un navegador multimedia interactivo, que permite a los usuarios explorar diferentes tipos de contenido multimedia mientras miran o escuchan el 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-detalles.
Feed: Un diseño de feed dispone elementos de contenido equivalentes en una cuadrícula configurable para 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 principales y secundarias, tu app puede incorporar un panel complementario para brindar contexto, relevancia o referencia, como una lista de desplazamiento de títulos similares, opiniones publicadas y obras adicionales de los mismos artistas o actores. Para obtener más información, consulta Diseños de paneles complementarios.
Para obtener una colección seleccionada de diseños de contenido multimedia, consulta Galería de contenido multimedia.
Diseños de redes sociales
Las pantallas grandes brindan a los usuarios de redes sociales más espacio de trabajo para crear, 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 música para pantallas grandes puede aprovechar los diseños de lista-detalles, el feed y los paneles complementarios.
Lista-detalles: Es ideal para las apps de mensajería, los administradores de contactos o los navegadores de archivos. Por ejemplo, tu app puede mostrar una lista de conversaciones, una al lado de la otra, con detalles para mantenerse al tanto de los mensajes más recientes. Para obtener más información, consulta Diseños de lista-detalles.
Feed: Los componentes comunes de 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 llamar la atención sobre las publicaciones destacadas. 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 referencia, o una 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 Diseños de paneles complementarios.
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 música de pantalla grande
El uso de prácticas recomendadas para pantallas grandes te ayuda a evitar las reelaboraciones innecesarias de tu app. También hacen que tu app sea más fácil de usar en más dispositivos desde el principio, especialmente 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 música declara restricciones de orientación y de 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 se reduce en gran medida y se ve afectada la experiencia del usuario.
Por ejemplo, si tu app está en una tablet, la tablet se conecta en orientación horizontal. Si tu app está restringida al modo vertical, se genera el formato letterbox, lo que no es ideal para el usuario final. Tu app debería permitir que las personas usen su orientación preferida, así que aprovecha el tamaño disponible de una pantalla grande en tu diseño.
Cualquier restricción de 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 en 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 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 el 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 ayudará a observar e incluir estos atajos importantes en tu app al comienzo del diseño.
Compatibilidad con la vista previa de la cámara
Con pantallas grandes, puedes tener más problemas de estiramiento, recorte y rotación. Por lo tanto, no puedes asumir que el tamaño de la vista previa de la cámara es lo que realmente renderiza la IU de tu app de música.
Por ejemplo, si un usuario toma una foto con su tablet, pero en la pantalla de esta se renderiza al revés, esta experiencia no es ó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 CameraX.
Posiciones plegables
El diseño de tu app de música para pantallas grandes incluye posiciones plegables. Tu app, por ejemplo, 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.
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. Aumentas la experiencia del contenido multimedia para el usuario de maneras que otros dispositivos no pueden hacerlo sin posiciones plegables. Para obtener más información, consulta Posiciones plegables.