Halaman ini diterjemahkan oleh Cloud Translation API.

Petak

Tampilan petak menampilkan dua kolom gambar atau lebih yang merepresentasikan item konten, dengan teks singkat di bawah setiap gambar. Tampilan ini paling baik jika pengguna terutama mengandalkan gambar untuk membuat pilihan mereka.

Petak dapat di-scroll secara vertikal dan dapat bervariasi dalam ukuran, spasi, dan jumlah kolom. Konten dalam petak juga dapat dikelompokkan ke dalam kategori.

Komponen item daftar

Daftar menyediakan cara alternatif untuk menampilkan konten yang memerlukan teks penjelasan yang lebih banyak

Anatomi

{i>Grid<i} berisi teks dan kontrol UI. Karena pengguna harus meresponsnya, gambar tidak boleh terhalang, baik oleh elemen lain atau oleh tepi layar.

Item petak

Teks utama dan sekunder

Latar belakang petak

Spesifikasi

Label tata letak

Definisi E, M, KL, P, Flex

Komponen item daftar

Spesifikasi, pedoman gaya, dan lainnya

Kisi konten (3 atau 4 kolom)

Petak aplikasi (4 kolom)

Petak aplikasi dengan item yang sering digunakan di baris atas

Penempatan ikon indikator dalam tata letak petak

Menskalakan tata letak

Tata letak referensi ini menunjukkan cara menyesuaikan {i>grid<i} untuk mengakomodasi layar dengan berbagai lebar dan tinggi. (Kategori lebar dan tinggi ditentukan di bagian Tata Letak.) Perlu diketahui bahwa semua nilai piksel dalam piksel yang dirender, sebelum pengambilan sampel menurun atau pengambilan sampel naik terjadi.

Tata Letak

Margin, keyline, dan padding untuk berbagai ukuran layar

Label tata letak

Definisi E, M, KL, P, Flex

Layar lebar standar

Layar lebar

Layar sangat lebar dan super lebar

Jarak vertikal petak aplikasi di layar dengan berbagai ketinggian

Untuk layar pendek, spasi vertikal harus dikurangi antara item konten petak serta antara ikon dan judul aplikasi.

Gaya

Pedoman tipografi

Referensi skala dan petak, contoh tipografi, dan lainnya

Panduan warna

Palet, nilai elevasi dan opasitas, dan lainnya

Tipografi

Gaya jenis	Jenis Huruf	Bobot	Ukuran (dp)
Bodi 1	Roboto	Rutin	32
Bodi 2	Roboto	Rutin	28
Bodi 3	Roboto	Rutin	24

Warna

Elemen	Warna(mode hari)	Warna (mode malam)
Jenis / ikon utama	Putih	Putih @ 88%
Jenis / ikon sekunder	Putih @ 72%	Putih @ 60%
Garis pemisah	Putih @ 22%	Putih @ 12%
Latar belakang petak	Hitam	Hitam
Scrim konten	T/A	Hitam @ 22%
Pemotongan gradien	Hitam @ 0-100% dalam 10% ruang teks	Hitam @ 0-100% dalam 10% ruang teks