Isang Praktikal na Gabay sa Mga Icon ng Android App: Ipinaliwanag ang Mga Adaptive na Icon (at Paano Buuin ang Iyo nang Tama)
Ito ay isang pangkaraniwang sorpresa para sa mga unang beses na developer ng Android: pinapakintab mo ang isang parisukat na PNG para sa icon ng iyong app, ine-export ito sa isang maayos na 512x512, at mukhang perpekto ito sa iyong editor ng larawan. Pagkatapos ay nag-install ka ng debug build sa isang Samsung phone at ang icon ay biglang mukhang na-crop at bahagyang nasa gitna, na parang ang bahagi ng logo ay tinadtad. Walang mali sa file mismo. Ang problema ay ang isang parisukat na larawan ay hindi kailanman makakaligtas sa pakikipag-ugnayan sa totoong mundo ng mga launcher ng Android, na ang bawat isa ay nagtatanim, nag-mask, at nag-reshape ng mga icon nang iba. Kung hindi mo pa ito nararanasan, ilang oras na lang bago mo gawin, kaya't suriin natin kung ano ang nangyayari sa ilalim ng hood at kung paano ito maitama sa unang pagkakataon.
Bakit Hindi Na Sapat ang Isang Single Square PNG
Sa mga unang taon ng Android, ang mga icon ng app ay eksakto kung ano ang hitsura nila: isang parisukat (o paminsan-minsan ay libre ang hugis) PNG na ipinapakita ng bawat launcher kung ano-ano. Iyon ay gumana nang maayos hanggang sa sinimulan ng mga tagagawa ang pagkakaiba-iba ng kanilang mga telepono nang biswal, at isa sa mga pinakamadaling lugar na gawin iyon ay ang home screen. Gusto ng Samsung ng mga bilugan na parisukat, gusto ng ilang Chinese OEM skin ng iba't ibang paggamot sa sulok, at ang stock na Android ay tuluyang naayos sa mga lupon. Biglang, ang eksaktong kaparehong icon na file ay kapansin-pansing naiiba, at kung minsan ay nakikitang mas masahol pa, depende sa kung kaninong telepono ito napunta.
Ang sagot ng Google, na ipinakilala sa Android 8.0 Oreo, ay ang adaptive icon system. Sa halip na magbigay ng isang nakapirming hugis, ang mga developer ay nagbibigay ng layered na likhang sining na ang operating system mismo ay naka-mask sa anumang hugis na gusto ng isang launcher. Ang visual na pagkakakilanlan ay nananatiling pare-pareho; tanging ang panlabas na silhouette ang nagbabago.
Ano ang Eksaktong Isang Adaptive Icon?
Ang isang adaptive na icon ay binuo mula sa dalawang magkahiwalay na layer, bawat isa ay sumasakop sa isang 108dp by 108dp canvas: isang background layer at isang foreground layer. Pinagsasama-sama ng Android ang dalawa at pagkatapos ay inilalapat ang anumang hugis ng maskara na ginagamit ng kasalukuyang launcher, bilog man iyon, bilog na parisukat, patak ng luha, o iba pa. Ang dalawang-layer na istraktura ay kung ano ang nagbibigay-daan sa Android na magdagdag ng banayad na paralaks at mga epekto ng paggalaw, dahil ang mga layer ay maaaring mag-shift nang hiwalay kapag nag-tap o nag-drag ka ng icon.
Sa mga mapagkukunan ng app, ito ay karaniwang tinutukoy sa pamamagitan ng isang XML file tulad ng mipmap-anydpi-v26/ic_launcher.xml, na tumuturo lamang sa background at foreground na mga drawable sa halip na naglalaman ng data ng pixel mismo. Ang isang tradisyunal na flat ic_launcher.png ay pinananatili pa rin bilang isang fallback para sa mga device na nagpapatakbo ng Android 7.1 o mas bago, na nauna pa sa adaptive icon system nang buo.
Bakit Mahalaga ang Safe Zone
Narito ang bahaging higit na nagpapa-trip sa mga tao. Kahit na ang canvas para sa bawat layer ay 108dp by 108dp, tanging ang panloob na 66dp by 66dp na bilog, na nakasentro sa canvas na iyon, ang garantisadong makikita anuman ang hugis ng mask na ilalapat. Ang panloob na rehiyong ito ay karaniwang tinatawag na ligtas na sona. Anumang bagay sa labas nito ay maaaring ipakita sa isang pabilog na maskara at pagkatapos ay biglang i-clip sa isang mas agresibong squircle o teardrop mask, o vice versa.
Ito ang eksaktong uri ng isyu na lumalabas kapag ang isang logo ay iginuhit malapit sa mga gilid ng canvas upang i-maximize ang visual na laki nito: maaari itong magmukhang perpekto sa isang pabilog na maskara ngunit hindi pantay na na-clip sa squircle mask ng Samsung. Ang pag-aayos ay hindi isang muling pagdidisenyo, pinaliit lang nang bahagya ang likhang sining upang ang makabuluhang nilalaman ay mananatili sa loob ng ligtas na lugar kahit na anong hugis ang ilapat sa huli.
Mga Hugis ng Launcher na Makikilala Mo
| Hugis | Kung saan mo makikita |
|---|---|
| Bilog | Stock Android, Pixel launcher (ang matagal nang default) |
| Squircle (bilog na parisukat) | Samsung One UI, at ilang iba pang Android skin |
| Bilugan na parisukat (superellipse) | iOS, awtomatikong inilapat ng system na walang kontrol ng developer |
| Patak ng luha | Inaalok bilang isang mapipiling opsyon sa ilang bersyon ng software ng Samsung |
| Square na may malambot na sulok | Iba't ibang mga skin ng launcher ng tagagawa |
Ang praktikal na takeaway ay hindi mo mapipili kung alin sa mga hugis na ito ang masusuot ng iyong icon. Ang mga gumagamit sa mga stock na launcher ng Android ay madalas na mapipili ang kanilang gustong hugis mula sa isang menu ng mga setting. Ang iyong tanging tunay na pingga ay ang pagtiyak na ang likhang sining mismo ay nabubuhay sa lahat ng mga ito nang maganda, na kung ano mismo ang naroroon upang garantiyahan ang ligtas na lugar.
Pagbuo ng Mga Asset: Mga Sukat at Densidad na Kailangan Mo
| Densidad na balde | Laki ng icon ng launcher |
|---|---|
| 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 |
| Icon ng listahan ng Play Store | 512 x 512 px |
Kung nagpapadala ka rin ng app sa iOS, magdagdag ng isa pang hanay nang buo, dahil ang mga kinakailangan sa icon ng App Store ng Apple ay nangunguna sa 1024x1024 at gumamit ng ganap na naiibang, hindi naka-layer na format na walang anumang transparency.
Ang Manu-manong Paraan kumpara sa Paggamit ng Generator
Ganap mong magagawa ang bawat isa sa mga laki na ito sa pamamagitan ng kamay sa isang editor ng larawan, o sa pamamagitan ng built-in na Image Asset Studio ng Android Studio, na pinangangasiwaan nang maayos ang density scaling at mask preview para sa isang proyekto. Kung saan ito nakakapagod ay kapag nagpapanatili ka ng isang sistema ng disenyo sa ilang mga app, kailangan ng pagtutugma ng mga pag-export ng iOS mula sa parehong master artwork, o gusto lang ng mabilis na paraan upang i-double-check kung paano kumikilos ang isang disenyo sa bawat hugis bago gumawa dito.
Bumuo ng bawat laki mula sa isang master na imahe
Ang aming Tagabuo ng Icon ng App ay kumukuha ng isang mataas na resolution na pinagmulang larawan at gumagawa ng buong hanay ng mga Android density bucket, ang adaptive na icon sa foreground/background na istraktura, at ang laki ng listahan ng Play Store, lahat mula sa isang pag-upload, kaya hindi ka manu-manong nag-e-export at nagpapalit ng pangalan ng isang dosenang file sa pamamagitan ng kamay.
Pagkuha ng Mga Icon Mula sa Umiiral na APK
Minsan ang pangangailangan ay tumatakbo sa kabaligtaran na direksyon. Marahil ay nagmana ka ng isang proyekto nang wala ang mga orihinal na file ng disenyo nito, o gusto mong makita nang eksakto kung paano itinayo ng isang kakumpitensya ang kanilang icon bago ang pagdidisenyo ng iyong sarili, o kailangan mo lang na i-pull muli ang isang icon mula sa isang built APK upang magamit muli ito sa isang nauugnay na tool o asset ng marketing. Dahil ang isang APK ay epektibong isang structured archive na naglalaman ng lahat ng mga mapagkukunan ng isang app, ang mga file ng icon ng launcher nito ay pisikal na naroroon sa loob nito at maaaring direktang makuha, sa halip na muling itayo mula sa simula.
Eksaktong hinuhugot ng aming Tagakuha ng Icon ang mga file na ito mula sa anumang APK na ina-upload mo, na nagbibigay sa iyo ng mga raw icon na asset sa anumang resolusyon na ipinadala ng orihinal na developer, na kadalasan ang pinakamabilis na paraan upang mabawi ang isang nawawalang source file o pag-aralan kung paano nilapitan ng isa pang app ang parehong problema sa disenyo.
Mga Karaniwang Pagkakamali sa Icon na Na-flag sa Pagsusuri
- Pagbe-bake sa sobrang padding o UI chrome. Ang isang drop shadow, border, o rounded-corner effect na manu-manong idinagdag sa loob ng imahe ay sumasalungat sa sariling masking ng system at kadalasan ay mukhang doble o hindi pagkakatugma.
- Paggamit ng purong puting background na walang natatanging gilid. Sa mga launcher na may light-themed, ang icon ay maaaring maging halos hindi nakikita sa background ng home screen.
- Masyadong pinong detalye. Ang text at masalimuot na linework na mukhang matalas sa 512px ay madalas na nagiging isang hindi nababasang smudge kapag pinaliit sa 48px, na kung paano ito nakikita ng karamihan sa mga user araw-araw.
- Isang hindi pagkakatugma sa pagitan ng icon ng listahan ng Play Store at ng icon na nag-i-install. Ang mga reviewer at user ay parehong napapansin kapag ang dalawang ito ay hindi nagtutugma, at ito ay nagbabasa bilang palpak o, mas masahol pa, kahina-hinala.
- Nakakalimutan ang legacy na fallback nang buo. Kung sinusuportahan pa rin ng iyong app ang mga bersyon ng Android bago ang 8.0, ang paglaktaw sa flat PNG fallback ay maaaring mag-iwan sa mga user na iyon ng sira o generic na mukhang icon.
Pagsubok sa Iyong Icon sa Iba't ibang Hugis Bago Ka Ipadala
Bago tapusin ang isang icon, sulit na i-preview ito sa ilalim ng hindi bababa sa isang pabilog na maskara at isang squircle mask na magkatabi, sa halip na ipagpalagay na ito ay isasalin nang malinis. Ang Image Asset Studio ng Android Studio ay may kasamang live na preview sa ilang mga hugis ng launcher para sa eksaktong kadahilanang ito, at tumatagal lamang ng isang minuto upang mahuli ang isang isyu na kung hindi man ay lalabas lamang pagkatapos ma-publish, kapag ang isang user na nasa "maling" hugis ng launcher ay nag-ulat pabalik na may hitsura.
Mga Pangunahing Takeaway
- Gumagamit ang mga adaptive na icon ng dalawang layer, background at foreground, sa isang 108dp canvas, kung saan itinatakpan ng system sa iba't ibang hugis sa bawat launcher.
- Tanging ang panloob na 66dp safe zone ang garantisadong makikita sa bawat hugis ng maskara; panatilihin ang makabuluhang likhang sining sa loob nito.
- Kailangan mo pa rin ng flat legacy na icon para sa mga device sa Android 7.1 o mas bago.
- Ang isang generator ay maaaring gumawa ng bawat kinakailangang density at ang laki ng listahan ng Play Store mula sa isang master na imahe, na nakakatipid ng makabuluhang manu-manong pag-export.
- Maaaring direktang kunin ang mga icon mula sa isang umiiral nang APK kapag nawala ang mga source file o kailangan mong pag-aralan ang mga asset ng isa pang app.
Mga Madalas Itanong (FAQ)
Ano ang aktwal na laki ng pixel na kinakailangan para sa isang icon ng listahan ng Play Store?
512x512 pixels, isang 32-bit PNG na may alpha channel. Hiwalay ito sa mga laki ng icon ng launcher na naka-bundle sa loob mismo ng APK.
Kailangan bang solid na kulay ang background layer ng aking adaptive icon?
Hindi nangangahulugang isang patag na kulay, ngunit sa pangkalahatan ay dapat itong maging opaque at simple, dahil maaari itong ilipat, palakihin, o i-mask sa mga paraan na hindi mo lubos na makokontrol. Ang mga abala o transparent na background ay may posibilidad na magmukhang hindi pare-pareho sa mga launcher.
Maaari ko bang gamitin muli nang direkta ang aking disenyo ng Android adaptive icon para sa iOS?
Hindi direkta. Gumagamit ang iOS ng iisang flat square na larawan na may pag-ikot ng sulok na inilapat ng system sa halip na magkahiwalay na mga layer, kaya karaniwan mong ine-export ang isang pinasimple na flattened na bersyon ng parehong artwork para sa iOS.
Bakit maganda ang hitsura ng aking icon sa aking telepono ngunit malabo sa listahan ng Play Store?
Karaniwan itong nangyayari kapag na-scale up ang icon ng listahan mula sa isang maliit na pinagmulang larawan. Palaging magsimula sa isang master file na hindi bababa sa 1024x1024 pixels at i-export ang bawat kinakailangang laki pababa mula doon.
Ano ang mangyayari kung laktawan ko ang legacy icon na fallback para sa mga mas lumang bersyon ng Android?
Ang mga device sa Android 7.1 o mas bago, na hindi sumusuporta sa mga adaptive na icon, ay maaaring bumalik sa isang generic na icon ng system o i-render nang hindi tama ang iyong icon. Ligtas na laktawan lang kung ang minimum na sinusuportahang bersyon ng Android ng iyong app ay 8.0 o mas mataas.
Hindi mo kailangan ng background sa teorya ng disenyo para sa alinman sa mga ito, isang kamalayan lamang na ang iyong icon ay muling huhubog sa mga paraan na hindi mo makokontrol sa sandaling umalis ito sa iyong mga kamay. Idisenyo para sa safe zone, panatilihin ang isang legacy fallback sa paligid, buuin ang bawat kinakailangang laki mula sa isang malinis na master file, at mananatili ang iyong icon kahit saang launcher ito mapunta.