A napokban, amikor az animált fröccsenő céloldalak és a divatos elrendezés volt a dolog, akkor volt értelme profi tervezőt bérelni. De a tendencia ma az minimális - vagy legalábbis jelentősen leegyszerűsítve.
Hadd mondjak egy anekdotikus példát - egy ideje vissza, valaki megkért, hogy hozzon létre egy splash képernyőt a számítógépes szoftveréhez. Tehát mindent kimentem - rajzoltam vázlatos papírra, importáltam a PhotoShopba, rengeteg fantasztikus neon vonalat és effektet készítettem. Lehet, hogy asztali háttérkép volt, nem pedig villantó képernyő. A lényeg az, hogy ezt az igazán divatos és kidolgozott dizájnt hoztam létre számukra.
Ahogy valószínűleg sejteni lehet, nem tetszett nekik. A kialakítás, amellyel együtt jártak, szó szerint egy kis átfedésben lévő színes kör logója volt, és alatta a szoftver neve. Mint egy 2 perc a PhotoShop munkában. És tudod mit? Valahogy egyet kellett értenem abban, hogy jobb, mint az enyém.
A lényeg, amit így teszek - szerintem a programozók ebbe a csapdába esnek, amikor ugyanazt a hibát követik el, amit én is. Hajlamosak vagyunk a felhasználói felületekre és a fröccsenő képernyőkre gondolni, amelyeknek valóban divatos, figyelemfelkeltő dolgoknak kell lenniük, amelyek az alkalmazást kiáll . De nem kell - őszintén szólva, nem kellene. Vennünk kellene egy programozók gondolkodásmód és alkalmazza az esztétikai tervezésre - egyszerű, funkcionális, működik.
Ebben a cikkben megnézünk néhány nagyon egyszerű módszert egy elegáns Android APP UI / UX létrehozására, még akkor is, ha szinte nincs tapasztalata a tervezés során.
Hacsak nem igazán akar valami mást, maradjon az anyagtervezésnél
Az alkalmazásodnak nem kell lennie egyedi' és „ kiemelkedik a többi közül ” hogy népszerű és jól nézzen ki. Ez az, amit a Google Anyagtervezés elért célkitűzés - az alkalmazás felhasználói felületének szabványa az egész iparágban, és jó munkát végeztek. Rengeteg népszerű alkalmazás van, amely ragaszkodik az Anyagtervezéshez - az Android-alkalmazások egyik legnagyobb neve, például a SwiftKey, a Nova Launcher, a Textra SMS, a YouTube, hogy csak néhányat említsünk.
Az Anyagtervezés középpontjában a kártya alapú elrendezés áll, egyszínű palettával. A Google együttműködött az iparág vezető dizájnerjeivel, sok elemet levonva a minimalista tervezési gyakorlatokból, majd ingyen kiadta az egészet - ez nagyon jó üzlet, mivel a weboldal- és alkalmazástervező tanfolyamok több száz dollárt futtathatnak e-könyvekért, videókért, stb.
A Material Design használatának megkezdése hihetetlenül egyszerű, és van egy maroknyi eszköz, amely még egyszerűbbé teszi ezeket, és amelyeket alább felsorolunk:
- Anyag téma szerkesztő (macOS + vázlat)
- Anyagtervezés Színpaletta plug-in (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Anyagtervezési felület ( Vázlat)
- Material UI Theme Generator
Ha pedig inspirációra van szüksége egyszerű, elegáns Anyagtervezési témák létrehozásához, nézze meg a következő blogokat:
- MaterialDesignBlog - 15 Félelmetes példa az anyagtervezésre
- MockPlus - 12 legjobb anyagtervezési webhely-példa ihletet meríteni
- AndroidAuthority - 10 legjobb Anyagtervező alkalmazás az Android számára
A színátmenetek sokkal könnyebbek, mint gondolná
A Material Design alternatívájaként a dolor gradiensek egyszerűek, trendiek és figyelemfelkeltőek. És azt gondolhatja, hogy a tervezők sok időt töltenek az összes szín festésével vagy a végső színátmenet tervezésével. Tévedne - 10 másodperc alatt meg lehet csinálni a PhotoShopban.
10 másodperc PhotoShop gradiens felhasználói felületen.
Még végigvezetek rajtad, hogy megmutassam, milyen könnyű.
Hozzon létre egy új PS projektet a mobilhoz ( 1080 x 1920 px @ 72 ppi jól működik)
UIGradients.com - Előre elkészített színátmenetek nagy gyűjteménye.
Menj UIGradients.com és talál valamit, ami tetszik.
Másolja a színes hex értékeket az UIGradients-ből
Másolja a színátmenet színeit az előnézetből.
PhotoShop színátmenet választó.
Kattintson a jobb gombbal egy üres rétegre a PS-ben, és lépjen a Blending Options> Gradient Overlay elemre.
Kattintson közvetlenül a színátmenet mintájára a legördülő menüben - ne kattintson a legördülő gombra. Közvetlenül a színátmenetre kattintva megnyílik a színszerkesztő.
Adja meg az UIGradient hexadecimális értékeit a PS gradiens eszközbe.
Most csak illessze be az UIGradient szín hexadecimális értékeit a PS gradiens szerkesztőbe.
Szükség szerint állítsa be. Most már professzionális színátmenetes háttérrel rendelkezik az Android-alkalmazáshoz.
Egyéb átmeneti eszközök, amelyeket érdemes megnézni:
- WebGradients.com
- Android Shapes Generator ( alakzatok generálása XML-en keresztül, a színátmenet opcióval)
Használjon SVG-ket JPG / PNG helyett
Ahelyett, hogy PNG-ket vagy JPG-ket használna grafikus elemeihez (gombok, logók stb.), Valóban SVG-ket kell használnia ( Méretezhető vektorgrafika) helyette. Ennek oka, hogy az SVG-k átméretezhetők a minőség romlása nélkül - például, ha egy JPG-t nagyobbra méretez, akkor az elveszíti a minőségét és elmosódottá válik / pixeles lesz. Az SVG nem. Az emberek hatalmas PNG fájlokat próbálnak használni kicsinyített hogy illeszkedjen az Android képernyőihez - amikor ehelyett használhat kisebb SVG-ket, amelyek azok felskálázva minőségromlás nélkül.
Továbbá az SVG-k akár 60–80% -kal kisebb fájlméret, mint a PNG . Ez azt jelenti, hogy alkalmazásod vagy mobilwebhelyed gyorsabban töltődik be a felhasználó számára, és a képernyő felbontásától függetlenül jól fog kinézni.
Tartalmazzon egy sötét módot a Theme.AppCompat.DayNight használatával
Nem szükséges két külön témát megtervezni, hogy sötét / éjszakai módú témát vegyen fel az alkalmazásába. Nagyjából beépül az AppCompat könyvtárba, csak engedélyeznie kell és szerkesztenie kell az értékeket.
Lásd az Appual útmutatóját Sötét mód megvalósítása az Android alkalmazásban ”.
Használjon sablont vagy mobil felhasználói felületet
Ha az alkalmazás nem igényel divatos, személyre szabott grafikus felhasználói felületet, akkor semmi baj nincs azzal, ha sablont vagy készletet használ. A sablonok és készletek inspiráló iránymutatásként használhatók, vagy szó szerint egyszerűen csak a sablont / készletet használhatja, ahogy van, hozzáadva saját gombjait és egyéb dolgait.
Néhány nagyszerű forrás az Android felhasználói felület sablonjaihoz és készleteihez:
- SpeckyBoy - 50 ingyenes mobil felhasználói felület készlet iOS és Android rendszerhez
- SketchAppSources - Android UI alkalmazás-erőforrások ( Vázlat)
- Freebiesbug - PSD felhasználói felület készletek ( PhotoShop)
