針對 Xbox 和電視進行設計

設計您的 Windows 應用程式,使其在 Xbox One 和電視螢幕上看起來良好且功能良好。

如需 10 英呎體驗中 UWP 應用程式中互動體驗的指引,請參閱遊戲板和遠端控制互動

概觀

通用 Windows 平台 可讓您跨多個 Windows 裝置建立令人愉快的體驗。 UWP 架構所提供的大部分功能可讓應用程式跨這些裝置使用相同的使用者介面(UI),而不需要額外的工作。 不過,量身打造和優化您的應用程式以在 Xbox One 和電視螢幕上運作的絕佳功能需要特殊考慮。

坐在房間一端的沙發上,使用遊戲台或遙控器與電視互動的體驗,稱為「10 英呎體驗」。 這個名稱的由來是因為使用者通常坐在離螢幕大約 10 英呎遠的位置。 這是一個獨特的挑戰,因為我們不會稱與電腦互動是 2 英呎體驗。 如果您要開發適用於 Xbox One 的應用程式或任何其他裝置,這些裝置會輸出到電視畫面並使用控制器進行輸入,您應該一律記住這一點。

本文中的所有步驟都不是為了讓您的應用程式在 10 英呎體驗方面運作良好,但了解這些步驟,併為您的應用程式做出適當的決策,將會產生更適合您 app 特定需求的 10 英呎體驗。 當您將應用程式帶入 10 英呎的環境中時,請考慮下列設計原則。

簡單

為 10 英呎環境設計提供了一組獨特的挑戰。 解析度和檢視距離會使人們難以處理太多資訊。 請嘗試讓您的設計保持乾淨,減少到最簡單的元件。 電視上顯示的資訊量應該與您在行動電話上看到的資訊量相提並論,而不是在桌面上顯示的資訊。

Xbox One home screen

相幹

10 英呎環境中的 UWP 應用程式應該直覺且容易使用。 讓焦點清晰明瞭, 清晰明瞭。 排列內容,讓整個空間的移動一致且可預測。 給人們最短的路徑,讓他們想做什麼。

Xbox One Movies app

螢幕快照中顯示的所有影片都可在 Microsoft Movies 和 TV 上使用。

迷人

最身臨其境的電影體驗發生在大銀幕上。 邊緣到邊緣的風景,優雅的動作,和充滿活力的使用色彩和印刷樣式,讓您的應用程式達到下一個水準。 大膽而美麗。

Xbox One Avatar app

10 英呎體驗的優化

既然您已瞭解 10 英呎體驗良好 UWP 應用程式設計的原則,請閱讀下列概觀,瞭解您可以優化應用程式的特定方式,並取得絕佳的用戶體驗。

功能 描述
UI 元素重設大小 通用 Windows 平台 會使用縮放比例和有效圖元,根據檢視距離來縮放UI。 瞭解重設大小,並將其套用到您的UI,有助於優化10英呎環境的應用程式。
電視安全區域 根據預設,UWP 會自動避免在電視不安全區域中顯示任何UI(靠近螢幕邊緣的區域)。 不過,這會建立一個「Boxed-in」效果,其中 UI 看起來是信箱。 讓您的 app 在電視上真正沉浸式,您會想要修改它,使其延伸到支援電視的螢幕邊緣。
色彩 UWP 支援色彩主題,而尊重系統主題的應用程式預設為 Xbox One 上的深色 。 如果您的 app 有特定的色彩主題,您應該考慮某些色彩不適用於電視,並應避免使用。
音效 音效在 10 英呎體驗中扮演重要角色,有助於讓使用者沉浸並給予意見反應。 UWP 提供功能,可在 App 在 Xbox One 上執行時,自動開啟常見控件的音效。 深入瞭解UWP內建的聲音支援,並瞭解如何利用它。
UI 控件的指導方針 有多個UI控制件可在多個裝置上正常運作,但在電視上使用時有某些考慮。 閱讀設計 10 英呎體驗時使用這些控件的一些最佳做法。
Xbox 的自定義視覺狀態觸發程式 若要針對 10 英呎體驗量身打造您的 UWP app,建議您在 App 偵測到已在 Xbox 主機上啟動時,使用自定義 視覺狀態觸發程式 進行版面配置變更。

除了上述設計和版面配置考慮之外,建置應用程式時,您還可以考慮一些 遊戲板和遠端控制互動 優化。

功能 描述
XY 焦點瀏覽和互動 XY 焦點瀏覽 可讓使用者瀏覽應用程式 UI。 不過,這會限制使用者向上、向下、向左和向右流覽。 本節概述處理此事項和其他考慮的 建議。
滑鼠模式 對於某些類型的應用程式,XY 焦點流覽並不實用,甚至可能,例如地圖或繪圖和繪製應用程式。 在這些情況下, 滑鼠模式 可讓使用者使用遊戲板或遙控器自由流覽,就像電腦上的滑鼠一樣。
焦點視覺效果 焦點視覺效果是醒目提示目前焦點 UI 元素的框線。 這有助於使用者快速識別他們正在流覽或與其互動的UI。
焦點參與 焦點參與需要用戶在遊戲板或遙控器上按下 A/Select 按鈕,UI 元素有焦點才能與其互動。
硬體按鈕 遊戲板和遙控器提供非常不同的按鈕和組態。

注意

本主題中的大部分代碼段都位於 XAML/C# 中;不過,原則和概念適用於所有UWP應用程式。 如果您要開發適用於 Xbox 的 HTML/JavaScript UWP 應用程式,請查看 GitHub 上的優秀 TVHelpers 連結庫。

UI 元素重設大小

由於 10 英呎環境中的應用程式使用者使用遙控器或遊戲板,且距離螢幕幾英尺遠,因此需要將一些 UI 考慮納入您的設計。 請確定UI具有適當的內容密度,而且不太雜亂,讓使用者可以輕鬆地瀏覽和選取元素。 請記住:簡單性是關鍵。

縮放比例和調適型配置

縮放比例 有助於確保 UI 元素針對應用程式執行所在的裝置,以正確的大小顯示。 在桌面電腦上,您可以在 設定 > [系統>顯示] 中找到此設定做為滑動值。 如果裝置支援該設定,也會存在於手機上。

Change the size of text, apps, and other items

在 Xbox One 上,沒有這類系統設定;不過,若要針對電視適當調整 UWP UI 元素的大小,則 XAML 應用程式的預設縮放比例為 200%,而 HTML 應用程式則為 150%。 只要UI元素針對其他裝置適當地調整大小,它們就會針對電視適當地調整大小。 Xbox One 會以 1080p 轉譯您的應用程式(1920 x 1080 像素)。 因此,從計算機等其他裝置引進應用程式時,請確定 UI 在 100% 縮放比例為 960 x 540 像素時看起來很棒(或 1280 x 720 像素,以 100% 縮放的 HTML 應用程式)使用 調適型技術

針對 Xbox 設計與設計電腦有點不同,因為您只需要擔心一個解析度 1920 x 1080。 使用者是否有較佳解析度的電視並不重要—UWP 應用程式一律會調整為 1080p。

不論電視解析度為何,在 Xbox One 上執行時,也會針對您的應用程式提取 200% (或 150% 或 150% 的 HTML 應用程式)中正確的資產大小。

內容密度

設計應用程式時,請記住,使用者會從遠處檢視 UI,並使用遠端或遊戲控制器與其互動,這需要比使用滑鼠或觸控輸入更多的時間來流覽。

UI 控制件的大小

互動式 UI 元素的大小應至少為 32 epx(有效圖元)。 這是一般 UWP 控件的預設值,且在 200% 縮放時,可確保從遠處可見 UI 元素,並協助減少內容密度。

UWP button at 100% and 200% scale

點擊次數

當使用者從電視畫面的一個邊緣流覽到另一個邊緣時,應該不需要超過 六次點擊 即可簡化您的UI。 同樣地,此處適用簡單性的原則

6 icons across

文字大小

若要讓您的 UI 從遠處可見,請使用下列經驗規則:

  • 主文字和閱讀內容:最小 15 epx
  • 非重要文字和補充內容:最小 12 epx

在UI中使用較大的文字時,挑選大小不會限制螢幕房地產太多,佔用其他內容可能填滿的空間。

退出退出縮放比例

我們建議您的應用程式利用縮放比例支援,藉由針對每個裝置類型進行調整,以協助其在所有裝置上適當地執行。 不過,您可以退出宣告此行為,並以 100% 的縮放比例設計所有 UI。 請注意,您無法將縮放比例變更為 100% 以外的任何專案。

針對 XAML 應用程式,您可以使用下列代碼段選擇退出縮放比例:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result 將會通知您是否成功退出。

如需詳細資訊,包括 HTML/JavaScript 的範例程式代碼,請參閱 如何關閉縮放比例。

請務必將本主題中提及的有效圖元值加倍實際圖元值,以計算適當的UI元素大小(或為HTML應用程式乘以1.5)。

電視安全區域

並非所有電視都因為歷史和技術原因而一路顯示內容到螢幕邊緣。 根據預設,UWP 會避免在電視不安全區域中顯示任何 UI 內容,而只會繪製頁面背景。

電視不安全區域會以下圖中的藍色區域表示。

TV-unsafe area

您可以將背景設定為靜態或主題色彩,或設定為影像,如下列代碼段所示。

主題顏色

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

映像

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

您的應用程式看起來會像這樣,而不需要額外的工作。

TV-safe area

這不是最佳的,因為它為應用程式提供「Boxed-in」效果,UI 的部分如瀏覽窗格和網格線似乎被切斷。 不過,您可以進行優化,將 UI 的部分延伸至螢幕邊緣,讓應用程式更具電影效果。

將UI繪製至邊緣

我們建議您使用特定UI元素來延伸至畫面邊緣,為使用者提供更沉浸的身分。 其中包括 ScrollViewers瀏覽窗格CommandBars

另一方面,互動式元素和文字也請務必避免屏幕邊緣,以確保不會在一些電視上截斷它們。 我們建議您在螢幕邊緣的 5% 內只繪製非必要的視覺效果。 如 UI 元素重設大小中所述,Xbox One 控制台預設縮放比例為 200% 的 UWP 應用程式會利用 960 x 540 epx 的區域,因此在 app 的 UI 中,您應該避免將基本 UI 放在下列區域:

  • 27 epx 從頂端和底部
  • 48 epx 從左右兩側

下列各節說明如何讓您的UI延伸至螢幕邊緣。

核心視窗界限

針對僅以 10 英呎體驗為目標的 UWP 應用程式,使用核心視窗界限是一個更直接的選項。

OnLaunchedApp.xaml.cs方法中,新增下列程序代碼:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

使用這一行程式代碼,應用程式視窗會延伸至螢幕邊緣,因此您必須將所有互動式和基本 UI 移至稍早所述的電視安全區域。 暫時性UI,例如操作功能表和開啟的 ComboBoxes,會自動保留在電視安全區域內。

Core window bounds

窗格背景

瀏覽窗格通常會繪製在螢幕邊緣附近,因此背景應該延伸到電視不安全的區域,以免造成尷尬的間距。 只要將瀏覽窗格背景的色彩變更為應用程式背景的色彩,即可執行此動作。

如先前所述,使用核心視窗界限可讓您將UI繪製到螢幕邊緣,但您應該接著在SplitView的內容上使用正邊界,將它保留在電視安全區域內。

Nav pane extended to edges of screen

在這裡,瀏覽窗格的背景已延伸至螢幕邊緣,而其瀏覽專案則保留在電視安全區域中。 SplitView 的內容(在此案例中,專案網格線)已延伸至螢幕底部,使其看起來像它繼續,而且不會被切斷,而網格線的頂端仍位於電視安全區域內。 (深入瞭解如何在 捲動清單和方格的結尾。

下列代碼段可達成此效果:

<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 是一個窗格的另一個範例,通常位於應用程式一或多個邊緣附近,因此在電視上,其背景應該延伸至屏幕邊緣。 它通常也包含 [更多] 按鈕,以 “...” 代表在右側,它應該留在電視安全區域。 以下是幾個不同的策略,可達成所需的互動和視覺效果。

選項 1:將 CommandBar 背景色彩變更為透明或與頁面背景相同的色彩:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

這樣做會使 CommandBar 它看起來像是位於與頁面其餘部分相同的背景之上,因此背景會順暢地流向畫面邊緣。

選項 2:新增填滿與 CommandBar 背景相同色彩的背景矩形,並將它放在頁面其餘部分的 和 下方 CommandBar

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

注意

如果使用此方法,請注意 ,[更多 ] 按鈕會視需要變更開啟 CommandBar 的高度,以便顯示其圖示下方的標籤 AppBarButton。 建議您將標籤 移至其圖示右邊 ,以避免重設大小。 如需詳細資訊,請參閱 CommandBar 標籤

這兩種方法也適用於本節所列的其他類型的控件。

捲動清單和方格的結尾

清單和網格線通常會包含比同時在螢幕上容納更多的專案。 在此情況下,建議您將清單或方格延伸至畫面邊緣。 水平卷動清單和網格線應該延伸到右邊緣,垂直捲動清單和網格線應該延伸到底部。

TV safe area grid cutoff

雖然清單或網格線會像這樣擴充,但請務必將焦點視覺效果及其相關聯的專案保留在電視安全區域內。

Scrolling grid focus should be kept in TV-safe area

UWP 的功能會將焦點視覺效果保留在 VisibleBounds,但您需要新增邊框間距,以確保清單/網格線專案可以捲動到安全區域的檢視中。 具體而言,您會將正邊界新增至 ListViewGridViewItemsPresenter,如下列代碼段所示:

<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>

您會將先前的代碼段放在頁面或應用程式資源中,然後以下列方式加以存取:

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

注意

此代碼段特別適用於 s;若為ListView樣式,請將 ControlTemplateStyle 的 TargetType 屬性設定GridViewGridView

如需更精細地控制專案進入檢視的方式,如果您的應用程式以 1803 版或更新版本為目標,您可以使用 UIElement.BringIntoViewRequested 事件。 您可以將它放在 ListView/GridViewItemsPanel 上,以在內部 ScrollViewer 之前攔截它,如下列代碼段所示:

<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
        });
    }
}

顏色

根據預設,通用 Windows 平台 會將應用程式的色彩調整為電視安全範圍(如需詳細資訊,請參閱電視安全色彩),讓您的 app 在任何電視上看起來都不錯。 此外,您可以改善應用程式用來改善電視視覺體驗的一組色彩。

應用程式佈景主題

您可以選擇 應用程式主題 (深色或淺色),根據應用程式適合的內容,或者您可以退出宣告主題。 在色彩主題中深入瞭解主題的一般建議。

UWP 也允許 app 根據執行裝置所提供的系統設定,動態設定主題。 雖然 UWP 一律遵守使用者指定的主題設定,但每個裝置也會提供適當的預設主題。 由於 Xbox One 的本質預期比生產力體驗更多的媒體體驗,因此預設為深色系統主題。 如果您的 app 主題是以系統設定為基礎,則預期它會預設為 Xbox One 上的深色。

輔色

UWP 提供方便的方式,以公開 使用者從系統設定中選取的輔色

在 Xbox One 上,用戶可以選取使用者色彩,就像他們可以選取電腦上的輔色一樣。 只要您的應用程式透過筆刷或色彩資源呼叫這些輔色,就會使用系統設定中選取的使用者色彩。 請注意,Xbox One 上的輔色是每個使用者,而不是每個系統。

另請注意,Xbox One 上的一組使用者色彩與計算機、手機和其他裝置上的色彩不同。

只要您的應用程式使用筆刷資源,例如 SystemControlForegroundAccentBrush 或色彩資源(SystemAccentColor),或改為直接透過 UIColorType.Accent* API 呼叫輔色,這些色彩就會取代為 Xbox One 上可用的輔色。 高對比度筆刷色彩也會從系統提取,就像在計算機和手機上一樣。

若要深入瞭解一般輔色,請參閱 輔色

電視之間的色彩差異

設計電視時,請注意,色彩會根據轉譯的電視顯示方式大不相同。 不要假設色彩看起來會和監視器上一樣。 如果您的 app 依賴色彩的細微差異來區分 UI 的部分,色彩可能會混合在一起,而使用者可能會感到困惑。 嘗試使用足夠不同的色彩,無論使用者使用的電視為何,使用者都能清楚區分它們。

電視安全色彩

色彩的 RGB 值代表紅色、綠色和藍色的強度。 電視處理得非常好,它們可能會產生奇怪的帶狀效果,或在某些電視上被衝掉。 此外,高強度色彩可能會導致開花(附近的圖元開始繪製相同的色彩)。 雖然在被視為電視安全色彩的不同思想派別中,但 RGB 值內 16-235(或十六進位為 10-EB)的色彩通常安全用於電視。

TV-safe color range

從歷史上看,Xbox 上的應用程式必須量身打造其色彩,以落在這個「電視安全」色彩範圍內:不過,從 Fall Creators Update 開始,Xbox One 會自動將完整範圍內容調整為電視安全範圍。 這表示大多數應用程式開發人員不再需要擔心電視安全色彩。

重要

在電視安全色彩範圍內已經播放的視訊內容在使用媒體基礎播放時,不會套用此色彩縮放效果。

如果您要使用 DirectX 11 或 DirectX 12 開發應用程式,並建立自己的交換鏈結來轉譯 UI 或視訊,您可以呼叫 IDXGISwapChain3::SetColorSpace1 來指定所使用的色彩空間,這會讓系統知道是否需要調整色彩。

UI 控件的指導方針

有多個UI控制件可在多個裝置上正常運作,但在電視上使用時有某些考慮。 閱讀設計 10 英呎體驗時使用這些控件的一些最佳做法。

瀏覽窗格(也稱為 漢堡功能表)是UWP app 中常用的流覽控件。 一般而言,它是一個具有數個選項的窗格,可從清單樣式功能表中選擇,將使用者帶到不同的頁面。 一般而言,此窗格會開始折疊以節省空間,而使用者可以按下按鈕加以開啟。

雖然瀏覽窗格可透過滑鼠和觸控進行存取,但遊戲板/遠端可讓使用者更容易存取,因為使用者必須流覽至按鈕以開啟窗格。 因此,最佳做法是讓 [ 檢視 ] 按鈕開啟瀏覽窗格,以及讓使用者透過瀏覽頁面左側的一路來開啟它。 如需如何實作此設計模式的程式代碼範例,請參閱 程式設計焦點瀏覽 檔。 這可讓用戶輕鬆存取窗格的內容。 如需瀏覽窗格在不同螢幕大小以及遊戲板/遠端流覽的最佳做法的詳細資訊,請參閱 瀏覽窗格

CommandBar 標籤

最好讓標籤放在 CommandBar 上的圖示右邊,使其高度最小化並保持一致。 若要這樣做,您可以將 CommandBar.DefaultLabelPosition 屬性設定CommandBarDefaultLabelPosition.Right

CommandBar with labels to the right of icons

設定此屬性也會導致一律顯示標籤,這適用於10英呎體驗,因為它可將用戶的點選次數降到最低。 這也是其他裝置類型要遵循的絕佳模型。

工具提示

工具 提示 控件是使用者將滑鼠停留在元素上或點選並按住其圖形時,在UI中提供更多資訊的方法。 對於遊戲板和遠端, Tooltip 會出現在元素取得焦點的短暫時刻后,停留在螢幕上短暫的時間,然後消失。 如果使用太多 Tooltip,此行為可能會分散注意力。 試著避免在設計電視時使用 Tooltip

按鈕樣式

雖然標準 UWP 按鈕在電視上運作良好,但某些按鈕的視覺樣式會更吸引人們注意 UI,您可能會想要考慮所有平臺,特別是在 10 英呎體驗中,這受益於清楚傳達焦點所在位置。 若要深入瞭解這些樣式,請參閱 按鈕

巢狀 UI 元素

巢狀 UI 會公開巢狀可採取動作的專案,這些專案包含在容器 UI 元素內,其中巢狀專案和容器專案可以彼此取得獨立焦點。

巢狀 UI 適用於某些輸入類型,但不一定適用於依賴 XY 瀏覽的遊戲板和遠端。 請務必遵循本主題中的指引,以確保您的UI已針對10英呎環境優化,而且使用者可以輕鬆地存取所有可互動的元素。 其中一個常見解決方案是在 中 ContextFlyout放置巢狀UI元素。

如需巢狀 UI 的詳細資訊,請參閱 清單專案中的巢狀 UI。

MediaTransportControls

MediaTransportControls 元素可讓使用者透過提供預設播放體驗來與媒體互動,讓用戶能夠播放、暫停、開啟關閉的 標題 等等。 此控件是 MediaPlayerElement 的屬性,並支援兩個版面配置選項:單列雙列。 在單一數據列配置中,滑桿和播放按鈕全都位於一個數據列中,且位於滑桿左邊的播放/暫停按鈕。 在雙列配置中,滑桿會佔用自己的數據列,並在另一個較低的數據列上播放按鈕。 設計 10 英呎體驗時,應該使用雙列版面配置,因為它為遊戲板提供更好的流覽。 若要開啟雙列配置,請在 的 TransportControls 屬性MediaPlayerElement設定 IsCompact="False"MediaTransportControls

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

請瀏覽 媒體播放 以深入瞭解如何將媒體新增至您的應用程式。

注意

MediaPlayerElement 僅適用於 Windows 10 版本 1607 和更新版本。 如果您要開發舊版 Windows 10 的應用程式,您必須改用 MediaElement 。 上述 MediaElement 建議也適用於 ,而且 TransportControls 屬性會以相同方式存取。

搜尋體驗

搜尋內容是 10 英呎體驗中最常執行的函式之一。 如果您的應用程式提供搜尋體驗,用戶可以使用遊戲板上的 Y 按鈕做為快速鍵,來快速存取它

大部分的客戶都應該已經熟悉此加速器,但如果您想要將視覺效果 Y 圖像新增至 UI,表示客戶可以使用按鈕來存取搜尋功能。 如果您新增此提示,請務必使用 Segoe Xbox MDL2 符號字型中的符號&#xE3CC;適用於 XAML 應用程式,\E426適用於 HTML 應用程式),以提供與 Xbox 殼層和其他應用程式的一致性。

注意

因為 Segoe Xbox MDL2 符號字型只能在 Xbox 上使用,因此您的電腦上不會正確顯示符號。 不過,一旦您部署至 Xbox,它就會顯示在電視上。

由於 Y 按鈕只能在遊戲板上使用,因此請務必提供其他方法來搜尋,例如 UI 中的按鈕。 否則,某些客戶可能無法存取此功能。

在 10 英呎體驗中,客戶通常更容易使用全螢幕搜尋體驗,因為顯示器的空間有限。 不論您有全螢幕還是部分畫面「就地」搜尋,我們建議您在用戶開啟搜尋體驗時,螢幕上的鍵盤已開啟,可供客戶輸入搜尋字詞。

Xbox 的自定義視覺狀態觸發程式

若要針對 10 英呎體驗量身打造您的 UWP app,建議您在 App 偵測到 App 已在 Xbox 主機上啟動時進行版面配置變更。 其中一種方法是使用自定義 視覺狀態觸發程式。 當您想要在 Blend for Visual Studio編輯時,視覺狀態觸發程式最有用。 下列代碼段示範如何建立 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>

若要建立觸發程式,請將下列類別新增至您的應用程式。 這是上述 XAML 程式代碼所參考的類別:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

新增自定義觸發程序之後,每當 App 偵測到它正在 Xbox One 主機上執行時,就會自動修改您在 XAML 程式代碼中指定的版面配置。

另一種方式,您可以檢查您的應用程式是否在 Xbox 上執行,然後進行適當的調整是透過程式代碼。 您可以使用下列簡單變數來檢查您的應用程式是否在 Xbox 上執行:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

然後,您可以在此檢查之後,對程式代碼區塊中的UI進行適當的調整。

摘要

設計 10 英呎體驗有特殊考慮,使其與針對任何其他平台的設計不同。 雖然您當然可以將 UWP 應用程式的直接埠移植到 Xbox One,但它將會運作,但不一定會針對 10 英呎的體驗進行優化,而且可能會導致用戶沮喪。 遵循本文中的指導方針,可確保您的應用程式和電視上一樣好。