Diseño para Xbox y televisión
Diseñe su aplicación de Windows para que se vea bien y funcione correctamente en las pantallas de Xbox One y de televisión.
Consulta Interacciones de controlador para juegos y control remoto para obtener instrucciones sobre las experiencias interactivas en aplicaciones para UWP en la experiencia en pantalla de TV.
Información general
La plataforma universal de Windows le permite crear experiencias atractivas en varios dispositivos Windows. Gran parte de la función proporcionada por el marco UWP permite que las aplicaciones utilicen la misma interfaz de usuario (UI) en todos estos dispositivos, sin trabajo adicional. Sin embargo, adaptar y optimizar una aplicación para que funcione a la perfección en Xbox One y en pantallas de televisión requiere consideraciones especiales.
La experiencia de estar sentado en tu sofá al otro lado de la sala, con un controlador para juegos o control remoto para interactuar con tu televisor, se llama la experiencia de 10 pies. Se denomina así porque el usuario generalmente está sentado aproximadamente a 10 pies de distancia de la pantalla. Esto proporciona desafíos que no están presentes, por ejemplo, en la experiencia de 2 pies o interactuando con un PC. Si desarrolla una aplicación para Xbox One o cualquier otro dispositivo que transmita a la pantalla del televisor y use un control como entrada, siempre debe tener esto en cuenta.
No todos los pasos de este artículo son necesarios para que la aplicación funcione bien en experiencias en pantalla de TV, pero si los comprende y toma las decisiones adecuadas para su aplicación, logrará una mejor experiencia en pantalla de TV a las necesidades específicas de su aplicación. A medida que su aplicación cobre vida en el entorno de pantalla de TV tenga en cuenta los siguientes principios de diseño.
Sencillo
Diseñar para el entorno de pantalla de TV presenta un conjunto único de desafíos. La resolución y la distancia de visualización pueden dificultar el procesamiento de demasiada información. Intente mantener un diseño limpio, reducido a los componentes más simples posibles. La cantidad de información que se muestra en un televisor debe ser comparable a la que se vería en un teléfono móvil, más que en un dispositivo de escritorio.
Coherente
Las aplicaciones UWP en el entorno de pantalla de TV deben ser intuitivas y fáciles de usar. Haga que el objetivo sea claro e inconfundible. Organice el contenido de forma que el movimiento por el espacio resulte coherente y predecible. Ofrezca a los usuarios el camino más corto para llegar a lo que quieren hacer.
Todas las películas que aparecen en la captura de pantalla están disponibles en Películas y TV de Microsoft.
Cautivador
Las experiencias cinematográficas más envolventes suceden en la gran pantalla. Los escenarios panorámicos, los movimientos elegantes y el uso vibrante del color y la tipografía llevan las aplicaciones al siguiente nivel. Sea atrevido y atractivo.
Optimizaciones para la experiencia en pantalla de TV
Ahora que ya conoce los principios de un buen diseño de aplicaciones UWP para la experiencia en pantalla de TV, lea la siguiente descripción general de las formas específicas en que puede optimizar su aplicación y lograr una gran experiencia del usuario.
| Característica | Descripción |
|---|---|
| Tamaño de los elementos de interfaz de usuario | La plataforma universal de Windows usa el escalado y los píxeles efectivos para escalar la IU en función de la distancia de visualización. Comprender el dimensionamiento y aplicarlo en toda la interfaz de usuario ayudará a optimizar la aplicación para el entorno de pantalla de TV. |
| Área segura para TV | La UWP evitará automáticamente mostrar cualquier UI en áreas no seguras para la TV (áreas cercanas a los bordes de la pantalla) de manera predeterminada. Sin embargo, esto crea un efecto de "recuadro" en el que la interfaz de usuario parece un rectángulo. Si quiere que su aplicación sea realmente envolvente en la televisión, deberá modificarla para que se extienda hasta los bordes de la pantalla en los televisores que lo admitan. |
| Colores | La UWP admite temas de color, y una aplicación que cumpla con el tema del sistema se oscurecerá de manera predeterminada en Xbox One. Si la aplicación tiene un tema de color específico, debe tener en cuenta que algunos colores no funcionan bien en la TV y deben evitarse. |
| Sonido | Los sonidos juegan un papel clave en la experiencia en pantalla de TV, ya que ayudan a que el usuario se sienta atraído y le proporcionan información. La UWP proporciona una función que activa automáticamente los sonidos de los controles comunes cuando la aplicación se ejecuta en Xbox One. Más información sobre el soporte de sonido integrado en la UWP y cómo aprovecharlo. |
| Directrices para los controles de UI | Hay varios controles de UI que funcionan bien en varios dispositivos, pero que deben tenerse en cuenta cuando se usan en la TV. Consulte algunos procedimientos recomendados para el uso de estos controles en el diseño para la experiencia en pantalla de TV. |
| Desencadenador de estado visual personalizado para Xbox | Si quiere personalizar su aplicación para UWP para la experiencia en pantalla de TV, le recomendamos que use un Desencadenador de estado visual personalizado para realizar cambios en el diseño cuando la aplicación detecte que se ejecuta en una consola Xbox. |
Además de las consideraciones de diseño y disposición anteriores, hay una serie de optimizaciones de interacción con el control remoto y el gamepad que debe tener en cuenta al crear su aplicación.
| Característica | Descripción |
|---|---|
| Navegación e interacción con foco XY | La navegación con foco XY permite al usuario desplazarse por la UI de la aplicación. Sin embargo, esto limita al usuario a navegar hacia arriba, abajo, izquierda y derecha. En esta sección se ofrecen recomendaciones para solucionar este y otros problemas. |
| Modo del mouse | La navegación con foco XY no es práctica, o ni siquiera posible, para algunos tipos de aplicaciones, como los mapas o las aplicaciones de dibujo y pintura. En estos casos, el modo ratón permite a los usuarios navegar con libertad con un gamepad o un control remoto, como si se tratara del ratón de una PC. |
| Enfoque visual | El enfoque visual es un contorno que resalta el elemento de la UI sobre el que se está enfocando en ese momento. Esto ayuda al usuario a identificar rápidamente la interfaz por la que navega o con la que interactúa. |
| Activación del foco | La activación del foco requiere que el usuario pulse el botón A/Select de un gamepad o control remoto cuando un elemento de la interfaz de usuario está enfocado para poder interactuar con él. |
| Botones de hardware | El gamepad y el control remoto ofrecen botones y configuraciones muy diferentes. |
Nota:
La mayoría de los fragmentos de código de este tema están en XAML/C#; sin embargo, los principios y conceptos se aplican a todas las aplicaciones para UWP. Si desea desarrollar una aplicación HTML/JavaScript UWP para Xbox, consulte la excelente biblioteca TVHelpers en GitHub.
Tamaño de los elementos de interfaz de usuario
Como el usuario de una aplicación en el entorno de pantalla de TV usa un control remoto o un gamepad y está sentado a varios pies de distancia de la pantalla, hay algunas consideraciones sobre la UI que deben tenerse en cuenta en el diseño. Asegúrese de que la UI tenga una densidad de contenido adecuada y no esté demasiado recargada para que el usuario pueda navegar y seleccionar elementos con facilidad. Recuerde, la clave está en la sencillez.
Factor de escala y diseño adaptativo
El factor de escala ayuda a garantizar que los elementos de la interfaz de usuario se muestren con el tamaño adecuado para el dispositivo en el que se ejecuta la aplicación. En dispositivos de escritorio, esta configuración se puede encontrar en Ajustes > Sistema > Pantalla como un valor deslizante. Esta misma configuración también existe en el teléfono si el dispositivo lo admite.
En Xbox One, no existe esta configuración del sistema; sin embargo, para que los elementos de la UI de UWP tengan el tamaño adecuado para la TV, se escalan a un valor predeterminado del 200% para las aplicaciones XAML y del 150% para las aplicaciones HTML. Siempre que los elementos de la UI tengan el tamaño adecuado para otros dispositivos, también lo tendrán para la TV. Xbox One renderiza la aplicación a 1080p (1920 x 1080 píxeles). Por lo tanto, cuando se crea una aplicación desde otros dispositivos como una PC, hay que asegurarse de que la UI se vea bien a 960 x 540 px a una escala del 100% (o 1280 x 720 px a una escala del 100% para aplicaciones HTML) con técnicas de adaptación.
Diseñar para Xbox es un poco diferente de diseñar para PC porque solo es necesario preocuparse de una resolución, 1920 x 1080. No importa si el usuario tiene una TV con mejor resolución: las aplicaciones para UWP siempre se escalarán a 1080p.
Los tamaños correctos de los recursos del conjunto 200% (o 150% para aplicaciones HTML) también se aplicarán a la aplicación cuando se ejecute en Xbox One, independientemente de la resolución de la TV.
Densidad de contenido
Cuando diseñe su aplicación, recuerde que el usuario verá la interfaz de usuario desde la distancia e interactuará con ella a través de un control remoto o un dispositivo de juego, lo que requiere más tiempo de navegación que el uso del ratón o la entrada táctil.
Tamaño de los controles de la UI
Los elementos interactivos de la UI deben tener un tamaño mínimo de 32 epx (píxeles efectivos). Este es el valor predeterminado para los controles UWP comunes y, cuando se utiliza a escala del 200%, garantiza que los elementos de UI sean visibles desde lejos y ayuda a reducir la densidad del contenido.
Número de clics
Cuando el usuario navega de un borde a otro de la pantalla del televisor, no debería necesitar más de seis clics para simplificar la UI. De nuevo, aquí se aplica el principio de simplicidad.
Tamaño del texto
Para que su UI sea visible desde lejos, siga las siguientes reglas empíricas:
- Texto principal y contenido de lectura: 15 epx mínimo
- Texto no esencial y contenido complementario: 12 epx mínimo
Cuando use texto más grande en su UI, elija un tamaño que no limite demasiado el espacio en pantalla, restando espacio que potencialmente podrían ocupar otros contenidos.
Exclusión del factor de escala
Se recomienda que la aplicación aproveche la compatibilidad con el factor de escala, lo que ayudará a que se ejecute correctamente en todos los dispositivos mediante el escalado para cada tipo de dispositivo. Sin embargo, es posible excluirse de este comportamiento y diseñar toda la interfaz de usuario a escala 100%. Tenga en cuenta que no puede cambiar el factor de escala a otra cosa que no sea el 100%.
Para aplicaciones XAML, puede optar por no usar el factor de escala con el siguiente fragmento de código:
bool result =
Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);
result le informará de si se ha desactivado correctamente.
Para más información, incluido código de ejemplo para HTML/JavaScript, consulte Cómo desactivar el factor de escala.
Asegúrese de calcular los tamaños apropiados de los elementos de la UI duplicando los valores de píxeles efectivos mencionados en este tema por los valores de píxeles reales (o multiplicando por 1,5 en el caso de aplicaciones HTML).
Área segura para TV
No todas las TV muestran el contenido hasta los bordes de la pantalla por razones históricas y tecnológicas. De manera predeterminada, la UWP evitará mostrar cualquier contenido de interfaz de usuario en áreas no seguras para la televisión y, en su lugar, solo dibujará el fondo de la página.
El área insegura para la TV está representada por el área azul en la siguiente imagen.
Puede establecer el fondo en un color estático o temático, o en una imagen, como demuestran los siguientes fragmentos de código.
Color de tema
<Page x:Class="Sample.MainPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
Imagen
<Page x:Class="Sample.MainPage"
Background="\Assets\Background.png"/>
Así es como se verá su aplicación sin trabajo adicional.
No es la mejor opción porque da a la aplicación un efecto "recuadrado", con partes de la UI como el panel de navegación y la cuadrícula aparentemente cortadas. Sin embargo, se pueden realizar optimizaciones para extender partes de la interfaz de usuario a los bordes de la pantalla y dar a la aplicación un efecto más cinematográfico.
Extender la UI hasta los bordes
Se recomienda usar ciertos elementos de la UI para que se extiendan hasta los bordes de la pantalla y proporcionen más inmersión al usuario. Entre ellos se incluyen los ScrollViewers, los paneles de navegación y las CommandBars.
Sin embargo, también es importante que los elementos interactivos y el texto eviten siempre los bordes de la pantalla para que no queden cortados en algunas TV. Se recomienda dibujar solo elementos visuales no esenciales a menos del 5% de los bordes de la pantalla. Como se mencionó en el dimensionamiento de los elementos de la UI, una aplicación para UWP que siga el factor de escala predeterminado de la consola Xbox One del 200% utilizará un área de 960 x 540 epx, por lo que en la UI de la aplicación, debe evitar colocar la UI esencial en las siguientes áreas:
- 27 epx desde arriba y abajo
- 48 epx desde los lados izquierdo y derecho
Las siguientes secciones describen cómo hacer que la UI se extienda hasta los bordes de la pantalla.
Límites de ventana centrales
En el caso de las aplicaciones para UWP orientadas únicamente a la experiencia en pantalla de TV, el uso de los límites de la ventana principal es una opción más sencilla.
En el método OnLaunched de App.xaml.cs, agregue el siguiente código:
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);
Con esta línea de código, la ventana de la aplicación se extenderá hasta los bordes de la pantalla, por lo que tendrá que mover toda la UI interactiva y esencial al área segura para TV descrita anteriormente. La UI transitoria, como los menús contextuales y los ComboBoxes abiertos, permanecerá automáticamente dentro del área segura para TV.
Fondos de panel
Los paneles de navegación suelen dibujarse cerca del borde de la pantalla, por lo que el fondo debe extenderse hasta la zona no segura para la TV para no introducir huecos incómodos. Para ello, basta con cambiar el color del fondo del panel de navegación por el color del fondo de la aplicación.
El uso de los límites de la ventana principal como se ha descrito anteriormente le permitirá dibujar su interfaz de usuario a los bordes de la pantalla, pero a continuación, debe usar márgenes positivos en el contenido de la SplitView para mantenerlo dentro del área segura de TV.
Aquí, el fondo del panel de navegación se extiende hasta los bordes de la pantalla, mientras que sus elementos de navegación se mantienen en el área segura para TV.
El contenido de SplitView (en este caso, una cuadrícula de elementos) se ha extendido hasta el fondo de la pantalla para que parezca que continúa y no se corte, mientras que la parte superior de la cuadrícula sigue dentro del área segura para TV. (Más información sobre cómo hacerlo en Desplazamiento de los extremos de listas y cuadrículas).
El siguiente fragmento de código consigue este efecto:
<SplitView x:Name="RootSplitView"
Margin="48,0,48,0">
<SplitView.Pane>
<ListView x:Name="NavMenuList"
ContainerContentChanging="NavMenuItemContainerContentChanging"
ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
ItemTemplate="{StaticResource NavMenuItemTemplate}"
ItemInvoked="NavMenuList_ItemInvoked"
ItemsSource="{Binding NavMenuListItems}"/>
</SplitView.Pane>
<Frame x:Name="frame"
Navigating="OnNavigatingToPage"
Navigated="OnNavigatedToPage"/>
</SplitView>
CommandBar es otro ejemplo de panel que suele situarse cerca de uno o más bordes de la aplicación y, como tal, en TV su fondo debe extenderse hasta los bordes de la pantalla. También suele contener un botón Más, representado por "..." en el lado derecho, que debe permanecer en el área segura para TV. A continuación se presentan algunas estrategias diferentes para conseguir las interacciones y los efectos visuales deseados.
Opción 1: Cambiar el color de fondo de CommandBar a transparente o al mismo color que el fondo de la página:
<CommandBar x:Name="topbar"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
...
</CommandBar>
De este modo, CommandBar parecerá estar sobre el mismo fondo que el resto de la página, de modo que el fondo fluya sin interrupciones hasta el borde de la pantalla.
Opción 2: Agregar un rectángulo de fondo cuyo relleno sea del mismo color que el fondo de CommandBar y hacer que se sitúe debajo de CommandBar y a lo largo del resto de la página:
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch">
...
</CommandBar>
Nota:
Si usa este método, tenga en cuenta que el botón Más cambia la altura de CommandBar abierta si es necesario, para mostrar las etiquetas de AppBarButton debajo de sus iconos. Para evitar este cambio de tamaño, le recomendamos que mueva las etiquetas a la derecha de sus iconos. Más información en Etiquetas de la barra de comandos.
Ambos enfoques también se aplican a los otros tipos de controles enumerados en esta sección.
Desplazamiento de los extremos de listas y cuadrículas
Es común que las listas y cuadrículas contengan más elementos de los que caben en pantalla al mismo tiempo. En estos casos, se recomienda extender la lista o cuadrícula hasta el borde de la pantalla. Las listas y cuadrículas que se desplazan horizontalmente deben llegar hasta el borde derecho, y las que se desplazan verticalmente, hasta el fondo.
Mientras una lista o cuadrícula se extiende de este modo, es importante mantener el visual de enfoque y su elemento asociado dentro del área segura para TV.
La UWP dispone de una función que mantendrá el elemento visual de foco dentro de los VisibleBounds, pero es necesario agregar relleno para garantizar que los elementos de la lista o la cuadrícula puedan desplazarse hasta la vista del área segura. En este caso, se agrega un margen positivo al ItemsPresenter del ListView o GridView, como en el siguiente fragmento de código:
<Style x:Key="TitleSafeListViewStyle"
TargetType="ListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer"
TabNavigation="{TemplateBinding TabNavigation}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter Header="{TemplateBinding Header}"
HeaderTemplate="{TemplateBinding HeaderTemplate}"
HeaderTransitions="{TemplateBinding HeaderTransitions}"
Footer="{TemplateBinding Footer}"
FooterTemplate="{TemplateBinding FooterTemplate}"
FooterTransitions="{TemplateBinding FooterTransitions}"
Padding="{TemplateBinding Padding}"
Margin="0,27,0,27"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
El fragmento de código anterior se coloca en la página o en los recursos de la aplicación y se accede a él de la siguiente manera:
<Page>
<Grid>
<ListView Style="{StaticResource TitleSafeListViewStyle}"
... />
Nota:
Este fragmento de código es específico paraListView; si desea un estilo GridView, establezca el atributo TargetType tanto en ControlTemplate como en Style en GridView.
Para un control más preciso sobre cómo se muestran los elementos, si la aplicación está orientada a la versión 1803 o posterior, puede utilizar el evento UIElement.BringIntoViewRequested. Puede ponerlo en el ItemsPanel para el ListView/GridView y capturarlo antes de que lo haga el ScrollViewer interno, como en los siguientes fragmentos de código:
<GridView x:Name="gridView">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"
BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
if (args.VerticalAlignmentRatio != 0.5) // Guard against our own request
{
args.Handled = true;
// Swallow this request and restart it with a request to center the item. We could instead have chosen
// to adjust the TargetRect's Y and Height values to add a specific amount of padding as it bubbles up,
// but if we just want to center it then this is easier.
// (Optional) Account for sticky headers if they exist
var headerOffset = 0.0;
var itemsWrapGrid = sender as ItemsWrapGrid;
if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
{
var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
if (header != null)
{
headerOffset = ((FrameworkElement)header).ActualHeight;
}
}
// Issue a new request
args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
{
AnimationDesired = true,
VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
});
}
}
Colores
De manera predeterminada, la Plataforma universal de Windows ajusta los colores de la aplicación a la gama segura para TV (más información en Colores seguros para TV) para que la aplicación se vea bien en cualquier TV. Además, hay mejoras que se pueden realizar en el conjunto de colores que usa la aplicación para mejorar la experiencia visual en la TV.
Tema de la aplicación
Puede elegir un tema de aplicación (oscuro o claro) de acuerdo con lo que sea adecuado para su aplicación, o puede optar por no usar temas. Más información sobre recomendaciones generales para temas en Temas de color.
La UWP también permite a las aplicaciones establecer de manera dinámica el tema en función de la configuración del sistema proporcionada por los dispositivos en los que se ejecutan. Aunque la UWP siempre respeta la configuración de tema especificada por el usuario, cada dispositivo también proporciona un tema predeterminado adecuado. Debido a la naturaleza de Xbox One, que se espera que tenga más experiencias multimedia que experiencias de productividad, tiene predeterminado un tema de sistema oscuro. Si el tema de la aplicación se basa en la configuración del sistema, es de esperar que sea oscuro de manera predeterminada en Xbox One.
Color de énfasis
La UWP proporciona una manera conveniente de exponer el color de énfasis que el usuario ha seleccionado en la configuración del sistema.
En Xbox One, el usuario puede seleccionar un color de usuario, al igual que puede seleccionar un color de énfasis en un PC. Mientras la aplicación llame a estos colores de énfasis a través de pinceles o recursos de color, se usará el color que el usuario seleccionó en la configuración del sistema. Tenga en cuenta que los colores de énfasis en Xbox One son por usuario, no por sistema.
Además, hay que tener en cuenta que el conjunto de colores de usuario en Xbox One no es el mismo que en PC, teléfonos y otros dispositivos.
Siempre que la aplicación utilice un recurso de pincel como SystemControlForegroundAccentBrush, o un recurso de color (SystemAccentColor), o en su lugar llame a los colores de acento directamente a través de la API UIColorType.Accent*, esos colores se reemplazan por los colores de énfasis disponibles en Xbox One. Los colores de pincel de contraste alto también se obtienen del sistema del mismo modo que en un PC y un teléfono.
Para más información sobre el color de énfasis en general, consulte Color de énfasis.
Variación de color entre televisores
Cuando diseñe para TV, tenga en cuenta que los colores se muestran de forma muy diferente según el televisor en el que se reproduzcan. No asuma que los colores se verán exactamente igual que en su monitor. Si la aplicación se basa en sutiles diferencias de color para diferenciar partes de la UI, los colores podrían mezclarse y confundir a los usuarios. Intenta usar colores que sean lo suficientemente diferentes como para que los usuarios puedan diferenciarlos claramente, independientemente de la TV que usen.
Colores seguros para TV
Los valores RGB de un color representan las intensidades del rojo, el verde y el azul. Las TV no manejan muy bien las intensidades extremas, ya que pueden producir un extraño efecto de bandas o aparecer desteñidas en algunas TV. Además, los colores de alta intensidad pueden provocar un efecto "blooming" (los píxeles cercanos empiezan a dibujar los mismos colores). Aunque hay diferentes escuelas de pensamiento sobre lo que se consideran colores seguros para TV, los colores dentro de los valores RGB de 16-235 (o 10-EB en hexadecimal) son generalmente seguros para TV.
Históricamente, las aplicaciones de Xbox tenían que adaptar sus colores para que estuvieran dentro de este rango de colores "seguros para TV"; sin embargo, a partir de Fall Creators Update, Xbox One escala automáticamente el contenido del rango completo al rango seguro para TV. Esto significa que la mayoría de los desarrolladores de aplicaciones ya no tienen que preocuparse por los colores seguros para la TV.
Importante
El contenido de video que ya está en el rango de colores seguros para TV no tiene este efecto de escala de color aplicado cuando se reproduce con Media Foundation.
Si desarrolla una aplicación con DirectX 11 o DirectX 12 y crea su propia cadena de intercambio para renderizar la interfaz de usuario o el vídeo, puede especificar el espacio de color que usa llamando a IDXGISwapChain3::SetColorSpace1, que permitirá al sistema saber si necesita escalar los colores o no.
Directrices para los controles de UI
Hay varios controles de UI que funcionan bien en varios dispositivos, pero que deben tenerse en cuenta cuando se usan en la TV. Consulte algunos procedimientos recomendados para el uso de estos controles en el diseño para la experiencia en pantalla de TV.
Panel de navegación
Un panel de navegación (también conocido como menú hamburguesa) es un control de navegación comúnmente usado en aplicaciones para UWP. Normalmente es un panel con varias opciones para elegir en un menú tipo lista que llevará al usuario a diferentes páginas. Por lo general, este panel comienza colapsado para ahorrar espacio, y el usuario puede abrirlo haciendo clic en un botón.
Aunque los paneles de navegación son muy accesibles con el ratón y de forma táctil, con el gamepad o el control remoto son menos accesibles, ya que el usuario tiene que desplazarse hasta un botón para abrir el panel. Por lo tanto, un procedimiento recomendado es hacer que el botón Ver abra el panel de navegación, así como permitir que el usuario lo abra navegando hacia la izquierda de la página. Se puede encontrar un ejemplo de código sobre cómo implementar este modelo de diseño en el documento Navegación de enfoque mediante programación. Esto proporcionará al usuario un acceso muy fácil a los contenidos del panel. Para más información sobre cómo se comportan los paneles de navegación en diferentes tamaños de pantalla, así como los procedimientos recomendados para la navegación con gamepad o control remoto, consulte Paneles de navegación.
Etiquetas de la barra de comandos
Se recomienda colocar las etiquetas a la derecha de los iconos de la CommandBar para minimizar su altura y mantener la coherencia. Para ello, establezca la propiedad CommandBar.DefaultLabelPosition al valor CommandBarDefaultLabelPosition.Right.
Al establecer esta propiedad también se mostrarán siempre las etiquetas, lo que funciona bien para la experiencia en pantalla de TV porque minimiza el número de clics para el usuario. Este es también un gran modelo a seguir para otros tipos de dispositivos.
Información sobre herramientas
El control de información sobre herramientas se introdujo como una forma de proporcionar más información en la UI cuando el usuario pasa el mouse por encima, o toca y sostiene su figura, sobre un elemento. Para el gamepad y el control remoto, Tooltip aparece tras un breve momento en el que el elemento recibe el énfasis, permanece en pantalla durante un breve espacio de tiempo y luego desaparece. Este comportamiento puede distraer si se usan demasiados Tooltip. Intente evitar el uso de Tooltip cuando diseñe para TV.
Estilos de botón
Aunque los botones estándar de UWP funcionan bien en TV, algunos estilos visuales de botones llaman mejor la atención sobre la UI, por lo que puede que quieras tenerlos en cuenta para todas las plataformas, sobre todo en la experiencia en pantalla de TV, que se beneficia de comunicar claramente dónde se encuentra el enfoque. Para saber más sobre estos estilos, consulte Botones.
Elementos de UI anidados
La UI anidada expone elementos accionables anidados encerrados dentro de un elemento de UI contenedor en el que tanto el elemento anidado como el elemento contenedor pueden tener un enfoque independiente el uno del otro.
La UI anidada funciona bien para algunos tipos de entrada, pero no siempre para el gamepad y el control remoto, que se basan en la navegación XY. Asegúrese de seguir las indicaciones de este tema para garantizar que la UI está optimizada para el entorno de pantalla de TV y que el usuario puede acceder fácilmente a todos los elementos interactuables. Una solución común es colocar elementos de UI anidados en un ContextFlyout.
Para más información sobre la UI anidada, consulte UI anidada en elementos de lista.
MediaTransportControls
El elemento MediaTransportControls permite a los usuarios interactuar con sus archivos multimedia al proporcionar una experiencia de reproducción predeterminada que les permite reproducir, pausar, activar los subtítulos y mucho más. Este control es una propiedad de MediaPlayerElement y admite dos opciones de diseño: una fila y dos filas. En el diseño de una fila, el control deslizante y los botones de reproducción se encuentran en una fila, con el botón de reproducción/pausa situado a la izquierda del control deslizante. En el diseño de doble fila, el control deslizante ocupa su propia fila, con los botones de reproducción en una fila inferior separada. Cuando se diseña para la experiencia en pantalla de TV, debe usarse la disposición de doble fila, ya que proporciona una mejor navegación para el gamepad. Para activar el diseño de doble fila, establezca IsCompact="False" en el elemento MediaTransportControls en la propiedad TransportControls del MediaPlayerElement.
<MediaPlayerElement x:Name="mediaPlayerElement1"
Source="Assets/video.mp4"
AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls IsCompact="False"/>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
Consulte Reproducción multimedia para más información sobre cómo agregar contenido multimedia a su aplicación.
Nota:
La característica MediaPlayerElement solo está disponible en Windows 10, versión 1607 y posteriores. Si desarrolla una aplicación para una versión anterior de Windows 10, deberá usar MediaElement en su lugar. Las recomendaciones anteriores también se aplican a MediaElement, y la propiedad TransportControls se accede de la misma manera.
Experiencia de búsqueda
La búsqueda de contenido es una de las funciones que más se realizan en la experiencia en pantalla de TV. Si la aplicación ofrece una experiencia de búsqueda, es útil que el usuario tenga un acceso rápido a ella con el botón Y del gamepad como acelerador.
La mayoría de los clientes ya deberían estar familiarizados con este acelerador, pero si lo desea puede agregar un glifo visual Y a la interfaz de usuario para indicar que el cliente puede utilizar el botón para acceder a la funcionalidad de búsqueda. Si agrega esta señal, asegúrese de usar el símbolo del tipo de letra Segoe Xbox MDL2 Symbol ( para aplicaciones XAML, \E426 para aplicaciones HTML) para proporcionar coherencia con el shell de Xbox y otras aplicaciones.
Nota:
Ya que el tipo de letra Segoe Xbox MDL2 Symbol solo está disponible en Xbox, el símbolo no aparecerá correctamente en su PC. Sin embargo, aparecerá en la TV una vez que se instale en Xbox.
Como el botón Y solo está disponible en el gamepad, asegúrese de proporcionar otros métodos de acceso a la búsqueda, como botones en la UI. De lo contrario, es posible que algunos clientes no puedan acceder a la funcionalidad.
En la experiencia en pantalla de TV, con frecuencia es más fácil que los clientes usen una experiencia de búsqueda en pantalla completa porque hay poco espacio en la pantalla. Tanto si la búsqueda se realiza en pantalla completa como en pantalla parcial, se recomienda que, cuando el usuario abra la experiencia de búsqueda, el teclado en pantalla aparezca ya abierto, listo para que el cliente introduzca los términos de búsqueda.
Desencadenador de estado visual personalizado para Xbox
Si quiere personalizar su aplicación para UWP para la experiencia en pantalla de TV, le recomendamos realizar cambios en el diseño cuando la aplicación detecte que se ejecuta en una consola Xbox. Una forma de hacerlo es usar un desencadenador de estado visual personalizado. Los desencadenadores de estado visuales son más útiles cuando se desea editar en Blend para Visual Studio. El siguiente fragmento de código muestra cómo crear un desencadenador de estado visual para Xbox:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RootSplitView.OpenPaneLength"
Value="368"/>
<Setter Target="RootSplitView.CompactPaneLength"
Value="96"/>
<Setter Target="NavMenuList.Margin"
Value="0,75,0,27"/>
<Setter Target="Frame.Margin"
Value="0,27,48,27"/>
<Setter Target="NavMenuList.ItemContainerStyle"
Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Para crear el desencadenador, agregue la siguiente clase a su aplicación. Esta es la clase a la que hace referencia el código XAML anterior:
class DeviceFamilyTrigger : StateTriggerBase
{
private string _currentDeviceFamily, _queriedDeviceFamily;
public string DeviceFamily
{
get
{
return _queriedDeviceFamily;
}
set
{
_queriedDeviceFamily = value;
_currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
SetActive(_queriedDeviceFamily == _currentDeviceFamily);
}
}
}
Una vez que agregue su desencadenador personalizado, su aplicación realizará automáticamente las modificaciones de diseño que haya especificado en su código XAML siempre que detecte que se está ejecutando en una consola Xbox One.
Otra forma de comprobar si la aplicación se está ejecutando en Xbox y realizar los ajustes necesarios es mediante código. Puedes usar la siguiente variable simple para comprobar si tu aplicación se está ejecutando en Xbox:
bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
"Windows.Xbox");
A continuación, puede realizar los ajustes necesarios en la UI en el bloque de código que sigue a esta comprobación.
Resumen
Diseñar para la experiencia en pantalla de TV tiene consideraciones especiales que hay que tener en cuenta y que lo hacen diferente de diseñar para cualquier otra plataforma. Aunque sin duda puede hacer una adaptación directa de la aplicación para UWP a Xbox One y funcionará, no estará necesariamente optimizada para la experiencia en pantalla de TV y puede ocasionar cierta frustración en el usuario. Si sigue las instrucciones de este artículo, se asegurará de que su aplicación sea lo mejor posible en la TV.
