Kaip sukurti „Android“ programos vartotojo sąsają, kuri nemėgsta

. Bet kodėl kūrėjai negali padaryti to paties?



Tais laikais, kai buvo reikalingi animaciniai purslų nukreipimo puslapiai ir puošnūs maketai, buvo prasminga samdyti profesionalų dizainerį. Tačiau šiandien tendencija yra minimalus - arba bent jau gerokai supaprastinta.

Pateiksiu jums anekdotinį pavyzdį - dar kurį laiką kažkas paprašė manęs sukurti savo kompiuterio programinei įrangai skirtą ekrano užsklandą. Taigi išėjau viską - nupiešiau ant eskizinio popieriaus, importavau į „PhotoShop“, sukūriau daugybę puošnių neoninių linijų ir efektų. Tai galėjo būti darbalaukio fonas, o ne ekrano užsklanda. Esmė ta, kad aš sukūriau jiems šį įmantrų ir įmantrų dizainą.



Kaip tikriausiai galite atspėti, jiems tai nepatiko. Jų sukurtas dizainas buvo pažodžiui nedidelis kelių sutampančių spalvotų apskritimų logotipas ir programinės įrangos pavadinimas po juo. Panašu, 2 minutės „PhotoShop“ darbe. Ir žinai ką? Aš kažkaip turėjau sutikti, kad tai geriau nei mano.



Taigi aš noriu pasakyti, kad programuotojai patenka į šias pinkles ir daro tą pačią klaidą, kurią padariau aš. Mes linkę galvoti apie vartotojo sąsajas ir ekrano užsklandas, kurios turi būti tikrai puošnūs, dėmesį traukiantys dalykai, dėl kurių programa išsiskirti . Bet jie neturi būti - sąžiningai, jie neturėtų būti. Turėtume imtis a programuotojai mąstyseną ir pritaikyti ją estetiniam dizainui - paprastas, funkcionalus, veikia.



Šiame straipsnyje aptarsime keletą labai paprastų būdų, kaip sukurti elegantišką „Android APP“ vartotojo sąsają / UX, net jei beveik neturite projektavimo patirties.

Laikykitės medžiagos dizaino, nebent tikrai norėtumėte kažko kito

Jūsų programa neturi būti „ Unikalus' ir „ išsiskirti iš kitų “ kad jis būtų populiarus ir gerai atrodytų. Tai yra „Google“ Medžiagų dizainas užsibrėžė pasiekti - šios programos vartotojo sąsajos standartą, ir jie padarė gerą darbą. Yra daugybė populiarių programų, kurios laikosi „Material Design“ - vieni didžiausių „Android“ programų pavadinimų, pvz., „SwiftKey“, „Nova Launcher“, „Textra SMS“, „YouTube“, tik keli.

„Material Design“ pagrindinis dėmesys skiriamas kortelėmis pagrįstam maketui su vientisa spalvų palete. „Google“ dirbo su geriausiais industrijos dizaineriais, semdamasi daugybės elementų iš minimalistinio dizaino praktikos, ir tada visa tai išleido nemokamai - tai gana gera sandoris, nes svetainių ir programų kūrimo kursai gali skirti šimtus dolerių elektroninėms knygoms, vaizdo įrašams ir kt.



Pradėti naudoti medžiagų dizainą yra nepaprastai lengva, ir yra keletas įrankių, kurie jį dar labiau supaprastina, kuriuos mes išvardinsime toliau:

  • Medžiagos temų redaktorius („macOS“ + eskizas)
  • Medžiagos dizaino spalvų paletės papildinys („PhotoShop“ / „Illustrator“)
  • Medžiagos dizaino vartotojo sąsajos rinkinys PSD („PhotoShop“)
  • „Android“ medžiagos dizaino vartotojo sąsajos rinkinys ( Eskizas)
  • „Material UI Theme Generator“

Ir jei jums reikia įkvėpimo kuriant paprastas, elegantiškas medžiagų dizaino temas, peržiūrėkite šiuos sąrašo tinklaraščius:

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

Kaip alternatyva medžiagų dizainui, doloro nuolydžiai yra paprasti, madingi ir patrauklūs akiai. Ir jūs galite pagalvoti, kad dizaineriai daug laiko praleidžia dažydami visomis spalvomis arba kurdami galutinį gradientą. Jūs klystate - tai galima padaryti per 10 sekundžių „PhotoShop“.

10 sekundžių „PhotoShop“ gradiento vartotojo sąsajoje.

Aš tai net apžiūrėsiu, norėdamas parodyti, kaip lengva.

Sukurkite naują „Mobile“ PS projektą ( 1080 x 1920 px @ 72 ppi veikia gerai)

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

Eiti į UIGradients.com ir surask ką nors, kas tau patinka.

Nukopijuokite spalvų šešiakampes vertes iš UIGradients

Nukopijuokite gradiento spalvas iš viršaus peržiūros.

„PhotoShop“ gradiento parinkiklis.

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

Išskleidžiamajame meniu spustelėkite tiesiai gradiento modelio peržiūrą - nespustelėkite išskleidžiamojo meniu mygtuko. Spustelėjus tiesiai gradientą, atidaromas spalvų redaktorius.

Įveskite šešiakampes vertes iš UIGradient į PS gradiento įrankį.

Dabar tiesiog įklijuokite spalvų šešiakampes vertes iš UIGradient į PS gradiento redaktorių.

Jei reikia, sureguliuokite. Dabar turite profesionalų „Android“ programos gradientą.

Kitos gradiento priemonės, kurias verta patikrinti:

Vietoj JPG / PNG naudokite SVG

Užuot naudoję PNG ar JPG savo grafiniams elementams (mygtukams, logotipams ir kt.), Jūs tikrai turėtumėte naudoti SVG ( „Scalable Vector Graphics“) vietoj to. Taip yra todėl, kad SVG dydį galima keisti neprarandant kokybės - pavyzdžiui, jei padidinate JPG dydį, ji praranda kokybę ir tampa neryški / pikselių. SVG neturi. Žmonės bando naudoti didžiulius PNG failus, kurie bus sumažintas kad tilptų „Android“ ekranuose - kai vietoj to galite naudoti mažesnius SVG padidintas neprarandant kokybės.

Be to, SVG gali būti iki 60–80% mažesnis failo dydis nei PNG . Tai reiškia, kad jūsų programa ar svetainė mobiliesiems bus įkelta greičiau vartotojui ir atrodys gerai, nepaisant ekrano skiriamosios gebos.

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

Norėdami įtraukti tamsios / nakties režimo temą į savo programą, nereikia kurti dviejų atskirų temų. Tai beveik 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ąsajos rinkinį

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

Keli puikūs „Android“ vartotojo sąsajos šablonų ir rinkinių šaltiniai:

  • „SpeckyBoy“ - 50 nemokamų mobiliųjų sąsajų rinkinių, skirtų „iOS“ ir „Android“
  • „SketchAppSources“ - „Android“ vartotojo sąsajos programų ištekliai ( Eskizas)
  • Freebiesbug - PSD vartotojo sąsajos rinkiniai ( „PhotoShop“)
Žymos androidas Plėtra 4 minutes perskaityta