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.

10 másodperc a PhotoShop gradiens felhasználói felületén.

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)

UIGradients.com - Előre gyártott színátmenetek nagy gyűjteménye.

Látogasson el az UIGradients.com oldalra, és keressen valamit, ami tetszik.

Másolja a színes hexa értékeket az UIGradients-ből

Másolja a színátmenet színeit az előnézet felülről.

PhotoShop gradiensválasztó.

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ő.

Írja be a hexagán értékeket az UIGradient-ból a PS gradiens eszközbe.

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)

Érdekes Cikkek