針對 Xbox 和電視進行設計

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

請參閱 遊戲台和遠端控制互動 ,以取得 UWP 應用程式中在 10 英尺 體驗內互動體驗的指導方針。

概觀

通用 Windows 平台可讓您創造跨多個 Windows 10 裝置的絕佳體驗。 UWP 架構提供的大部分功能可讓 app 在這些裝置上使用相同的使用者介面 (UI),無需進行額外的工作。 不過,如果要量身打造並提供最佳化的 app 以便在 Xbox One 和電視螢幕上運作良好,則需要特殊考量。

坐在房間一端的沙發上,使用遊戲台或遙控器與電視互動的體驗,稱為「10 英呎體驗」。 這個名稱的由來是因為使用者通常坐在離螢幕大約 10 英呎遠的位置。 這是一個獨特的挑戰,因為我們不會稱與電腦互動是 2 英呎 體驗。 如果您為 Xbox One 或其他輸出至電視螢幕的裝置開發 app,並使用控制器做為輸入,您就必須記住這一點。

您並非需要本篇文章中所有的步驟,才能讓 app 創造出 10 英呎體驗,但是了解這些步驟,為您的 app 做出適當的決定,可針對您的 app 特定需求,量身打造出更良好的 10 英呎體驗。 當您打算在 10 英呎環境中運作您的 app 時,請考慮下列設計原則。

簡單

針對 10 英呎環境的設計會產生一些獨特的挑戰。 解析度和檢視距離會讓人們很難處理太多資訊。 請嘗試讓設計保持清晰,盡量精簡為最簡單的元件。 在電視上顯示的資訊量應該與在行動電話上 (而不是電腦上) 看到的內容差不多。

Xbox One 主畫面

易懂

10 英呎環境中的 UWP app 應該直覺且易於使用。 讓焦點清楚而且易懂。 排列好內容,讓空間的移動一致而且可預測。 為使用者的動作提供最短的路徑。

Xbox One 電影應用程式

螢幕擷取畫面中顯示的所有電影都可在 Microsoft 影片 & 電視上取得。

迷人

大螢幕能提供最身歷其境、類似電影的體驗。 無縫的場景、順暢的動作,以及生動活潑的色彩和排版,都能讓您的 app 提升到不同的層次。 盡量明顯而美觀。

Xbox One 的虛擬人偶應用程式

10 英呎體驗最佳化

您現在知道了出色的 UWP app 具備 10 英呎體驗的設計原則,請仔細閱讀下列概觀,了解可最佳化您的 app 並提供絕佳使用者體驗的特定方式。

功能 描述
調整 UI 元素大小 通用 Windows 平台使用縮放與有效像素,根據檢視距離來調整 UI。 了解如何調整大小並套用到整個 UI,可協助最佳化 10 英呎環境的 app。
電視安全區域 UWP 預設會自動避免在電視不安全的區域 (接近螢幕邊緣的區域) 中顯示任何 UI。 不過,這會產生一種「被框住」的效果,UI 看起來就像信箱一樣。 為了讓您的 app 能真正融入電視螢幕,您要加以修改,讓 app 在支援的電視能延伸到螢幕的邊緣。
色彩 UWP 支援色彩主題,而遵循系統主題的應用程式在 Xbox One 上預設為 深色。 如果您的 app 有特定的色彩佈景主題,您應該考慮到有些色彩不適合電視,應盡量避免使用。
音效 音效聲音在 10 英呎體驗中扮演關鍵角色,其為使用者提供身歷其境的體驗與回應。 在 Xbox One 上執行 app 時,UWP 可提供針對通用控制項自動開啟音效的功能。 深入了解關於 UWP 內建音效支援及如何善用的詳細資訊。
UI 控制項的指導方針 提供數種可針對多部裝置良好運作的 UI 控制項,但當在電視上使用時具有特定考量。 深入了解有關針對 10 英呎體驗進行設計時使用這些控制項的一些最佳做法。
適用於 Xbox 的自訂視覺狀態觸發程序 若要針對10英尺體驗量身打造您的 UWP 應用程式,建議您使用自訂 視覺狀態觸發 程式,以在應用程式偵測到它已在 Xbox 主控台上啟動時進行版面配置變更。

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

功能 描述
XY 焦點瀏覽和互動 XY 焦點導覽 可讓使用者流覽應用程式的 UI。 不過,這限制使用者只能向上、向下、向左和向右瀏覽。 本節概述處理此功能和其他考量的建議。
滑鼠模式 針對某些類型的應用程式(例如地圖或繪圖和繪製應用程式),XY 焦點導覽並不實用或甚至可能。 在這些情況下, 滑鼠模式 讓使用者可以自由地使用遊戲台或遙控器來流覽,就像電腦上的滑鼠一樣。
焦點視覺效果 焦點視覺效果是一個框線,會反白顯示目前焦點的 UI 元素。 這可協助使用者快速找出其所流覽的 UI 或與其互動的 UI。
焦點佔用 當 UI 元素具有焦點以便與其互動時,使用者必須按下遊戲台上的 A/Select 按鈕或遠端控制。
硬體按鈕 遊戲台和遠端控制提供非常不同的按鈕和設定。

注意

本主題中大部分的程式碼片段都是以 XAML/C# 所撰寫,不過,原則和概念則適用於所有 UWP app。 如果您正在開發適用於 Xbox 的 HTML/JavaScript UWP app,請查看 GitHub 上絕佳的 TVHelpers 媒體櫃。

調整 UI 元素大小

因為在 10 英呎環境中的 app 使用者會使用遙控器或遊戲台,而且坐在離螢幕數英呎遠的位置,所以您的設計必須納入一些特別的 UI 考量。 請確定 UI 有適當的內容密度,也不要太雜亂,讓使用者可以輕鬆瀏覽和選取元素。 請記住︰重點是簡單。

縮放比例與調適型配置

調整因數 有助於確保顯示 UI 元素,並以正確的大小調整應用程式執行所在的裝置。 在桌面上,您可以在 [設定] > [系統] > [顯示] 中找到這個設定,以滑動值表示。 手機上也有這個相同的設定 (如果裝置支援)。

變更文字、app 與其他項目的大小

Xbox One 上沒有這類系統設定。不過,如果要適當調整 UWP UI 元素的大小以適用於電視,預設會針對 XAML app 將它們調整為 200%,以及針對 HTML app 調整為 150%。 只要 UI 元素能針對其他裝置適當調整大小,就能針對電視適當調整大小。 Xbox One 以 1080p (1920 x 1080 像素) 呈現您的 app。 因此,從電腦等其他裝置帶入 app 時,請確定採用調適型技術,以 100% 縮放比例讓 UI 呈現 960 x 540 像素的最佳外觀 (或針對 HTML app 以 100% 縮放比例呈現 1280 x 720 像素的最佳外觀)。

針對 Xbox 的設計與針對電腦的設計稍有不同,因為您只需考慮 1920 x 1080 一種解析度。 如果使用者的電視解析度比較高,就沒什麼關係—UWP app 一律會縮放至 1080p。

但無論電視解析度為何,當您的 app 在 Xbox One 上執行時,也會提取 200% (或針對 HTML app 提取 150%) 的正確資產大小。

內容密度

設計 app 時請記住,使用者會從遠距離檢視 UI 而且使用遙控器或遊戲控制器與 UI 互動,比起使用滑鼠或觸控輸入要花費更多的時間瀏覽。

UI 控制項的大小

互動式 UI 元素的高度至少要有 32 epx (有效像素)。 這是常見 UWP 控制項的預設值,以縮放比例 200% 使用時,可確保從遠距離也能看見 UI 元素,並協助減少內容密度。

縮放比例 100% 和 200% 的 UWP 按鈕

點選次數

當使用者從 TV 螢幕的某個邊緣流覽至另一端時,不需要再按 六下滑鼠 即可簡化您的 UI。 同樣地, 簡單 的原則原則也適用于此處。

跨 6 個圖示

文字大小

若要從遠距離看見您的 UI,請使用下列重要規則︰

  • 主要的文字和閱讀內容︰最小 15 epx
  • 非關鍵的文字和補充內容︰最小 12 epx

在 UI 中使用較大文字時,請挑選不會限制螢幕實際可用空間太多、佔用其他內容可能填入空間的大小。

不使用縮放比例

我們建議您的 app 充分利用縮放比例支援,針對每個裝置類型進行縮放,可協助 app 在所有裝置上正確執行。 不過,您也可以不使用這個行為,以縮放比例 100% 來設計所有 UI。 請注意,您無法將縮放比例變更為 100% 以外的值。

針對 XAML app,您可以使用下列程式碼片段,選擇不使用縮放比例︰

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

這是您的 app 不進行額外工作的外觀。

電視安全區域

這不是最佳的結果,因為它讓 app 產生「被框住」的效果,某些 UI (例如瀏覽窗格和格線) 似乎被裁切掉。 不過,您可以進行最佳化,延伸部份 UI 到螢幕邊緣,讓 app 有更多電影效果。

將 UI 繪製到邊緣

我們建議您使用特定 UI 元素,延伸到螢幕邊緣,讓使用者感覺更投入。 這些包括 ScrollViewers瀏覽窗格以及 CommandBars

但同樣重要的是,互動式元素和文字則一律要避開螢幕邊緣,以確保在一些電視上不會被裁切掉。 我們建議您在螢幕邊緣的 5% 以內,只繪製不重要的視覺效果。 如調整 UI 元素大小所述,遵循 Xbox One 主機預設縮放比例 200% 的 UWP app 會使用 960 x 540 epx 的區域,所以在您的 app UI 中,您應該避免在下列區域中放置重要的 UI:

  • 從頂端和底端算起 27 epx
  • 從左邊和右邊算起 48 epx

下列小節說明如何將您的 UI 延伸到螢幕邊緣。

核心視窗界限

對於只針對 10 英呎體驗的 UWP app,使用核心視窗界限是比較簡單的選項。

App.xaml.csOnLaunched 方法中,新增下列程式碼:

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

有了這行程式碼,app 視窗會延伸到螢幕邊緣,所以您必須將所有互動式和重要 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 是另一個常放在 app 一邊或多邊附近的窗格範例,也因此其背景應該延伸到電視螢幕邊緣。 它通常也包含 更多 按鈕,以 "..." 表示。應該保留在 TV 安全區域中的右側。 以下是可達到所需的互動和視覺效果的幾個不同策略。

選項 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 內的功能,但是您必須新增邊框間距,以確保清單/格線項目可以捲動到安全區域的視野範圍內。 具體來說,您要對 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>

您可以將先前的程式碼片段放在頁面或 App 資源中,然後再透過下列方式存取它︰

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

注意

這個程式碼片段是特別針對 ListView;如果是 GridView 樣式,請將 ControlTemplateStyleTargetType 屬性都設定為 GridView

若要更精細地控制專案的顯示方式,如果您的應用程式是以1803版或更新版本為目標,您可以使用 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 在任何電視中看起來都很美。 此外,您的 app 可以採取一些色彩設定的增強功能,來改善電視上的視覺體驗。

應用程式佈景主題

您可以根據應用程式的最適合 (深色或淺色) 來選擇 應用程式主題 ,也可以退出宣告主題。 請在色彩佈景主題中閱讀更多有關佈景主題的一般建議。

UWP 也能讓 app 根據執行的裝置所提供的系統設定,動態設定佈景主題。 雖然 UWP 一律會優先採用使用者指定的佈景主題設定,但是每個裝置也會提供適當的預設佈景主題。 由於 Xbox One 的本質,其預期會有比 生產力 體驗更多的 媒體 體驗,因此會預設為深色系統主題。 如果您的 app 佈景主題是根據系統設定,在 Xbox One 上就會預設為深色。

輔色

UWP 提供了一種方便的方式,可公開使用者從其系統設定中選取的 輔色

使用者可以在 Xbox One 上選取使用者的色彩,就如同在電腦上選取輔色一樣。 只要您的 app 透過筆刷或色彩資源呼叫這些輔色,就會採用使用者在系統設定中選取的色彩。 請注意,Xbox One 上的輔色依使用者 (不是依系統) 而定。

另外,Xbox One 上的使用者色彩組與電腦、手機和其他裝置上的不同。

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

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

電視之間的色彩差異

針對電視設計時,請注意色彩顯示的方式依照所呈現的電視而相當不同。 不要認為色彩會完全像在監視器上顯示的一樣。 如果您的 app 依賴細微的色彩差異來區分 UI,色彩可能會混合在一起,而讓使用者感到困惑。 無論使用的電視為何,請試著使用足以讓使用者能夠清楚分辨的色彩。

電視安全色彩

色彩的 RGB 值代表紅色、綠色及藍色的濃度。 電視無法處理極端的濃度值—它們可以在某些電視上會產生奇異的帶狀效果,或者看起來像褪色一樣。 此外,高濃度色彩可能會導致開花的效果 (附近的像素開始繪製相同的色彩)。 雖然不同思想學派對於何謂電視安全色彩有不同的意見,但是 16-235 (或以十六進位表示的 10-EB) 的 RGB 值內的色彩通常可安全地用於電視。

電視安全色彩範圍

在過去,Xbox app 必須量身打造他們的顏色落在「電視安全」色彩的範圍內;不過,從秋季版 Creators Update 開始,Xbox One 自動調整在電視安全範圍內的完整內容。 這表示大部分的 app 開發人員不需要擔心電視安全色彩。

重要

已在電視安全色彩範圍中的影片內容,當使用 媒體基礎播放時,不會套用此色彩調整影響。

如果您正使用 DirectX 11 或 DirectX 12 開發 app 以及建立您自己的交換鏈結轉譯 UI 或影片,可以指定您藉由撥打 IDXGISwapChain3::SetColorSpace1來使用的色彩空間,這會讓系統知道是否需要調整色彩。

UI 控制項的指導方針

提供數種可針對多部裝置良好運作的 UI 控制項,但當在電視上使用時具有特定考量。 深入了解有關針對 10 英呎體驗進行設計時使用這些控制項的一些最佳做法。

流覽窗格 (也稱為 漢堡功能表) 是 UWP 應用程式常用的導覽控制項。 它一般會是一個含有清單樣式功能表的窗格,功能表中有數個可供選擇的選項,可將使用者帶到不同的頁面。 這個窗格通常一開始會摺疊起來以節省空間,使用者按一下按鈕即可將它開啟。

使用滑鼠和觸控可以很容易存取瀏覽窗格,但使用遊戲台/遙控器遠端則較難存取瀏覽窗格,因為使用者必須瀏覽到按鈕才能開啟窗格。 因此,最好的做法是讓 [View] \ ( View )按鈕開啟導覽窗格,並允許使用者在頁面左邊的所有方向流覽,以開啟它。 如何實作這個設計模式的程式碼範例位於程式設計焦點瀏覽文件。 這將讓使用者非常容易存取窗格的內容。 如需有關瀏覽窗格在不同螢幕大小中如何運作的詳細資訊,以及適用於遊戲台/遙控器瀏覽的最佳做法,請參閱瀏覽窗格

CommandBar 標籤

CommandBar 上,理想的做法是將標籤放在圖示右邊,以便使 CommandBar 高度最小化並保持一致。 您可以將 CommandBar.DefaultLabelPosition 屬性設定為 CommandBarDefaultLabelPosition.Right 來達到此目的。

標籤在圖示右邊的 CommandBar

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

工具提示

Tooltip 控制項是為了當使用者將滑鼠停留在元素上,或者點選並按住元素上的圖形時,在 UI 中提供更多資訊。 對於遊戲台和遙控器,當元素取得焦點一小段時間之後,Tooltip 就會出現在螢幕上停留一小段時間,然後消失。 如果使用了太多 Tooltip,這種行為可能會讓使用者分心。 針對電視進行設計時,請嘗試避免使用 Tooltip

按鈕樣式

雖然標準的 UWP 按鈕能在電視上順利運作,但是一些按鈕視覺樣式更能讓 UI 吸引注意,您可以針對所有平台考慮這些樣式,特別是在 10 英呎體驗中,更需要清楚傳達焦點所在。 若要深入了解這些樣式,請參閱按鈕

巢狀的 UI 元素

巢狀的 UI 會公開容器 UI 元素內部包含的巢狀可動作項目,其中巢狀項目與容器項目都可以各自獨立取得焦點。

對於某些輸入類型,巢狀的 UI 能夠良好運作,但對於依賴 XY 導覽的遊戲台與遙控器,則不一定能夠良好運作。 請務必遵循本主題中的指導方針,以確保您的 UI 能夠針對 10 英呎環境最佳化,讓使用者能夠輕鬆地存取所有可互動的元素。 其中一個常見的解決方案是將嵌套的 UI 元素放在中 ContextFlyout

如需巢狀 UI 的詳細資訊,請參閱清單項目中的巢狀 UI

MediaTransportControls

MediaTransportControls 元素提供預設的播放體驗,讓使用者可以與其媒體互動 (播放、暫停、開啟隱藏式輔助字幕等等)。 此控制項是 MediaPlayerElement 的屬性,而且支援兩種版面配置選項: 單一資料列雙重資料列。 在單列配置中,滑桿與播放按鈕都會在同一列上,且播放/暫停按鈕會在滑桿左邊。 在雙列配置中,滑桿會自成一列,而播放按鈕則位於下方另一列上。 針對 10 英呎體驗設計時,應使用雙列配置,因為它能為控制器提供較佳的瀏覽。 若要啟用雙列配置,請在 MediaPlayerElementTransportControls 屬性中的 MediaTransportControls 元素上設定 IsCompact="False"

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

如需深入了解將媒體加入 App,請參閱媒體播放

注意

MediaPlayerElement僅適用于1607版和更新版本的 Windows 10。 如果您是針對先前版本的 Windows 10 開發 App,便必須改為使用 MediaElement。 上述建議也適用於 MediaElement,且 TransportControls 屬性也是以同樣的方式存取。

搜尋體驗

搜尋內容是 10 英呎體驗中其中一個最常執行的功能。 如果您的 app 提供搜尋體驗,使用者能夠使用遊戲台上的 Y 按鈕做為快速鍵來快速存取會很有幫助。

大部分的客戶應該已經熟悉這個快速鍵,但是如果您願意,可以在 UI 新增視覺化 Y 字符,表示客戶可以使用此按鈕來存取搜尋功能。 如果您新增此提示,請務必使用 Segoe Xbox MDL2 Symbol 字型中的符號 (針對 XAML app 為 &#xE3CC;,針對 HTML app 則為 \E426),以提供與 Xbox 殼層和其他 app 的一致性。

注意

因為 Segoe Xbox MDL2 Symbol 字型只能在 Xbox 上使用,所以此符號將無法顯示於您的電腦上。 不過,一旦將它部署到 Xbox 之後,就能顯示於電視上。

因為 Y 按鈕只能在遊戲台上使用,所以請務必提供其他方法來存取搜尋,例如 UI 中的按鈕。 否則,部分客戶可能無法存取此功能。

在 10 英呎體驗中,讓客戶使用全螢幕的搜尋體驗通常比較容易,因為顯示器的空間有限。 無論您有全螢幕或部分螢幕 (「就地」搜尋),我們建議當使用者開啟搜尋體驗時,就出現已經開啟的螢幕小鍵盤,供客戶輸入搜尋字詞。

適用於 Xbox 的自訂視覺狀態觸發程序

若要針對 10 英呎體驗量身打造您的 UWP 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>

若要建立觸發程序,請將下列類別新增到您的 App。 這是上面的 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 程式碼中指定的配置修改。

另一個您可以檢查 App 是否正在 Xbox 上執行並接著進行適當調整的方式是透過程式碼。 您可以使用下列簡單變數來檢查您的 App 是否正在 Xbox 上執行︰

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

接著,您可以在這項檢查之後,在程式碼區塊中適當調整 UI。

摘要

針對 10 英呎經驗的設計已納入特殊考量,使其有別於其他所有平台的設計。 您當然可以直接將 UWP app 移植至 Xbox One 且它亦可運作,但它不一定是針對 10 英呎體驗最佳化,且會讓使用者感到失望。 遵循本文所述的指導方針,以確定 app 在電視上仍可呈現優異效果。