Gražių mobiliųjų programų kūrimas nuo nulio

Grafinio dizaino pradėjau mokytis būdamas 13 metų. Iš internetinių kursų išmokau kurti svetaines ir visą dieną žaisdavau su „Photoshop“ ir „Affinity Designer“. Ta patirtis išmokė galvoti kaip dizaineris.

Jau beveik metus kuriu ir kuriu programas. Dalyvavau MIT programoje, kurioje dirbau su komanda plėtodama „Universeaty“. Prieš du mėnesius pradėjau kurti naują programą „Crypto Price Tracker“, kurią neseniai paleidau sausio 28 d.

Šiame įraše pasidalinsiu žingsnis po žingsnio vykdomu projektavimo procesu ir programos, kurioje dirbau, pavyzdžiais. Tai turėtų padėti visiems, norintiems išmokti ar patobulinti savo skaitmeninio dizaino įgūdžius. Dizainas nėra vien tik žinojimas, kaip naudoti projektavimo programinę įrangą, ir šis įrašas neišmokys jo naudoti. Internete yra šimtai geros kokybės mokomųjų programų. Dizainas taip pat yra supratimas apie jūsų gaminį, jo ypatybes ir funkcionalumą, dizainas, nepamirštant galutinio vartotojo. To ir siekiama išmokti šiame įraše.

Projektavimo procesas :

  1. Kiekvienam ekranui sukurkite vartotojo schemą.
  2. Kurti / piešti laidinius rėmus.
  3. Pasirinkite dizaino modelius ir spalvų paletes.
  4. Kurkite maketus.
  5. Sukurkite animuotą programos prototipą ir paprašykite žmonių jį išbandyti ir pateikti atsiliepimų.
  6. Padarykite paskutinius maketus, kad visi paskutiniai ekranai būtų paruošti pradėti koduoti.

Pradėkime!

Vartotojo srauto schema

Pirmiausia reikia išsiaiškinti, kokių funkcijų norite savo programoje. Gavę savo idėjas, suprojektuokite vartotojo schemą. Vartotojo srauto schema yra labai aukšto lygio naudotojo kelionės per jūsų programą / svetainę vaizdas.

Paprastai vartotojo srauto diagramą sudaro 3 tipų formos.

  • Stačiakampiai naudojami vaizduoti ekranus.
  • Deimantai naudojami sprendimams atspindėti (pavyzdžiui, bakstelėjus prisijungimo mygtuką, perbraukus į kairę, priartinant).
  • Rodyklės susieja ekranus ir sprendimus.

Vartotojų srautų diagramos yra labai naudingos, nes jose pateikiama gera loginė idėja, kaip programa veiktų.

Štai vartotojo srauto schema, kurią nubraižiau pradėjęs kurti savo programą.

Vieliniai rėmai

Užpildę kiekvieno ekrano naudotojo srauto diagramas ir suplanavę vartotojo keliones, pradėsite dirbti prie visų ekranų karkaso. Vieliniai rėmai iš esmės yra mažo tikslumo vaizdai, rodantys, kaip atrodys jūsų programa. Iš esmės eskizas arba apybraiža, kur bus atvaizdai, etiketės, mygtukai ir kita, taip pat jų išdėstymas ir išdėstymas. Apytikslis programos veikimo eskizas.

Vieliniams rėmams piešti naudoju spausdintus šablonus iš UI trafaretų. Tai taupo laiką ir suteikia gražią drobę, kuria galima piešti ir užsirašyti.

Pateikiame vielos rėmo pavyzdį.

Eskizuodami laidinius rėmus, galite naudoti programą, vadinamą „Pop“, ir nufotografuoti visus piešinius naudodamiesi programa ir turėti prototipą, susiedami visus ekranus mygtukais.

Dizaino modeliai ir spalvų paletės

Tai mano mėgstamiausia dalis. Tai tarsi apsipirkimas languose. Daugybė dizaino raštų ir spalvų paletės, iš kurių galima rinktis. Aš renkuosi tuos, kurie man patinka, ir eksperimentuoju su jais.

Geriausios platformos, skirtos rasti dizaino modelius, yra „Mobile Patterns“ ir „Pttrns“. O norėdami rasti geras spalvų paletes, eikite į „Color Hunt“.

Maketai

Tai yra tada, kai jūs pagaliau pereinate prie projektavimo programinės įrangos naudojimo. Maketas dizaino prasme yra aukšto lygio jūsų dizainas. Beveik panašu, kad ateityje lankėtės šioje programoje ir iš jos padarėte keletą ekrano kopijų. Tai turėtų atrodyti realistiškai ir panašiai kaip tikras dalykas.

Yra projektavimo programinė įranga ir įrankiai, skirti kurti maketus. Aš naudoju „Affinity“ dizainerį. Dažniausiai naudojamas „iOS“ dizaino įrankis yra „Sketch“.

Štai keletas ankstyvųjų mano programos dizaino pavyzdžių.

Aš daugiau eksperimentavau su įvairiomis spalvų paletėmis.

Pradiniais maketais pasidalinau su draugais, kad jie gautų atsiliepimų. Atrodė, kad daugeliui žmonių patiko aukso gradientas ir juoda schema.

Būkite pasirengę priimti atsiliepimus ir eksperimentuoti su naujais pasiūlymais! Rasite nuostabių idėjų iš savo vartotojų, kai kalbate su jais, o ne pašėlusiai slinkdami „Dribbble“ ar „Behance“.

Taigi aš pertvarkiau maketą ir pašalinau fono grafikus, nes jų generavimas buvo techniškai daug laiko reikalaujantis procesas ir jie sumažino įskaitomumą. Taip atrodė pertvarkytas maketas.

Buvau labai patenkinta spalvų schema, piktogramomis skirtukų juostoje ir bendru išdėstymu. Aš nuėjau į priekį ir suprojektuojau likusius ekranus vadovaudamasis tomis pačiomis dizaino gairėmis. Tai buvo ilgas, bet tikrai įdomus procesas!

Kai visi mano ekranai buvo paruošti, aš sukūriau „Adobe XD“ prototipą ir paprašiau kelių draugų eksperimentuoti ir pateikti atsiliepimų.

Po paskutinių prisilietimų ir panašiai, taip atrodo mano galutinis dizainas.

Užbaigus visus ekranus, importavau juos į „Xcode“ ir pradėjau koduoti programą.

Viskas! Tikiuosi, kad šis įrašas padės jums pradėti kurti programų kūrimą arba tapti geresniu dizaineriu. Ir jei jums patinka mano programa, galite ją atsisiųsti čia.

Pabaigsiu įrašą viena mėgstamiausių citatų apie dizainą.

„Dizainas nėra tik tai, kaip jis atrodo ir jaučiasi. Dizainas kaip tai veikia “

-Styvas Džobsas