為 Xbox 和電視進行設計

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

如需在 10 英呎 體驗中 UWP 應用程式中的互動體驗指引，請參閱 遊戲手柄和遙控器 互動。

概觀

通用 Windows 平臺可讓您跨多個 Windows 裝置建立令人愉快的體驗。 UWP 架構所提供的大部分功能可讓應用程式跨這些裝置使用相同的使用者介面（UI），而不需要額外的工作。 不過，為了讓您的應用程式在 Xbox One 和電視螢幕上良好運作，您需要特別考慮進行量身打造和優化。

坐在房間裡的沙發上，使用遊戲控制器或遙控器與電視互動的體驗，被稱為 10英尺體驗。 因為使用者通常距離螢幕約 10 英呎，所以命名為 。 這提供了獨特的挑戰，而這些挑戰在例如 2 英尺 體驗或與電腦互動時並不存在。 如果您要開發適用於 Xbox One 的應用程式或任何其他裝置，這些裝置會輸出到電視畫面並使用控制器進行輸入，您應該一律記住這一點。

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

簡單

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

連貫

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

螢幕快照中顯示的所有影片都可在Microsoft電影和電視上取得。

迷人

最身臨其境的電影體驗發生在大銀幕上。 全螢幕畫面、優雅的動態效果以及色彩和字體設計的活力運用，讓您的應用程式達到下一個水準。 大膽而美麗。

針對 10 英呎使用體驗的優化

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

特徵 / 功能	說明
UI 元素大小調整	通用 Windows 平臺會使用 縮放比例和有效像素，依據觀看距離調整 UI。 理解尺寸並將其應用於您的使用者介面，有助於優化針對10英呎環境的應用程式。
電視安全區域	根據預設，UWP 會自動避免在電視不安全區域中顯示任何UI（靠近螢幕邊緣的區域）。 不過，這會產生一種「被限制住的」效果，使得 UI 看起來像是加上黑邊一樣。 要讓您的 app 在電視上真正呈現沉浸式體驗，您可能需要修改它，使其能夠在支援此功能的電視上延伸到螢幕邊緣。
顏色	UWP 支援色彩主題，而尊重系統主題的應用程式預設為 Xbox One 上的 深色 。 如果您的 app 有特定的色彩主題，您應該考慮某些色彩不適用於電視，並應避免使用。
音效	音效在 10 英呎體驗中扮演重要角色，有助於讓使用者沉浸並給予意見反應。 UWP 提供功能，可在 App 在 Xbox One 上執行時，自動開啟常見控件的音效。 深入瞭解UWP內建的聲音支援，並瞭解如何利用它。
UI 控件的指導方針	有多個UI控制件可在多個裝置上正常運作，但在電視上使用時有某些考慮。 閱讀設計 10 英呎體驗時使用這些控件的一些最佳做法。
針對 Xbox 的自訂視覺狀態觸發器	若要為 10 英呎體驗量身打造您的 UWP 應用程式，建議您使用自訂的 視覺狀態觸發程式， 以便在應用程式偵測到已在 Xbox 主機上啟動時進行版面配置變更。

除了上述設計和配置考慮之外，還有一些 遊戲板和遠端控制互動 優化，您應該在建置應用程式時考慮。

特徵 / 功能	說明
XY 聚焦導航和互動	XY 焦點導覽 使使用者能在您的應用程式介面中進行導航。 不過，這會限制使用者向上、向下、向左和向右流覽。 本節概述處理此事項和其他考慮的建議。
滑鼠模式	對於某些類型的應用程式，例如地圖或繪圖應用程式，XY 焦點導航並不實用，甚至可能不可行。 在這些情況下， 滑鼠模式 可讓使用者使用遊戲板或遙控器自由流覽，就像電腦上的滑鼠一樣。
焦點視覺效果	焦點邊框是用來突顯目前聚焦的 UI 元素的框線。 這有助於使用者快速識別他們正在流覽或與其互動的UI。
專注互動	使用者需要在 UI 元素獲得焦點時，按下遊戲板或遙控器上的 A/Select 按鈕，以便進行互動。
硬體按鈕	遊戲板和遙控器提供非常不同的按鈕和組態。

備註

本主題中的大部分代碼段都位於 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 等其他設備引入時，請確保在 100% 縮放比例下的 960 x 540 像素下或針對 HTML 應用程式在 100% 縮放比例下的 1280 x 720 像素下，UI 看起來很棒，並利用 調適型技術。

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

無論電視解析度為何，執行於 Xbox One 的應用程式將會自動包含 200%（或 HTML 應用程式的 150%）設定中的正確資產大小。

內容密度

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

UI 控制件的大小

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

在 100% 和 200% 縮放比例下，

點擊次數

當使用者從電視畫面的一個邊緣流覽到另一個邊緣時，應該不需要超過 六次點選，以達到簡化使用者介面的目的。 同樣地，此處適用 簡單 的原則。

在 上有 6 個圖示，与 相关

文字大小

若要讓您的 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 內容，而只會繪製頁面背景。

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

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

主題色彩

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

圖片

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

您的應用程式不用額外處理就會是這樣。

這樣的設計不理想，因為它使應用程式看起來局限，像是導航窗格和格線這些 UI 部分似乎被切斷。 不過，您可以進行優化，將 UI 的部分延伸至螢幕邊緣，讓應用程式更具電影效果。

將UI繪製至邊緣

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

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

• 從頂端和底部各 27 像素(px)
• 距離左右兩側 48 epx

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

核心視窗界限

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

在 OnLaunched 的 App.xaml.cs方法中，新增下列程序代碼：

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

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

窗格背景

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

如先前所述，使用核心視窗界限可讓您將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標籤。 我們建議您將標籤移至圖示的右側 ，以避免重設大小。 如需詳細資訊，請參閱 CommandBar 標籤。

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

捲動清單和方格的結尾

清單和網格通常包含多於可以同時顯示在螢幕上的項目。 在此情況下，建議您將清單或方格延伸至畫面邊緣。 水平卷動清單和網格線應該延伸到右邊緣，垂直捲動清單和網格線應該延伸到底部。

當清單或網格被像這樣擴展時，務必將視覺焦點及其相關項目保留在電視安全區域內。

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 事件。 您可以將它放在 ItemsPanel 上，ListView/GridView，以在內部 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 的色彩調整為電視安全範圍（如需詳細資訊，請參閱 電視安全色彩 ），讓您的 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）內的色彩通常被認為適合用於電視。

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

這很重要

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

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

UI 控件的指導方針

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

導覽窗格

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

雖然瀏覽窗格可透過滑鼠和觸控進行存取，但使用遊戲控制器或遙控器會使它們變得不易存取，因為使用者必須導航至按鈕以開啟窗格。 因此，最佳做法是讓 [檢視] 和 按鈕開啟導覽窗格，並允許使用者透過瀏覽到頁面最左側來開啟它。 如需如何實作此設計模式的程式代碼範例，請參閱 程式設計焦點瀏覽 檔。 這可讓用戶輕鬆存取窗格的內容。 如需了解瀏覽窗格在不同螢幕大小的行為，以及遊戲控制器/遠端控制的最佳導航實踐，請參閱 瀏覽窗格。

指令欄標籤

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

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

工具提示

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

按鈕樣式

雖然標準 UWP 按鈕在電視上運作良好，但某些按鈕的視覺樣式更能有效吸引對 UI 的注意，您可能會考慮在所有平台上使用，尤其是在 10 英呎使用情境中，因為它能更清楚地傳達焦點所在位置。 若要深入瞭解這些樣式，請參閱 按鈕。

巢狀 UI 元素

巢狀 UI 顯示包含在容器 UI 元素內的巢狀可互相獨立聚焦的動作項目，其中包含的巢狀項目和容器項目都能各自獲得焦點。

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

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

MediaTransportControls

MediaTransportControls 元素可讓使用者提供預設播放體驗，讓用戶能夠播放、暫停、開啟隱藏式輔助字幕等等，讓使用者與其媒體互動。 此控件是 MediaPlayerElement 屬性，並支援兩個版面配置選項：單列 和 雙列。 在單行佈局中，滑桿和播放按鈕都位於同一排，而播放/暫停按鈕位於滑桿的左側。 在雙列配置中，滑桿佔據自己的行，而播放按鈕位於另一個較低的行。 設計 10 英呎體驗時，應該使用雙列版面配置，因為它為遊戲板提供更好的流覽。 若要開啟雙列配置，請在 IsCompact="False" 的 MediaTransportControls 屬性中的元素設置MediaPlayerElement。

<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 按鈕做為快速鍵，來快速存取它。

大多數客戶應該已經熟悉此加速器，但如果您願意，您可以在 UI 上新增一個視覺效果，例如 Y 圖像，以提示客戶可以使用按鈕來存取搜尋功能。 如果您新增此提示符號，請務必使用 Segoe Xbox MDL2 Symbol 字型的符號（XAML 應用程式使用，HTML 應用程式使用 \E426），以確保與 Xbox 殼層及其他應用程式的一致性。

備註

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

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

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

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

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

總結

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

相關文章

• 適用於 Windows 應用程式的設備指南
• 遊戲手柄和遙控器互動
• UWP 應用程式中的聲音