Tuotekuvakkeiden luominen ei ole niin vaikeaa kuin miltä ensi silmäyksellä näyttää. Lue lisää ensimmäisen Android-sovelluksesi kuvakkeen suunnittelusta tyhjästä!
Riippumatta siitä, minkä kauppapaikan tai palvelun kautta sovellusta jaetaan, sen sovelluskuvake on ensimmäinen asia, jonka mahdollinen käyttäjä huomaa. Ensivaikutelma on äärimmäisen tärkeä, kun yrität saada uusia käyttäjiä, mikä tarkoittaa, että kuvakkeet ovat minkä tahansa sovelluksen avainkomponentteja. Ja sovelluksen tarkoituksesta riippumatta kauniin sovelluskuvakkeen luomisen tulisi olla tärkeä osa jokaisen sovelluksen kehitysvaihetta. Vaikka monet teknisten sovellusten kehittäjät jättävät grafiikan omistautuneille suunnittelijoille, ymmärtäen Suunnittelun perusteet ja niiden soveltaminen on jotain, mitä kuka tahansa voi tehdä, kun hänellä on taito kokeilla ja kokeilla analyysi. Sovelluskuvakkeet eivät ole poikkeus!
Tässä oppaassa käydään läpi mukautuvan kuvakkeen luominen esimerkki Android-sovelluksesta käyttämällä avoimen lähdekoodin ohjelmistoa. Vaikka lopputulos ei ehkä ole siinä muodossa, jota saatat tarvita, monet tässä käsitellyt suunnitteluvinkit pätevät useilla alustoilla.
Android Oreon mukautuvien kuvakkeiden julkaisun jälkeen sovelluskuvake voi koostua kolmesta peruskerroksesta: läpinäkymätön taustakerros, etualalla oleva kerros kanssa läpinäkyvyyden tuki, ja a naamio joka määrittää kuvakkeen muodon. Kaikki nämä tasot ovat kooltaan 108 x 108 dp, vaikka vain sisempi 72 x 72 dp voi olla käyttäjän nähtävissä; toista aluetta, jonka yläosassa oleva maski leikkaa pois, käytetään käyttöliittymän erikoistehosteisiin, jotta kuvake näyttää dynaamiselta. Asiattomille, dp tai näytöstä riippumaton pikseli on koko Androidin käyttöliittymän mittayksikkö ja sen koko on sama kuin yksi pikseli 160 pistettä tuumalla näytössä.)
Nick Butcher Googlesta puhuu 66 dp: n ympyrästä kuvakkeen keskellä, jota mikään maski ei voi leikata pois ja jota kutsutaan "turvavyöhykkeeksi". Tässä ovat ikonisuunnittelumme pääelementit myöhemmin, kun pääsemme varsinaiseen suunnitteluun. Mikään tämän 33 dp: n säteen ulkopuolella ei välttämättä näy kuvakkeessa, kun siinä on muotomaski päällä.
Koska kuvakkeet ovat parempia olla vektorikuvia käyttöliittymän skaalauksen vuoksi, tarvitsemme vektorigrafiikkaeditorin kuvakkeen tekemiseen. Inkscape on avoimen lähdekoodin ja loistava vaihtoehto kalliimmille ohjelmistoille, joten se on meidän valintamme tässä opetusohjelmassa. Olen myös suunnitellut projektitiedoston saatavilla täältä jossa on turvavyöhyke ja Googlen oma suunnittelun avainlinja, ja näppärä kerrosmaski, jonka avulla voimme esikatsella kuvakkeen muotoa.
Kun projektitiedosto on avattu Inkscapessa ja Täytä ja vedä (Vaihto+Ctrl+F), Vie PNG-kuva (Vaihto+Ctrl+E) ja Kerrokset (Vaihto+Ctrl+L) -paneelit avautuvat, olemme valmiita aloittamaan. Tasot-paneelissa on projektin liha, jossa on etualalla ja Tausta kerrokset, jotka on tarkoitettu sijoittamaan niiden nimelliset komponentit, ja Ohjeita ja Naamio tarkoitettu kytkettäväksi päälle ja pois (napsauttamalla niiden vieressä olevaa pienen silmän kuvaketta) viitteeksi.
Kuvake ilmaisee sovelluksen identiteetin. Sellaisenaan sen on sisällettävä sekä sovelluksen persoonallisuuden luonne että alustakohtaiset suunnitteluohjeet, kuten Androidin. Materiaalisuunnittelun kielellä on tarjottavanaan. Esittelyä varten oletetaan, että työskentelemme sääsovelluksen parissa, joka käyttää materiaalielementtejä. Voisimme käyttää klassista aurinko- ja pilvi-motiivia kertoaksemme käyttäjälle sovelluksen tarkoituksesta ja laittaa hieman pyöritä tätä perusrakennetta käyttämällä varjoja ja geometriaa, jotta se sulautuu hyvin Android-ympäristöönsä.
Tausta
Aloitetaan taustan asettamisesta, joka koostuu sinisestä taivaasta ja keltaisesta auringosta keskellä. Kääntäminen Naamio näkymätön, valitsen ja teen näkyväksi Taustakerros, täytä koko kangas Luo suorakulmioita ja neliöitä työkalu (F4) ja aseta suorakulmion täyttöväri Täytä ja vedä 64B5F6FF (vaaleansininen) mukaisesti Materiaalin väripaletti. Valitsen sitten Luo ympyröitä, ellipsiä ja kaaria (F5) -työkalu ja pidä Shift- ja Ctrl-näppäimiä painettuna, piirrä ympyrä avaimenperän keskeltä toiseksi suurimpaan ympyrään ja aseta sen väriksi FFEE58FF, mikä antaa meille lämpimän pienen auringon. Perusgeometriassa on aina hyvä pitää kiinni kaikenlaisessa suunnittelussa, ja erityisesti Androidin suunnittelukieli kannustaa yksinkertaisuuteen. Materiaaliohjeiden noudattamiseksi annan auringolle myös hienovaraisen varjon Suodattimet → Varjot ja hehkut → Varjo.
etualalla
Tulossa etualalla, Piirrän ryhmän pilviä auringon ympärille piirtämällä ympyröitä muiden ympyröiden ympyröistä ja annan niille kaikille täytevärin EEEEEEFF. Ryhmittelen sitten ympyrät asianmukaisesti napsauttamalla hiiren kakkospainikkeella useita objekteja ja valitsemalla Ryhmä, ja käytä varjostusgeneraattoria kahdessa lopullisessa muodossa, jotka saan lopulta. Kääntäminen Ohjeita näkymätön ja vaihtuva etualalla ja Tausta vaihtoehtoisesti sääsovelluksemme kuvakkeen osakerrokset voidaan nähdä. Jos sovelluksen kuvake koskaan vedetään aloitusnäytön poikki, pilvet putoavat paikallaan olevaa aurinkoa vasten!
Tulos
Naamio voidaan nyt muuttaa näkyväksi ja mukauttaa Muokkaa polkuja solmujen mukaan (F2) yrittää simuloida erilaisia muotomaskeja. Lisäksi kaksi kerrosta voidaan viedä erikseen käyttämällä Vie PNG-kuva paneeli käyttöön Android Studiossa, ja yhdessä a Google Play -kuvake.
Tuotekuvaketta rakennettaessa on aina hyvä käytäntö ottaa sovelluksen tarkoitus, tislata se abstrakteimpaan visuaaliseen muotoonsa ja esittää se yksinkertaisella geometrialla. Mitä yksinkertaisempi mikä tahansa suunnittelun komponentti on, sitä paremmin ja luotettavammin se yleensä toimii, ja tämä pätee myös graafiseen suunnitteluun. Useimmissa tarkoituksiin esineen muoto etualalla ja yksivärinen tai kuvio taustalla (tai päinvastoin) toimii hienosti, mutta kuten esimerkkitapauksessamme, voidaan käyttää toista kerrosta esineitä, jos ne tuntuvat tarpeellista; liiallinen pinoaminen tai varjojen käyttö vain vaikeuttaa kuvakkeen suunnittelua.
Voit lukea lisää kuvakesuunnittelusta virkailijan Materiaalirajapinnat -kohdasta Materiaalisivustoja nappaa ilmaisia järjestelmäkuvakkeita käytettäväksi kuvakkeiden suunnittelussa samalla sivustolla.