Un ghid practic pentru pictogramele aplicațiilor Android: pictogramele adaptive explicate (și cum să le generați corect)
Este o surpriză comună pentru dezvoltatorii Android pentru prima dată: lustruiți un singur PNG pătrat pentru pictograma aplicației dvs., îl exportați la o rezoluție ordonată de 512x512 și arată perfect în editorul dvs. de imagini. Apoi instalați o versiune de depanare pe un telefon Samsung și pictograma pare brusc decupată și ușor decentrată, ca și cum o parte a logo-ului a fost tăiată. Nu este nimic în neregulă cu fișierul în sine. Problema este că o singură imagine pătrată nu va supraviețui niciodată contactului cu lumea reală a lansatoarelor Android, fiecare dintre acestea decupând, maschând și remodelând pictogramele în mod diferit. Dacă încă nu te-ai întâlnit cu asta, este doar o chestiune de timp înainte să o faci, așa că haideți să vedem ce se întâmplă sub capotă și cum să faceți bine de prima dată.
De ce un singur PNG pătrat nu mai este suficient
În primii ani ai Android, pictogramele aplicațiilor erau exact așa cum arătau: un singur PNG pătrat (sau ocazional în formă liberă) pe care fiecare lansator îl afișa așa cum este. A funcționat bine până când producătorii au început să-și diferențieze telefoanele vizual, iar unul dintre cele mai ușoare locuri pentru a face asta a fost ecranul de pornire. Samsung dorea pătrate rotunjite, unele piese OEM chinezești doreau tratamente diferite pentru colțuri, iar stocul Android s-a stabilit în cele din urmă pe cercuri. Dintr-o dată, exact același fișier pictogramă arăta vizibil diferit și uneori vizibil mai rău, în funcție de telefonul căruia a aterizat.
Răspunsul Google, introdus cu Android 8.0 Oreo, a fost sistemul adaptiv de pictograme. În loc să furnizeze o formă fixă, dezvoltatorii furnizează lucrări de artă stratificate pe care sistemul de operare însuși o maschează în orice formă o preferă un anumit lansator. Identitatea vizuală rămâne consistentă; doar silueta exterioară se schimbă.
Ce este exact o pictogramă adaptivă?
O pictogramă adaptivă este construită din două straturi separate, fiecare ocupând o pânză de 108dp pe 108dp: un strat de fundal și un strat de prim-plan. Android combină cele două împreună și apoi aplică orice formă de mască pe care o folosește lansatorul actual, fie că este un cerc, un pătrat rotunjit, o lacrimă sau cu totul altceva. Structura cu două straturi este cea care permite Androidului să adauge și efecte subtile de paralaxă și mișcare, deoarece straturile se pot deplasa independent atunci când atingeți sau glisați o pictogramă.
În resursele unei aplicații, acest lucru este de obicei definit printr-un fișier XML, cum ar fi mipmap-anydpi-v26/ic_launcher.xml, care indică pur și simplu spre desenele de fundal și din prim-plan, mai degrabă decât să conțină date pixeli în sine. Un ic_launcher.png plat tradițional este încă păstrat ca o rezervă pentru dispozitivele care rulează Android 7.1 sau o versiune anterioară, care preced sistemul de pictograme adaptive în întregime.
De ce contează zona de siguranță
Iată partea care provoacă cel mai mult oamenii. Chiar dacă pânza pentru fiecare strat este de 108 dp pe 108 dp, doar cercul interior de 66 dp cu 66 dp, centrat în acea pânză, este garantat să fie vizibil, indiferent de forma de mască aplicată. Această regiune interioară este în mod obișnuit numită zonă sigură. Orice lucru din afara ei s-ar putea afișa pe o mască circulară și apoi tăiat brusc pe o mască mai agresivă de tip squircle sau lacrimă, sau invers.
Acesta este exact genul de problemă care apare atunci când un logo este desenat aproape de marginile pânzei pentru a-și maximiza dimensiunea vizuală: poate arăta perfect pe o mască circulară, dar poate fi tăiat inegal pe masca squircle a Samsung. Remedierea nu este o reproiectare, ci doar micșorarea ușor a lucrării de artă, astfel încât conținutul semnificativ să rămână în zona de siguranță, indiferent de forma care va fi aplicată în cele din urmă.
Forme de lansare pe care le veți întâlni
| Formă | Unde o vei vedea |
|---|---|
| Cerc | Android stoc, lansatorul Pixel (implicit de mult timp) |
| Squircle (pătrat rotunjit) | Samsung One UI și alte câteva skin-uri Android |
| Pătrat rotunjit (superelipsă) | iOS, aplicat automat de către sistem, fără control de dezvoltator |
| Lacrimă | Oferit ca opțiune selectabilă pe unele versiuni de software Samsung |
| Pătrat cu colțuri moi | Diverse alte skinuri de lansare a producătorilor |
Partea practică este că nu poți alege care dintre aceste forme va purta icoana ta. Utilizatorii de pe lansatoarele Android stoc pot chiar să aleagă forma preferată dintr-un meniu de setări. Singura ta pârghie reală este să te asiguri că opera de artă în sine le supraviețuiește tuturor cu grație, ceea ce este exact ceea ce zona de siguranță este acolo pentru a garanta.
Construirea activelor: dimensiuni și densități de care aveți nevoie
| Găleată de densitate | Dimensiunea pictogramei Lansatorului |
|---|---|
| mdpi | 48 x 48 px |
| hdpi | 72 x 72 px |
| xhdpi | 96 x 96 px |
| xxhdpi | 144 x 144 px |
| xxxhdpi | 192 x 192 px |
| Pictograma înregistrării în Magazin Play | 512 x 512 px |
Dacă expediați și aplicația pe iOS, adăugați un alt set în întregime, deoarece cerințele pentru pictograma Apple App Store depășesc la 1024x1024 și utilizați un format complet diferit, fără straturi, fără deloc transparență.
Modul manual vs utilizarea unui generator
Puteți produce absolut fiecare dintre aceste dimensiuni manual într-un editor de imagini sau prin Image Asset Studio încorporat în Android Studio, care gestionează destul de bine scalarea densității și previzualizările măștii pentru un singur proiect. Unde acest lucru devine plictisitor este atunci când mențineți un sistem de design în mai multe aplicații, aveți nevoie de exporturi iOS potrivite din aceeași lucrare de artă principală sau pur și simplu doriți o modalitate rapidă de a verifica de două ori modul în care un design se comportă în fiecare formă înainte de a vă dedica.
Generați fiecare dimensiune dintr-o imagine principală
Generator de pictograme de aplicație nostru preia o singură imagine sursă de înaltă rezoluție și produce setul complet de compartimente de densitate Android, structura adaptivă a pictogramei prim-plan/fond și dimensiunea înregistrării din Magazin Play, toate dintr-o singură încărcare, astfel încât să nu exportați și să redenumiti manual manual o duzină de fișiere.
Extragerea pictogramelor dintr-un APK existent
Uneori nevoia merge în direcția opusă. Poate ați moștenit un proiect fără fișierele sale originale de design sau doriți să vedeți exact cum și-a structurat un concurent pictograma înainte de a o proiecta pe a dvs. sau pur și simplu trebuie să scoateți o pictogramă înapoi dintr-un APK construit pentru a o reutiliza într-un instrument asociat sau într-un material de marketing. Deoarece un APK este efectiv o arhivă structurată care conține toate resursele unei aplicații, fișierele sale cu pictograme de lansare sunt prezente fizic în el și pot fi extrase direct, mai degrabă decât reconstruite de la zero.
Extractor de pictograme extrage exact aceste fișiere din orice APK pe care îl încărcați, oferindu-vă elementele de pictogramă brute la orice rezoluție livrată de dezvoltatorul original, care este adesea cea mai rapidă modalitate de a recupera un fișier sursă pierdut sau de a studia modul în care o altă aplicație a abordat aceeași problemă de design.
Greșeli obișnuite ale pictogramelor care sunt semnalate în revizuire
- Coacerea în căptușeală suplimentară sau UI chrome. Un efect de umbră, chenar sau colț rotunjit adăugat manual în interiorul imaginii intră în conflict cu propria mascare a sistemului și pare adesea dublat sau nealiniat.
- Folosind un fundal alb pur, fără margini distincte. Pe lansatoarele cu tematică luminoasă, pictograma poate deveni aproape invizibilă pe fundalul ecranului de pornire.
- Detaliu prea fin. Textul și liniile complicate care arată clar la 512 px se transformă frecvent într-o pată de necitit odată redusă la 48 px, care este modul în care majoritatea utilizatorilor îl văd zi de zi.
- O nepotrivire între pictograma înregistrării din Magazin Play și pictograma care se instalează. Amândoi recenzenții și utilizatorii observă când acestea două nu se potrivesc și se citește ca neglijent sau, mai rău, suspect.
- Uitând în întregime moștenirea de rezervă. Dacă aplicația dvs. acceptă în continuare versiuni Android înainte de 8.0, omiterea PNG-ului de rezervă plat poate lăsa acești utilizatori cu o pictogramă spartă sau cu aspect generic.
Testarea pictogramei pe diferite forme înainte de a expedia
Înainte de a finaliza o pictogramă, merită să o previzualizați cel puțin sub o mască circulară și o mască squircle una lângă alta, în loc să presupunem că se va traduce curat. Image Asset Studio de la Android Studio include o previzualizare live în mai multe forme de lansare tocmai din acest motiv și este nevoie de doar un minut pentru a detecta o problemă care altfel ar apărea numai după publicare, atunci când un utilizator cu forma „greșită” a lansatorului raportează că ceva nu arată bine.
Recomandări cheie
- Pictogramele adaptive folosesc două straturi, fundal și prim-plan, pe o pânză de 108 dp, pe care sistemul le maschează în diferite forme pentru fiecare lansator.
- Only the inner 66dp safe zone is guaranteed visible across every mask shape; păstrați în interior lucrări de artă semnificative.
- Mai aveți nevoie de o pictogramă moștenită plată pentru dispozitivele cu Android 7.1 sau versiuni anterioare.
- Un generator poate produce fiecare densitate necesară și dimensiunea listei Play Store dintr-o singură imagine principală, economisind o muncă semnificativă de export manual.
- Pictogramele pot fi extrase direct dintr-un APK existent atunci când fișierele sursă sunt pierdute sau trebuie să studiați elementele unei alte aplicații.
Întrebări Frecvente (FAQ)
Care este dimensiunea efectivă în pixeli necesară pentru o pictogramă de înregistrare în Magazin Play?
512x512 pixeli, un PNG pe 32 de biți cu un canal alfa. Acesta este separat de dimensiunile pictogramelor de lansare incluse în APK-ul propriu-zis.
Stratul de fundal al pictogramei mele adaptive trebuie să aibă o culoare solidă?
Nu neapărat o culoare plată, dar ar trebui să fie în general opac și simplă, deoarece poate fi deplasată, scalată sau mascată în moduri pe care nu le controlați pe deplin. Busy or transparent backgrounds tend to look inconsistent across launchers.
Pot reutiliza designul meu adaptiv al pictogramei Android direct pentru iOS?
Nu direct. iOS folosește o singură imagine pătrată plată, cu rotunjirea colțurilor aplicată de sistem, mai degrabă decât straturi separate, astfel încât de obicei exportați o versiune simplificată aplatizată a aceleiași lucrări de artă pentru iOS.
De ce pictograma mea arată bine pe telefon, dar este neclară în lista din Magazin Play?
Acest lucru se întâmplă de obicei atunci când pictograma listării a fost mărită dintr-o imagine sursă mică. Porniți întotdeauna de la un fișier principal de cel puțin 1024x1024 pixeli și exportați fiecare dimensiune necesară în jos.
Ce se întâmplă dacă omit pictograma de rezervă pentru versiunile mai vechi de Android?
Dispozitivele cu Android 7.1 sau versiuni anterioare, care nu acceptă pictograme adaptive, pot reveni la o pictogramă de sistem generică sau pot reda pictograma incorect. Este sigur să omiteți numai dacă versiunea Android minimă acceptată a aplicației dvs. este 8.0 sau o versiune ulterioară.
Nu aveți nevoie de cunoștințe în teoria designului pentru nimic din toate acestea, ci doar de conștientizarea faptului că icoana dvs. va fi remodelată în moduri pe care nu le controlați în momentul în care vă părăsește mâinile. Proiectați pentru zona de siguranță, păstrați o moștenire alternativă, generați fiecare dimensiune necesară dintr-un fișier principal curat, iar pictograma dvs. va rămâne sus, indiferent de lansatorul pe care aterizează.