Merancang untuk Xbox dan TV
Desain aplikasi Windows Anda sehingga terlihat bagus dan berfungsi dengan baik di layar Xbox One dan televisi.
Lihat Gamepad dan interaksi kontrol jarak jauh untuk panduan tentang pengalaman interaksi dalam aplikasi UWP dalam pengalaman 10 kaki .
Gambaran Umum
Platform Windows Universal memungkinkan Anda menciptakan pengalaman menyenangkan di beberapa perangkat Windows. Sebagian besar fungsionalitas yang disediakan oleh kerangka kerja UWP memungkinkan aplikasi untuk menggunakan antarmuka pengguna (UI) yang sama di seluruh perangkat ini, tanpa pekerjaan tambahan. Namun, menyesuaikan dan mengoptimalkan aplikasi Anda untuk bekerja dengan baik di layar Xbox One dan TV memerlukan pertimbangan khusus.
Pengalaman duduk di sofa di seberang ruangan, menggunakan gamepad atau remote untuk berinteraksi dengan TV, disebut pengalaman 10 kaki. Ini dinamai demikian karena pengguna umumnya duduk sekitar 10 kaki dari layar. Ini memberikan tantangan unik yang tidak ada di, misalnya, pengalaman 2 kaki , atau berinteraksi dengan PC. Jika Anda mengembangkan aplikasi untuk Xbox One atau perangkat lain yang keluaran ke layar TV dan menggunakan pengontrol untuk input, Anda harus selalu mengingatnya.
Tidak semua langkah dalam artikel ini diperlukan untuk membuat aplikasi Anda berfungsi dengan baik untuk pengalaman 10 kaki, tetapi memahaminya dan membuat keputusan yang sesuai untuk aplikasi Anda akan menghasilkan pengalaman 10 kaki yang lebih baik yang disesuaikan untuk kebutuhan spesifik aplikasi Anda. Saat Anda menghanyutkan aplikasi di lingkungan 10 kaki, pertimbangkan prinsip desain berikut.
Sederhana
Merancang untuk lingkungan 10 kaki menghadirkan serangkaian tantangan unik. Resolusi dan jarak pandang dapat menyulitkan orang untuk memproses terlalu banyak informasi. Cobalah untuk menjaga desain Anda tetap bersih, dikurangi menjadi komponen yang paling sederhana. Jumlah informasi yang ditampilkan di TV harus sebanding dengan apa yang akan Anda lihat di ponsel, bukan di desktop.
Koheren
Aplikasi UWP di lingkungan 10 kaki harus intuitif dan mudah digunakan. Buat fokus menjadi jelas dan tidak salah. Atur konten sehingga pergerakan di seluruh ruang konsisten dan dapat diprediksi. Berikan orang-orang jalan terpendek untuk apa yang ingin mereka lakukan.
Semua film yang ditampilkan dalam cuplikan layar tersedia di Microsoft Movies &TV.
Menawan
Pengalaman sinematik yang paling imersif terjadi di layar lebar. Pemandangan tepi-ke-tepi, gerakan elegan, dan penggunaan warna dan tipografi yang seri membawa aplikasi Anda ke tingkat berikutnya. Berani dan cantik.
Pengoptimalan untuk pengalaman 10 kaki
Sekarang setelah Anda mengetahui prinsip desain aplikasi UWP yang baik untuk pengalaman 10 kaki, baca gambaran umum berikut tentang cara spesifik Anda dapat mengoptimalkan aplikasi Anda dan membuat pengalaman pengguna yang hebat.
| Fitur | Deskripsi |
|---|---|
| Ukuran elemen UI | Platform Windows Universal menggunakan penskalakan dan piksel efektif untuk menskalakan UI sesuai dengan jarak pandang. Memahami ukuran dan menerapkannya di seluruh UI Anda akan membantu mengoptimalkan aplikasi Anda untuk lingkungan 10 kaki. |
| Area aman TV | UWP akan secara otomatis menghindari menampilkan UI apa pun di area tidak aman TV (area yang dekat dengan tepi layar) secara default. Namun, ini membuat efek "boxed-in" di mana UI terlihat kotak surat. Agar aplikasi Anda benar-benar imersif di TV, Anda harus memodifikasinya sehingga meluas ke tepi layar di TV yang mendukungnya. |
| Warna | UWP mendukung tema warna, dan aplikasi yang menghormati tema sistem akan default menjadi gelap di Xbox One. Jika aplikasi Anda memiliki tema warna tertentu, Anda harus mempertimbangkan bahwa beberapa warna tidak berfungsi dengan baik untuk TV dan harus dihindari. |
| Bunyi | Suara memainkan peran kunci dalam pengalaman 10 kaki, membantu membenamkan dan memberikan umpan balik kepada pengguna. UWP menyediakan fungsionalitas yang secara otomatis mengaktifkan suara untuk kontrol umum saat aplikasi berjalan di Xbox One. Cari tahu lebih lanjut tentang dukungan suara yang disertakan dalam UWP dan pelajari cara memanfaatkannya. |
| Panduan untuk kontrol UI | Ada beberapa kontrol UI yang berfungsi dengan baik di beberapa perangkat, tetapi memiliki pertimbangan tertentu saat digunakan di TV. Baca tentang beberapa praktik terbaik untuk menggunakan kontrol ini saat merancang pengalaman 10 kaki. |
| Pemicu status visual kustom untuk Xbox | Untuk menyesuaikan aplikasi UWP Anda untuk pengalaman 10 kaki, kami sarankan Anda menggunakan pemicu status visual kustom untuk membuat perubahan tata letak saat aplikasi mendeteksi bahwa aplikasi telah diluncurkan di konsol Xbox. |
Selain pertimbangan desain dan tata letak sebelumnya, ada sejumlah pengoptimalan interaksi gamepad dan remote control yang harus Anda pertimbangkan saat membuat aplikasi.
| Fitur | Deskripsi |
|---|---|
| Navigasi dan interaksi fokus XY | Navigasi fokus XY memungkinkan pengguna untuk menavigasi di sekitar UI aplikasi Anda. Namun, ini membatasi pengguna untuk menavigasi ke atas, bawah, kiri, dan kanan. Rekomendasi untuk menangani pertimbangan ini dan pertimbangan lain diuraikan di bagian ini. |
| Mode mouse | Navigasi fokus XY tidak praktis, atau bahkan mungkin, untuk beberapa jenis aplikasi, seperti peta atau aplikasi gambar dan lukisan. Dalam kasus ini, mode mouse memungkinkan pengguna menavigasi dengan bebas dengan gamepad atau remote control, seperti mouse pada PC. |
| Visual fokus | Visual fokus adalah batas yang menyoroti elemen UI yang saat ini difokuskan. Ini membantu pengguna dengan cepat mengidentifikasi UI yang mereka navigasikan atau berinteraksi dengannya. |
| Keterlibatan fokus | Keterlibatan fokus mengharuskan pengguna untuk menekan tombol A/Pilih pada gamepad atau kontrol jarak jauh ketika elemen UI memiliki fokus untuk berinteraksi dengannya. |
| Tombol perangkat keras | Gamepad dan remote control menyediakan tombol dan konfigurasi yang sangat berbeda. |
Catatan
Sebagian besar cuplikan kode dalam topik ini ada di XAML/C#; namun, prinsip dan konsep berlaku untuk semua aplikasi UWP. Jika Anda mengembangkan aplikasi HTML/JavaScript UWP untuk Xbox, lihat pustaka TVHelpers yang sangat baik di GitHub.
Ukuran elemen UI
Karena pengguna aplikasi di lingkungan 10 kaki menggunakan remote control atau gamepad dan duduk beberapa kaki dari layar, ada beberapa pertimbangan UI yang perlu diperhitungkan ke dalam desain Anda. Pastikan bahwa UI memiliki kepadatan konten yang sesuai dan tidak terlalu berantakan sehingga pengguna dapat dengan mudah menavigasi dan memilih elemen. Ingat: kesederhanaan adalah kunci.
Faktor skala dan tata letak adaptif
Faktor skala membantu memastikan bahwa elemen UI ditampilkan dengan ukuran yang tepat untuk perangkat tempat aplikasi berjalan. Pada desktop, pengaturan ini dapat ditemukan di Tampilan Sistem > Pengaturan > sebagai nilai geser. Pengaturan yang sama ini ada di telepon juga jika perangkat mendukungnya.
Di Xbox One, tidak ada pengaturan sistem seperti itu; namun, agar elemen UWP UI berukuran tepat untuk TV, elemen tersebut diskalakan pada default 200% untuk aplikasi XAML dan 150% untuk aplikasi HTML. Selama elemen UI berukuran tepat untuk perangkat lain, elemen tersebut akan berukuran tepat untuk TV. Xbox One merender aplikasi Anda pada 1080p (1920 x 1080 piksel). Oleh karena itu, saat membawa aplikasi dari perangkat lain seperti PC, pastikan bahwa UI terlihat hebat pada 960 x 540 px pada skala 100% (atau 1280 x 720 px pada skala 100% untuk aplikasi HTML) menggunakan teknik adaptif.
Merancang untuk Xbox sedikit berbeda dari merancang untuk PC karena Anda hanya perlu khawatir tentang satu resolusi, 1920 x 1080. Tidak masalah jika pengguna memiliki TV yang memiliki resolusi yang lebih baik—aplikasi UWP akan selalu menskalakan hingga 1080p.
Ukuran aset yang benar dari set 200% (atau 150% untuk aplikasi HTML) juga akan ditarik untuk aplikasi Anda saat berjalan di Xbox One, terlepas dari resolusi TV.
Kepadatan konten
Saat merancang aplikasi Anda, ingatlah bahwa pengguna akan melihat UI dari kejauhan dan berinteraksi dengannya dengan menggunakan pengontrol jarak jauh atau game, yang membutuhkan lebih banyak waktu untuk menavigasi daripada menggunakan mouse atau input sentuh.
Ukuran kontrol UI
Elemen antarmuka pengguna interaktif harus berukuran minimal 32 epx (piksel efektif). Ini adalah default untuk kontrol UWP umum, dan ketika digunakan pada skala 200%, ini memastikan bahwa elemen UI terlihat dari kejauhan dan membantu mengurangi kepadatan konten.
Jumlah klik
Ketika pengguna menavigasi dari satu tepi layar TV ke yang lain, tidak lebih dari enam klik untuk menyederhanakan UI Anda. Sekali lagi, prinsip kesederhanaan berlaku di sini.
Ukuran teks
Untuk membuat UI Anda terlihat dari kejauhan, gunakan aturan praktis berikut:
- Teks utama dan konten baca: minimal 15 epx
- Teks non-kritis dan konten tambahan: minimal 12 epx
Saat menggunakan teks yang lebih besar di UI Anda, pilih ukuran yang tidak membatasi real estat layar terlalu banyak, mengambil ruang yang berpotensi diisi konten lain.
Memilih keluar dari faktor skala
Kami menyarankan agar aplikasi Anda memanfaatkan dukungan faktor skala, yang akan membantunya berjalan dengan tepat di semua perangkat dengan menskalakan untuk setiap jenis perangkat. Namun, dimungkinkan untuk menolak perilaku ini dan merancang semua UI Anda pada skala 100%. Perhatikan bahwa Anda tidak dapat mengubah faktor skala ke apa pun selain 100%.
Untuk aplikasi XAML, Anda dapat menolak faktor skala dengan menggunakan cuplikan kode berikut:
bool result =
Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);
result akan memberi tahu Anda apakah Anda berhasil memilih keluar.
Untuk informasi selengkapnya, termasuk kode sampel untuk HTML/JavaScript, lihat Cara menonaktifkan penskalaan.
Pastikan untuk menghitung ukuran elemen UI yang sesuai dengan menggandakan nilai piksel efektif yang disebutkan dalam topik ini ke nilai piksel aktual (atau mengalikan dengan 1,5 untuk aplikasi HTML).
Area aman TV
Tidak semua TV menampilkan konten sepanjang jalan ke tepi layar karena alasan historis dan teknologi. Secara default, UWP akan menghindari menampilkan konten UI apa pun di area tidak aman TV dan sebaliknya hanya akan menggambar latar belakang halaman.
Area tidak aman TV diwakili oleh area biru dalam gambar berikut.
Anda dapat mengatur latar belakang ke warna statis atau bertema, atau ke gambar, seperti yang ditunjukkan cuplikan kode berikut.
Warna tema
<Page x:Class="Sample.MainPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>
Gambar
<Page x:Class="Sample.MainPage"
Background="\Assets\Background.png"/>
Inilah yang akan terlihat seperti aplikasi Anda tanpa pekerjaan tambahan.
Ini tidak optimal karena memberi aplikasi efek "boxed-in", dengan bagian UI seperti panel navigasi dan kisi tampaknya terputus. Namun, Anda dapat membuat pengoptimalan untuk memperluas bagian UI ke tepi layar untuk memberi aplikasi efek yang lebih sinematik.
Menggambar UI ke tepi
Kami menyarankan agar Anda menggunakan elemen UI tertentu untuk meluas ke tepi layar untuk memberikan lebih banyak perendaman kepada pengguna. Ini termasuk ScrollViewers, panel navigasi, dan CommandBars.
Di sisi lain, penting juga bahwa elemen dan teks interaktif selalu menghindari tepi layar untuk memastikan bahwa elemen dan teks tersebut tidak akan dipotong pada beberapa TV. Kami menyarankan agar Anda hanya menggambar visual yang tidak penting dalam 5% dari tepi layar. Seperti disebutkan dalam ukuran elemen UI, aplikasi UWP yang mengikuti faktor skala default konsol Xbox One sebesar 200% akan menggunakan area 960 x 540 epx, jadi di UI aplikasi Anda, Anda harus menghindari menempatkan UI penting di area berikut:
- 27 epx dari atas dan bawah
- 48 epx dari sisi kiri dan kanan
Bagian berikut menjelaskan cara membuat UI Anda diperluas ke tepi layar.
Batas jendela inti
Untuk aplikasi UWP yang hanya menargetkan pengalaman 10 kaki, menggunakan batas jendela inti adalah opsi yang lebih mudah.
OnLaunched Dalam metode App.xaml.cs, tambahkan kode berikut:
Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);
Dengan baris kode ini, jendela aplikasi akan meluas ke tepi layar, sehingga Anda harus memindahkan semua UI interaktif dan penting ke area aman TV yang dijelaskan sebelumnya. UI sementara, seperti menu konteks dan ComboBox yang dibuka, akan secara otomatis tetap berada di dalam area aman TV.
Latar belakang panel
Panel navigasi biasanya digambar di dekat tepi layar, sehingga latar belakang harus meluas ke area tidak aman TV agar tidak menimbulkan celah canggung. Anda dapat melakukan ini hanya dengan mengubah warna latar belakang panel navigasi ke warna latar belakang aplikasi.
Menggunakan batas jendela inti seperti yang dijelaskan sebelumnya akan memungkinkan Anda untuk menggambar UI Anda ke tepi layar, tetapi Anda kemudian harus menggunakan margin positif pada konten SplitView untuk menyimpannya di dalam area aman TV.
Di sini, latar belakang panel navigasi telah diperluas ke tepi layar, sementara item navigasinya disimpan di area aman TV.
Konten SplitView (dalam hal ini, kisi item) telah diperluas ke bagian bawah layar sehingga terlihat seperti berlanjut dan tidak terputus, sementara bagian atas kisi masih berada di dalam area aman TV. (Pelajari selengkapnya tentang cara melakukan ini di Menggulir akhir daftar dan kisi).
Cuplikan kode berikut mencapai efek ini:
<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 adalah contoh lain dari panel yang biasanya diposisikan di dekat satu atau beberapa tepi aplikasi, dan karenanya di TV latar belakangnya harus meluas ke tepi layar. Ini juga biasanya berisi tombol Lainnya , yang diwakili oleh "..." di sisi kanan, yang harus tetap berada di area AMAN TV. Berikut ini adalah beberapa strategi berbeda untuk mencapai interaksi dan efek visual yang diinginkan.
Opsi 1: Ubah CommandBar warna latar belakang menjadi transparan atau warna yang sama dengan latar belakang halaman:
<CommandBar x:Name="topbar"
Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
...
</CommandBar>
Melakukan ini akan membuat CommandBar tampilannya seperti di atas latar belakang yang sama dengan halaman lainnya, sehingga latar belakang dengan mulus mengalir ke tepi layar.
Opsi 2: Tambahkan persegi panjang latar belakang yang isinya sama dengan CommandBar latar belakang, dan letakkan di bawah CommandBar dan di seluruh halaman lainnya:
<Rectangle VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
VerticalAlignment="Top"
HorizontalContentAlignment="Stretch">
...
</CommandBar>
Catatan
Jika menggunakan pendekatan ini, ketahuilah bahwa tombol Lainnya mengubah tinggi yang dibuka CommandBar jika perlu, untuk menampilkan label AppBarButtons di bawah ikonnya. Kami menyarankan agar Anda memindahkan label ke sebelah kanan ikonnya untuk menghindari perubahan ukuran ini. Untuk informasi selengkapnya, lihat Label CommandBar.
Kedua pendekatan ini juga berlaku untuk jenis kontrol lain yang tercantum di bagian ini.
Menggulir akhir daftar dan kisi
Daftar dan kisi umum berisi lebih banyak item daripada yang dapat pas di layar secara bersamaan. Jika demikian, kami sarankan Anda memperluas daftar atau kisi ke tepi layar. Menggulir daftar dan kisi secara horizontal harus meluas ke tepi kanan, dan menggulir secara vertikal harus meluas ke bagian bawah.
Meskipun daftar atau kisi diperluas seperti ini, penting untuk menjaga visual fokus dan item terkait di dalam area aman TV.
UWP memiliki fungsionalitas yang akan mempertahankan visual fokus di dalam VisibleBounds, tetapi Anda perlu menambahkan padding untuk memastikan bahwa item daftar/kisi dapat menggulir ke tampilan area aman. Secara khusus, Anda menambahkan margin positif ke ListView atau ItemPresenter GridView, seperti dalam cuplikan kode berikut:
<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>
Anda akan meletakkan cuplikan kode sebelumnya di halaman atau sumber daya aplikasi, lalu mengaksesnya dengan cara berikut:
<Page>
<Grid>
<ListView Style="{StaticResource TitleSafeListViewStyle}"
... />
Catatan
Cuplikan kode ini khusus untuk ListViews; untuk GridView gaya, atur atribut TargetType untuk ControlTemplate dan Style ke GridView.
Untuk kontrol yang lebih halus tentang bagaimana item ditampilkan, jika aplikasi Anda menargetkan versi 1803 atau yang lebih baru, Anda dapat menggunakan peristiwa UIElement.BringIntoViewRequested. Anda dapat meletakkannya di ItemsPanel untuk ListView/GridView untuk menangkapnya sebelum ScrollViewer internal melakukannya, seperti dalam cuplikan kode berikut:
<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
});
}
}
Warna
Secara default, Platform Windows Universal menskalakan warna aplikasi Anda ke rentang aman TV (lihat warna aman TV untuk informasi lebih lanjut) sehingga aplikasi Anda terlihat bagus di TV apa pun. Selain itu, ada peningkatan yang dapat Anda lakukan pada serangkaian warna yang digunakan aplikasi Anda untuk meningkatkan pengalaman visual di TV.
Tema aplikasi
Anda dapat memilih tema Aplikasi (gelap atau terang) sesuai dengan apa yang tepat untuk aplikasi Anda, atau Anda dapat menolak tema. Baca selengkapnya tentang rekomendasi umum untuk tema dalam tema Warna.
UWP juga memungkinkan aplikasi untuk mengatur tema secara dinamis berdasarkan pengaturan sistem yang disediakan oleh perangkat tempat mereka berjalan. Meskipun UWP selalu menghormati pengaturan tema yang ditentukan oleh pengguna, setiap perangkat juga menyediakan tema default yang sesuai. Karena sifat Xbox One, yang diharapkan memiliki lebih banyak pengalaman media daripada pengalaman produktivitas , ini default ke tema sistem gelap. Jika tema aplikasi Anda didasarkan pada pengaturan sistem, perkirakan tema tersebut akan menjadi default menjadi gelap di Xbox One.
Warna aksen
UWP menyediakan cara mudah untuk mengekspos warna aksen yang telah dipilih pengguna dari pengaturan sistem mereka.
Di Xbox One, pengguna dapat memilih warna pengguna, sama seperti mereka dapat memilih warna aksen pada PC. Selama aplikasi Anda memanggil warna aksen ini melalui kuas atau sumber daya warna, warna yang dipilih pengguna dalam pengaturan sistem akan digunakan. Perhatikan bahwa warna aksen pada Xbox One adalah per pengguna, bukan per sistem.
Harap dicatat juga bahwa set warna pengguna di Xbox One tidak sama dengan yang ada di PC, telepon, dan perangkat lainnya.
Selama aplikasi Anda menggunakan sumber daya kuas seperti SystemControlForegroundAccentBrush, atau sumber daya warna (SystemAccentColor), atau sebaliknya memanggil warna aksen langsung melalui API UIColorType.Accent* , warna tersebut diganti dengan warna aksen yang tersedia di Xbox One. Warna kuas kontras tinggi juga ditarik dari sistem dengan cara yang sama seperti pada PC dan ponsel.
Untuk mempelajari selengkapnya tentang warna aksen secara umum, lihat Warna aksen.
Varian warna di antara TV
Saat merancang untuk TV, perhatikan bahwa warna ditampilkan secara cukup berbeda tergantung pada TV yang dirender. Jangan asumsikan warna akan terlihat persis seperti yang mereka lakukan di monitor Anda. Jika aplikasi Anda bergantung pada perbedaan warna yang halus untuk membedakan bagian UI, warna dapat menyatu dan pengguna bisa bingung. Cobalah untuk menggunakan warna yang cukup berbeda sehingga pengguna akan dapat membedakannya dengan jelas, terlepas dari TV yang mereka gunakan.
Warna aman TV
Nilai RGB warna mewakili intensitas untuk merah, hijau, dan biru. TV tidak menangani intensitas ekstrem dengan sangat baik—mereka dapat menghasilkan efek bersalur aneh, atau tampak dicuci pada TV tertentu. Selain itu, warna intensitas tinggi dapat menyebabkan mekar (piksel terdekat mulai menggambar warna yang sama). Meskipun ada sekolah pemikiran yang berbeda dalam apa yang dianggap warna AMAN TV, warna dalam nilai RGB 16-235 (atau 10-EB dalam heksadesimal) umumnya aman digunakan untuk TV.
Secara historis, aplikasi di Xbox harus menyesuaikan warnanya agar berada dalam rentang warna "AMAN TV" ini; namun, dimulai dengan Fall Creators Update, Xbox One secara otomatis menskalakan konten rentang penuh ke dalam rentang aman TV. Ini berarti bahwa sebagian besar pengembang aplikasi tidak perlu lagi khawatir tentang warna TV-aman.
Penting
Konten video yang sudah berada dalam rentang warna aman TV tidak memiliki efek penskalaan warna ini diterapkan saat diputar kembali menggunakan Media Foundation.
Jika Anda mengembangkan aplikasi menggunakan DirectX 11 atau DirectX 12 dan membuat rantai pertukaran Anda sendiri untuk merender UI atau video, Anda dapat menentukan ruang warna yang Anda gunakan dengan memanggil IDXGISwapChain3::SetColorSpace1, yang akan memberi tahu sistem apakah perlu menskalakan warna atau tidak.
Panduan untuk kontrol UI
Ada beberapa kontrol UI yang berfungsi dengan baik di beberapa perangkat, tetapi memiliki pertimbangan tertentu saat digunakan di TV. Baca tentang beberapa praktik terbaik untuk menggunakan kontrol ini saat merancang pengalaman 10 kaki.
Panel navigasi
Panel navigasi (juga dikenal sebagai menu hamburger) adalah kontrol navigasi yang umum digunakan dalam aplikasi UWP. Biasanya ini adalah panel dengan beberapa opsi untuk dipilih di menu gaya daftar yang akan membawa pengguna ke halaman yang berbeda. Umumnya panel ini mulai diciutkan untuk menghemat ruang, dan pengguna dapat membukanya dengan mengklik tombol.
Meskipun panel navigasi sangat dapat diakses dengan mouse dan sentuhan, gamepad/remote membuatnya kurang dapat diakses karena pengguna harus menavigasi ke tombol untuk membuka panel. Oleh karena itu, praktik yang baik adalah meminta tombol Tampilkan membuka panel navigasi, serta memungkinkan pengguna untuk membukanya dengan menavigasi ke sebelah kiri halaman. Sampel kode tentang cara mengimplementasikan pola desain ini dapat ditemukan dalam dokumen navigasi fokus terprogram. Ini akan memberi pengguna akses yang sangat mudah ke konten panel. Untuk informasi selengkapnya tentang perilaku panel navigasi dalam ukuran layar yang berbeda serta praktik terbaik untuk navigasi gamepad/jarak jauh, lihat Panel navigasi.
Label CommandBar
Adalah ide yang baik untuk memiliki label yang ditempatkan di sebelah kanan ikon pada CommandBar sehingga tingginya diminimalkan dan tetap konsisten. Anda dapat melakukan ini dengan mengatur properti CommandBar.DefaultLabelPosition ke CommandBarDefaultLabelPosition.Right.
Mengatur properti ini juga akan menyebabkan label selalu ditampilkan, yang berfungsi dengan baik untuk pengalaman 10 kaki karena meminimalkan jumlah klik untuk pengguna. Ini juga merupakan model yang bagus untuk diikuti oleh jenis perangkat lain.
Tipsalat
Kontrol Tooltip diperkenalkan sebagai cara untuk memberikan informasi lebih lanjut di UI ketika pengguna mengarahkan mouse ke atas, atau mengetuk dan menahan gambar mereka, sebuah elemen. Untuk gamepad dan remote, Tooltip muncul setelah momen singkat ketika elemen mendapatkan fokus, tetap di layar untuk waktu yang singkat, dan kemudian menghilang. Perilaku ini bisa mengganggu jika terlalu banyak Tooltipyang digunakan. Cobalah untuk menghindari penggunaan Tooltip saat merancang untuk TV.
Gaya tombol
Meskipun tombol UWP standar berfungsi dengan baik di TV, beberapa gaya visual tombol menarik perhatian ke UI dengan lebih baik, yang mungkin ingin Anda pertimbangkan untuk semua platform, terutama dalam pengalaman 10 kaki, yang mendapat manfaat dari komunikasi yang jelas di mana fokus berada. Untuk membaca selengkapnya tentang gaya ini, lihat Tombol.
Elemen UI berlapis
UI berlapis mengekspos item berlapis yang dapat ditindaklanjuti yang diapit di dalam elemen antarmuka pengguna kontainer di mana item berlapis serta item kontainer dapat mengambil fokus independen satu sama lain.
UI berlapis berfungsi dengan baik untuk beberapa jenis input, tetapi tidak selalu untuk gamepad dan jarak jauh, yang mengandalkan navigasi XY. Pastikan untuk mengikuti panduan dalam topik ini untuk memastikan bahwa UI Anda dioptimalkan untuk lingkungan 10 kaki, dan bahwa pengguna dapat mengakses semua elemen yang dapat berinteraksi dengan mudah. Salah satu solusi umum adalah menempatkan elemen UI berlapis dalam ContextFlyout.
Untuk informasi selengkapnya tentang UI berlapis, lihat UI berlapis dalam item daftar.
MediaTransportControls
Elemen MediaTransportControls memungkinkan pengguna berinteraksi dengan media mereka dengan memberikan pengalaman pemutaran default yang memungkinkan mereka untuk memutar, menjeda, mengaktifkan keterangan tertutup, dan banyak lagi. Kontrol ini adalah properti MediaPlayerElement dan mendukung dua opsi tata letak: baris tunggal dan baris ganda. Dalam tata letak baris tunggal, tombol penggelis dan pemutaran semuanya terletak dalam satu baris, dengan tombol putar/jeda yang terletak di sebelah kiri penggerak. Dalam tata letak baris ganda, penggelser menempati barisnya sendiri, dengan tombol pemutaran pada baris bawah terpisah. Saat merancang untuk pengalaman 10 kaki, tata letak baris ganda harus digunakan, karena memberikan navigasi yang lebih baik untuk gamepad. Untuk mengaktifkan tata letak baris ganda, atur IsCompact="False" pada MediaTransportControls elemen di properti TransportControls dari MediaPlayerElement.
<MediaPlayerElement x:Name="mediaPlayerElement1"
Source="Assets/video.mp4"
AreTransportControlsEnabled="True">
<MediaPlayerElement.TransportControls>
<MediaTransportControls IsCompact="False"/>
</MediaPlayerElement.TransportControls>
</MediaPlayerElement>
Kunjungi Pemutaran media untuk mempelajari selengkapnya tentang menambahkan media ke aplikasi Anda.
Catatan
MediaPlayerElement hanya tersedia di Windows 10, versi 1607 dan yang lebih baru. Jika Anda mengembangkan aplikasi untuk versi Windows 10 yang lebih lama, Anda harus menggunakan MediaElement sebagai gantinya. Rekomendasi di atas juga berlaku untuk MediaElement , dan TransportControls properti diakses dengan cara yang sama.
Pengalaman pencarian
Mencari konten adalah salah satu fungsi yang paling umum dilakukan dalam pengalaman 10 kaki. Jika aplikasi Anda memberikan pengalaman pencarian, sangat membantu bagi pengguna untuk memiliki akses cepat ke aplikasi tersebut dengan menggunakan tombol Y di gamepad sebagai akselerator.
Sebagian besar pelanggan harus sudah terbiasa dengan akselerator ini, tetapi jika Anda suka Anda dapat menambahkan visual Y glyph ke UI untuk menunjukkan bahwa pelanggan dapat menggunakan tombol untuk mengakses fungsionalitas pencarian. Jika Anda menambahkan isjin ini, pastikan untuk menggunakan simbol dari font Segoe Xbox MDL2 Symbol ( untuk aplikasi XAML, \E426 untuk aplikasi HTML) untuk memberikan konsistensi dengan shell Xbox dan aplikasi lainnya.
Catatan
Karena font Simbol Segoe Xbox MDL2 hanya tersedia di Xbox, simbol tidak akan muncul dengan benar di PC Anda. Namun, itu akan muncul di TV setelah Anda menyebarkan ke Xbox.
Karena tombol Y hanya tersedia di gamepad, pastikan untuk menyediakan metode akses lain untuk mencari, seperti tombol di UI. Jika tidak, beberapa pelanggan mungkin tidak dapat mengakses fungsionalitas.
Dalam pengalaman 10 kaki, seringkali lebih mudah bagi pelanggan untuk menggunakan pengalaman pencarian layar penuh karena ada ruang terbatas pada layar. Baik Anda memiliki layar penuh atau layar parsial, pencarian "di tempat", kami sarankan ketika pengguna membuka pengalaman pencarian, keyboard pada layar tampak sudah terbuka, siap bagi pelanggan untuk memasukkan istilah pencarian.
Pemicu status visual kustom untuk Xbox
Untuk menyesuaikan aplikasi UWP Anda untuk pengalaman 10 kaki, kami sarankan Anda membuat perubahan tata letak saat aplikasi mendeteksi bahwa aplikasi telah diluncurkan di konsol Xbox. Salah satu cara untuk melakukan ini adalah dengan menggunakan pemicu status visual kustom. Pemicu status visual paling berguna saat Anda ingin mengedit di Blend untuk Visual Studio. Cuplikan kode berikut menunjukkan cara membuat pemicu status visual untuk 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>
Untuk membuat pemicu, tambahkan kelas berikut ke aplikasi Anda. Ini adalah kelas yang dirujuk oleh kode XAML di atas:
class DeviceFamilyTrigger : StateTriggerBase
{
private string _currentDeviceFamily, _queriedDeviceFamily;
public string DeviceFamily
{
get
{
return _queriedDeviceFamily;
}
set
{
_queriedDeviceFamily = value;
_currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
SetActive(_queriedDeviceFamily == _currentDeviceFamily);
}
}
}
Setelah menambahkan pemicu kustom, aplikasi Anda akan secara otomatis membuat modifikasi tata letak yang Anda tentukan dalam kode XAML setiap kali mendeteksi bahwa aplikasi berjalan di konsol Xbox One.
Cara lain Anda dapat memeriksa apakah aplikasi Anda berjalan di Xbox lalu membuat penyesuaian yang sesuai adalah melalui kode. Anda dapat menggunakan variabel sederhana berikut untuk memeriksa apakah aplikasi Anda berjalan di Xbox:
bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
"Windows.Xbox");
Kemudian, Anda dapat membuat penyesuaian yang sesuai dengan UI Anda di blok kode setelah pemeriksaan ini.
Ringkasan
Merancang untuk pengalaman 10 kaki memiliki pertimbangan khusus untuk memperhitungkan yang membuatnya berbeda dari merancang untuk platform lain. Meskipun Anda pasti dapat melakukan port lurus aplikasi UWP Anda ke Xbox One dan itu akan berfungsi, itu tidak akan selalu dioptimalkan untuk pengalaman 10 kaki dan dapat menyebabkan frustrasi pengguna. Mengikuti panduan dalam artikel ini akan memastikan bahwa aplikasi Anda sebaik mungkin di TV.
Artikel terkait
Windows developer