Hvordan lage et Android-appgrensesnitt som ikke suger

Slik Gjør Du Det
. Men hvorfor kan ikke utviklere gjøre det samme?



Tilbake på dagen, da animerte sprutlandingssider og fancy layout var en ting, var det sikkert fornuftig å ansette en profesjonell designer. Men trenden i dag er minimal - eller i det minste langt forenklet.

La meg gi deg et anekdotisk eksempel - for en stund tilbake ba noen meg om å lage en sprutskjerm for PC-programvaren. Så jeg gikk helt ut - tegnet den på skissepapir, importerte den til PhotoShop, opprettet mange fancy neonlinjer og effekter. Det kan ha vært et skrivebordsbakgrunn, snarere enn en sprutskjerm. Poenget er at jeg skapte denne virkelig fancy og forseggjorte designen for dem.



Som du sikkert kan gjette, likte de ikke det. Designet de gikk med var bokstavelig talt en liten logo med noen overlappende fargede sirkler, og programvarenavnet under den. Som et 2 minutt i PhotoShop-jobb. Og vet du hva? Jeg måtte liksom være enig i at det var bedre enn mitt.



Poenget jeg gjør er dermed - jeg tror programmerere faller i denne fellen med å gjøre den samme feilen som jeg gjorde. Vi pleier å tenke på brukergrensesnitt og sprutskjermer som trenger å være disse virkelig fancy, iøynefallende tingene som gjør appen skille seg ut . Men de trenger ikke å være det - ærlig talt burde de ikke være det. Vi burde ta en programmer’s tenkemåte og bruk den på estetisk design - enkel, funksjonell, fungerer.



I denne artikkelen ser vi på noen veldig enkle måter å lage en elegant Android APP UI / UX, selv om du nesten ikke har noen designopplevelse.

Hold deg til materialdesign med mindre du virkelig vil ha noe annet

Appen din trenger ikke å være “ unik' og “ skiller seg ut fra resten ” for at den skal være populær og se bra ut. Det er det Google har Materiell design satt opp for å oppnå - en standard for app-brukergrensesnitt over hele bransjen, og de har gjort en god jobb. Det er mange populære apper der ute som holder seg til Material Design - noen av de største navnene i Android-apper, som SwiftKey, Nova Launcher, Textra SMS, YouTube, for bare å nevne noen.

Materialdesign har hovedfokus på et kortbasert oppsett, med en solid fargepalett. Google jobbet med topp bransjedesignere, tegnet mange elementer fra minimalistisk designpraksis, og ga deretter ut hele greia gratis - det er ganske bra, siden nettsteds- og appdesignkurs kan løpe hundrevis av dollar for e-bøker, videoer, etc.



Å komme i gang med Material Design er utrolig enkelt, og det er en håndfull verktøy som gjør det enda enklere, som vi vil liste opp nedenfor:

  • Materiell temaredaktør (macOS + skisse)
  • Materiell design fargepalett plug-in (PhotoShop / Illustrator)
  • Material Design UI Kit PSD (PhotoShop)
  • Android Material Design UI Kit ( Skisse)
  • Materiell UI Theme Generator

Og hvis du trenger litt inspirasjon til å lage enkle, elegante Material Design-temaer, sjekk ut disse listebloggene:

Fargeoverganger er enklere enn du tror

For et alternativ til Material Design er dolor gradienter enkle, trendy og iøynefallende. Og du tror kanskje at designere bruker mye tid på å male i alle farger, eller å designe den ultimate gradienten. Du tar feil - det kan gjøres på 10 sekunder i PhotoShop.

10 sekunder i PhotoShop gradient UI.

Jeg vil til og med gå gjennom dette for å vise deg hvor enkelt det er.

Lag et nytt PS-prosjekt for Mobile ( 1080 x 1920 px @ 72 ppi fungerer bra)

UIGradients.com - Stor samling pre-made gradienter.

Gå til UIGradients.com og finn noe du liker.

Kopier fargenesverdiene fra UIGradients

Kopier gradientfargene ovenfra forhåndsvisningen.

PhotoShop gradientvelger.

Høyreklikk på et tomt lag i PS, og gå til Blandingsalternativer> Gradientoverlegg.

Klikk direkte på forhåndsvisningen av gradientmønsteret i rullegardinmenyen - ikke klikk på rullegardinknappen. Ved å klikke direkte på forløpningen åpnes fargeditoren.

Skriv inn heksverdier fra UIGradient i PS-gradientverktøy.

Nå er det bare å lime inn limverdiene for hex-farger fra UIGradient i PS-gradienteditor.

Juster etter behov. Du har nå en profesjonell gradientbakgrunn for Android-appen din.

Andre gradientverktøy som er verdt å sjekke ut:

Bruk SVG-er i stedet for JPG / PNG

I stedet for å bruke PNG eller JPG for dine grafiske elementer (knapper, logoer osv.), Bør du virkelig bruke SVG ( Skalerbar vektorgrafikk) i stedet. Dette er fordi SVG-er kan endres uten å miste kvalitet - for eksempel, hvis du oppskalerer en JPG til en større verdi, mister den kvaliteten og blir uskarp / pikselert. En SVG gjør det ikke. Folk prøver å bruke store PNG-filer som vil være nedskalert for å passe til Android-skjermer - når du i stedet kan bruke mindre SVG-er oppskalert uten tap av kvalitet.

world of warcraft klarte ikke å starte opp 3d akselerasjon

Videre kan SVG-er være opp til 60% til 80% mindre filstørrelse enn PNG . Dette betyr at appen din eller mobilnettstedet vil lastes raskere for brukeren, og vil se bra ut uansett skjermoppløsning.

Inkluder en mørk modus ved hjelp av Theme.AppCompat.DayNight

Du trenger ikke å utforme to separate temaer for å inkludere et mørkt / natt-modus-tema i appen din. Det er ganske mye innebygd i AppCompat-biblioteket, du trenger bare å aktivere det og redigere verdiene.

Se Appuals guide “ Slik implementerer du en mørk modus i Android-appen din ”.

Bruk et mal- eller mobilgrensesnittsett

Hvis appen din ikke krever en fancy, tilpasset brukergrensesnitt, er det absolutt ingenting galt med å bruke en mal eller et sett. Maler og sett kan brukes som en inspirerende retningslinje, eller du kan bokstavelig talt bare bruke malen / settet som det er, og legge til dine egne knapper og ting.

Noen gode ressurser for Android UI-maler og sett:

  • SpeckyBoy - 50 gratis mobile UI-sett for iOS og Android
  • SketchAppSources - Android UI App Resources ( Skisse)
  • Freebiesbug - PSD UI-sett ( PhotoShop)
Merker Android Utvikling 4 minutter lest