Tuolloin, kun animoidut splash-aloitussivut ja hienot ulkoasut olivat asia, niin oli varmaa, että oli järkevää palkata ammattimainen suunnittelija. Mutta trendi on tänään minimaalinen - tai ainakin huomattavasti yksinkertaistettu.
Annan teille anekdoottisen esimerkin - jonkin aikaa sitten joku pyysi minua luomaan tilanäytön tietokoneohjelmalleen. Joten menin kaikki ulos - piirsin sen luonnospaperille, toin sen PhotoShopiin, loin paljon hienoja neonviivoja ja tehosteita. Se olisi voinut olla työpöydän taustakuva pikanäyttöruudun sijaan. Asia on, että olen luonut heille tämän todella hienon ja yksityiskohtaisen suunnittelun.
Kuten luultavasti arvata voi, he eivät pitäneet siitä. Suunnittelu, johon he menivät, oli kirjaimellisesti pieni logo muutamasta päällekkäisestä värillisestä ympyrästä ja sen alla oleva ohjelmiston nimi. Kuten 2 minuutin PhotoShop-työ. Ja tiedätkö mitä? Minun täytyi tavallaan myöntää, että se oli parempi kuin minun.
Esitän näin - mielestäni ohjelmoijat putoavat tähän ansaan tekemällä saman virheen kuin minä. Meillä on tapana ajatella käyttöliittymiä ja roiskunäyttöjä, joiden on oltava todella hienoja, huomiota herättäviä asioita, jotka tekevät sovelluksesta erottua joukosta . Mutta heidän ei tarvitse olla - rehellisesti, niiden ei pitäisi olla. Meidän pitäisi ottaa a ohjelmoijat ajattelutapa ja soveltaa sitä esteettiseen suunnitteluun - yksinkertainen, toimiva, toimii.
Tässä artikkelissa tarkastelemme joitain hyvin yksinkertaisia tapoja luoda tyylikäs Android APP UI / UX, vaikka sinulla ei ole melkein mitään suunnittelukokemusta.
Pysy materiaalisuunnittelussa, ellet todella halua jotain muuta
Sovelluksesi ei tarvitse olla ainutlaatuinen' ja “ erottua muista ” jotta se olisi suosittu ja näyttää hyvältä. Se on Google Materiaalisuunnittelu tavoitellaan - standardi sovellusten käyttöliittymille kaikkialla, ja he ovat tehneet hyvää työtä. Siellä on paljon suosittuja sovelluksia, jotka pitävät kiinni materiaalisuunnittelusta - jotkut Android-sovellusten suurimmista nimistä, kuten SwiftKey, Nova Launcher, Textra SMS, YouTube, vain muutamia mainitakseni.
Material Designin pääpaino on korttipohjaisessa ulkoasussa, jossa on yksivärinen paletti. Google työskenteli alan huippusuunnittelijoiden kanssa piirtäen paljon elementtejä minimalistisista suunnittelutavoista ja julkaisi sitten koko jutun ilmaiseksi - se on aika hyvä juttu, koska verkkosivustojen ja sovellusten suunnittelukursseilla voi käyttää satoja dollareita e-kirjoille, videoille jne.
Materiaalisuunnittelun aloittaminen on uskomattoman helppoa, ja on olemassa muutama työkalu, jotka tekevät siitä vieläkin yksinkertaisemman, ja luetellaan alla:
- Materiaaliteemaeditori (macOS + luonnos)
- Materiaalisuunnittelu Väripaletti-laajennus (PhotoShop / Illustrator)
- Materiaalisuunnittelun käyttöliittymä PSD (PhotoShop)
- Android-materiaalisuunnittelun käyttöliittymäpaketti ( Luonnos)
- Material UI Theme Generator
Ja jos tarvitset inspiraatiota yksinkertaisten, tyylikkäiden materiaalisuunnitteluteemojen luomiseen, tutustu näihin luetteloblogeihin:
- MaterialDesignBlog - 15 mahtavaa esimerkkiä materiaalisuunnittelusta oikein
- MockPlus - 12 parasta materiaalisuunnittelusivuston esimerkkiä inspiraation saamiseksi
- AndroidAuthority - 10 parasta materiaalisuunnittelusovellusta Androidille
Värin kaltevuudet ovat paljon helpompia kuin luulet
Materiaalisuunnittelun vaihtoehtona dolorin kaltevuudet ovat yksinkertaisia, trendikkäitä ja huomiota herättäviä. Ja saatat ajatella, että suunnittelijat viettävät paljon aikaa maalaamalla kaikilla väreillä tai suunnittelemalla lopullisen kaltevuuden. Olisit väärässä - se voidaan tehdä 10 sekunnissa PhotoShopissa.
10 sekuntia PhotoShop-liukuvalla käyttöliittymällä.
Käyn jopa läpi tämän, osoittaakseni kuinka helppoa se on.
Luo uusi PS-projekti mobiililaitteille ( 1080 x 1920 px @ 72 ppi toimii hyvin)
UIGradients.com - Suuri kokoelma valmiita kaltevuuksia.
Mene UIGradients.com ja löytää jotain mitä pidät.
Kopioi väri-hex-arvot UIGradientsista
Kopioi liukuvärit esikatselun yläpuolelta.
PhotoShop-liukuvalitsin.
Napsauta hiiren kakkospainikkeella tyhjää tasoa PS: ssä ja siirry kohtaan Blending Options> Gradient Overlay.
Napsauta suoraan kaltevuuskuvion esikatselua avattavassa valikossa - älä napsauta avattavaa painiketta. Napsauttamalla suoraan kaltevuutta avautuu värieditori.
Syötä heksadesimaaliarvot UIGradientista PS-gradienttityökaluun.
Liitä nyt vain liitä väri-hex-arvot UIGradientista PS-gradienttieditoriin.
Säädä tarvittaessa. Sinulla on nyt ammattimainen kaltevuustausta Android-sovelluksellesi.
Muut gradienttityökalut, jotka kannattaa tarkistaa:
- WebGradients.com
- Android Shapes Generator ( muotojen luomiseen XML: n kautta, liukuvalinnalla)
Käytä SVG: itä JPG / PNG: n sijaan
Sen sijaan, että käyttäisit PNG- tai JPG-tiedostoja graafisissa elementeissä (painikkeet, logot jne.), Sinun pitäisi todella käyttää SVG: itä ( Skaalautuva vektorigrafiikka) sen sijaan. Tämä johtuu siitä, että SVG-tiedostojen kokoa voidaan muuttaa menettämättä laatua - esimerkiksi jos skaalautat JPG: n suurempaan arvoon, se menettää laadun ja muuttuu epäselväksi / pikselöidyksi. SVG ei. Ihmiset yrittävät käyttää valtavia PNG-tiedostoja pienennetty sovittaa Android-näytöt - kun sen sijaan voit käyttää pienempiä SVG: itä skaalattu ilman laadun heikkenemistä.
Lisäksi SVG: t voivat olla jopa 60–80% pienempi tiedostokoko kuin PNG . Tämä tarkoittaa, että sovelluksesi tai mobiilisivustosi latautuu nopeammin käyttäjälle ja näyttää hyvältä näytön tarkkuudesta riippumatta.
Sisällytä tumma tila käyttämällä Theme.AppCompat.DayNight-sovellusta
Sinun ei tarvitse suunnitella kahta erillistä teemaa sisällyttääksesi pimeän / yötilan teeman sovellukseesi. Se on melko sisäänrakennettu AppCompat-kirjastoon, sinun tarvitsee vain ottaa se käyttöön ja muokata arvoja.
Katso Appualin opas Pimeän tilan toteuttaminen Android-sovelluksessa ”.
Käytä mallipohjaa tai mobiilikäyttöliittymäsarjaa
Jos sovelluksesi ei vaadi hienoa, räätälöityä käyttöliittymää, mallin tai paketin käyttämisessä ei ole mitään vikaa. Malleja ja sarjoja voidaan käyttää inspiroivana ohjeena, tai voit käyttää kirjaimellisesti vain mallia / pakettia sellaisenaan, lisäämällä omat painikkeet ja muut.
Hienoja resursseja Android-käyttöliittymämalleille ja -sarjoille:
- SpeckyBoy - 50 ilmaista mobiilikäyttöliittymäsarjaa iOS: lle ja Androidille
- SketchAppSources - Android-käyttöliittymäsovelluksen resurssit ( Luonnos)
- Freebiesbug - PSD-käyttöliittymäpaketit ( PhotoShop)
