Takrat, ko so bile animirane ciljne strani in modne postavitve stvar, potem je bilo gotovo smiselno najeti profesionalnega oblikovalca. Toda današnji trend je minimalno - ali vsaj zelo poenostavljeno.
Naj vam dam anekdotičen primer - nekaj časa nazaj me je nekdo prosil, naj ustvarim začetni zaslon za njihovo računalniško programsko opremo. Tako sem šel ven - narisal sem ga na skicirnem papirju, uvozil v PhotoShop, ustvaril veliko modnih neonskih linij in učinkov. Lahko bi šlo za ozadje namizja in ne za začetni zaslon. Bistvo je v tem, da sem zanje ustvaril to resnično modno in dodelano obliko.
Kot verjetno ugibate, jim ni bilo všeč. Dizajn, s katerim so se odločili, je bil dobesedno majhen logotip nekaj prekrivajočih se barvnih krogov in ime programske opreme pod njim. Na primer 2 minuti v programu PhotoShop. In veste kaj? Nekako sem se moral strinjati, da je boljši od mojega.
Poanta, ki jo izpostavljam, je torej - mislim, da programerji padejo v to past, da so storili isto napako kot jaz. Običajno razmišljamo o uporabniških vmesnikih in začetnih zaslonih, ki bi morali biti resnično modne, privlačne stvari, zaradi katerih je aplikacija izstopati . Vendar jim ni treba biti - iskreno, ne bi smeli biti. Morali bi vzeti a programerji miselnost in jo uporabite za estetsko oblikovanje - preprosto, funkcionalno, deluje.
V tem članku bomo preučili nekaj zelo preprostih načinov za ustvarjanje elegantnega uporabniškega vmesnika / uporabniškega vmesnika za Android APP, četudi skoraj nimaš izkušenj pri oblikovanju.
Držite se materialnega oblikovanja, razen če si resnično želite kaj drugega
Za vašo aplikacijo ni treba edinstven ' in ' izstopajo od ostalih ' da bo priljubljena in bo videti dobro. To je tisto, kar Google Materialno oblikovanje dosegli - standard za uporabniški vmesnik aplikacij v celotni panogi in so dobro opravili svoje delo. Obstaja kopica priljubljenih aplikacij, ki se držijo Material Design - nekaj največjih imen v aplikacijah za Android, kot so SwiftKey, Nova Launcher, Textra SMS, YouTube, če naštejemo samo nekatere.
Osrednji poudarek Material Design je na postavitvi na osnovi kartic z enobarvno paleto. Google je sodeloval z vrhunskimi oblikovalci v industriji, pri čemer je veliko elementov črpal iz minimalističnih oblikovalskih praks, nato pa je vse skupaj izdal brezplačno - to je precej dobro, saj lahko tečaji oblikovanja spletnih strani in aplikacij naredijo na stotine dolarjev za e-knjige, videoposnetke itd.
Uvod v materialno oblikovanje je neverjetno enostaven in obstaja nekaj orodij, ki ga poenostavijo, kar bomo spodaj našteli:
- Urejevalnik materialnih tem (macOS + skica)
- Vtičnik Color Design Paleta materiala (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Komplet uporabniškega vmesnika za materialno zasnovo Android ( Skica)
- Generator tem uporabniškega vmesnika materiala
In če potrebujete navdih za ustvarjanje preprostih, elegantnih tem Material Design, si oglejte te spletne dnevnike s seznami:
- MaterialDesignBlog - 15 super primerov materialnega oblikovanja, narejenega pravilno
- MockPlus - 12 najboljših primerov za spletno oblikovanje materialov, s katerimi lahko narišete navdih
- AndroidAuthority - 10 najboljših aplikacij Material Design za Android
Barvni prelivi so precej enostavnejši, kot si mislite
Kot alternativa materialnemu oblikovanju so prelivi barv preprosti, trendovski in privlačni. In morda mislite, da oblikovalci porabijo veliko časa za barvanje v vseh barvah ali za oblikovanje končnega gradienta. Motili bi se - to lahko storite v 10 sekundah v PhotoShopu.
10 sekund v uporabniškem vmesniku PhotoShop gradient.
Celo skozi vas bom vodil, da vam pokažem, kako enostavno je.
Ustvari nov projekt PS za mobilne naprave ( 1080 x 1920 px @ 72 ppi deluje dobro)
UIGradients.com - Velika zbirka vnaprej izdelanih prelivov.
Pojdi do UIGradients.com in poiščite nekaj, kar vam je všeč.
Kopirajte šestnajstiške vrednosti barve iz UIGradients
Kopirajte prelivne barve od zgoraj predogleda.
Izbirnik gradienta PhotoShop.
Z desno miškino tipko kliknite prazen sloj v PS in pojdite na Blending Options> Gradient Overlay.
V spustnem meniju kliknite neposredno na predogled vzorca prelivanja - ne kliknite na spustni gumb. Če kliknete neposredno na preliv, se odpre urejevalnik barv.
Vnesite šestnajstiške vrednosti iz UIGradienta v orodje za gradient PS.
Zdaj le prilepite barvne šestnajstiške vrednosti iz UIGradienta v urejevalnik gradienta PS.
Po potrebi prilagodite. Zdaj imate profesionalno gradientno ozadje za svojo aplikacijo za Android.
Druga orodja za gradient, ki jih je vredno preveriti:
- WebGradients.com
- Generator oblik Android ( za generiranje oblik prek XML, z možnostjo gradienta)
Uporabite SVG namesto JPG / PNG
Namesto da uporabljate PNG ali JPG za grafične elemente (gumbi, logotipi itd.), Bi morali res uporabljati SVG ( Prilagodljiva vektorska grafika) namesto tega. Razlog za to je, da je mogoče velikosti SVG spremeniti, ne da bi pri tem izgubili kakovost - če na primer JPG povečate na večjo vrednost, ta izgubi kakovost in postane zamegljen / pikseliziran. SVG ne. Ljudje poskušajo uporabiti ogromne datoteke PNG, ki bodo pomanjšana da se prilega zaslonom Android - kadar pa namesto tega lahko uporabite manjše SVG-je, ki so nadgrajena brez izgube kakovosti.
Poleg tega je lahko SVG največ Velikost datoteke je od 60% do 80% manjša od PNG . To pomeni, da se bo aplikacija ali mobilno spletno mesto za uporabnika nalagalo hitreje in bo videti dobro, ne glede na ločljivost zaslona.
Vključite temni način z uporabo Theme.AppCompat.DayNight
Za vključitev teme temnega / nočnega načina v aplikacijo vam ni treba oblikovati dveh ločenih tem. Ta je precej vgrajen v knjižnico AppCompat, samo omogočiti jo morate in urediti vrednosti.
Glejte Appualov vodnik ' Kako uporabiti temni način v svoji aplikaciji za Android '.
Uporabite komplet predlog ali mobilnega uporabniškega vmesnika
Če vaša aplikacija ne zahteva modnega, prilagojenega grafičnega uporabniškega vmesnika, z uporabo predloge ali kompleta ni popolnoma nič narobe. Predloge in kompleti se lahko uporabijo kot navdihujoče vodilo, lahko pa dobesedno preprosto uporabite predlogo / komplet, kakršen je, in dodate svoje gumbe in stvari.
Nekaj odličnih virov za predloge in komplete za uporabniški vmesnik Android:
- SpeckyBoy - 50 brezplačnih kompletov za uporabniški vmesnik za mobilne naprave za iOS in Android
- SketchAppSources - Viri aplikacij za uporabniški vmesnik Android ( Skica)
- Freebiesbug - Kompleti uporabniškega vmesnika PSD ( PhotoShop)
