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 la de mesa o de libro.
Considera diferentes casos de uso para tu app 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 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 completo 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 ofrecer más variedad para un mayor atractivo visual, o bien tu app de música puede mantener a los usuarios interesados ofreciendo un feed navegable junto con la reproducción.
Ten en cuenta que tu app de música 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 tu app. Para obtener más información y ejemplos visuales, consulta la galería de pantallas grandes.
Cómo hacer que tu app de música sea responsiva de forma predeterminada
Evita experiencias del usuario deficientes en tu app de música haciendo que el diseño de la app sea adaptable a teléfonos, tablets, dispositivos plegables y 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, sin importar el 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 que comiences a diseñar para una pantalla grande. Para obtener más información, consulta Calidad de la app principal.
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 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 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 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:
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 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 las funciones y capacidades premium.
Cuando corresponda, la app admite el modo multitarea, las posiciones plegables, el arrastre y la entrada de la pluma stylus. En este nivel, las apps se diferencian mucho, así que presta mucha atención a los lineamientos sobre temas como la realización de varias tareas a la vez y las posiciones plegables. 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 la restricción de orientación) ni estiramiento. Si optimizas el diseño de tu app para contenido multimedia y redes sociales, expandirás su alcance y crearás 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 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 de detalles, feed y panel de asistencia) ya que posicionan los destinos principales de navegación al alcance de la mano y ocupan un espacio mínimo en la pantalla.
Diseños de contenido multimedia
Implementa diseños específicos para los medios en la lista de detalles, el feed y el 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-detalles: Diseñar tu app con un navegador multimedia interactivo permite que los usuarios exploren diferentes tipos de contenido multimedia mientras miran o escuchan contenido. 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 preservar el estado de la app. Para obtener más información, consulta Diseños de lista-detalles.
Feed: Un diseño de feed organiza 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 feeds.
Panel complementario: Con las áreas de visualización principal y secundaria, tu app puede incorporar un panel complementario para proporcionar contexto, relevancia o referencia, como una lista de desplazamiento de títulos similares, opiniones publicadas o obras adicionales de los mismos artistas o actores. Para obtener más información, consulta Diseños de paneles complementarios.
Para ver una colección seleccionada de diseños 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 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 contenido multimedia para pantallas grandes puede aprovechar los diseños de lista-detalles, feed y panel complementario.
Lista-detalles: 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 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 hacia 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 referencias, o una app 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 Galería de redes sociales.
Prácticas recomendadas para apps de música con pantalla grande
El uso de prácticas recomendadas para pantallas grandes te ayuda a evitar que se vuelva a trabajar en tu app de forma innecesaria. 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 música 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 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 al modo vertical, se genera un formato letterbox, 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 que estas funciones estén disponibles en sus apps multimedia. Para disminuir los puntos de fricción de 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 de tu diseño.
Compatibilidad con la vista previa de la cámara
Con 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 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 la tablet se muestra 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 música 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 usar una pantalla posterior y el modo Dual Screen para obtener vistas previas y capturas.
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. Amplias la experiencia multimedia del usuario de formas que otros dispositivos no pueden hacer sin posiciones plegables. Para obtener más información, consulta Posiciones plegables.