Experiencia del usuario con la plataforma Chromecast

Chromecast permite que las apps web de Chrome, iOS y Android "transmitan" contenido, como video, audio y compartir pantalla (duplicación), a dispositivos compatibles con Cast, como los siguientes:

  • Chromecast
  • TV con Chromecast integrado (también conocida como TV con Chromecast integrado)
  • Bocinas con Chromecast integrado (también conocidas como bocinas con Chromecast integrado)
  • Pantallas inteligentes (un monitor LCD con pantalla táctil portátil que se usa como cliente liviano)
  • Tablets Android

En el modelo de interacción de transmisión, el teléfono celular, la tablet o la laptop es el remitente que actúa como un control remoto para controlar la reproducción. La TV, la pantalla o la tablet conectada a la estación de carga son el receptor que recibe instrucciones del remitente y muestra el contenido de la conexión a Internet del receptor. Todas las acciones del usuario (presionar y deslizar) pueden ocurrir tanto en el dispositivo emisor como en el receptor web.

La transmisión se basa en la coordinación entre dos o más pantallas (la IU del remitente y la del receptor) y estas deben funcionar en conjunto. Por ejemplo, si presionas un botón en un dispositivo móvil para pausar el contenido, la TV debería indicar que está pausado, mientras que el dispositivo móvil debe proporcionar un botón de reproducción para reanudar la reproducción.

Consideraciones

Debido a limitaciones de hardware y recursos, las aplicaciones compatibles con Chromecast tienen ciertas restricciones:

  • El dispositivo de transmisión es un dispositivo de bajo consumo con limitaciones de memoria, CPU y GPU, por lo que la aplicación de receptor web debe ser lo más liviana posible.
  • En el caso de los modelos de interacción con Chromecast y Chromecast integrado, las pestañas, ventanas o ventanas emergentes se pueden crear tanto en la app del receptor web como en la app emisora y aceptar directamente las entradas del usuario, como toques o deslizamientos. Por ejemplo, la app del receptor web en una tablet o pantalla conectada puede mostrar un botón de pausa y recibir la presión del usuario. De esta manera, todas las acciones en la aplicación deben activarse desde una aplicación receptora web o desde una aplicación emisora.
  • Las pantallas inteligentes admiten la entrada del usuario a través de una app emisora o de los controles táctiles de la IU.
  • Web Receiver es un navegador Chrome optimizado para la reproducción de videos. Por lo tanto, en la actualidad, WebGL y Chrome Native Client (NaCL) no son compatibles, ni tampoco las extensiones de Chrome.
  • La transmisión admite una sola reproducción de transmisión multimedia simultánea en las etiquetas <audio> y <video>, o varias pistas de audio con la API de WebAudio. Solo puede haber un elemento de video activo en el DOM a la vez. Además, no se admiten la composición, la manipulación, las transformaciones, las rotaciones ni el zoom de videos.

Principios generales del diseño

Ten en cuenta lo siguiente cuando desarrolles tu interfaz de usuario.

Interfaz de Web Receiver:

  • El receptor web puede tener elementos interactivos y también informativos que describen el estado de la app, como una pausa o reproducción, o mensajes de error. La interacción del usuario puede ocurrir en el dispositivo de envío de Cast (teléfono, tablet o navegador Chrome) o en el receptor web (TV, pantallas o tablets).
  • Recuerda que la acción de video ocurre en medio de la pantalla de la TV y que los elementos de la IU no deben interferir con la presentación. Coloca los elementos de la IU dentro del tercio inferior de la pantalla del receptor web y deja un margen del 10% desde los bordes de la pantalla para un posible sobrebarrido.
  • Cuando sea posible, las transiciones de un estado de pantalla a otro deben ser fluidas y deben sentirse cinemáticas. En lugar de movimientos abruptos de un estado a otro, usa transiciones como las de entrada y salida. Por ejemplo, el estado de carga de contenido permanece en la pantalla y se atenúa hasta la experiencia de reproducción del contenido multimedia.

Interfaz del remitente:

  • El remitente admite acciones del usuario y el receptor web muestra información de estado. Por ejemplo, si el contenido está en pausa, la TV debe indicar que está en pausa, mientras que el dispositivo móvil indica que está listo para comenzar a reproducirse (por ejemplo, puede mostrarle al usuario un botón de reproducción).
  • La velocidad es importante. Los usuarios deben poder ubicar rápidamente el control de transmisión y ver que el contenido comienza a reproducirse inmediatamente en la pantalla grande. Mientras se carga el contenido, proporciona indicadores de carga animados y usa transiciones para agilizar el proceso.

La forma más fácil de asegurarte de que tu aplicación de Cast siga estos principios es revisar tu interfaz de usuario con la lista de tareas para el diseño de Cast y probar tus aplicaciones de Cast.

Lineamientos de marca

Los siguientes lineamientos de desarrollo de la marca de Chromecast están dirigidos a desarrolladores de apps y se enfocan en los requisitos adicionales que debes cumplir para describir tu app en texto. Para conocer los lineamientos de desarrollo de la marca de dispositivos de transmisión, consulta el Centro de marketing para socios. Para informar a otras personas que tu app funciona con Chromecast integrado, usa el término "compatible con Chromecast". Sin embargo, asegúrate de que tu app cumpla con las Condiciones del Servicio para desarrolladores adicionales del SDK de Cast y la Lista de tareas de diseño, y de que el uso que hagas de la opción "Compatible con Chromecast" cumpla con los lineamientos de desarrollo de la marca.

De manera similar, puedes usar una insignia de Chromecast, siempre y cuando tu app o dispositivo cumpla con nuestros lineamientos sobre insignias. Google se reserva el derecho de solicitar que modifiques o dejes de usar la insignia si no cumple con los lineamientos de la marca.

Cómo usar "Chromecast" en el texto

  • Cuando describas una app (no un producto de hardware) como compatible con Cast, usa la frase "compatible con Chromecast". Por ejemplo: "Esta app es compatible con Chromecast".
  • Cuando describas un producto de hardware de terceros compatible con Cast, usa "TV con Chromecast integrado", "Bocina integrada con Chromecast" o solo "Chromecast integrado".
  • Cuando se escribe en texto, "Chromecast" debe escribirse con mayúscula, y "integrado" debe escribirse en minúscula.
  • En cualquier recurso de marketing que use "Chromecast" en el texto o en la insignia o el logotipo, debes incluir la siguiente atribución legal: Chromecast es una marca de Google LLC.
  • No coloques Chromecast en el título de la aplicación (por ejemplo, la aplicación de Chromecast XYZ).

Mensajería desde apps compatible con Chromecast

Puedes promocionar tu app de la siguiente manera:

  • "XYZ es una app compatible con Chromecast que te permite transmitir tu entretenimiento favorito desde tu dispositivo móvil a la TV".
  • "La app de XYZ ahora está disponible para TVs con Chromecast integrado".
  • "La app XYZ ahora está disponible para todos los productos Chromecast, incluidos Chromecast, Chromecast Audio, y TVs y bocinas con Chromecast integrado".
  • "La app de XYZ es compatible con Chromecast, lo que te permite disfrutar de todos tus programas, películas, música y juegos favoritos en una TV con Chromecast integrado".
  • "La app XYZ ahora es compatible con Chromecast, lo que permite a los usuarios transmitir contenido desde su teléfono a su TV con Chromecast integrado".

Insignia de Chromecast

Puedes usar las insignias de "Chromecast" en tu sitio web, la ficha de la tienda de aplicaciones, los materiales de marketing y los materiales promocionales para mostrar la compatibilidad con dispositivos que usan el protocolo de transmisión.

  • No modifiques el color, las proporciones, el espaciado ni ningún otro aspecto de la imagen de insignia.
  • Cuando se usa junto con logotipos de tecnologías de otros componentes (por ejemplo, Bluetooth, Spotify Connect, AirPlay, etc.), la insignia de Chromecast debe ser de igual o mayor tamaño.
  • No conviertas la insignia en el elemento principal de tu página.
  • Mantén cierta distancia entre la insignia y otros logotipos e íconos de tu página.
  • Cuando se usa sobre un fondo blanco, claro o medio, usa una insignia negra.
  • Cuando lo utilices sobre un fondo negro o en tonos oscuros, usa la insignia blanca.
  • No uses la insignia en una página que incluya o muestre contenido para adultos, promueva juegos de apuestas, violencia, incite al odio o a la violencia, incluya la venta de tabaco o alcohol a personas menores de 21 años, infrinja otras leyes o reglamentaciones aplicables, o sea objetable de alguna otra forma.

Vinculación de insignias

Cuando se usa en línea, la insignia de Chromecast debe estar vinculada a una de las siguientes opciones:

  • Lista de apps y productos compatibles con Chromecast de Google, actualmente en g.co/castapps
  • Una lista de los productos que publicaste.
  • Una página de detalles del producto específica que hayas publicado.
  • Una lista de las apps que publicaste.
  • Una página de detalles específica de la app publicada por ti, en Google Play o en la App Store de Apple.

Descargar elementos de la insignia de Chromecast

El paquete de descarga incluye formatos de Portable Network Graphics (.png), Adobe Illustrator (.ai) y Enapsulated Postscript (.eps).

Obtener vista previa de las insignias de Chromecast

Logotipo azul y texto blanco sobre fondo negro
Logotipo y texto blancos sobre fondo negro
Logotipo azul y texto gris sobre fondo blanco