Ilusate mobiilirakenduste kujundamine nullist

Alustasin graafilise disaini õppimist 13-aastaselt. Õppisin veebikursustelt veebisaite kujundama ja mängisin terve päeva Photoshopi ja Affinity Designeriga ringi. See kogemus õpetas mind mõtlema nagu disainer.

Olen nüüd peaaegu aasta rakendusi välja töötanud ja arendanud. Osalesin MIT-i programmis, kus töötasin koos Universeaty arendamise meeskonnaga. Kaks kuud tagasi hakkasin töötama uue rakenduse Crypto Price Tracker kallal, mille käivitasin hiljuti 28. jaanuaril.

Selles postituses jagan järkjärgulist disainiprotsessi, mida järgin, koos rakenduse näidetega, millega töötasin. See peaks aitama kõiki, kes soovivad õppida või täiustada oma digitaalse disaini oskusi. Kujundus ei seisne ainult disainitarkvara kasutamise teadmises ja see postitus ei õpeta teid seda kasutama. Internetis on õppimiseks sadu kvaliteetseid õpetusi. Kujundus tähendab ka toote mõistmist seestpoolt, selle omadusi ja funktsionaalsust ning disaini, pidades samas silmas lõppkasutajat. Seda see postitus ongi mõeldud õpetama.

Kujundusprotsess :

  1. Looge igale ekraanile kasutaja vooskeem.
  2. Traadiraamide loomine / joonistamine.
  3. Valige kujundusmustrid ja värvipaletid.
  4. Looge makette.
  5. Looge animeeritud rakenduse prototüüp ja paluge inimestel seda testida ning tagasisidet anda.
  6. Andke makettidele viimane viimistlus, et kõik viimased ekraanid oleksid kodeerimise alustamiseks valmis.

Alustame!

Kasutaja vooskeem

Esimene samm on välja selgitada rakenduses soovitud funktsioonid. Kui olete oma ideed saanud, kujundage kasutaja vooskeem. Kasutaja vooskeem kujutab väga kõrgel tasemel kasutaja teekonda teie rakenduse / veebisaidi kaudu.

Tavaliselt koosneb kasutaja vooskeem 3 tüüpi kujunditest.

  • Ekraanide tähistamiseks kasutatakse ristkülikuid.
  • Teemante kasutatakse otsuste esitamiseks (näiteks sisselogimisnupu koputamine, vasakule libistamine, suumimine).
  • Nooled seovad ekraanid ja otsused omavahel.

Kasutajate vooskeemid on ülimalt kasulikud, kuna annavad hea loogilise ettekujutuse rakenduse toimimisest.

Siin on kasutaja vooskeem, mille ma joonistasin, kui hakkasin oma rakenduse kujundusega tegelema.

Traadiraamid

Kui olete lõpetanud iga ekraani kasutaja vooskeemid ja kavandanud kasutajate teekonnad, hakkate kõigi ekraanide traadiga raamimisega tegelema. Traadiraamid on sisuliselt madala täpsusega kujutised selle kohta, kuidas teie rakendus välja näeb. Põhimõtteliselt visand või ülevaade, kuhu lähevad pildid, sildid, nupud ja muu, koos nende paigutuse ja paigutusega. Ligikaudne visand teie rakenduse toimimisest.

Traadiraamide joonistamiseks kasutan UI trafarettide prinditud malle. See säästab aega ja annab kena lõuendi, millele joonistada ja märkmeid teha.

Siin on traatraami näide.

Pärast traadiraamide visandamist saate kasutada rakendust Pop nimega ja teha rakenduse abil pilt kõigist oma joonistest ning omada prototüüpi, ühendades kõik ekraanid nuppude kaudu.

Kujundusmustrid ja värvipaletid

See on minu lemmikosa. See on nagu aknaostmine. Palju kujundusmustreid ja värvipalette, mille vahel valida. Käin valimas meelepäraseid ja katsetan nendega.

Parimad platvormid kujundusmustrite leidmiseks on Mobile Patterns ja Pttrns. Ja heade värvipalettide leidmiseks minge Color Huntile.

Maketid

See on siis, kui olete lõpuks liikunud projekteerimistarkvara kasutamisele. Disainilahenduses olev makett on teie disaini väga usaldusväärne esitus. See on peaaegu nii, nagu oleksite sellesse rakendusse tulevikus läinud ja oleksite sellest mõned ekraanipildid teinud. See peaks välja nägema realistlik ja üsna sarnane reaalsele.

Mudelite loomiseks on olemas disainitarkvara ja tööriistad. Ma kasutan Affinity disainerit. IOS-i kujunduse kõige sagedamini kasutatav tööriist on Sketch.

Siin on näide minu rakenduse varajastest kujundustest.

Katsetasin rohkem erinevate värvipalettidega.

Esialgseid makette jagasin sõpradele nende tagasiside saamiseks. Tundus, et paljudele inimestele meeldis kullagradient ja must skeem.

Ole valmis tagasisidet võtma ja uute ettepanekutega katsetama! Leiate, et hämmastavad ideed pärinevad teie kasutajatelt siis, kui nendega räägite, mitte siis, kui kerite meeletult Dribbble'i või Behance'i.

Nii kujundasin maketi ümber ja eemaldasin taustgraafikud, kuna nende genereerimine oli tehniliselt aeganõudev protsess ja need vähendasid loetavust. Nii nägi välja ümber kujundatud makett.

Jäin värvilahenduse, vahelehtede ikoonide ja üldise paigutusega üsna rahule. Läksin edasi ja kujundasin ülejäänud ekraanid samade kujundusjuhiste järgi. See oli pikk, kuid kindlasti lõbus protsess!

Kui kõik minu ekraanid olid valmis, panin Adobe XD-sse kokku prototüübi ja palusin mõnel sõbral katsetada ja tagasisidet anda.

Pärast viimast lihvi ja muud sellist näeb minu viimane kujundus välja.

Pärast kõigi ekraanide valmimist importisin need Xcode'i ja hakkasin rakendust kodeerima.

See selleks! Loodan, et see postitus aitab teil rakenduse kujundusega alustada või aitab teil saada paremaks disaineriks. Ja kui teile minu rakendus meeldib, saate selle siit alla laadida.

Lõpetan postituse ühe oma lemmiktsitaadiga disaini kohta.

„Disain pole mitte ainult see, kuidas see välja näeb ja millisena tundub. Disain on see, kuidas see töötab ”

-Steve Jobs