Ako navrhnúť používateľské rozhranie aplikácie pre Android, ktoré nevysáva

Ako Na To
. Prečo však vývojári nemôžu robiť to isté?



V dobe, keď animované úvodné stránky s úvodným textom a efektné rozloženia boli vecou, ​​malo si potom určite zmysel angažovať profesionálneho dizajnéra. Dnešný trend však je minimálne - alebo prinajmenšom výrazne zjednodušený.

Poviem vám anekdotický príklad - pred časom ma niekto požiadal, aby som vytvoril úvodnú obrazovku pre jeho počítačový softvér. Takže som išiel celý von - nakreslil som to na skicársky papier, importoval do PhotoShopu, vytvoril množstvo efektných neónových liniek a efektov. Mohla to byť skôr tapeta pracovnej plochy, ako úvodná obrazovka. Ide o to, že som pre nich vytvoril tento skutočne efektný a prepracovaný dizajn.



Ako asi tušíte, nepáčilo sa im to. Dizajn, s ktorým išli, bolo doslova malé logo niekoľkých prekrývajúcich sa farebných kruhov a pod ním názov softvéru. Rovnako ako 2 minúty v práci vo PhotoShope. A vieš čo? Trochu som musel súhlasiť, že to bolo lepšie ako moje.



Ide mi o to - myslím si, že programátori sa dostanú do tejto pasce toho, že urobia rovnakú chybu, akú som urobil ja. Máme tendenciu myslieť na to, že používateľské rozhrania a úvodné obrazovky musia byť týmito skutočne efektnými, pútavými vecami, ktoré robia aplikáciu. vyniknúť . Ale nemusia byť - úprimne povedané, nemali by byť. Mali by sme si vziať programátorov myslenie a aplikovať ho na estetický dizajn - jednoduché, funkčné, funguje.



V tomto článku sa pozrieme na niekoľko veľmi jednoduchých spôsobov, ako vytvoriť elegantné rozhranie Android APP UI / UX, aj keď nemáte takmer žiadne skúsenosti s navrhovaním.

Pokiaľ naozaj nechcete niečo iné, držte sa materiálového dizajnu

Vaša aplikácia nemusí byť „ jedinečný “ a „ vyniknúť od ostatných “ aby bol populárny a vyzeral dobre. To je to, čo Google Materiálové prevedenie stanovené na dosiahnutie - štandard pre používateľské rozhranie aplikácií v celom priemysle a odviedli dobrú prácu. Existuje množstvo populárnych aplikácií, ktoré sa držia Material Designu - sú to niektoré z najväčších mien v aplikáciách pre Android, napríklad SwiftKey, Nova Launcher, Textra SMS, YouTube.

Hlavné zameranie Material Designu je rozloženie na báze kariet s plnou farebnou paletou. Google spolupracoval so špičkovými priemyselnými dizajnérmi, čerpal veľa prvkov z minimalistických dizajnérskych postupov a potom vydal celú vec zadarmo - to je celkom dobrý obchod, pretože kurzy dizajnu webových stránok a aplikácií môžu za stovky elektronických dolárov, videí, atď.



Začíname s materiálovým dizajnom je neuveriteľne ľahké a existuje niekoľko nástrojov, ktoré to ešte zjednodušujú, a ktoré uvedieme nižšie:

  • Editor tém materiálu (macOS + Skica)
  • Materiál Dizajn Doplnok farebnej palety (PhotoShop / Illustrator)
  • Material Design UI Kit PSD (PhotoShop)
  • Súprava používateľského rozhrania Android Material Design ( Skica)
  • Generátor témy používateľského rozhrania materiálu

A ak potrebujete inšpiráciu na vytvorenie jednoduchých, elegantných tém materiálového dizajnu, pozrite si tieto zoznamy blogov:

Farebné prechody sú jednoduchšie, ako si myslíte

Ako alternatívu k materiálovému dizajnu sú gradienty farieb jednoduché, trendy a pútavé. A možno si myslíte, že návrhári trávia veľa času maľovaním vo všetkých farbách alebo navrhovaním dokonalého prechodu. Mýlili by ste sa - vo PhotoShope sa to dá zvládnuť za 10 sekúnd.

10 sekúnd v užívateľskom rozhraní PhotoShop s prechodom.

Týmto vás dokonca prevediem, aby som vám ukázal, aké ľahké je to.

Vytvorte nový projekt PS pre mobil ( 1080 x 1920 px @ 72 ppi funguje dobre)

UIGradients.com - veľká zbierka vopred pripravených prechodov.

Ísť do UIGradients.com a nájdi niečo, čo sa ti páči.

Skopírujte hexadecimálne hodnoty farieb z UIGradients

Skopírujte farby prechodu zhora z ukážky.

PhotoShop prechodový selektor.

Pravým tlačidlom myši kliknite na prázdnu vrstvu v systéme PS a vyberte položky Možnosti miešania> Prechod s prechodom.

Kliknite priamo na ukážku gradientového vzoru v rozbaľovacej ponuke - neklikajte na rozbaľovacie tlačidlo. Kliknutím priamo na prechod sa otvorí editor farieb.

Vložte hexadecimálne hodnoty z UIGradientu do nástroja s gradientom PS.

Teraz stačí vložiť a vložiť hexadecimálne hodnoty farieb z UIGradientu do editoru gradientov PS.

Podľa potreby upravte. Teraz máte pre svoju aplikáciu pre Android profesionálne gradientné pozadie.

Ďalšie nástroje na prechod, ktoré stojí za to skontrolovať:

Použite súbory SVG namiesto JPG / PNG

Namiesto toho, aby ste pre svoje grafické prvky (tlačidlá, logá atď.) Používali súbory PNG alebo JPG, mali by ste skutočne používať súbory SVG ( Škálovateľná vektorová grafika) namiesto toho. Je to preto, že veľkosť SVG je možné meniť bez straty kvality - napríklad ak zvýšite JPG na vyššiu hodnotu, stratí kvalitu a stane sa rozmazaným / pixelovaným. SVG nie. Ľudia sa snažia používať obrovské súbory PNG, ktoré budú zmenšené aby sa zmestili na obrazovky Android - keď namiesto toho môžete použiť menšie súbory SVG, ktoré sú upscalovaný bez akejkoľvek straty kvality.

World of Warcraft nedokázal naštartovať 3D zrýchlenie

SVG môžu byť ďalej až O 60% až 80% menšia veľkosť súboru ako PNG . To znamená, že sa vaša aplikácia alebo mobilný web načítajú pre používateľa rýchlejšie a budú vyzerať dobre bez ohľadu na rozlíšenie obrazovky.

Zahrňte temný režim pomocou Theme.AppCompat.DayNight

Ak chcete do svojej aplikácie zahrnúť tému tmavého / nočného režimu, nemusíte navrhovať dva samostatné motívy. Je to v podstate zabudované v knižnici AppCompat, stačí to povoliť a upraviť hodnoty.

Pozri sprievodcu Appual “ Ako implementovať tmavý režim vo vašej aplikácii pre Android “.

Použite šablónu alebo súpravu mobilného používateľského rozhrania

Ak vaša aplikácia nevyžaduje efektné a prispôsobené grafické používateľské rozhranie, nie je na použití šablóny alebo súpravy nič zlé. Šablóny a súpravy môžu byť použité ako inšpiratívne usmernenie, alebo môžete použiť šablónu / súpravu tak, ako sú, a pridať svoje vlastné tlačidlá a ďalšie veci.

Niektoré skvelé zdroje pre šablóny a súpravy používateľského rozhrania systému Android:

  • SpeckyBoy - 50 bezplatných súprav mobilného používateľského rozhrania pre iOS a Android
  • SketchAppSources - Zdroje aplikácií pre používateľské rozhranie Android ( Skica)
  • Freebiesbug - Sady PSD UI ( PhotoShop)
Značky Android Rozvoj 4 minúty prečítané