A termékikonok létrehozása nem olyan nehéz, mint amilyennek első pillantásra tűnik. Tudjon meg többet az első Android-alkalmazás-ikon megtervezéséről a semmiből!
Függetlenül attól, hogy egy alkalmazást melyik piactéren vagy szolgáltatáson keresztül terjesztik, az alkalmazás ikonja az első dolog, amit a leendő felhasználó észrevesz. Az első benyomások rendkívül fontosak, amikor új felhasználókat próbálunk megnyerni, ami azt jelenti, hogy az ikonok minden alkalmazás kulcsfontosságú elemei. És az alkalmazás szándékától függetlenül egy gyönyörű alkalmazásikon létrehozása minden alkalmazás fejlesztési szakaszának fontos részét kell, hogy képezze. Bár sok műszaki alkalmazásfejlesztő a grafikát elkötelezett tervezőkre bízza, megértve a A tervezés alapjait és azok alkalmazását bárki meg tudja csinálni, ha van készsége a kísérletezéshez és elemzés. Az alkalmazásikonok sem kivételek!
Ez az útmutató egy adaptív ikon létrehozását mutatja be egy minta Android-alkalmazáshoz nyílt forráskódú szoftverrel. Bár a végeredmény nem biztos, hogy az Ön által igényelt formátumban lesz, az itt tárgyalt tervezési tippek közül sok több platformra is érvényes.
Az „adaptív ikonok” Android Oreóval való megjelenése után az alkalmazásikon három alapvető rétegből állhat: átlátszatlan háttérréteg, egy előtér réteg val vel átláthatóság támogatásaés a maszk amely meghatározza az ikon alakját. Mindezek a rétegek 108 x 108 dp méretűek, bár csak a belső 72 x 72 dp látható a felhasználó számára; a felső maszk által levágott másik régiót speciális effektusokhoz használják a felhasználói felületen belül, hogy az ikon dinamikusan jelenjen meg. Az avatatlanoknak, dp vagy kijelzőtől független pixel az Android teljes felületének mérőegysége, és a meghatározása megegyezik a méretével egy pixel egy 160 pont/hüvelyk felbontású kijelzőn.)
Nick Butcher a Google-tól egy 66 dp-s körről beszél az ikon közepén, amelyet egyetlen maszk sem tud levágni, ezt nevezik „biztonsági zónának”. Ez az a hely, ahol az ikontervezésünk elsődleges elemei a későbbiekben, amikor a tényleges tervezéshez érünk. Előfordulhat, hogy a 33 dp sugáron túli dolgok nem láthatók az ikonon, amíg az alakmaszk be van kapcsolva.
Mivel az UI méretezése miatt az ikonok jobbak, ha vektoros képek, vektorgrafikus szerkesztőre lesz szükségünk az ikonunk elkészítéséhez. Inkscape nyílt forráskódú, és kiváló alternatívája a drágább szoftvereknek, ezért ezt választjuk ebben az oktatóanyagban. Terveztem egy projektfájlt is elérhető itt amelyen ki van jelölve a biztonságos zóna és a Google saját tervezési kulcsvonala, valamint egy remek rétegmaszk, amely lehetővé teszi az ikon alakjának előnézetét.
Az Inkscape programban megnyitott projektfájllal és a Töltse ki és húzza át (Shift+Ctrl+F), PNG-kép exportálása (Shift+Ctrl+E), és Rétegek (Shift+Ctrl+L) panelek megnyílnak, készen állunk a kezdésre. A Rétegek panelen található a projekt húsa, a Előtér és Háttér rétegek, amelyek a névleges összetevőik elhelyezésére szolgálnak, és Irányelvek és Maszk be- és kikapcsolható (a mellettük lévő kis szem ikonra kattintva) referenciaként.
Az ikon egy alkalmazás identitásának kifejezése. Ennek megfelelően magában kell foglalnia az alkalmazás személyiségének karakterét és a platform-specifikus tervezési irányelveket, például az Androidét. Az anyagtervezési nyelv kínálkozik. A bemutató kedvéért tegyük fel, hogy egy olyan időjárási alkalmazáson dolgozunk, amely Anyagi elemeket használ. A klasszikus nap-felhők motívum segítségével tájékoztathatjuk a felhasználót az alkalmazás céljáról, és egy kicsit pörgesse át ezt az alapvető kialakítást vetett árnyékok és geometria segítségével, hogy jól illeszkedjen Android-környezetébe.
Háttér
Kezdjük a háttér beállításával, amely egy kék égboltból és egy sárga napból áll majd a közepén. Fordulás Maszk láthatatlan, kiválasztom és láthatóvá teszem a Háttér réteg, töltse ki a teljes vásznat a Hozzon létre téglalapokat és négyzeteket eszközt (F4), és állítsa be a téglalap kitöltési színét Töltse ki és húzza át 64B5F6FF-ig (világoskék) a Anyag színpaletta. Ezután kiválasztom a Hozzon létre köröket, ellipsziseket és íveket (F5) eszközzel, és a Shift és a Ctrl billentyűket lenyomva rajzoljon egy kört a kulcsvonal közepétől a második legnagyobb körig, és állítsa be a színét FFEE58FF-ra, ami meleg kis napot biztosít számunkra. Bármilyen tervezésnél mindig jó ragaszkodni az alapvető geometriához, és különösen az Android tervezési nyelve ösztönzi az egyszerűséget. Az anyagra vonatkozó irányelvek betartása érdekében finom vetett árnyékot is adok a napnak Szűrők → Árnyékok és fények → Árnyék vetette.
Előtér
Jön Előtér, Egy felhőcsoportot rajzolok a nap köré úgy, hogy más körök kerületéből köröket rajzolok, és mindegyiket EEEEEEFF töltetszínnel adok. Ezután a jobb gombbal több objektumra kattintva és kiválasztva csoportosítom a köröket Csoport, és futtassuk a vetett árnyékgenerátort a végén kapott két végső alakzaton. Fordulás Irányelvek láthatatlan és váltakozva Előtér és Háttér vagy az időjárás-alkalmazásunk ikonjának alkotó rétegei láthatók. Ha az alkalmazás ikonját áthúzzák a kezdőképernyőn, a felhők zuhognak az álló nap ellen!
Eredmény
Maszk most láthatóvá tehető és módosítható Útvonalak szerkesztése csomópontok szerint (F2) különböző alakmaszkok szimulálásához. Ezenkívül a két réteg külön-külön is exportálható a PNG-kép exportálása panel a használatra Android Stúdióban, és együtt a Google Play ikonra.
A termékikon készítése során mindig jó gyakorlat, ha megpróbáljuk felfogni az alkalmazás célját, desztilláljuk a legelvontabb vizuális formájukba, és ezt egyszerű geometriával ábrázoljuk. Minél egyszerűbb a tervezés bármely összetevője, általában annál jobban és megbízhatóbban működik, és ez igaz a grafikai tervezésre is. A legtöbb célra egy tárgyforma az előtérben és egy egyszínű vagy egy minta a háttérben (vagy fordítva) jól működik, de mint példánkban, egy másik réteg objektum is használható, ha nemez szükséges; a túl sok halmozás vagy vetett árnyékok használata csak bonyolítja az ikon kialakítását.
Az ikontervezésről bővebben az Anyag felületek részben olvashat a hivatalos oldalon Anyag weboldal, és ragadjon meg ingyenes rendszerikonokat az ikontervezéshez ugyanaz a weboldal.