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

  • Ikon Launcher pada perangkat mobile harus48x48 dp.
  • Ikon Launcher untuk ditampilkan di Google Play harus 512x512 piksel.

Ukuran

  • Aset penuh, 48x48 dp

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

  • Ikon panel tindakan untuk ponsel harus 32x32 dp.

Focal area & proporsi

  • Aset penuh, 32x32 dp
    Optical persegi, 24x24 dp

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
Warna: # FFFFFF
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

  • Ikon kecil harus 16x16 dp.

Focal area & proporsi

  • Aset penuh, 16x16 dp
    Optical persegi, 12x12 dp

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

  • Ikon pemberitahuan harus24x24 dp.

Focal area & proporsi

  • Aset penuh, 24x24 dp
    Optical persegi, 22x22 dp

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 AsetAwalanContoh
Ikonic_ic_star.png
Ikon Launcheric_launcheric_launcher_calendar.png
Ikon menu dan ikon Action Baric_menuic_menu_archive.png
Ikon bar statusic_stat_notifyic_stat_notify_msg.png
Ikon Tabic_tabic_tab_recent.png
Ikon Dialogic_dialogic_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. png 
xxhdpi / ... _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:

Copyright © 2012 Nugasoft Production.