Hvordan lage en Android-app-brukergrensesnitt som ikke suger
Programmerere og utviklere er vanligvis ikke designere - dette er allment akseptert som sant. Utviklere har en tendens til å fokusere på å få en app til å fungere - designere fokuserer på å gjøre appen estetisk tiltalende . Men hvorfor kan ikke utviklere gjøre det samme?
Tilbake på dagen, da animerte sprutlandingssider og fancy oppsett var en ting, da var det fornuftig å ansette en profesjonell designer. Men trenden i dag er minimal - eller i det minste enormt forenklet.
La meg gi deg et anekdotisk eksempel. For en stund tilbake ba noen meg om å lage en sprutskjerm for PC-programvaren deres. Så jeg gikk helt ut - tegnet det på skissepapir, importerte det til PhotoShop, skapte masse fancy neonlinjer og effekter. Det kunne ha vært et skrivebordsbakgrunn, snarere enn en sprutskjerm. Poenget er at jeg skapte dette virkelig fancy og forseggjorte designet for dem.
Som du sikkert kan gjette, likte de ikke det. Designet de gikk med var bokstavelig talt en liten logo med noen få overlappende fargede sirkler, og programvarenavnet under. Som et 2 minutters jobb i PhotoShop. Og vet du hva? Jeg måtte slags være enig i at det var bedre enn mitt.
Poenget jeg gjør er altså - jeg tror programmerere faller i denne fellen med å gjøre den samme feilen som jeg gjorde. Vi har en tendens til å tenke på brukergrensesnitt og splash-skjermer som trenger å være disse veldig fancy, iøynefallende tingene som gjør at appen skiller seg ut . Men de trenger ikke være det - ærlig talt, det burde de ikke være. Vi bør ta en programmerers tankesett og bruke det på estetisk design - enkle, funksjonelle, fungerer.
I denne artikkelen skal vi se på noen veldig enkle måter å lage en elegant Android APP UI / UX, selv om du nesten ikke har noen designeropplevelse.
Hold deg til materialdesign med mindre du virkelig ønsker noe annet
Appen din trenger ikke å være " unik" og " skille seg ut fra resten" for at den skal være populær og se bra ut. Det var det Googles Material Design ønsket å oppnå - en standard for app-brukergrensesnitt i 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.
Material Designs kjernefokus er på en kortbasert layout med en fargepalett. Google jobbet med toppindustridesignere, tegnet mange elementer fra minimalistisk designpraksis, og ga deretter ut hele saken gratis - det er en ganske god avtale, siden kurs og design for nettsteder og apper kan tjene hundrevis av dollar for e-bøker, videoer, etc.
Det er utrolig enkelt å komme i gang med Material Design, og det er en håndfull verktøy som gjør det enda enklere, som vi vil liste nedenfor:
- Materialtemaeditor (macOS + Sketch)
- Materialdesign fargepalett-plugin-modul (PhotoShop / Illustrator)
- Materialdesign UI Kit PSD (PhotoShop)
- Brukergrensesnitt for Android Material Design ( Skisse)
- Tema-generator for materiell UI
Og hvis du trenger litt inspirasjon for å lage enkle, elegante Material Design-temaer, sjekk ut disse listebloggene:
- MaterialDesignBlog - 15 Fantastiske eksempler på Material Design gjort riktig
- MockPlus - 12 beste nettstedseksempler på materialdesign for å tegne inspirasjon
- AndroidAuthority - 10 beste apper for materialdesign for Android
Fargeoverganger er mye enklere enn du tror
For et alternativ til Material Design er dolor gradienter enkle, trendy og iøynefallende. Og du kan tro at designere bruker mye tid på å male i alle farger, eller designe den ultimate gradienten. Du vil ta feil - det kan gjøres om 10 sekunder i PhotoShop.
Jeg vil til og med lede deg gjennom dette, for å vise deg hvor enkelt det er.
Lag et nytt PS-prosjekt for mobil ( 1080 x 1920 px @ 72 ppi fungerer fint)
Gå til UIGradients.com og finn noe du liker.
Kopier gradientfargene fra forhåndsvisningen.
Høyreklikk på et tomt lag i PS, og gå til Blending Options> Gradient Overlay.
Klikk direkte på forhåndsvisningen av gradientmønsteret i rullegardinmenyen - ikke klikk på rullegardinmenyen. Når du klikker direkte på gradienten, åpnes fargeeditoren.
Nå er det bare å lime inn lim inn fargehekseverdien 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:
- WebGradients.com
- Android Shapes Generator ( for å generere figurer via XML, med mulighet for gradient)
Bruk SVGer i stedet for JPG / PNG
I stedet for å bruke PNG-er eller JPG-er for grafiske elementer (knapper, logoer osv.), Bør du virkelig bruke SVG-er ( skalerbar vektorgrafikk) i stedet. Dette er fordi SVG-er kan endres størrelse uten å miste kvaliteten. Hvis du for eksempel oppskalerer en JPG til en større verdi, mister den kvaliteten og blir uskarp / pixelert. En SVG gjør det ikke. Folk prøver å bruke enorme PNG-filer som skal nedskaleres for å passe til Android-skjermer - når du i stedet kan bruke mindre SVG-er som er oppskalert uten tap av kvalitet.
Videre kan SVG-er være opptil 60% til 80% mindre i filstørrelse enn PNG . Dette betyr at appen eller mobilnettstedet ditt 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 å designe to separate temaer for å inkludere et mørkt / nattmodus-tema i appen din. Det er ganske mye innebygd i AppCompat-biblioteket, du trenger bare å aktivere det og redigere verdiene.
Se Appuals guide “Hvordan implementere en mørk modus i Android-appen din”.
Bruk en mal eller et mobilt brukergrensesnitt
Hvis appen din ikke krever noen spesiell, tilpasset GUI, 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 sånt.
Noen gode ressurser for Android UI-maler og sett:
- SpeckyBoy - 50 gratis mobile UI-sett for iOS og Android
- SketchAppSources - Applikasjonsressurser for Android UI ( Sketch)
- Freebiesbug - PSD UI-sett ( PhotoShop)
