Panduan Praktis untuk Ikon Aplikasi Android: Penjelasan Ikon Adaptif (dan Cara Menghasilkan Ikon Anda dengan Benar)
Ini adalah kejutan umum bagi pengembang Android pemula: Anda memoles satu PNG persegi untuk ikon aplikasi Anda, mengekspornya dengan ukuran 512x512 yang rapi, dan itu terlihat sempurna di editor gambar Anda. Kemudian Anda menginstal build debug pada ponsel Samsung dan ikon tiba-tiba terlihat terpotong dan agak tidak berada di tengah, seolah-olah sebagian logo telah terpotong. Tidak ada yang salah dengan file itu sendiri. Masalahnya adalah satu gambar persegi tidak akan pernah bertahan jika bersentuhan dengan peluncur Android di dunia nyata, yang masing-masing akan memotong, menyamarkan, dan membentuk ulang ikon secara berbeda. Jika Anda belum mengalami hal ini, hanya masalah waktu saja sebelum Anda mengalaminya, jadi mari kita bahas apa yang terjadi dan cara memperbaikinya untuk pertama kalinya.
Mengapa PNG Kotak Tunggal Tidak Cukup Lagi
Pada tahun-tahun awal Android, ikon aplikasi persis seperti apa: PNG persegi (atau kadang-kadang berbentuk bebas) yang ditampilkan apa adanya oleh setiap peluncur. Itu berfungsi dengan baik sampai produsen mulai membedakan ponsel mereka secara visual, dan salah satu tempat termudah untuk melakukannya adalah layar beranda. Samsung menginginkan kotak yang membulat, beberapa skin OEM Cina menginginkan perlakuan sudut yang berbeda, dan stok Android akhirnya berbentuk lingkaran. Tiba-tiba, file ikon yang sama terlihat sangat berbeda, dan terkadang terlihat lebih buruk, tergantung pada ponsel siapa file tersebut digunakan.
Jawaban Google, yang diperkenalkan dengan Android 8.0 Oreo, adalah sistem ikon adaptif. Alih-alih menyediakan satu bentuk tetap, pengembang menyediakan karya seni berlapis yang disamarkan oleh sistem operasi itu sendiri ke dalam bentuk apa pun yang diinginkan peluncur tertentu. Identitas visual tetap konsisten; hanya siluet luarnya yang berubah.
Apa Sebenarnya Ikon Adaptif Itu?
Ikon adaptif dibuat dari dua lapisan terpisah, masing-masing menempati kanvas 108dp kali 108dp: lapisan latar belakang dan lapisan latar depan. Android menggabungkan keduanya dan kemudian menerapkan bentuk topeng apa pun yang digunakan peluncur saat ini, baik itu lingkaran, persegi bulat, tetesan air mata, atau yang lainnya. Struktur dua lapisan inilah yang memungkinkan Android menambahkan paralaks halus dan efek gerakan juga, karena lapisan dapat bergeser secara independen saat Anda mengetuk atau menyeret ikon.
Dalam sumber daya aplikasi, hal ini biasanya ditentukan melalui file XML seperti mipmap-anydpi-v26/ic_launcher.xml, yang hanya menunjuk ke sumber daya dapat digambar di latar belakang dan latar depan, bukan berisi data piksel itu sendiri. ic_launcher.png datar tradisional masih digunakan sebagai pengganti untuk perangkat yang menjalankan Android 7.1 atau lebih lama, yang sepenuhnya mendahului sistem ikon adaptif.
Mengapa Zona Aman Penting
Inilah bagian yang paling membuat orang tersandung. Meskipun kanvas untuk setiap lapisan berukuran 108dp kali 108dp, hanya lingkaran bagian dalam berukuran 66dp kali 66dp, yang berada di tengah kanvas tersebut, dijamin akan terlihat, apa pun bentuk topeng yang diterapkan. Wilayah dalam ini biasa disebut zona aman. Apa pun di luarnya mungkin ditampilkan pada topeng melingkar dan kemudian secara tiba-tiba terpotong pada topeng tupai atau tetesan air mata yang lebih agresif, atau sebaliknya.
Masalah inilah yang muncul saat logo digambar dekat tepi kanvas untuk memaksimalkan ukuran visualnya: logo dapat terlihat sempurna pada topeng melingkar namun terpotong tidak rata pada topeng tupai Samsung. Perbaikannya bukanlah desain ulang, hanya mengecilkan sedikit karya seni sehingga konten yang bermakna tetap berada di dalam zona aman, apa pun bentuk yang diterapkan.
Bentuk Peluncur yang Akan Anda Temui
| Membentuk | Di mana Anda akan melihatnya |
|---|---|
| Lingkaran | Stok Android, peluncur Pixel (default lama) |
| Tupai (persegi bulat) | Samsung One UI, dan beberapa skin Android lainnya |
| Kotak bulat (superellipse) | iOS, diterapkan secara otomatis oleh sistem tanpa kendali pengembang |
| Titik air mata | Ditawarkan sebagai opsi yang dapat dipilih pada beberapa versi perangkat lunak Samsung |
| Persegi dengan sudut lembut | Berbagai skin peluncur pabrikan lainnya |
Kesimpulan praktisnya adalah Anda tidak bisa memilih bentuk mana yang akan dipakai ikon Anda. Pengguna peluncur Android bahkan seringkali dapat memilih bentuk yang mereka sukai dari menu pengaturan. Satu-satunya pengungkit Anda yang sebenarnya adalah memastikan karya seni itu sendiri bertahan dengan baik, dan itulah yang dijamin oleh zona aman.
Membangun Aset: Ukuran dan Kepadatan yang Anda Butuhkan
| Ember kepadatan | Ukuran ikon peluncur |
|---|---|
| mdpi | 48x48 piksel |
| hdpi | 72x72 piksel |
| xhdpi | 96x96 piksel |
| xxhdpi | 144x144 piksel |
| xxxhdpi | 192x192 piksel |
| Ikon daftar Play Store | 512x512 piksel |
Jika Anda juga mengirimkan aplikasi di iOS, tambahkan set lainnya secara keseluruhan, karena persyaratan ikon App Store Apple melebihi 1024x1024 dan menggunakan format tidak berlapis yang benar-benar berbeda tanpa transparansi sama sekali.
Cara Manual vs Menggunakan Generator
Anda benar-benar dapat menghasilkan semua ukuran ini dengan tangan di editor gambar, atau melalui Image Asset Studio bawaan Android Studio, yang menangani penskalaan kepadatan dan pratinjau mask dengan cukup baik untuk satu proyek. Hal ini menjadi membosankan ketika Anda mempertahankan sistem desain di beberapa aplikasi, memerlukan ekspor iOS yang cocok dari karya seni utama yang sama, atau sekadar ingin cara cepat untuk memeriksa ulang bagaimana perilaku desain di setiap bentuk sebelum menerapkannya.
Hasilkan setiap ukuran dari satu gambar master
Pembuat Ikon Aplikasi kami mengambil satu gambar sumber beresolusi tinggi dan menghasilkan set lengkap keranjang kepadatan Android, struktur latar depan/latar belakang ikon adaptif, dan ukuran daftar Play Store, semuanya dari satu unggahan, sehingga Anda tidak mengekspor dan mengganti nama selusin file secara manual.
Mengekstrak Ikon Dari APK yang Ada
Terkadang kebutuhan berjalan berlawanan arah. Mungkin Anda mewarisi sebuah proyek tanpa file desain aslinya, atau Anda ingin melihat dengan tepat bagaimana pesaing menyusun ikon mereka sebelum mendesain ikon Anda sendiri, atau Anda hanya perlu menarik kembali sebuah ikon dari APK yang dibuat untuk digunakan kembali di alat terkait atau aset pemasaran. Karena APK pada dasarnya adalah arsip terstruktur yang berisi semua sumber daya aplikasi, file ikon peluncurnya secara fisik ada di dalamnya dan dapat diekstraksi secara langsung, bukan direkonstruksi dari awal.
Ekstraktor Ikon kami mengambil file-file ini dengan tepat dari APK apa pun yang Anda unggah, memberi Anda aset ikon mentah pada resolusi apa pun yang dikirimkan oleh pengembang asli, yang sering kali merupakan cara tercepat untuk memulihkan file sumber yang hilang atau mempelajari bagaimana aplikasi lain mendekati masalah desain yang sama.
Kesalahan Ikon Umum yang Ditandai dalam Tinjauan
- Memanggang dengan bantalan ekstra atau krom UI. Efek drop shadow, border, atau sudut membulat yang ditambahkan secara manual di dalam gambar bertentangan dengan masking sistem dan sering kali terlihat berlipat ganda atau tidak sejajar.
- Menggunakan latar belakang putih bersih tanpa tepi yang jelas. Pada peluncur bertema ringan, ikon hampir tidak terlihat di latar belakang layar beranda.
- Detail yang terlalu halus. Teks dan garis rumit yang terlihat tajam pada 512 piksel sering kali berubah menjadi noda yang tidak terbaca setelah diperkecil menjadi 48 piksel, seperti yang dilihat sebagian besar pengguna sehari-hari.
- Ketidakcocokan antara ikon listingan Play Store dan ikon yang dipasang. Peninjau dan pengguna sama-sama memperhatikan ketika keduanya tidak cocok, dan terbaca sebagai ceroboh atau, lebih buruk lagi, mencurigakan.
- Melupakan sepenuhnya fallback warisan. Jika aplikasi Anda masih mendukung versi Android sebelum 8.0, melewatkan fallback PNG datar dapat menyebabkan pengguna tersebut memiliki ikon yang rusak atau tampak umum.
Menguji Ikon Anda di Berbagai Bentuk Sebelum Anda Mengirimnya
Sebelum menyelesaikan sebuah ikon, ada baiknya mempratinjau ikon tersebut setidaknya di bawah topeng melingkar dan topeng tupai secara berdampingan, daripada berasumsi bahwa ikon tersebut akan diterjemahkan dengan rapi. Image Asset Studio Android Studio menyertakan pratinjau langsung di beberapa bentuk peluncur karena alasan ini, dan hanya perlu satu menit untuk menangkap masalah yang hanya akan muncul setelah publikasi, ketika pengguna pada bentuk peluncur yang "salah" melaporkan kembali bahwa ada sesuatu yang terlihat tidak beres.
Poin Penting
- Ikon adaptif menggunakan dua lapisan, latar belakang dan latar depan, pada kanvas 108dp, yang disamarkan oleh sistem menjadi berbagai bentuk per peluncur.
- Hanya zona aman 66dp bagian dalam yang dijamin terlihat di setiap bentuk topeng; simpan karya seni yang bermakna di dalamnya.
- Anda masih memerlukan ikon lama yang datar untuk perangkat yang menjalankan Android 7.1 atau lebih lama.
- Generator dapat menghasilkan setiap kepadatan yang diperlukan dan ukuran daftar Play Store dari satu gambar master, sehingga menghemat banyak pekerjaan ekspor manual.
- Ikon dapat diekstraksi langsung dari APK yang ada ketika file sumber hilang atau Anda perlu mempelajari aset aplikasi lain.
Pertanyaan yang Sering Diajukan (FAQ)
Berapa ukuran piksel sebenarnya yang diperlukan untuk ikon cantuman Play Store?
512x512 piksel, PNG 32-bit dengan saluran alfa. Ini terpisah dari ukuran ikon peluncur yang disertakan di dalam APK itu sendiri.
Apakah lapisan latar belakang ikon adaptif saya harus berwarna solid?
Warnanya belum tentu datar, namun secara umum harus buram dan sederhana, karena dapat digeser, diperkecil, atau ditutupi dengan cara yang tidak dapat Anda kendalikan sepenuhnya. Latar belakang yang sibuk atau transparan cenderung terlihat tidak konsisten di seluruh peluncur.
Bisakah saya menggunakan kembali desain ikon adaptif Android saya langsung untuk iOS?
Tidak secara langsung. iOS menggunakan satu gambar persegi datar dengan pembulatan sudut yang diterapkan oleh sistem, bukan lapisan terpisah, sehingga Anda biasanya mengekspor versi rata yang disederhanakan dari karya seni yang sama untuk iOS.
Mengapa ikon saya terlihat bagus di ponsel saya tetapi buram di daftar Play Store?
Hal ini biasanya terjadi ketika ikon daftar diperbesar dari gambar sumber kecil. Selalu mulai dari file master minimal 1024x1024 piksel dan ekspor setiap ukuran yang diperlukan ke bawah dari itu.
Apa yang terjadi jika saya melewatkan penggantian ikon lama untuk versi Android yang lebih lama?
Perangkat dengan Android 7.1 atau versi lebih lama, yang tidak mendukung ikon adaptif, mungkin akan kembali ke ikon sistem generik atau menampilkan ikon Anda dengan salah. Aman untuk melewatinya hanya jika versi Android minimum yang didukung aplikasi Anda adalah 8.0 atau lebih tinggi.
Anda tidak memerlukan latar belakang teori desain untuk semua ini, cukup kesadaran bahwa ikon Anda akan dibentuk ulang dengan cara yang tidak dapat Anda kendalikan saat ikon tersebut lepas dari tangan Anda. Rancanglah zona aman, pertahankan fallback lama, hasilkan setiap ukuran yang diperlukan dari satu file master yang bersih, dan ikon Anda akan tetap bertahan di peluncur mana pun ikon tersebut berada.