Ikonografi dalam Merancang Icon Aplikasi Android
Ikonografi
Sebuah ikon adalah grafis yang mengambil sebagian kecil dari layar real estat dan memberikan cepat, representasi intuitif dari suatu tindakan, status, atau sebuah aplikasi.
Ketika Anda merancang ikon untuk aplikasi Anda, penting untuk diingat bahwa aplikasi Anda dapat diinstal pada berbagai perangkat yang menawarkan berbagai kepadatan pixel, sebagaimana disebutkan dalam Devices dan Menampilkan . Tapi Anda dapat membuat ikon Anda tampak hebat pada semua perangkat dengan menyediakan setiap ikon dalam beberapa ukuran. Ketika aplikasi Anda berjalan, Android memeriksa karakteristik layar perangkat dan memuat aset kepadatan khusus yang sesuai untuk aplikasi Anda.
Karena Anda akan memberikan setiap ikon dalam beberapa ukuran untuk mendukung kepadatan yang berbeda, pedoman desain di bawah ini mengacu pada dimensi ikon dalam satuan dp, yang didasarkan pada dimensi pixel dari kepadatan menengah (MDPI) layar.
Jadi, untuk membuat ikon untuk kepadatan yang berbeda, Anda harus mengikuti rasio 2:3:4:6 skala antara empat kepadatan primer (sedang, tinggi, x-tinggi, dan xx-tinggi, masing-masing). Sebagai contoh, perhatikan bahwa ukuran untuk ikon peluncur ditentukan untuk menjadi 48x48 dp. Ini berarti baseline (MDPI) aset 48x48 px, dan kepadatan tinggi (HDPI) aset harus 1.5x baseline di 72x72 px, dan kepadatan x tinggi (XHDPI) aset harus 2x baseline pada 96x96 px, dan seterusnya.
Catatan: Android juga mendukung low-density (LDPI) layar, namun Anda biasanya tidak perlu menciptakan aset kustom pada ukuran ini karena Android efektif turun-skala aset HDPI Anda dengan 1/2 sesuai dengan ukuran yang diharapkan.
Peluncur
Ikon peluncur adalah representasi visual dari aplikasi Anda pada layar Home atau All Apps. Karena pengguna dapat mengubah wallpaper layar Home, pastikan bahwa ikon peluncur Anda jelas terlihat pada setiap jenis latar belakang.
Ukuran & skala
Ukuran
Gaya
Gunakan siluet yang berbeda. Tiga dimensi, tampilan depan, dengan perspektif sedikit seperti jika dilihat dari atas, sehingga pengguna merasakan beberapa kedalaman.
Aksi Bar
Ikon panel tindakan adalah tombol grafis yang mewakili tindakan yang paling penting orang dapat mengambil dalam aplikasi Anda. Masing-masing harus menggunakan metafora sederhana yang mewakili sebuah konsep tunggal yang kebanyakan orang dapat memahami sekilas.
Mesin terbang yang telah ditetapkan harus digunakan untuk tindakan umum tertentu seperti "refresh" dan "berbagi." Link download di bawah ini menyediakan paket dengan ikon yang ditingkatkan untuk berbagai kepadatan layar dan cocok untuk digunakan dengan Holo Cahaya dan tema Holo gelap. Paket ini juga mencakup ikon unstyled bahwa Anda dapat memodifikasi agar sesuai dengan tema Anda, selain Adobe ® Illustrator ® file source untuk kustomisasi lebih lanjut.
Ukuran & skala
Focal area & proporsi
Gaya
Pictographic, datar, tidak terlalu rinci, dengan kurva halus atau bentuk tajam. Jika grafis tipis, putar 45 ° ke kiri atau kanan untuk mengisi ruang fokus. Ketebalan stroke dan ruang negatif harus minimal 2 dp.
Warna
Warna: # 333333
Diaktifkan: 60% opacity
Dinonaktifkan: 30%opacity
Diaktifkan: 60% opacity
Dinonaktifkan: 30%opacity
Warna: # FFFFFF
Opacity 80%: Diaktifkan
Dinonaktifkan: 30%opacity
Opacity 80%: Diaktifkan
Dinonaktifkan: 30%opacity
Kecil / Kontekstual Ikon
Dalam tubuh aplikasi Anda, menggunakan ikon kecil untuk tindakan permukaan dan / atau menyediakan status untuk item tertentu. Misalnya, dalam aplikasi Gmail, setiap pesan memiliki ikon bintang yang menandai pesan sebagai penting.
Ukuran & skala
Focal area & proporsi
Gaya
Netral, datar, dan sederhana.Bentuk diisi lebih mudah untuk melihat dari stroke tipis. Gunakan metafora visual yang tunggal sehingga pengguna dapat dengan mudah mengenali dan memahami tujuannya.
Warna
Gunakan warna non-netral hemat dan dengan tujuan. Sebagai contoh, Gmail menggunakan kuning di ikon bintang untuk menunjukkan pesan bookmarked.Jika ikon ditindaklanjuti, pilihlah warna yang kontras dengan baik dengan latar belakang.
Pemberitahuan Ikon
Jika aplikasi Anda menghasilkan pemberitahuan, memberikan ikon bahwa sistem dapat ditampilkan dalam status bar setiap kali notifikasi baru tersedia.
Ukuran & skala
Focal area & proporsi
Gaya
Jauhkan gaya datar dan sederhana, menggunakan tunggal, metafora visual yang sama seperti ikon peluncur Anda.
Warna
Ikon pemberitahuan seluruhnya harus putih. Juga, sistem dapat menurunkan dan / atau menggelapkan ikon.
Tips Desain
Berikut adalah beberapa tips yang mungkin berguna saat Anda membuat ikon atau aset lainnya ditarik untuk aplikasi Anda. Tips ini mengasumsikan Anda menggunakan Adobe ® Photoshop ® atau raster serupa dan Program editing gambar vektor.
Gunakan bentuk vektor di mana mungkin
Banyak program editing gambar seperti Adobe ® Photoshop ® memungkinkan Anda untuk menggunakan kombinasi bentuk vektor dan lapisan raster dan efek. Bila mungkin, gunakan bentuk vektor sehingga jika kebutuhan muncul, aset dapat ditingkatkan tanpa kehilangan detail dan tepi kerenyahan.
Menggunakan vektor juga memudahkan untuk menyelaraskan tepi dan sudut untuk batas pixel dengan resolusi yang lebih kecil.
Mulailah dengan artboards besar
Karena Anda akan perlu untuk menciptakan asset untuk kepadatan layar yang berbeda, yang terbaik adalah untuk memulai desain ikon Anda pada artboards besar dengan dimensi yang merupakan kelipatan dari ukuran sasaran ikon.Misalnya, ikon peluncur adalah 48, 72, 96, atau lebar 144 piksel, tergantung pada kerapatan layar (mdpi, hdpi, xhdpi, dan xxhdpi, masing-masing). Jika Anda awalnya menggambar ikon peluncur pada artboard 864x864, akan lebih mudah dan lebih bersih untuk menyesuaikan ikon ketika Anda skala artboard ke ukuran target penciptaan aset akhir.
Ketika scaling, redraw lapisan bitmap yang diperlukan
Jika Anda ditingkatkan gambar naik dari lapisan bitmap, bukan dari lapisan vektor, lapisan-lapisan perlu digambar ulang secara manual untuk tampil tajam dengan kepadatan tinggi. Sebagai contoh jika lingkaran 60x60 dicat sebagai bitmap untuk mdpi akan perlu dicat sebagai lingkaran 90x90 untuk hdpi.
Gunakan konvensi penamaan umum untuk aset ikon
Cobalah untuk nama file sehingga aset terkait akan mengelompokkan dalam direktori ketika mereka diurutkan berdasarkan abjad. Secara khusus, hal ini membantu untuk menggunakan prefiks umum untuk setiap jenis ikon. Sebagai contoh:
| Jenis Aset | Awalan | Contoh |
|---|---|---|
| Ikon | ic_ | ic_star.png |
| Ikon Launcher | ic_launcher | ic_launcher_calendar.png |
| Ikon menu dan ikon Action Bar | ic_menu | ic_menu_archive.png |
| Ikon bar status | ic_stat_notify | ic_stat_notify_msg.png |
| Ikon Tab | ic_tab | ic_tab_recent.png |
| Ikon Dialog | ic_dialog | ic_dialog_info.png |
Perhatikan bahwa Anda tidak diharuskan untuk menggunakan prefiks bersama dari setiap jenis-melakukannya adalah hanya untuk kenyamanan Anda.
Mengatur ruang kerja yang mengatur file dengan kerapatan
Mendukung beberapa kepadatan layar berarti Anda harus membuat beberapa versi dari ikon yang sama. Untuk membantu menjaga beberapa salinan file yang aman dan mudah untuk menemukan, kami menganjurkan untuk membuat struktur direktori di ruang kerja anda yang mengatur file aset berdasarkan kepadatan sasaran. Sebagai contoh:
art / ... mdpi / ... _pre_production / ... working_file. psd finished_asset. png hdpi / ... _pre_production / ... working_file. psd finished_asset. png xhdpi / ... _pre_production / ... working_file. psd finished_asset. pngxxhdpi / ... _pre_production / ... working_file PSD finished_asset. png.
Karena struktur dalam ruang kerja Anda mirip dengan aplikasi, Anda dapat dengan cepat menentukan aset harus disalin ke setiap direktori sumber. Memisahkan aset oleh kepadatan juga membantu Anda mendeteksi adanya variasi dalam nama file di kepadatan, yang penting karena aset sesuai untuk kerapatan yang berbeda harus berbagi nama file yang sama.
Sebagai perbandingan, inilah struktur direktori sumber daya aplikasi khas:
res / ... ditarik-ldpi / ... finished_asset. png ditarik-mdpi / ... finished_asset. png ditarik-hdpi / ... finished_asset. png ditarik-xhdpi / ... finished_asset. png
Untuk informasi lebih lanjut tentang cara untuk menghemat sumber daya dalam proyek aplikasi, lihat Menyediakan Resources .
Hapus metadata yang tidak perlu dari aset akhir
Meskipun alat Android SDK secara otomatis akan remuk PNGs ketika kemasan sumber aplikasi ke aplikasi biner, praktik yang baik adalah untuk menghapus header yang tidak perlu dan metadata dari aset PNG Anda. Alat seperti optipng ataupngcrush dapat memastikan bahwa metadata ini akan dihapus dan gambar ukuran file aset Anda dioptimalkan.
Ke Jakarta
0 komentar: