Programuotojai ir kūrėjai paprastai nėra dizaineriai - tai plačiai pripažįstama kaip tiesa. Kūrėjai linkę sutelkti dėmesį į tai, kad programa veiktų - dizaineriai sutelkia dėmesį į tai, kad programa būtų estetiškai patraukli . Bet kodėl kūrėjai negali to padaryti?

Tą dieną, kai buvo animaciniai purslų nukreipimo puslapiai ir išgalvoti maketai, tikrai reikėjo pasamdyti profesionalų dizainerį. Tačiau šiandien tendencija yra minimali arba bent jau labai supaprastinta.

Leiskite pateikti jums anekdotinį pavyzdį - prieš kurį laiką kažkas paprašė manęs sukurti savo kompiuterio programinės įrangos ekraną. Taigi aš viską išėjau - nupiešiau ant eskizo popieriaus, importavau į „PhotoShop“, sukūriau daugybę įmantrių neoninių linijų ir efektų. Tai galėjo būti darbalaukio fonai, o ne ekranas. Esmė ta, kad sukūriau jiems šį išties puikų ir įmantrų dizainą.

Kaip jūs tikriausiai galite atspėti, jiems tai nepatiko. Dizainas, su kuriuo jie vyko, tiesiog buvo mažas kelių sutampančių spalvotų apskritimų logotipas ir po juo esantis programinės įrangos pavadinimas. Kaip 2 minutės „PhotoShop“ darbe. Ir žinai ką? Aš tarsi turėjau sutikti, kad tai buvo geriau nei mano.

Taigi noriu pasakyti, kad - manau, kad programuotojai patenka į spąstus padaryti tą pačią klaidą, kurią padariau aš. Mes linkę galvoti apie vartotojo sąsajas ir „purslų ekranus“, kurie turi būti šie išgalvoti, akį traukiantys dalykai, išskiriantys programą. Bet jie neturi būti - sąžiningai, jie neturėtų būti. Turėtume pasirinkti programuotojo mąstyseną ir pritaikyti ją estetiniam dizainui - nesudėtingiems, funkcionaliems darbams.

Šiame straipsnyje apžvelgsime keletą labai paprastų būdų, kaip sukurti elegantišką „Android APP“ UI / UX, net jei beveik neturite projektavimo patirties.

Laikykitės materialaus dizaino, nebent tikrai norite kažko kito

Jūsų programa neturi būti „ unikali“ ir „ išsiskirianti iš kitų“, kad ji būtų populiari ir gerai atrodytų. Štai ką siekė pasiekti „Google“ medžiagų dizainas - visoje programoje esančių programų UI standartas, ir jie atliko gerą darbą. Čia yra daugybė populiarių programų, kurios prilimpa prie „Material Design“ - vieni didžiausių vardų „Android“ programose, pavyzdžiui, „SwiftKey“, „Nova Launcher“, „Textra SMS“, „YouTube“.

Pagrindinis „Material Design“ akcentas yra išdėstymas kortelėmis, turinčių vientisą spalvų paletę. „Google“ dirbo su geriausiais pramonės dizaineriais, iš minimalistinio dizaino praktikos piešė daugybę elementų, o paskui nemokamai išleido visą daiktą - tai gana geras dalykas, nes svetainių ir programų kūrimo kursai gali paleisti šimtus dolerių el. Knygoms, vaizdo įrašams, tt

Pradėti naudoti „Medžiagų dizainą“ yra be galo lengva, be to, yra keletas įrankių, kurie padaro jį dar paprastesnį, kurį išvardinsime toliau:

• Medžiagos temos rengyklė („macOS“ + eskizas)
• Medžiagos dizaino spalvų paletės papildinys („PhotoShop“ / „Illustrator“)
• Medžiagų dizaino vartotojo sąsajos rinkinys PSD („PhotoShop“)
• „Android“ medžiagų dizaino UI rinkinys ( eskizas)
• Medžiagos UI temos generatorius

Ir jei jums reikia įkvėpimo kuriant paprastas, elegantiškas „Material Design“ temas, peržiūrėkite šiuos sąrašų tinklaraščius:

• „MaterialDesignBlog“ - 15 nuostabių medžiagų dizaino pavyzdžių, padarytų teisingai
• „MockPlus“ - 12 geriausių medžiagų dizaino internetinių svetainių pavyzdžių, leidžiančių semtis įkvėpimo
• „AndroidAuthority“ - 10 geriausių medžiagų projektavimo programų, skirtų „Android“

Spalvų gradientai yra daug lengvesni, nei jūs manote

Medžiagos dizainui alternatyva yra paprasta, madinga ir patraukli. Galite pamanyti, kad dizaineriai daug laiko praleidžia dažydami visomis spalvomis arba kurdami aukščiausią gradientą. Jūs klysite - tai galima padaryti per 10 sekundžių „PhotoShop“.

10 sekundžių „PhotoShop“ gradiento UI.

Aš net peržvelgsiu tave, kad parodyčiau, kaip lengva.

Sukurkite naują mobiliųjų telefonų PS projektą ( 1080 x 1920 px @ 72 ppi puikiai veikia)

UIGradients.com - didelė iš anksto paruoštų nuolydžių kolekcija.

Eikite į UIGradients.com ir raskite tai, kas jums patinka.

Nukopijuokite spalvotų šešiakampių reikšmes iš UIGradients

Nukopijuokite nuolydžio spalvas iš viršaus peržiūra.

„PhotoShop“ gradiento parinkiklis.

Dešiniuoju pelės mygtuku spustelėkite tuščią PS sluoksnį ir eikite į Blending Options> Gradient Overlay.

Spustelėkite tiesiai ant nuolydžio modelio peržiūros išskleidžiamajame meniu - nespauskite ant išskleidžiamojo mygtuko. Spustelėjus tiesiai ant gradiento, atidaroma spalvų rengyklė.

Įveskite gradiento UIGradient šešioliktaines vertes į PS gradiento įrankį.

Dabar tiesiog įklijuokite spalvotų šešioliktainių reikšmių iš UIGradient į PS gradiento rengyklę.

Sureguliuokite pagal poreikį. Dabar turite „Android“ programos profesionalų gradiento foną.

Kiti gradiento įrankiai, kuriuos verta patikrinti:

• „WebGradients.com“
• „Android Shapes Generator“ ( formoms generuoti per XML, su galimybe nuolydžiui)

Naudokite SVG, o ne JPG / PNG

Užuot naudodami PNG ar JPG savo grafiniams elementams (mygtukai, logotipai ir tt), turėtumėte naudoti SVG ( Scalable Vector Graphics) . Taip yra todėl, kad SVG dydį galima pakeisti neprarandant kokybės - pavyzdžiui, jei JPG padidinate iki didesnės vertės, jis praranda kokybę ir tampa neryškus / pikseliuotas. SVG to nedaro. Žmonės bando naudoti didžiulius PNG failus, kurių mastelis sumažinamas, kad tilptų „Android“ ekranuose. Vietoj to galite naudoti mažesnes SVG, kurios yra padidintos mastelio, neprarandant kokybės.

Be to, SVG failai gali būti nuo 60% iki 80% mažesni nei PNG . Tai reiškia, kad jūsų programa ar svetainė mobiliesiems vartotojui bus įkelta greičiau ir atrodys gerai, nesvarbu, kokia ekrano skiriamoji geba.

Įtraukite tamsųjį režimą naudodami „Theme.AppCompat.DayNight“

Nereikia projektuoti dviejų atskirų temų, kad į savo programą įtrauktumėte tamsaus / naktinio režimo temą. Tai gana daug integruota į „AppCompat“ biblioteką, jums tereikia ją įgalinti ir redaguoti reikšmes.

Žr. „Appual“ vadovą „Kaip įdiegti tamsųjį režimą„ Android “programoje“.

Naudokite šabloną arba mobiliojo vartotojo sąsają

Jei jūsų programai nereikia išgalvoto, tinkinto GUI, naudojant šabloną ar rinkinį nėra nieko blogo. Šablonai ir rinkiniai gali būti naudojami kaip įkvepiančios gairės arba tiesiog galite tiesiog naudoti šabloną / rinkinį tokį, koks yra, pridėdami savo mygtukus ir kitus dalykus.

Keletas puikių „Android“ UI šablonų ir rinkinių šaltinių:

• „SpeckyBoy“ - 50 nemokamų mobiliųjų sąsajų rinkinių, skirtų „iOS“ ir „Android“
• „SketchAppSources“ - „Android“ UI programos ištekliai ( eskizas)
• „Freebiesbug“ - PSD vartotojo sąsajos rinkiniai („ PhotoShop“)