Tilbage på dagen, hvor animerede splashlandingssider og smarte layouts var en ting, så var det sikkert fornuftigt at ansætte en professionel designer. Men tendensen i dag er minimal - eller i det mindste meget forenklet.
Lad mig give dig et anekdotisk eksempel - for et stykke tid tilbage bad nogen mig om at oprette en plasmaskærm til deres pc-software. Så jeg gik helt ud - tegnede det på skitsepapir, 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 sikkert kan gætte, kunne de ikke lide det. Designet, de gik med, var bogstaveligt talt et lille logo på et par overlappende farvede cirkler og softwarenavnet under det. Ligesom 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 laver, er således - jeg tror, at programmører falder i denne fælde med at begå den samme fejl, som jeg gjorde. Vi har tendens til at tænke på brugergrænseflader og stænkskærme, der skal være disse virkelig smarte, iøjnefaldende ting, der gør appen skille sig ud . Men de behøver ikke at være - ærligt talt burde de ikke være det. Vi skulle tage en programmører tankegang og anvend den på æstetisk design - enkel, funktionel, fungerer.
I denne artikel vil vi se på nogle meget enkle måder at oprette en elegant Android APP UI / UX på, selvom du næsten ikke har nogen designoplevelse.
Medmindre du virkelig vil have noget andet, skal du holde dig til materialedesign
Din app behøver ikke at være ' enestående' og “ skiller sig ud fra resten ” for at det skal være populært og se godt ud. Det er hvad Google er Materielt design sat 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 fast i Material Design - nogle af de største navne i Android-apps, som SwiftKey, Nova Launcher, Textra SMS, YouTube, for bare at nævne nogle få.
Materiales design fokuserer på et kortbaseret layout med en solid farvepalet. Google arbejdede med topindustriens designere, tegnede mange elementer fra minimalistisk designpraksis og frigav derefter det hele gratis - det er en temmelig god aftale, da web- og app-designkurser kan køre hundreder af dollars for e-bøger, videoer, etc.
Kom godt i gang med Material Design er utroligt let, og der er en håndfuld værktøjer, der gør det endnu enklere, som vi vil liste nedenfor:
- Materiel tema editor (macOS + skitse)
- Materiale Design Farvepalette plug-in (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit ( Skitse)
- Materiel UI Theme Generator
Og hvis du har brug for inspiration til at skabe enkle, elegante Material Design-temaer, så tjek disse listeblogs:
- MaterialDesignBlog - 15 Awesome eksempler på Material Design gjort rigtigt
- MockPlus - 12 bedste eksempler på design af websteder til materiale til tegning af inspiration
- AndroidAuthority - 10 bedste Material Design apps til Android
Farveforløb er lettere end du tror
For et alternativ til Material Design er dolorgradienter enkle, trendy og iøjnefaldende. Og du tror måske, at designere bruger meget tid på at male i alle farver eller designe den ultimative gradient. Du tager fejl - det kan gøres på 10 sekunder i PhotoShop.
10 sekunder i PhotoShop gradient UI.
Jeg vil endda gå 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 foruddefinerede gradienter.
Gå til UIGradients.com og find noget, du kan lide.
Kopiér hex-værdierne fra UIGradients
Kopier gradientfarverne ovenfra forhåndsvisningen.
PhotoShop gradientvælger.
Højreklik på et tomt lag i PS, og gå til Blandingsindstillinger> Gradientoverlay.
Klik direkte på forhåndsvisning af gradientmønster i rullemenuen - klik ikke på rullemenuen. Ved at klikke direkte på gradienten åbnes farveeditoren.
Indtast hex-værdier fra UIGradient i PS-gradientværktøj.
Indsæt nu bare indsæt farven hex værdier fra UIGradient i PS gradient editor.
Juster efter behov. Du har nu en professionel gradientbaggrund til din Android-app.
Andre gradientværktøjer, der er værd at tjekke ud:
- 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 uden at miste kvalitet - for eksempel, hvis du opskalerer en JPG til en større værdi, mister den kvaliteten og bliver sløret / pixeleret. En SVG gør det ikke. Folk prøver at bruge store PNG-filer, der vil være nedskaleret til at passe til Android-skærme - når du i stedet kan bruge mindre SVG'er, der er opskaleret uden tab af kvalitet.
Desuden 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 vil se 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 / nattilstandstema 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 et skabelon- eller mobil-UI-sæt
Hvis din app ikke kræver en fancy, tilpasset GUI, er der intet galt med at bruge en skabelon eller et sæt. Skabeloner og sæt kan bruges som en inspirerende retningslinje, eller du kan bogstaveligt talt bare bruge skabelonen / kittet, som det er, tilføje dine egne knapper og ting.
Nogle gode ressourcer til Android UI-skabeloner og kits:
- SpeckyBoy - 50 gratis mobile UI-sæt til iOS og Android
- SketchAppSources - Android UI App Resources ( Skitse)
- Freebiesbug - PSD UI-sæt ( PhotoShop)
