Halaman ini diterjemahkan oleh Cloud Translation API.

Tata letak

{i>Layout<i} adalah {i>template<i} struktural yang memberikan kerangka kerja untuk memelihara konsistensi visual di seluruh aplikasi Anda. Dengan mendefinisikan kisi-kisi visual, spasi, dan bagian, tata letak membentuk struktur yang kohesif dan terorganisir untuk penyajian informasi dan elemen UI.

Sorotan

Tidak seperti web atau perangkat seluler, TV memiliki rasio aspek layar tetap sebesar 16:9.
Optimalkan tata letak pada sumbu horizontal dan vertikal untuk kemudahan penggunaan dan kontrol.

Prinsip

Panduan untuk membantu Anda membuat keputusan desain saat mendesain tata letak TV.

Desain untuk perangkat layar besar

Sejak populernya HDTV, TV persegi panjang dengan rasio aspek 16:9 menjadi standar. Secara historis, televisi diproduksi dalam bentuk persegi yang dikenal dengan rasio aspek 4:3 atau 1,33:1.

Desain di platform Android

Saat mendesain, gunakan dp untuk menampilkan elemen secara seragam pada layar dengan kepadatan berbeda, seperti perangkat Android lainnya. Selalu desain pada resolusi MDPI pada 960px * 540px.

Pada MDPI, 1 px = 1 dp.

Aset harus menargetkan 1080p. Hal ini memungkinkan sistem Android untuk memperkecil skala elemen tata letak menjadi 720p, jika perlu.

Memastikan keamanan visibilitas dan pemindaian berlebih

Memastikan elemen penting selalu terlihat oleh pengguna. Untuk melakukan ini, posisikan elemen dengan margin 5% dari 48 dp di sisi kiri dan kanan, dan 27 dp di bagian atas dan bawah tata letak. Tindakan ini memastikan elemen layar tata letak berada dalam overscan.

Isi layar penuh

Jangan menyesuaikan atau memotong elemen layar latar belakang ke area aman overscan. Sebagai gantinya, izinkan tampilan sebagian elemen di luar layar. Hal ini memastikan bahwa semua layar menampilkan elemen latar belakang dan di luar layar dengan benar.

Mengoptimalkan dengan sumbu

Pertimbangkan cara orang menggunakan remote control dengan TV mereka. Pastikan antarmuka TV Anda mudah digunakan dengan remote. Rancang setiap arah (atas, bawah, kiri, kanan) agar memiliki tujuan dan pola navigasi yang jelas untuk membantu pengguna memahami cara menjelajahi banyak opsi.

Tata Letak

Ukuran layar TV berbeda dari satu perangkat ke perangkat lainnya. Karena TV modern memiliki dengan rasio aspek 16:9, sebaiknya desain aplikasi Anda dengan Ukuran layar 960 x 540 piksel. Hal ini memastikan semua elemen dapat diubah ukurannya secara proporsional untuk layar HD atau 4K.

{i>Layout Grid<i}

Pemindaian margin berlebih

Margin {i>overscan<i} adalah ruang antar konten, dan tepi kiri dan kanan layar.

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

Margin batas ini melindungi elemen utama dari potensi masalah pemindaian berlebih. Untuk menjaga keamanan konten dan informasi Anda, gunakan tata letak margin 5% (58 dp di bagian samping dan 28 dp di tepi atas dan bawah).

Pemindaian margin berlebih

Tiang dan {i>gutter<i}

Konten ditempatkan ke area layar yang memiliki kolom dan {i>gutter<i}. Sistem {i>grid<i} memiliki 12 kolom. {i>Gutter<i} adalah ruang di antara kolom yang membantu membagi konten.

Gunakan 12 kolom yang memiliki lebar 52 dp dengan spasi 20 dp di antara kolom tersebut. Harus ada ruang sebesar 58 dp di kedua sisi dan vertikal 4 dp jarak antar baris.

Kolom & Talang

Pola layout

Ada tiga pola tata letak yang tersedia bergantung pada tujuan tujuan dan perangkat tampilan: {i>Horizontal Stack Layout<i}, {i>Vertical Stack Layout<i}, dan {i>Grid Layout<i}.

Tata Letak Tumpukan Horizontal

Tata Letak Tumpukan Horizontal mengatur komponen secara horizontal. Mereka dapat bervariasi dalam hal ukuran, rasio, atau format. Tata letak ini sering yang digunakan untuk mengelompokkan konten dan komponen.

Tata Letak Tumpukan Horizontal

Tata Letak Tumpukan Vertikal

Tata Letak Tumpukan Vertikal mengatur komponen secara vertikal, memungkinkan Anda untuk menggunakan ukuran, rasio, dan format yang fleksibel. Umumnya digunakan untuk mengelompokkan berbagai jenis teks, komponen interaktif, dan pola tata letak bersama-sama.

Tata Letak Tumpukan Vertikal

Tata Letak Petak

Grid adalah kumpulan kolom dan baris yang berpotongan, dan Grid Tata letak menampilkan konten dalam petak ini. Ini mengatur konten secara logis sehingga memudahkan pengguna untuk melakukan navigasi dan penjelajahan.

Tata Letak Petak

Untuk mencegah tumpang tindih, penting untuk mempertimbangkan padding di antara item dan peningkatan ukuran status terfokus. Misalnya, ketika fokus pada (seperti kartu) ditandai. Jika Anda menggunakan saran Tata Letak {i>Grid<i} (12 kolom dalam 52dp, dengan {i>gutter<i} dalam 20dp), lihat Kartu untuk {i>layout<i} dan pratinjau komponen yang direkomendasikan.

Struktur tata letak

Berikut adalah beberapa struktur tata letak untuk membantu Anda membuat keputusan saat mendesain tata letak TV. Dengan membagi layar TV secara horizontal, dapat membantu memisahkan berbagai jenis komponen, mengomunikasikan informasi hierarki dan logika navigasi. Panel dapat berisi beberapa kolom unit. Setiap panel dapat menghosting pola tata letak yang berbeda seperti Stack Layout dan {i>Grid Layout<i}.

Tata letak panel tunggal

Tata letak panel tunggal dapat membantu mendorong perhatian ke konten utama. Gunakan dengan pengalaman yang fokus pada konten dan halaman informasi penting.

Tata letak dua panel

Tata letak 2 panel berperforma lebih baik saat halaman menampilkan konten hierarkis. Model ini banyak digunakan pada pengalaman yang berfokus pada tugas.

Kelebihan kognitif

Konten yang rumit dan tidak jelas dapat menyebabkan kebingungan, gangguan, dan penurunan kualitas engagement. Buat desain yang ringkas, rapi, dan menarik informasi penting saja.

Hindari menggunakan terlalu banyak panel untuk mengelompokkan konten. Hal ini menciptakan beban kognitif yang tidak perlu kepada pengguna.

Anjuran

Tempatkan konten terkait bersama-sama dalam satu panel. Hal ini membantu pengguna memahami pengelompokan konten.

Larangan

Hindari menggunakan terlalu banyak panel untuk mengelompokkan konten. Hal ini menciptakan beban kognitif dan hierarki yang tidak perlu kepada pengguna.

Panel memisahkan dan mengatur konten secara visual. Mereka membantu memandu pengguna, serta dapat membuat antarmuka lebih intuitif yang meningkatkan pengalaman.

Anjuran

Mengelompokkan konten berdasarkan jalur bacaan pengguna. Pastikan jalur fokus selaras dengan hierarki atau logika pengambilan keputusan.

Larangan

Jangan mengarahkan perhatian pengguna bolak-balik antar-panel. Hal ini menciptakan jalur fokus yang tidak alami yang tidak selaras dengan kebiasaan membaca pengguna.

Template tata letak

Template tata letak mempromosikan keteraturan, konsistensi, dan kemudahan. Desain menciptakan pengalaman UI nyaman yang dengan jelas mengkomunikasikan pengguna, dan ke mana mereka dapat menuju.

Cari

Template browser menampilkan "cluster" konten media atau baris dalam tumpukan vertikal. Pengguna menavigasi ke atas dan ke bawah untuk menjelajahi baris, dan menavigasi ke kanan dan ke kiri untuk menjelajahi konten di baris tertentu.

Overlay kiri

Template navigasi kiri menampilkan panel overlay di sisi kiri layar. Halaman ini biasanya menampilkan navigasi atau item yang dapat ditindaklanjuti sesuai konten di latar belakang.

Overlay kanan

Template overlay kanan menampilkan panel overlay di sisi kanan layar. Biasanya ini menampilkan item yang dapat Anda tindak lanjuti secara independen terhadap konten di latar belakang.

Overlay tengah

Template overlay tengah menampilkan elemen modal yang ditempatkan di atas tampilan yang ada. Protokol ini digunakan untuk mengomunikasikan informasi mendesak atau meminta keputusan.

Overlay bawah

Template overlay bawah biasanya digunakan untuk sheet bawah. Sheet bawah adalah permukaan berisi konten pelengkap yang ditambatkan ke bagian bawah layar. API ini memungkinkan Anda membuat alur mini tanpa kehilangan konteks halaman saat ini.

Tindakan

Template tindakan menampilkan judul dan subtitel di sebelah kiri, dengan opsi atau tindakan di sebelah kanan. Pengguna biasanya diminta untuk membuat opsi atau melakukan tindakan dengan template ini.

Detail Konten

Template detail konten menampilkan konten dalam Tata Letak Bertumpuk Horizontal. Konten umumnya meliputi judul, metadata, deskripsi singkat, tindakan cepat, dan klaster informasi terkait.

Kompilasi

Template kompilasi menampilkan detail item di sisi kiri layar, seperti podcast, dengan elemennya, misalnya episodenya, di panel kanan.

Grid

Template petak menampilkan koleksi konten dalam petak yang teratur. Mode Izin menampilkan konten dengan logika navigasi jarak jauh yang jelas, dan pengalaman penjelajahan yang optimal.