Tillbaka på dagen, när animerade stänklandningssidor och snygga layouter var en sak, var det säkert meningsfullt att anställa en professionell designer. Men trenden idag är minimal - eller åtminstone kraftigt förenklad.
Låt mig ge dig ett anekdotiskt exempel - för en stund tillbaka bad någon mig att skapa en stänkskärm för deras PC-programvara. Så jag gick helt ut - ritade det på skisspapper, importerade det till PhotoShop, skapade massor av snygga neonlinjer och effekter. Det kan 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 förmodligen kan gissa tyckte de inte om det. Designen de gick med var bokstavligen en liten logotyp med några överlappande färgade cirklar och programvarunamnet nedanför. Gilla, en 2 minuter 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 hamnar i denna fälla att göra samma misstag som jag gjorde. Vi brukar tänka på användargränssnitt och stänkskärmar som behöver vara dessa riktigt snygga, iögonfallande saker som gör appen stå ut . Men de behöver inte vara - ärligt talat borde de inte vara det. Vi borde ta en programmerare tänkesätt och tillämpa den på estetisk design - enkelt, funktionellt, fungerar.
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 nästan inte har någon designupplevelse.
Håll dig till materialdesign om du inte vill ha något annat
Din app behöver inte vara ” unik' och “ sticker ut från resten ” för att det ska vara populärt och se bra ut. Det är vad Google har Materialdesign för att uppnå - en standard för app-gränssnitt i hela branschen, och de har gjort ett bra jobb. Det finns massor av populära appar där ute som håller fast vid Materialdesign - 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 solid färgpalett. Google arbetade med toppindustridesigners, ritade många element från minimalistisk designpraxis och släppte sedan allt gratis - det är en ganska bra affär, eftersom webbplats- och appdesignkurser kan kosta hundratals dollar för e-böcker, videor, etc.
Att komma igång med Material Design är otroligt enkelt, och det finns en handfull verktyg som gör det ännu enklare, vilket vi listar nedan:
- Material Temaredaktör (macOS + skiss)
- Plugin-program för materialdesign färgpalett (PhotoShop / Illustrator)
- Materialdesign UI-kit PSD (PhotoShop)
- Android Material Design UI Kit ( Skiss)
- Material UI Theme Generator
Och om du behöver lite inspiration för att skapa enkla, eleganta materialdesignteman, kolla in dessa listbloggar:
- MaterialDesignBlog - 15 Fantastiska exempel på materialdesign gjort rätt
- MockPlus - 12 bästa webbplatser för materialdesignwebbplatser för att rita inspiration
- AndroidAuthority - 10 bästa appar för materialdesign för Android
Färgtoningar är lättare än du tror
För ett alternativ till materialdesign är dolor-lutningar enkla, trendiga och iögonfallande. Och du kanske tror att designers spenderar mycket tid på att måla i alla färger eller utforma den ultimata lutningen. Du skulle ha fel - det kan göras på tio sekunder i PhotoShop.
10 sekunder i PhotoShop-lutningsgränssnittet.
Jag går till och med 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)
UIGradients.com - Stor samling av färdiga lutningar.
Gå till UIGradients.com och hitta något du gillar.
Kopiera färgvärdena från UIGradients
Kopiera övertoningsfärgerna ovanför förhandsvisningen.
PhotoShop-gradientväljare.
Högerklicka på ett tomt lager i PS och gå till Blandningsalternativ> Gradientoverlay.
Klicka direkt på förhandsgranskningen av lutningsmönstret i rullgardinsmenyn - klicka inte på rullgardinsmenyn. Genom att klicka direkt på lutningen öppnas färgredigeraren.
Mata in hex-värden från UIGradient i PS-gradientverktyget.
Klistra bara in klistra in färgvärdena från UIGradient i PS-gradientredigeraren.
Justera efter behov. Du har nu en professionell lutningsbakgrund för din Android-app.
Andra lutningsverktyg 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 eller JPG för dina grafiska element (knappar, logotyper, etc.) borde du verkligen använda SVG ( Skalbar vektorgrafik) istället. Detta beror på att SVG: er kan ändras utan att kvaliteten tappas - om du till exempel 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 stora PNG-filer som kommer att vara nedskalad för att passa Android-skärmar - när du istället kan använda mindre SVG uppskalad utan kvalitetsförlust.
Dessutom kan SVG: er vara upp till 60-80% mindre filstorlek än PNG . Det 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 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 mycket inbyggt i AppCompat-biblioteket, du behöver bara aktivera det och redigera värdena.
Se Appuals guide “ Så här implementerar du ett mörkt läge i din Android-app ”.
Använd en mall eller ett mobilgränssnitt
Om din app inte kräver ett snyggt, anpassat GUI, är det absolut inget fel med att använda en mall eller ett kit. Mallar och kit kan användas som en inspirerande riktlinje, eller så kan du 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 kit:
- SpeckyBoy - 50 gratis mobilgränssnitt för iOS och Android
- SketchAppSources - App-resurser för Android UI ( Skiss)
- Freebiesbug - PSD UI-kit ( PhotoShop)
