Apa yang dimaksud dengan 'mendesain ikon pada skala 100%'?

13

Dari panduan Desain Material Android ,

Ikon sistem ditampilkan pada 24dp. Saat membuat ikon, penting untuk merancang pada skala 100% untuk akurasi piksel.

Apa yang dimaksud dengan mendesain pada skala 100%? Apakah ini berarti ikon tersebut harus memiliki dimensi 24 * 24 dp? Atau apakah itu berarti mereka harus dalam format file di mana penskalaan tidak akan mengakibatkan kehilangan data atau distorsi dll, seperti format file SVG?

Penghiburan
sumber
1
Ada tulisan hebat yang ditulis tentang ini di Stack Overflow - Perbedaan antara px, dp, dip dan sp di Android?
AndrewH
1
@AndrewH Aku tahu bedanya! Pertanyaannya adalah tentang apa yang dimaksud dengan "merancang sesuatu pada skala 100%"!
Solace

Jawaban:

23

Mendesain pada skala 100% berarti mendesain pada ukuran (dalam piksel) tempat Anda akan menampilkan / menampilkan ikon Anda.

Jika Anda mendesain ikon 24px × 24px, Anda mengatur artboard di Illustrator atau dokumen di Photoshop atau apa pun yang Anda gunakan untuk 24px × 24px.

Seperti dikutip dari panduan Material Design, ini untuk akurasi piksel. Jika Anda bekerja pada skala yang lebih besar, atau bekerja dalam format vektor tanpa memperhitungkan piksel akun, kemudian mengurangi ukurannya menjadi 24px — bentuk, jalur, titik, atau piksel Anda tidak akan disejajarkan dengan kisi-kisi piksel dan Anda akan mendapatkan efek seperti yang diilustrasikan dalam contoh ini:

masukkan deskripsi gambar di sini

Perlu dicatat, karena dp bukan unit pengukuran absolut dan diterjemahkan ke sejumlah ukuran piksel aktual yang berbeda — mendesain pada skala 100% juga menyiratkan perancangan untuk setiap ukuran piksel secara independen. (Terima kasih Yorik!)

Cai
sumber
Terima kasih banyak atas jawaban yang sangat tepat dan jelas. =)
Solace
Penting untuk menyadari juga bahwa "24 dp" menjadi turunan "pengukuran skala geser" berarti bahwa "desain untuk skala 100%" dalam konteks yang dikutip benar-benar menyiratkan Anda memerlukan ikon yang berbeda untuk setiap kepadatan yang mungkin, dalam kondisi ideal.
Yorik
1
@Yorik Poin yang sangat bagus. Memperbarui jawaban saya.
Cai
Anda tidak perlu harus bekerja di setiap resolusi secara independen: 48 dapat mengambil desain yang sama persis dengan 24, sementara 126, 128, 64, 32 semuanya dapat berbagi juga. Hand pixeling 16px mungkin akan dibutuhkan. Lihat posting ini untuk resolusi paling umum.
curiousdannii