針對 Xbox 和電視進行設計

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

請參閱遊戲手把和遠端控制互動，以取得有關 10 英尺體驗中 UWP 應用程式互動體驗的指南。

概觀

通用 Windows 平台可讓您跨多個 Windows 裝置建立令人愉快的體驗。 UWP 框架提供的大部分功能使應用程式能夠在這些裝置上使用相同的使用者介面 (UI)，而無需進行額外的工作。 然而，如果要客製化和最佳化您的應用程式以使其在 Xbox One 和電視螢幕上正常運作，則需要特殊考慮。

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

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

簡單

10 英尺環境的設計面臨了一系列獨特的挑戰。 解析度和觀看距離會使人們難以處理太多資訊。 請嘗試讓您的設計保持乾淨，減少到最簡單的元件。 電視上顯示的資訊量應該與您在手機上看到的資訊量相當，而不是在桌面上看到的資訊量。

相干

10 英尺環境中的 UWP 應用應該直觀且易於使用。 使焦點清晰明確。 安排內容，使整個空間的移動保持一致且可預測。 提供最短路徑，實現人們想做的事情。

螢幕擷取畫面中顯示的所有影片均可在 Microsoft Movies & TV 上觀看。

引人入勝

最身臨其境的電影體驗發生在大螢幕上。 無邊無際的風景、優雅的動作以及色彩和版式的生動運用，讓您的應用程式更上一層樓。 大膽而美麗。

10 英呎體驗的最佳化

現在您已經了解了針對 10 英尺體驗的良好 UWP 應用程式設計原則，請通讀以下概述，了解可最佳化應用程式並打造出色使用者體驗的具體方法。

功能	描述
UI 元素調整大小	通用 Windows 平台會使用縮放和有效像素，根據檢視距離來縮放 UI。 了解大小調整並將其應用到您的 UI，將有助於針對 10 英尺環境最佳化您的應用程式。
電視安全區域	預設情況下，UWP 將自動避免在電視不安全區域 (靠近螢幕邊緣的區域) 顯示任何 UI。 不過，這會建立一個「Boxed-in」效果，其中 UI 看起來是信箱。 為了讓您的應用程式在電視上真正具有身臨其境的效果，您需要對其進行修改，使其延伸到支援它的電視螢幕的邊緣。
色彩	UWP 支援色彩主題，而尊重系統主題的應用程式預設為 Xbox One 上的深色 。 如果您的應用程式具有特定的顏色主題，您應該考慮到某些顏色不適用於電視，應避免使用。
音效	音效在 10 英呎體驗中扮演重要角色，有助於讓使用者沉浸並給予意見反應。 UWP 提供了應用程式在 Xbox One 上執行時自動開啟常用控制聲音的功能。 詳細了解 UWP 內建的聲音支援並了解如何利用它。
UI 控制項的指導方針	有多種 UI 控制項可以在多種裝置上正常運作，但在電視上使用時需要注意一些事項。 了解在設計 10 英尺體驗時使用這些控制項的一些最佳實踐。
Xbox 的自訂視覺狀態觸發程式	若要針對 10 英尺體驗自訂 UWP 應用程式，我們建議你使用自訂視覺狀態觸發器，以便在應用程式偵測到它已在 Xbox 主機上啟動時進行佈局變更。

除了前面的設計和佈局注意事項之外，在建立應用程式時還應該考慮許多遊戲手把和遙控器互動最佳化。

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

注意

本主題中的大部分程式碼片段都採用 XAML/C# 格式；不過，這些原則和概念適用於所有 UWP 應用程式。 如果您要開發適用於 Xbox 的 HTML/JavaScript UWP 應用程式，請查看 GitHub 上實用的 TVHelpers 程式庫。

UI 元素調整大小

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

縮放比例和調適型配置

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

在 Xbox One 上，沒有這樣的系統設定；但是，為了使 UWP UI 元素的大小適合電視，XAML 應用程式的預設縮放比例為 200%，HTML 應用程式的預設縮放比例為 150%。 只要 UI 元素針對其他裝置適當地調整大小，它們就會針對電視適當地調整大小。 Xbox One 會以 1080p 轉譯您的應用程式 (1920 x 1080 像素)。 因此，當從PC 等其他裝置引入應用程式時，請利用自適應技術確保UI 在100% 比例下的960 x 540 像素 (或HTML 應用程式在100% 比例下為1280 x 720 像素) 看起來很棒。

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

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

內容密度

設計應用程式時，請記住，使用者將從遠處查看 UI 並使用遙控器或遊戲控制器與其進行互動，這比使用滑鼠或觸控輸入需要更多的時間進行導覽。

UI 控制項的大小

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

點擊次數

當使用者從電視螢幕的一個邊緣導覽到另一邊緣時，點擊次數不應超過六次才能簡化使用者介面。 同樣地，此處適用簡單性的原則。

文字大小

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

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

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

退出退出縮放比例

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

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

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

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

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

請務必透過將本主題中提到的有效像素值乘以實際像素值 (或對於 HTML 應用程式乘以 1.5) 來計算 UI 元素的適當大小。

電視安全區域

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

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

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

主題顏色

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

映像

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

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

這並不是最佳選擇，因為它為應用程式帶來了「封閉」效果，部分 UI (例如導覽窗格和網格) 似乎被切斷了。 不過，您可以進行最佳化，將 UI 的部分延伸至螢幕邊緣，讓應用程式更具電影效果。

將 UI 繪製至邊緣

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

另一方面，互動元素和文字始終避開螢幕邊緣也很重要，以確保它們不會在某些電視上被切斷。 我們建議您在螢幕邊緣的 5% 內只繪製非必要的視覺效果。 如 UI 元素大小調整中所述，遵循 Xbox One 控制台預設比例因子 200% 的 UWP 應用將利用 960 x 540 epx 的區域，因此在應用的 UI 中，應避免將基本 UI 放在以下區域：

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

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

核心視窗界限

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

在 App.xaml.cs 的方法 OnLaunched 中加入以下程式碼：

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

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

窗格背景

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

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

在這裡，瀏覽窗格的背景已延伸至螢幕邊緣，而其瀏覽專案則保留在電視安全區域中。 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 的標籤。 我們建議您將標籤移至其圖示的右側以避免這種大小調整。 如需詳細資訊，請參閱 命令列標籤。

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

捲動清單和方格的結尾

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

雖然清單或網格像這樣擴展，但將焦點視覺及其關聯項目保持在電視安全區域內非常重要。

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

<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}"
                  ... />

注意

這段程式碼是專門針對 ListView 的；GridView 對於樣式，請將 ControlTemplate 和 Style 的 TargetType 屬性設為 GridView。

若要對專案進入視圖的方式進行更細粒度的控制，如果您的應用程式面向版本 1803 或更高版本，則可以使用 UIElement.BringIntoViewRequested 事件。 您可以將其放在 ListView/ GridView 的 ItemsPanel 上，以便在內部 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 平台會將您的應用程式的顏色縮放到電視安全範圍 (請參閱電視安全性顏色以了解更多資訊)，以便您的應用程式在任何電視上看起來都不錯。 此外，您可以對應用程式使用的顏色集進行改進，以改善電視上的視覺體驗。

應用程式佈景主題

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

UWP 還允許應用程式根據其執行裝置提供的系統設定動態設定主題。 雖然 UWP 始終遵循使用者指定的主題設置，但每個裝置也提供適當的預設主題。 由於 Xbox One 的本質預期比生產力體驗更多的媒體體驗，因此預設為深色系統主題。 如果您的應用程式的主題是基於系統設定，則預計它在 Xbox One 上預設為深色。

輔色

UWP 提供了一種便捷的方式來顯示使用者從系統設定中選擇的強調色。

在 Xbox One 上，使用者可以選擇使用者顏色，就像他們可以在 PC 上選擇強調色一樣。 只要您的應用程式透過畫筆或顏色資源呼叫這些強調色，就會使用使用者在系統設定中選擇的顏色。 請注意，Xbox One 上的強調色是針對每個使用者的，而不是針對每個系統的。

另請注意，Xbox One 上的使用者顏色集與 PC、手機和其他裝置上的使用者顏色集不同。

只要您的應用程式使用畫筆資源 (例如 SystemControlForegroundAccentBrush) 或顏色資源 (SystemAccentColor)，或直接透過 UIColorType.Accent* API 呼叫強調色，這些顏色就會替換為 Xbox One 上可用的強調色。 高對比畫筆顏色也可以像在 PC 和手機上一樣從系統中擷取。

要了解有關強調色的更多資訊，請參閱強調色。

電視之間的色彩差異

設計電視時，請注意，色彩會根據轉譯的電視顯示方式大不相同。 不要假設色彩看起來會和監視器上一樣。 如果您的應用程式依賴顏色的細微差別來區分 UI 的各個部分，則顏色可能會混合在一起，使用者可能會感到困惑。 嘗試使用足夠不同的顏色，以便使用者能夠清楚地區分它們，無論他們使用什麼電視。

電視安全色彩

色彩的 RGB 值代表紅色、綠色和藍色的強度。 電視處理得非常好，它們可能會產生奇怪的帶狀效果，或在某些電視上被衝掉。 此外，高強度的顏色可能會導致溢出 (附近的像素開始繪製相同的顏色)。 雖然對於什麼是電視安全顏色有不同的看法，但 RGB 值 16-235 (或十六進制的 10-EB) 內的顏色通常可以安全地用於電視。

從歷史上看，Xbox 上的應用程式必須調整其顏色以落入「電視安全」顏色範圍內；但是，從秋季創作者更新開始，Xbox One 會自動將全範圍內容調整到電視安全範圍內。 這代表大多數應用程式開發人員不必再擔心電視安全顏色。

重要

使用 Media Foundation 播放時，已處於電視安全色彩範圍內的影片內容不會套用此色彩縮放效果。

如果您正在使用 DirectX 11 或 DirectX 12 開發應用程式並建立自己的交換鏈來渲染 UI 或影片，則可以透過呼叫 IDXGISwapChain3::SetColorSpace1 來指定您使用的顏色空間，這將使系統知道是否需要是否縮放顏色。

UI 控制項的指導方針

有多種 UI 控制項可以在多種裝置上正常運作，但在電視上使用時需要注意一些事項。 了解在設計 10 英尺體驗時使用這些控制項的一些最佳實踐。

導覽窗格

導覽窗格 (也稱為漢堡選單) 是 UWP 應用中常用的導覽控制項。 通常，它是一個帶有多個選項的窗格，可以從清單樣式選單中進行選擇，將使用者帶到不同的頁面。 通常，此窗格一開始會折疊以節省空間，使用者可以透過點擊按鈕將其打開。

雖然導覽窗格可以透過滑鼠和觸控輕鬆存取，但遊戲手把/遙控器使它們不太容易存取，因為使用者必須導覽到按鈕才能打開窗格。 因此，一個好的做法是使用檢視按鈕開啟導覽窗格，並允許使用者透過一直導覽到頁面左側來開啟它。 如需如何實作此設計模式的程式代碼範例，請參閱程式設計焦點瀏覽文件。 這可讓用戶輕鬆存取窗格的內容。 如需瀏覽窗格在不同螢幕大小以及遊戲板/遠端瀏覽的最佳做法的詳細資訊，請參閱瀏覽窗格。

CommandBar 標籤

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

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

工具提示

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

按鈕樣式

雖然標準UWP 按鈕在電視上運作良好，但某些按鈕的視覺樣式可以更好地吸引用戶對UI 的注意，您可能需要在所有平台上考慮這一點，特別是在10 英尺體驗中，這得益於清楚傳達焦點所在的位置。 若要深入瞭解這些樣式，請參閱按鈕。

巢狀 UI 元素

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

巢狀 UI 適用於某些輸入類型，但並非總是適用於依賴 XY 導覽的遊戲手把和遙控器。 請務必遵循本主題中的指導，以確保您的 UI 針對 10 英尺環境進行了最佳化，並且使用者可以輕鬆存取所有可互動元素。 其中一個常見解決方案是在 ContextFlyout 中放置巢狀UI元素。

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

MediaTransportControls

MediaTransportControls 元素可讓使用者透過提供預設播放體驗來與媒體互動，讓用戶能夠播放、暫停、開啟關閉、標題等等。 此控制項是 MediaPlayerElement 的屬性，支援兩種佈局選項：單行和雙行。 在單行版面中，滑桿和播放按鈕均位於一排，播放/暫停按鈕位於滑桿左側。 在雙行配置中，滑桿佔據自己的行，播放按鈕位於單獨的下一行。 在設計 10 英尺體驗時，應使用雙行佈局，因為它為遊戲手把提供更好的導覽。 若要啟用雙行佈局，請在 MediaPlayerElement 的 TransportControls 屬性中的 MediaTransportControls 元素上設定 IsCompact="False"。

<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 符號字體 (對於 XAML 應用程式 、對於 HTML 應用程式 \E426) 中的符號，以提供與 Xbox shell 和其他應用程式的一致性。

注意

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

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

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

Xbox 的自訂視覺狀態觸發程式

若要針對 10 英尺體驗量身打造您的 UWP 應用程式，建議您在應用程式偵測到應用程式已在 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);
        }
    }
}

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

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

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

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

摘要

針對 10 英尺體驗進行設計需要考慮特殊因素，這使其不同於任何其他平台的設計。 雖然您當然可以將 UWP 應用程式直接移植到 Xbox One 並且可以正常工作，但它不一定針對 10 英尺體驗進行最佳化，並且可能會導致用戶感到沮喪。 遵循本文中的指南，可確保您的應用程式和電視上一樣好。

相關文章

• 適用於 Windows 應用程式的裝置入門
• 遊戲控制器與遙控器的互動 \(部分機器翻譯\)
• UWP 應用程式中的聲音