Hur man utformar en Android-appgränssnitt som inte suger
Programmerare och utvecklare är i allmänhet inte designers - detta accepteras allmänt som sant. Utvecklare tenderar att fokusera på att få en app att fungera - designers fokuserar på att göra appen estetiskt tilltalande . Men varför kan inte utvecklare göra detsamma?
Tillbaka på dagen, när animerade splash-målsidor och snygga layouter var en sak, då var det meningsfullt att anställa en professionell designer. Men trenden idag är minimal - eller åtminstone mycket förenklad.
Låt mig ge dig ett anekdotiskt exempel - en stund tillbaka bad någon mig skapa en stänkskärm för sin PC-programvara. Så jag gick helt ut - drog ut det på skisspapper, importerade det till PhotoShop, skapade massor av snygga neonlinjer och effekter. Det kunde ha varit en skrivbordsunderlägg snarare än en stänkskärm. Poängen är att jag skapade denna riktigt snygga och detaljerade design för dem.
Som du antagligen kan gissa, gillade de inte det. Designen de gick med var bokstavligen en liten logotyp med några överlappande färgade cirklar och mjukvarunamnet under den. Som en 2 minut i PhotoShop-jobb. Och vet du vad? Jag var tvungen att hålla med om att det var bättre än mitt.
Poängen jag gör är alltså - jag tror att programmerare faller i den fällan att göra samma misstag som jag gjorde. Vi tenderar att tänka på användargränssnitt och stänkskärmar som behöver vara dessa riktigt snygga, iögonfallande saker som gör att appen sticker ut . Men de behöver inte vara det - ärligt talat, de borde inte vara det. Vi bör ta en programmerares tankesätt och tillämpa den på estetisk design - enkla, funktionella, verk.
I den här artikeln kommer vi att titta på några mycket enkla sätt att skapa en elegant Android APP UI / UX, även om du har nästan ingen formgivningsupplevelse.
Håll dig fast vid materialdesign om du verkligen inte vill ha något annat
Din app behöver inte vara " unik" och " sticker ut från resten" för att den ska vara populär och se bra ut. Det var vad Googles materialdesign försökte uppnå - en standard för app-användargränssnitt i hela branschen, och de har gjort ett bra jobb. Det finns massor av populära appar där ute som håller sig vid Material Design - några av de största namnen i Android-appar, som SwiftKey, Nova Launcher, Textra SMS, YouTube, för att bara nämna några.
Materialdesigns kärnfokus ligger på en kortbaserad layout med en färgpalett. Google arbetade med toppindustridesigners, ritade många element från minimalistisk designpraxis och släppte sedan hela saken gratis - det är en ganska bra affär, eftersom webb- och appdesignkurser kan köra hundratals dollar för e-böcker, videor, etc.
Att komma igång med Materialdesign är oerhört enkelt, och det finns en handfull verktyg som gör det ännu enklare, vilket vi listar nedan:
- Materialredigerare (macOS + Sketch)
- Materialdesign Color Palette plug-in (PhotoShop / Illustrator)
- Materialdesign UI Kit PSD (PhotoShop)
- Android Material UI-kit ( skiss)
- Material UI Theme Generator
Och om du behöver lite inspiration för att skapa enkla, eleganta materialdesigntema, kolla in dessa listbloggar:
- MaterialDesignBlog - 15 Fantastiska exempel på materialdesign gjort rätt
- MockPlus - 12 bästa webbplatser för materialdesign för att dra inspiration
- AndroidAuthority - 10 bästa appar för materialdesign för Android
Färggradienter är mycket lättare än du tror
Som ett alternativ till Materialdesign är dolorgradienter enkla, trendiga och iögonfallande. Och du kanske tror att designers lägger ner mycket tid på att måla i alla färger, eller utformar den ultimata lutningen. Du skulle ha fel - det kan göras på 10 sekunder i PhotoShop.
Jag ska till och med leda dig igenom detta för att visa hur lätt det är.
Skapa ett nytt PS-projekt för mobil ( 1080 x 1920 px @ 72 ppi fungerar bra)
Gå till UIGradients.com och hitta något du gillar.
Kopiera toningsfärgerna ovanför förhandsgranskningen.
Högerklicka på ett tomt lager i PS och gå till Blending Options> Gradient Overlay.
Klicka direkt på förhandsvisningen av lutningsmönstret i rullgardinsmenyn - klicka inte på rullgardinsmenyn. Om du klickar direkt på lutningen öppnas färgredigeraren.
Klistra bara in klistra in färghexvärden från UIGradient i PS-gradientredigerare.
Justera vid behov. Du har nu en professionell gradientbakgrund för din Android-app.
Andra lutningsverktyg som är värda att kolla in:
- WebGradients.com
- Android Shapes Generator ( för att generera former via XML, med alternativ för gradient)
Använd SVG: er istället för JPG / PNG
Istället för att använda PNG: er eller JPG: er för dina grafiska element (knappar, logotyper osv.) Bör du verkligen använda SVG: er ( skalbar vektorgrafik) istället. Detta beror på att SVG: er kan ändras i storlek utan att förlora kvalitet - till exempel, om du uppskalar en JPG till ett större värde, förlorar den kvaliteten och blir suddig / pixelerad. En SVG gör det inte. Människor försöker använda enorma PNG-filer som ska nedskalas för att passa på Android-skärmar - när du istället kan använda mindre SVG: er som är uppskalade utan kvalitetsförlust.
Dessutom kan SVG: er vara upp till 60% till 80% mindre i filstorlek än PNG . Detta betyder att din app eller mobilwebbplats laddas snabbare för användaren och kommer att se bra ut oavsett skärmupplösning.
Inkludera ett mörkt läge med hjälp av Theme.AppCompat.DayNight
Du behöver inte utforma två separata teman för att inkludera ett mörkt / nattläge-tema i din app. Det är ganska inbyggt i AppCompat-biblioteket, du behöver bara aktivera det och redigera värdena.
Se Appuals guide “Hur man implementerar ett mörkt läge i din Android-app”.
Använd en mall eller mobil UI-kit
Om din app inte kräver en snygg, anpassad GUI, är det absolut inget fel med att använda en mall eller kit. Mallar och kit kan användas som en inspirerande riktlinje, eller du kan bokstavligen bara använda mallen / satsen som den är, lägga till dina egna knappar och grejer.
Några bra resurser för Android UI-mallar och -satser:
- SpeckyBoy - 50 gratis mobila UI-kit för iOS och Android
- SketchAppSources - App-resurser för Android UI ( Sketch)
- Freebiesbug - PSD UI- kit ( PhotoShop)
