Ikon Tampilan Daftar

Ikon tampilan daftar sangat mirip dengan ikon dialog, tetapi menggunakan efek bayangan dalam dengan sumber cahaya berada di atas objek. Class ini juga didesain untuk hanya digunakan dalam ListView. Contohnya mencakup aplikasi Setelan.

Seperti yang dijelaskan dalam Menyediakan Set Ikon Khusus Kepadatan, Anda harus membuat set ikon terpisah untuk layar berkepadatan rendah, sedang, dan tinggi. Hal ini memastikan ikon Anda akan ditampilkan dengan benar di berbagai perangkat tempat aplikasi Anda dapat diinstal. Lihat Tabel 1 untuk listingan ukuran ikon selesai yang direkomendasikan untuk setiap kepadatan. Selain itu, lihat Tips untuk Desainer untuk saran tentang cara bekerja dengan beberapa kumpulan ikon.

Tabel 1. Ringkasan dimensi ikon tampilan daftar yang selesai untuk ketiga kepadatan layar umum.

ldpi (120 dpi)
(Layar berkepadatan rendah)
mdpi (160 dpi)
(Layar berkepadatan sedang)
hdpi (240 dpi)
(Layar berkepadatan tinggi)
xhdpi (320 dpi)
(Layar berkepadatan ekstra tinggi)
Ukuran Ikon Tampilan Daftar 24x24 piksel 32 x 32 piksel 48x48 piksel 64x64 piksel

Final art harus diekspor sebagai file PNG transparan. Jangan sertakan warna latar belakang.

Template untuk membuat ikon di Adobe Photoshop tersedia di Paket Template Ikon.

Semua Versi Android

Panduan berikut menjelaskan cara mendesain ikon tampilan daftar untuk semua versi platform Android.

Struktur

  • Ikon tampilan daftar biasanya memiliki safeframe 1 piksel, tetapi Anda dapat menggunakan area safeframe untuk tepi anti-alias bentuk bulat.
  • Semua dimensi yang ditentukan didasarkan pada ukuran artboard 32x32 piksel di Photoshop. Jangan ubah 1 piksel padding di sekitar kotak pembatas di dalam template.
Tampilan struktur ikon
tampilan daftar.

Gambar 1. Safeframe dan gradien isi untuk ikon tampilan daftar. Ukuran ikon sebesar 32x32.

Cahaya, efek, dan bayangan

Ikon tampilan daftar berbentuk datar dan menghadap depan dengan bayangan dalam. Dibuat oleh gradien cahaya dan bayangan dalam, warna ini akan tampak menonjol pada latar belakang gelap.

Tampilan
cahaya, efek, dan bayangan untuk ikon tampilan daftar.

Gambar 2. Cahaya, efek, dan bayangan untuk ikon tampilan daftar.

1.Bayangan dalam:hitam | opasitas 57 % | sudut 120° | mode campuran normal | jarak 1px | ukuran 1px
2.Latar belakang:hitam | warna sistem standar
Ikon-ikon ini hanya ditampilkan dalam tampilan daftar.
Catatan: Ikon tampilan daftar terdapat di artboard berukuran 32x32 piksel di Photoshop, tanpa safeframe.

Langkah demi langkah

  1. Tambahkan efek yang ada dalam Gambar 2 untuk filter status yang sesuai.
  2. Ekspor ikon dengan ukuran 32x32 sebagai file PNG dengan transparansi diaktifkan.
  3. Buat bentuk dasar menggunakan alat seperti Adobe Illustrator.
  4. Impor bentuk ke alat seperti Adobe Photoshop dan atur skala agar sesuai dengan gambar 32x32 piksel di latar belakang transparan.