Kuinka suunnitella Android-sovellusliittymä, joka ei ime

Neuvovat: Klikkaa Korjata Windows Virheitä Ja Optimoida Järjestelmän Suorituskykyä

Ohjelmoijat ja kehittäjät eivät yleensä ole suunnittelijoita - tämän hyväksytään totta. Kehittäjät keskittyvät yleensä sovelluksen tekemiseen - suunnittelijat keskittyvät sovelluksen tekemiseen esteettisesti houkuttelevaksi . Mutta miksi kehittäjät eivät voi tehdä samaa?

Päivän aikana, kun animoidut aloitussivut ja hienot asettelut olivat juttu, varmasti oli järkevää palkata ammattimainen suunnittelija. Mutta suuntaus on tällä hetkellä minimaalinen - tai ainakin huomattavasti yksinkertaistettu.

Annan teille anekdoottisen esimerkin - jonkin aikaa sitten joku pyysi minua luomaan tilkkanäytön PC-ohjelmistolleen. Joten menin kaikki ulos - piirrosin sen piirrospaperille, tuomin sen PhotoShopiin, loin paljon kuvitteellisia neonviivoja ja tehosteita. Se olisi voinut olla työpöydän taustakuva eikä roiskekuva. Asia on, että olen luonut heille tämän todella hieno ja hienostuneen suunnittelun.

Kuten luultavasti voidaan arvata, he eivät pitäneet siitä. Suunnittelu, jonka he seurasivat, oli kirjaimellisesti pieni logo muutamasta päällekkäisestä värillisestä ympyrästä ja ohjelmiston nimi sen alla. Kuten 2 minuuttia PhotoShop-työssä. Ja tiedätkö mitä? Minun piti joutua siihen, että se oli parempi kuin minun.

Tarkoitan siis - luulen, että ohjelmoijat kuuluvat tähän ansaan tehdä sama virhe, jonka tein. Meillä on taipumus ajatella käyttöliittymiä ja aloitusnäyttöjä, joiden on oltava näitä todella hienoja, herättäviä asioita, jotka tekevät sovelluksesta erotettavan. Mutta heidän ei tarvitse olla - rehellisesti, heidän ei pitäisi olla. Meidän on otettava ohjelmoijan ajattelutapa ja sovellettava sitä esteettiseen suunnitteluun - yksinkertainen, toimiva, toimii.

Tässä artikkelissa tarkastelemme joitain hyvin yksinkertaisia ​​tapoja luoda tyylikäs Android APP -käyttöliittymä / UX, vaikka sinulla ei olisi melkein mitään suunnittelukokemusta.

Pysy materiaalisuunnittelussa, ellet todella halua jotain muuta

Sovelluksesi ei tarvitse olla ” ainutlaatuinen” ja “ erottua muusta”, jotta se olisi suosittu ja näyttää hyvältä. Sitä Googlen materiaalisuunnittelu pyrki saavuttamaan - standardi koko sovelluksen käyttöliittymille, ja he ovat tehneet hyvää työtä. Siellä on paljon suosittuja sovelluksia, jotka pysyvät materiaalisuunnittelussa - joitain Android-sovellusten suurimmista nimistä, kuten SwiftKey, Nova Launcher, Textra SMS, YouTube, vain muutamia mainitakseni.

Materiaalisuunnittelun pääpaino on korttipohjaisessa asettelussa, jossa on vakaa väripaletti. Google työskenteli alan parhaiden suunnittelijoiden kanssa piirtäen paljon elementtejä minimalistisista suunnittelukäytännöistä ja julkaisi sitten kaiken kokonaan ilmaiseksi - se on aika paljon, koska verkkosivustojen ja sovellusten suunnittelukurssit voivat suorittaa satoja dollareita e-kirjoille, videoille, jne.

Materiaalisuunnittelun aloittaminen on uskomattoman helppoa, ja siellä on kourallinen työkaluja, jotka tekevät siitä vieläkin yksinkertaisemman, ja luetellaan alla:

  • Materiaaliteemaeditori (macOS + Sketch)
  • Materiaalisuunnittelu väripaletti -laajennus (PhotoShop / Illustrator)
  • Materiaalisuunnittelu UI Kit PSD (PhotoShop)
  • Android-materiaalisuunnittelun käyttöliittymäpaketti ( luonnos)
  • Materiaalin käyttöliittymän teemageneraattori

Ja jos tarvitset inspiraatiota yksinkertaisten, tyylikkäiden materiaalisuunnitteluaiheiden luomiseen, tutustu näihin luetteloblogiin:

  • MaterialDesignBlog - 15 mahtavaa esimerkkiä materiaalisuunnittelusta oikein
  • MockPlus - 12 parasta materiaalisuunnittelussivustoesimerkkiä inspiraation saamiseksi
  • AndroidAuthority - 10 parasta materiaalisuunnittelusovellusta Androidille

Värigradientit ovat paljon helpompia kuin luulet

Materiaalisuunnittelulle vaihtoehtona dolor-kaltevuudet ovat yksinkertaisia, trendikkäitä ja herättäviä. Ja saatat ajatella, että suunnittelijat viettävät paljon aikaa maalaamalla kaikki värit tai suunnittelemalla lopullisen kaltevuuden. Voit olla väärässä - se voidaan tehdä 10 sekunnissa PhotoShopissa.

10 sekuntia PhotoShop-gradientin käyttöliittymässä.

Kävelen sinut jopa läpi tämän näyttääkseni kuinka helppoa se on.

Luo uusi PS-projekti mobiililaitteille ( 1080 x 1920 px @ 72 ppi toimii hyvin)

UIGradients.com - suuri kokoelma valmiita kaltevuuksia.

Siirry UIGradients.com-sivustoon ja löydä jotain pidät.

Kopioi väriheksa-arvot UIGradients-sovelluksesta

Kopioi kaltevuusvärit esikatselun yläpuolelta.

PhotoShop-kaltevuusvalitsin.

Napsauta hiiren kakkospainikkeella tyhjää kerrosta PS: ssä ja siirry kohtaan Sekoitusasetukset> Gradient Overlay.

Napsauta suoraan kaltevuuskuvion esikatselua avattavassa valikossa - älä napsauta avattavaa painiketta. Napsauttamalla suoraan kaltevuudessa, avaa värieditori.

Syötä heksa-arvot UIGradientista PS-gradienttityökaluun.

Liitä nyt vain liitä liitä väriheksa-arvot UIGradientista PS-gradienttieditoriin.

Säädä tarvittaessa. Sinulla on nyt ammatillinen kaltevuustausta Android-sovelluksellesi.

Muut tarkistamisen arvoiset gradienttityökalut:

  • WebGradients.com
  • Android Shapes Generator ( muotojen luomiseen XML: n avulla, vaihtoehto gradientille)

Käytä SVG: tä JPG / PNG: n sijasta

Sen sijaan, että käyttäisit PNG- tai JPG-tiedostoja graafisiin elementteihisi (painikkeet, logot jne.), Sinun pitäisi käyttää SVG-tiedostoja ( Scalable Vector Graphics) . Tämä johtuu siitä, että SVG-tiedostojen kokoa voidaan muuttaa menettämättä laatua - esimerkiksi jos suurennat JPG: tä suuremmaksi arvoksi, se menettää laatuaan ja muuttuu epäselväksi / pikseliksi. SVG ei. Ihmiset yrittävät käyttää valtavia PNG-tiedostoja, jotka pienennetään sopimaan Android-ruutuihin - kun sen sijaan voit käyttää pienempiä SVG-tiedostoja, jotka ovat skaalattuna ilman laadun heikkenemistä.

Lisäksi SVG-tiedostot voivat olla jopa 60–80% pienempiä kuin PNG . Tämä tarkoittaa, että sovelluksesi tai mobiilisivustosi latautuu nopeammin käyttäjän kannalta ja näyttää hyvältä näytön tarkkuudesta riippumatta.

Ota mukaan tumma tila käyttämällä teema.AppCompat.DayNight

Sinun ei tarvitse suunnitella kahta erillistä teemaa sisällyttääksesi tumma / yö-tilan teemaasi sovellukseesi. Se on rakennettu melko paljon AppCompat-kirjastoon, sinun täytyy vain ottaa se käyttöön ja muokata arvoja.

Katso Appual-opas “Pimeän tilan käyttöönotto Android-sovelluksessasi”.

Käytä mallipohjaa tai mobiili käyttöliittymää

Jos sovelluksesi ei vaadi hienoa, räätälöityä käyttöliittymää, mallin tai pakkauksen käyttämisessä ei ole mitään vikaa. Malleja ja sarjoja voidaan käyttää inspiroivina ohjeina tai voit kirjaimellisesti vain käyttää mallia / pakkausta sellaisenaan, lisäämällä omia painikkeitasi ja tavaroitasi.

Hienoja resursseja Android-käyttöliittymämalleille ja -paketeille:

  • SpeckyBoy - 50 ilmaista mobiililaitteiden käyttöliittymää iOS: lle ja Androidille
  • SketchAppSources - Android-käyttöliittymän sovellusresurssit ( Sketch)
  • Freebiesbug - PSD-käyttöliittymäpaketit ( PhotoShop)

Mielenkiintoisia Artikkeleita