Hogyan lehet megtervezni egy olyan Android alkalmazás-felhasználói felületet, amely nem szopja
A programozók és a fejlesztők általában nem tervezők - ezt széles körben elfogadják igaznak. A fejlesztők általában arra koncentrálnak, hogy egy alkalmazás működjön - a tervezők arra koncentrálnak, hogy az alkalmazás esztétikailag vonzóvá váljon . De miért nem tudják a fejlesztők ugyanezt tenni?
A nap folyamán, amikor az animált csobbanás céloldalak és a divatos elrendezések voltak dolgok, akkor biztos volt, hogy értelme volt professzionális tervezőt felvenni. A mai tendencia azonban minimális - vagy legalábbis jelentősen egyszerűsödött.
Hadd mondjak egy anekdotikus példát - egy ideje vissza valaki felkért, hogy készítsenek egy splash képernyőt a PC-jükhez. Tehát mindent elmentem - rajzoltam vázlatpapírra, importáltam a PhotoShopba, sok divatos neonvonalat és effektusokat készítettem. Lehetséges, hogy egy háttérképet töltött le, mint egy splash képernyőt. A lényeg az, hogy létrehoztam nekik ezt a nagyon divatos és kifinomult mintát.
Mint valószínűleg hiszem, nem tetszett nekik. A rajzolatú terv szó szerint néhány, egymást átfedő színes kör apró logója volt, alatta pedig a szoftver neve. Például egy 2 perc alatt a PhotoShop munkában. És tudod mit? Valahogy be kellett értenem, hogy jobb, mint az enyém.
A lényeg tehát az, hogy gondolom: a programozók ebbe a csapdába esnek, és ugyanazt a hibát követték el, mint én. Hajlamosak vagyunk az UI-kre és a splash képernyőkre gondolni, amelyeknek ezeknek a nagyon divatos, szemet gyönyörködtető dolgoknak kell lenniük, amelyek az alkalmazást kiemelik . De nem kell, hogy legyenek - őszintén szólva, nem kellene. A programozó gondolkodásmódját figyelembe kell vennünk, és alkalmazni kell az esztétikai tervezésre - egyszerű, funkcionális, működik.
Ebben a cikkben néhány nagyon egyszerű módszert keresünk egy elegáns Android APP UI / UX létrehozásához, még akkor is, ha szinte nincs tervezési tapasztalata.
Hacsak nem akar valami mást, maradjon meg az anyagi formatervezésen
Az alkalmazásnak nem kell, hogy „ egyedi” és „ kitűnjön a többi részből”, hogy népszerű és jól néz ki. A Google Material Design ezt a célt tűzte ki célul - az alkalmazások felhasználói felületének szabványa az iparban, és jó munkát végeztek. Van egy csomó népszerű alkalmazás, amelyek ragaszkodnak az Anyagtervezéshez - az Android-alkalmazások egyik legnagyobb neve, mint például a SwiftKey, a Nova Launcher, a Textra SMS, a YouTube, csak néhányat említenek.
Az Material Design fókuszában a kártyaalapú elrendezés és a szilárd színpaletta található. A Google együtt dolgozott az iparág legfontosabb tervezőivel, sok elemet rajzolt a minimalista tervezési gyakorlatokból, majd ingyenesen kiadta az egészet - ez nagyon jó üzlet, mivel a weboldalak és az alkalmazások tervezési tanfolyamai több száz dollárt fizethetnek e-könyvek, videók, stb.
Hihetetlenül egyszerű az anyagtervezés megkezdése, és van egy maroknyi eszköz, amely még egyszerűbbé teszi ezt, amelyet az alábbiakban felsorolunk:
- Anyag témaszerkesztő (macOS + Sketch)
- Anyagtervezési színpaletta beépülő modul (PhotoShop / Illustrator)
- Anyagtervezés UI Kit PSD (PhotoShop)
- Android anyagtervezési felhasználói felület készlet ( vázlat)
- Anyag UI téma generátor
És ha valamilyen inspirációra van szüksége az egyszerű, elegáns Anyagtervezési témák létrehozásához, akkor nézd meg ezeket a listablogokat:
- MaterialDesignBlog - 15 félelmetes példa a helyesen elkészített anyagtervezésre
- MockPlus - 12 legjobb anyagtervezési webhely-példa inspirációra
- AndroidAuthority - 10 legjobb anyagtervezési alkalmazás az Android számára
A színátmenetek sokkal könnyebbek, mint gondolnád
Az Anyagtervezés alternatívájaként a dolor gradiensek egyszerűek, divatosak és vonzóak. É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 megtervezésével. Tévedsz - 10 másodperc alatt megteheti a PhotoShopban.
Még át is megyek rajta, hogy megmutassam, milyen egyszerű ez.
Hozzon létre egy új PS projektet a Mobile számára ( 1080 x 1920 px @ 72 ppi jól működik)
Látogasson el az UIGradients.com oldalra, és keressen valamit, ami tetszik.
Másolja a színátmenet színeit az előnézet felülről.
Kattintson a jobb gombbal egy üres rétegre a PS-ben, és lépjen a Keverési beállítások> Színátmeneti overlay elemre.
Kattintson közvetlenül a gradiensminta előnézetére a legördülő menüben - ne kattintson a legördülő gombra. A közvetlenül a színátmenetre kattintva megnyílik a színszerkesztő.
Most csak illessze be a színes hexa értékeket az UIGradient alkalmazásból a PS gradiens szerkesztőbe.
Állítsa be, ha szükséges. Most már rendelkezik professzionális gradiens háttérrel Android-alkalmazásához.
Egyéb ellenőrző érdemes gradiens eszközök:
- WebGradients.com
- Android Shapes Generator (alakzatok létrehozására XML-en keresztül, gradiens opcióval)
Használjon SVG-ket JPG / PNG helyett
Ahelyett, hogy a grafikus elemekhez (gombok, logók stb.) PNG-ket vagy JPG-ket használna, valójában SVG-ket ( Scalable Vector Graphics) kell használni. Ennek oka az, hogy az SVG-k átméretezhetők a minőség elvesztése nélkül - például, ha egy JPG-t egy nagyobb értékre állít fel, akkor az elveszíti a minőségét, és homályos / pixelezetté válik. Az SVG nem. Az emberek megpróbálnak olyan hatalmas PNG-fájlokat használni, amelyek mérete az Android képernyőkhöz igazodik - ehelyett kisebb méretű SVG-ket is használhat, amelyek minősége nem romlik.
Ezenkívül az SVG fájlok mérete akár 60–80% -kal is kisebb lehet, mint a PNG . Ez azt jelenti, hogy az alkalmazás vagy a mobil webhely gyorsabban töltődik be a felhasználó számára, és jól néz ki, függetlenül a képernyő felbontásától.
Vegye fel a sötét módot a Theme.AppCompat.DayNight használatával
Nem kell két külön témát megterveznie, hogy a sötét / éjszakai mód témáját felvegye az alkalmazásába. Nagyon sok bele van építve 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 bevezetése az Android alkalmazásába”.
Használjon sablont vagy mobil felhasználói felületkészletet
Ha az alkalmazás nem igényel képzeletbeli, testreszabott felhasználói felületet, akkor semmi baj van egy sablon vagy készlet használatával. A sablonok és a készletek inspiráló iránymutatásként használhatók, vagy szó szerint a sablont / készletet is használhatja, ahogy van, hozzáadva a saját gombjait és dolgait.
Néhány nagyszerű forrás az Android felhasználói felület sablonjaihoz és csomagjaihoz:
- SpeckyBoy - 50 ingyenes mobil felhasználói felületkészlet iOS-hez és Android-hoz
- SketchAppSources - Android felhasználói felület App Resources ( Sketch)
- Freebiesbug - PSD felhasználói felületkészletek ( PhotoShop)