Programátori a vývojári vo všeobecnosti nie sú dizajnéri - to sa všeobecne považuje za pravdivé. Vývojári sa zameriavajú na to, aby aplikácia fungovala - dizajnéri sa zameriavajú na esteticky príťažlivú aplikáciu. Ale prečo vývojári nemôžu robiť to isté?

V ten deň, keď boli animované vstupné stránky s rozstrekovaným prúdom a efektné rozmiestnenie vecí vec, určite si dal najať profesionálneho dizajnéra. Dnešný trend je však minimálny - alebo aspoň výrazne zjednodušený.

Dovoľte mi uviesť neoficiálny príklad - chvíľu som ma požiadal, aby som pre svoj počítačový softvér vytvoril úvodnú obrazovku. Takže som vyšiel všetko - vytiahol to na skica papiera, importoval ho do PhotoShopu, vytvoril veľa efektných neónových čiar a efektov. Mohla to byť skôr tapeta na pracovnej ploche ako úvodná obrazovka. Ide o to, že som pre nich vytvoril tento skutočne vymyslený a prepracovaný dizajn.

Ako asi viete, nepáčilo sa im to. Dizajn, ktorý používali, bol doslova malé logo niekoľkých prekrývajúcich sa farebných kruhov a názov softvéru pod ním. Rovnako ako 2 minúty v práci PhotoShop. A viete čo? Musel som trochu súhlasiť, že to bolo lepšie ako moje.

Ide mi o to, že programátori spadajú do tejto pasce, keď urobili rovnakú chybu, akú som urobil. Máme tendenciu vymýšľať používateľské rozhranie a úvodné obrazovky, ktoré musia byť skutočne efektnými a pútavými vecami, vďaka ktorým vynikne aplikácia. Ale nemusia byť - úprimne, nemali by byť. Mali by sme vziať programátorské zmýšľanie a aplikovať ho na estetický dizajn - jednoduché, funkčné, práce.

V tomto článku sa zameriame 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 bola populárna a vyzerala dobre. To je to, čo sa snažil dosiahnuť materiálový dizajn spoločnosti Google - štandard pre používateľské rozhranie aplikácií v celom odvetví a odviedli dobrú prácu. Tam je veľa populárnych aplikácií, ktoré sa držia Material Design - niektoré z najväčších mien v aplikáciách pre Android, ako sú SwiftKey, Nova Launcher, Textra SMS, YouTube, len aby sme vymenovali aspoň niektoré.

Hlavné zameranie materiálového dizajnu je usporiadanie na karte s pevnou paletou farieb. Google spolupracoval s najlepšími priemyselnými dizajnérmi, kreslil veľa prvkov z minimalistických postupov pri navrhovaní a potom vydal celú vec zadarmo - to je celkom dobré, pretože kurzy dizajnu webových stránok a aplikácií môžu spúšťať stovky dolárov za elektronické knihy, videá, atď.

Začíname s materiálnym dizajnom je neuveriteľne ľahké a existuje niekoľko nástrojov, ktoré ho ešte zjednodušia. Zoznam je uvedený nižšie:

• Editor materiálových motívov (MacOS + Skica)
• Doplnok pre farebnú paletu materiálového dizajnu (PhotoShop / Illustrator)
• Súprava UI pre dizajn materiálov PSD (PhotoShop)
• Súprava UI pre Android Material Design ( náčrt)
• Generátor tém používateľského rozhrania

Ak potrebujete inšpiráciu na vytváranie jednoduchých a elegantných tém materiálového dizajnu, pozrite si tieto zoznamy blogov:

• MaterialDesignBlog - 15 Úžasné príklady dobrého dizajnu materiálu
• MockPlus - 12 príkladov webových stránok s najlepším materiálovým dizajnom, ktoré môžu inšpirovať
• AndroidAuthority - 10 najlepších aplikácií pre dizajn materiálov pre Android

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

Ako alternatívu k materiálovému dizajnu sú prechody dolor jednoduché, trendy a pútavé. A možno si myslíte, že dizajnéri trávia veľa času maľovaním vo všetkých farbách alebo navrhovaním konečného gradientu. Mýli by ste sa - vo PhotoShope to môžete urobiť do 10 sekúnd.

10 sekúnd v rozhraní PhotoShop s prechodom.

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

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

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

Prejdite na stránku UIGradients.com a nájdite niečo, čo sa vám páči.

Skopírujte hodnoty hexánu z UIGradientov

Skopírujte farby prechodu z náhľadu.

Prepínač gradientu PhotoShop.

Pravým tlačidlom myši kliknite na prázdnu vrstvu v PS a prejdite na Možnosti miešania> Prekrytie prechodom.

V rozbaľovacej ponuke kliknite priamo na ukážku vzoru gradientu - neklikajte na tlačidlo rozbaľovacej ponuky. Kliknutím priamo na prechod otvoríte editor farieb.

Vložte hexadecimálne hodnoty z nástroja UIGradient do nástroja prechodu na PS.

Teraz jednoducho prilepte hodnoty hexov farieb z UIGradient do editora gradientov PS.

Upravte podľa potreby. Teraz máte profesionálne pozadie pre svoju aplikáciu pre Android.

Ďalšie prechodné nástroje, ktoré sa oplatia vyskúšať:

• WebGradients.com
• Generátor tvarov Android ( na generovanie tvarov pomocou XML, s možnosťou prechodu)

Použite SVG namiesto JPG / PNG

Namiesto použitia PNG alebo JPG pre grafické prvky (tlačidlá, logá atď.) By ste namiesto toho mali používať SVG ( Scalable Vector Graphics) . Je to z toho dôvodu, že veľkosť SVG sa dá zmeniť bez straty kvality - napríklad, ak zmeníte veľkosť JPG na vyššiu hodnotu, stratí sa kvalita a stane sa rozmazanou / pixelovanou. 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ú vylepšené bez straty kvality.

Okrem toho môžu byť SVG až o 60% až 80% menšie ako veľkosť súboru ako PNG . To znamená, že vaša aplikácia alebo webová stránka pre mobil sa pre používateľa načíta rýchlejšie a bude vyzerať dobre bez ohľadu na rozlíšenie obrazovky.

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

Ak chcete do svojej témy zahrnúť aj temný / nočný režim, nemusíte navrhovať dve samostatné témy. Je do značnej miery zabudovaná do knižnice AppCompat, stačí ju povoliť a upraviť hodnoty.

Pozrite si príručku Appual „Ako implementovať tmavý režim do aplikácie pre Android“.

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

Ak vaša aplikácia nevyžaduje luxusné prispôsobené používateľské rozhranie, s použitím šablóny alebo súpravy nie je 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 doslova tak, ako sú, pridaním vlastných tlačidiel a podobne.

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

• SpeckyBoy - 50 bezplatných súprav mobilných používateľských rozhraní pre iOS a Android
• SketchAppSources - Zdroje aplikácií pre rozhranie Android ( Skica)
• Freebiesbug - PSD UI súpravy ( PhotoShop)