Sådan designes en Android App UI, der ikke suger

Programmerere og udviklere er generelt ikke designere - dette accepteres bredt som sandt. Udviklere har en tendens til at fokusere på at få en app til at arbejde - designere fokuserer på at gøre appen æstetisk tiltalende . Men hvorfor kan ikke udviklere gøre det samme?

Tilbage i dagen, hvor animerede splashlandingssider og smarte layouts var en ting, så var det bestemt fornuftigt at ansætte en professionel designer. Men tendensen i dag er minimal - eller i det mindste enormt forenklet.

Lad mig give dig et anekdotisk eksempel - for et stykke tid tilbage bad nogen mig om at oprette en stænkskærm til deres pc-software. Så jeg gik helt ud - trak det ud på skissepapir, importerede det til PhotoShop, skabte masser af smarte neonlinjer og effekter. Det kunne have været et skrivebordsbaggrund snarere end en stænkskærm. Pointen er, at jeg skabte dette virkelig smarte og detaljerede design til dem.

Som du sandsynligvis kan gætte, kunne de ikke lide det. Designet de gik med var bogstaveligt talt et lille logo med et par overlappende farvede cirkler, og softwarenavnet under det. Som et 2 minut i PhotoShop-job. Og ved du hvad? Jeg måtte slags være enig i, at det var bedre end mit.

Pointen jeg gør er således - jeg tror, ​​at programmører falder i denne fælde med at begå den samme fejl, som jeg gjorde. Vi har en tendens til at tænke på UI'er og stænkskærme, der behøver at være disse virkelig smarte, iøjnefaldende ting, der får appen til at skille sig ud . Men de behøver ikke være det - ærligt, de skulle ikke være det. Vi bør tage en programmerers tankegang og anvende det til æstetisk design - enkle, funktionelle værker.

I denne artikel skal vi se på nogle meget enkle måder at oprette en elegant Android APP UI / UX, selvom du næsten ikke har nogen designoplevelse.

Hold dig til materialedesign, medmindre du virkelig ønsker noget andet

Din app behøver ikke at være " unik" og " skille sig ud fra resten" for at den skal være populær og se godt ud. Det var, hvad Googles Materialedesign satte sig for at opnå - en standard for app-UI'er i hele branchen, og de har gjort et godt stykke arbejde. Der er masser af populære apps derude, der holder sig til Material Design - nogle af de største navne i Android-apps, såsom SwiftKey, Nova Launcher, Textra SMS, YouTube, for blot at nævne nogle få.

Materialedesigns kernefokus er på et kortbaseret layout med en solid farvepalet. Google arbejdede med topindustridesignere, tegnet en masse elementer fra minimalistisk designpraksis og frigav derefter det hele gratis - det er en temmelig god aftale, da websider og app-designkurser kan køre hundreder af dollars til e-bøger, videoer, etc.

Det er utroligt nemt at komme i gang med Material Design, og der er en håndfuld værktøjer, der gør det endnu enklere, som vi viser nedenfor:

  • Materiale temareditor (macOS + skitse)
  • Materiale Design Color Palette plug-in (PhotoShop / Illustrator)
  • Materialdesign UI Kit PSD (PhotoShop)
  • Brugergrænseflade til Android Material Design ( Sketch)
  • Materiel UI-temagenerator

Og hvis du har brug for noget inspiration til at skabe enkle, elegante materialedesigntemaer, så tjek disse listeblogger:

  • MaterialDesignBlog - 15 Fantastiske eksempler på materialedesign udført rigtigt
  • MockPlus - 12 bedste webstedseksempler på materiale til design til inspiration
  • AndroidAuthority - 10 bedste apps til materialedesign til Android

Farveforløb er meget lettere end du tror

Som et alternativ til Materialedesign er dolorgradienter enkle, trendy og iøjnefaldende. Og du kan måske tro, at designere bruger en masse tid på at male i alle farver eller designe den ultimative gradient. Du har forkert - det kan ske på 10 sekunder i PhotoShop.

10 sekunder i PhotoShop gradient UI.

Jeg vil endda føre dig igennem dette for at vise dig, hvor let det er.

Opret et nyt PS-projekt til mobil ( 1080 x 1920 px @ 72 ppi fungerer fint)

UIGradients.com - Stor samling af foruddannede gradueringer.

Gå til UIGradients.com og find noget, du kan lide.

Kopier farvehex-værdierne fra UIG-radioer

Kopier gradientfarverne ovenfra for eksempel.

PhotoShop-gradientvælger.

Højreklik på et tomt lag i PS og gå til Blending Options> Gradient Overlay.

Klik direkte på forhåndsvisning af gradientmønster i rullemenuen - klik ikke på rullelisten. Klik direkte på gradienten åbner farveeditoren.

Indtast hex-værdier fra UIGradient til PS-gradientværktøj.

Nu skal du bare indsætte indsæt farvehekseværdierne fra UIGradient i PS-gradienteditor.

Juster efter behov. Du har nu en professionel gradientbaggrund til din Android-app.

Andre gradientværktøjer, der er værd at tjekke:

  • WebGradients.com
  • Android Shapes Generator ( til generering af figurer via XML, med mulighed for gradient)

Brug SVG'er i stedet for JPG / PNG

I stedet for at bruge PNG'er eller JPG'er til dine grafiske elementer (knapper, logoer osv.) Skal du virkelig bruge SVG'er ( skalerbar vektorgrafik) i stedet. Dette skyldes, at SVG'er kan ændres til størrelse uden at miste kvalitet - hvis du for eksempel opskalerer en JPG til en større værdi, mister den kvaliteten og bliver uskarp / pixeleret. En SVG gør det ikke. Folk prøver at bruge enorme PNG-filer, der skal nedskaleres for at passe til Android-skærme - når du i stedet kan bruge mindre SVG'er, der er opskaleret uden tab af kvalitet.

Derudover kan SVG'er være op til 60% til 80% mindre i filstørrelse end PNG . Dette betyder, at din app eller dit mobile websted indlæses hurtigere for brugeren og ser godt ud uanset skærmopløsningen.

Inkluder en mørk tilstand ved hjælp af Theme.AppCompat.DayNight

Du behøver ikke at designe to separate temaer for at inkludere et mørkt / nat-tilstandstema i din app. Det er stort set indbygget i AppCompat-biblioteket, du skal bare aktivere det og redigere værdierne.

Se Appual's guide “Sådan implementeres en mørk tilstand i din Android-app”.

Brug en skabelon eller et mobil UI-sæt

Hvis din app ikke kræver en fancy, tilpasset GUI, er der absolut intet galt med at bruge en skabelon eller et kit. Skabeloner og sæt kan bruges som en inspirerende retningslinje, eller du kan bogstaveligt talt bare bruge skabelonen / sættet, som det er, ved at tilføje dine egne knapper og ting.

Nogle gode ressourcer til Android UI-skabeloner og -sæt:

  • SpeckyBoy - 50 gratis mobile UI-sæt til iOS og Android
  • SketchAppSources - App-ressourcer til Android UI ( Sketch)
  • Freebiesbug - PSD UI-sæt ( PhotoShop)

Interessante Artikler