Dizajn mobilne aplikacije: Vodič za početnike

Dizajn mobilne aplikacije [Slika: Pixabay]
[Slika: Pixabay]

Dakle, odlučili ste isprobati dizajn mobilne aplikacije, ali niste sigurni odakle početi. Bez brige, pokrili smo vas. U ovom ćemo članku iznijeti pet stvari koje trebate znati kako biste započeli s dizajniranjem mobilnih aplikacija.

Ovaj je vodič namijenjen početnicima u dizajnu mobilnih aplikacija. Ako već imate neke vještine, pogledajte naš pregled tutorijala koji će vas provesti kroz različite aspekte kako napraviti aplikaciju , detaljno.



Što je dizajn mobilne aplikacije?

Da se izrazimo vrlo široko, dizajneri aplikacija zaduženi su za to da aplikacija izgleda dobro, dok je programeri čine ispravnom. Dizajn mobilne aplikacije obuhvaća i korisničko sučelje (UI) i korisničko iskustvo (UX). Dizajneri su odgovorni za cjelokupni stil aplikacije, uključujući stvari poput sheme boja, odabira fonta i vrsta gumba i dodataka koje će korisnik koristiti. Pa, gdje početi? Na početku.



walmart samsung galaxy s7 ravno razgovaranje

Za koju platformu bih trebao dizajnirati?

Dva mobitela

Android ili iOS? [Slika: Pixabay]

Ovisno o vašim razlozima zbog kojih želite dizajnirati mobilne aplikacije, možda već znate s kojom platformom želite raditi i zašto. Ali, ako tek započinjete i niste sigurni koji je pravi za vas, uzmite onaj koji vam je najpoznatiji.



Ako upotrebljavate Android telefon, napravite dizajn za Android. Ako upotrebljavate iOS uređaj, započnite tamo. Alternativno, možete odlučiti za dizajn oboje, ali najbolje je ne odgrizati više nego što možete žvakati - barem ne na početku.

Koje alate trebam koristiti?

Logotipi Photoshop, Adobe XD i Sketch

Photoshop, Adobe XD i Sketch snažni su konkurenti

Jednom kada znate za koju platformu dizajnirate, sljedeći je korak odabrati pravu alati za web dizajn da obavim posao. Što se tiče dizajniranja mobilnih aplikacija, dobra vijest je da bez obzira na platformu, općenito možete koristiti iste alate za obje.



Popularne opcije za dizajn aplikacija uključuju Adobe Photoshop, Adobe XD i Sketch. Postoji mnogo, puno više, ali ovo su teški udarci u industriji. Ovdje se prijavite za Adobe Creative Cloud .

Možda mislite da je Photoshop vaša najbolja opcija za dizajn mobilnih aplikacija - pogotovo ako ste ga koristili za druge vrste dizajnerskih radova - no što se tiče dizajniranja mobilnih aplikacija, bolje vam je Adobe XD ili Sketch. Usprkos tome, Sketch se ovdje smatra de facto standardom, iako Adobe XD stavlja jaku konkurenciju, s obzirom da ima nedavno dodani dizajnerski sustavi .

Jedan od najvećih razloga za korištenje Adobe XD ili Sketch preko nečega poput Photoshopa jest taj što su ova dva alata izgrađena s obzirom na dizajniranje i izradu prototipa. Oni pomažu u pojednostavljivanju vaših tijekova dizajna i usmjereni su na dizajnere korisničkog sučelja i UX-a, dok je Photoshop više za manipulaciju slikama.

Jedna važna napomena ovdje: Ako planirate razvoj ili podršku za više platformi, Adobe XD je ovdje jasni pobjednik jer je Sketch dostupan samo na macOS-u.

Smjernice za dizajn OS-a

Prije nego što započnete s dizajniranjem, prvo morate razumjeti prednosti i nedostatke svoje platforme. Općenito govoreći, dizajn mobilne aplikacije dijeli neke sličnosti između različitih operativnih sustava, kao što su:

  • Dizajn vođen ciljevima
  • Neka bude jednostavno (manje je više)
  • Održavajte protok
  • Čitljivost je ključna
  • Poštujte platformu

Taj posljednji, 'poštujte platformu', važniji je nego što možda mislite. Kad korisnici preuzmu i instaliraju aplikaciju na svoj uređaj, očekuju da će se ponašati na njima poznat i intuitivan način. Svoje mišljenje temelje na onome što znaju, pa će korisnici, vjerojatno kada je aplikacija u suprotnosti s 90 posto pravila dizajna specifičnih za OS, izbrisati.

Ne samo da trebate uzeti u obzir različite navigacijske obrasce koje iOS i Android imaju, već trebate razmišljati i o gumbima, odabiru fontova i smještaju UI objekata - koji se svi razlikuju za svaku platformu.

Dobra vijest je da ne trebate pogađati što je prihvatljivo. I Apple i Android imaju niz smjernica za dizajn koje možete pregledati prije nego što započnete (i dok aktivno dizajnirate):

Žičani okviri i protok aplikacija

Okvir nacrtan olovkom

Upotrijebite namjenski alat za žicu ili se držite olovke i papira [Slika: Pixabay]

Prije dizajniranja izgleda i stila aplikacije, neophodno je poraditi na kontroli i protoku protoka. Tu igraju žičani okviri. Žičani okviri pomažu vam da shvatite kako će se korisnici kretati i upotrebljavati aplikaciju. Uglavnom su pojednostavljeni u dizajnu tako da je fokus na protoku i upotrebljivosti.

Iako ih ima mnogo posvećenih žičani alati , nije rijetkost da dizajneri jednostavno koriste olovku i papir. Međutim, ako tražite nešto više visokotehnološkog i suradničkog (što je posebno važno kada radite s udaljenim timom), razmislite o stvaranju svojih žičanih okvira u programu Sketch ili Adobe XD. Prednost korištenja ovih alata za izradu žičanih okvira je u tome što svoje žičane okvire niske vjernosti možete s relativno lakoćom pretvoriti u preglede visoke vjernosti.

Napomena: sa Adobe XD , čak možete uzeti i besplatne komplete koji će vam pomoći da započnete.

koliko je vremena potrebno za prikazivanje pixar filma

Makete i prototipovi

Vizualizacija dizajna mobilne aplikacije

Vrijeme je da svoje žičane okvire pretvorite u radne proizvode [Slika: Pixabay]

Nakon što proradite svoje žičane okvire i podijelite ih s razvojnim timom i / ili svojim klijentom radi rasprave i odobrenja, vrijeme je da napravite nekoliko maketa i prototipova.

Ovaj je korak općenito lakši ako ste za izradu žičanih okvira i dizajna mobilne aplikacije koristili isti alat za dizajn. Ako nemate, možda će vam trebati malo više vremena da popunite svoj alat za dizajn, ali nakon što to učinite, na dobrom ste putu. Mnogi alati, uključujući UXPin (koji se integrira sa Sketch-om), uključuju načine za označavanje vaših žičanih okvira detaljnim informacijama koje zahtijevaju programeri, kako bi se uklonila potreba za nagađanjima.

Dok radite na dizajnu aplikacije, izvrsno je vrijeme za početak izrade zajedničke biblioteke sredstava. Na primjer, standardni gumbi, ikone i drugi elementi koje ovdje stvorite mogli bi se pokazati korisnima u drugim aplikacijama koje dizajnirate, pa ih svakako spremite.

Saznajte više o ovom koraku u našem članku: 4 različita načina za izradu maketa web stranica i aplikacija .

Predaja razvoju

Netko je nekome predao crtež žičanog okvira

Ovaj korak zapravo neće izgledati ovako [Slika: Pixabay]

Dizajneri su također odgovorni za isporuku tih elemenata i vizualnih sredstava programeru. Stvari poput ikona, pozadina, logotipa, pa čak i fontova, sve su što dizajner može predati programeru.

Jednom kada programer ima sve što je potrebno, njegov je posao uzeti taj dizajn - i njegove različite dijelove - i natjerati ga da radi. Međutim, ponekad dizajner ne razumije ograničenja s kojima se programer suočava. A kad se to dogodi, sav se pakao raspusti.

Kao dizajner mobilnih aplikacija, vi mogli u potpunosti ignorirajte razvojnog programera i razvojni proces, ali bolje je razumjeti izazove s kojima se programer suočava, bilo da je s alatima koje koristi ili ograničenjima operativnog sustava i / ili uređaja na kojima će vaše aplikacije raditi. Naoružani ovim znanjem, možete učinkovitije dizajnirati mobilne aplikacije, uz manje odgode od svog programera, a istodobno njegujući suradničko okruženje.

Čitaj više: