UI / UX põhikontseptsiooni kontseptsiooni erinevus juhtraami, prototüübi ja maketi vahel

Raamraami, prototüübi ja maketi erinevused ajavad paljud disainerid alati segadusse, vaatamata kogenud disainerile, nägin, et paljud inimesed küsisid Quora ja Redditi kohta nende terminite kohta küsimusi, seega on oluline selgeks teha, mis pagana asi see on. See lahendaks palju probleeme ja säästaks disainerite jaoks energiat.

Mis on raamiraam?

See on veebisaidi või rakenduse graafiline struktuur, mis sisaldab sisu ja elemente. Nii nagu hoone eskiis, vajab see pilvelõhkujaks muutmiseks palju töid ja osalejaid. Samuti näeb traatraam lihtne välja ja lisaks sellele peavad tööd tegema UX, UI, IxD disainerid. Lühidalt: Wireframe on madala täpsusega kujundus, millel on 3 lihtsat, kuid otsest eesmärki:

  • Sisaldab peamist teavet
  • Joonistage struktuuri ja paigutuse kontuur
  • Kasutajaliidese visuaalne kirjeldus

1. Raamraami visuaalsed omadused

Visuaalselt on raamiraamil mõned väga ilmsed visuaalsed piirangud, sest selle täitmiseks on vaja ainult lihtsaid jooni, kaste ja halli värvi (erinev halltoon näitab erinevat taset).

Raamiraamil on väga ilmsed visuaalsed piirangud. Üldiselt peavad disainerid täitmiseks kasutama ainult jooni, kaste ja halli värvi (erinev halltoon näitab erinevat taset).

2. Lihtne vektorraam

Lihtsa kaadriraami sisu peaks hõlmama pilte, videot ja teksti jne. Seega asendatakse väljajäetu kohahoidjaga, pilt asendatakse varjutatud tekstiga ja tekst asendatakse mõne sümboolse sõnaga vastavalt teksti paigutusele.

3. Raami eelis

Raamiraami ehitamine on kiire ja odav.

Eriti kui kasutate mõnda juhtmete raamimise tööriista, näiteks paberit ja pliiatsi, Balsamiq. Muidugi peaksite neid kujundusvahendeid kasutama, et seda kohe alguses teha.

Võrreldes täieliku ja detailse ülitäpse traatraamiga, on tagasiside kogumine lo-fi traatraami kaudu palju lihtsam ja olulisem. Miks? Kuna inimesed pööravad nende elementide esteetiliste omaduste arvestamise asemel rohkem tähelepanu tarkvara funktsionaalsusele, teabe arhitektuurile, kasutajakogemusele, kasutaja interaktsiooni vooskeemile ja selle kasutatavusele. Vahepeal saate sel juhul seda hõlpsalt vastavalt nõudlusele muuta, kuid te ei pea kodeerimist ja graafilist redigeerimist kohandama.

4. Interaktiivne raamiraam

Mõnikord eelistavad disainerid parandada kaadrite täpsust, et suurendada kasutajaliidese olulisust mõnes aspektis ning näidata kiire testi ja visuaalsete elementide vahelise interaktsiooni mõistlikkust. Programm nende probleemide korrektseks lahendamiseks kasutab interaktiivset raamiraami, mida nimetatakse ka klõpsatavaks raamiraamiks.

Kui soovite luua nii keeruka juhtraami, vajate UXPini, mis on tööriist traatraami ja prototüüpide kujundamiseks. Interaktiivne prototüüpimine võib olla parim esitlus arenevale meeskonnale ja klientidele. Kui leidsite probleemi, et „mis juhtub, kui ma sellel nupul klõpsan?“, Peate lihtsalt klõpsama ja näitama oma klientidele, kuidas see interaktiivse prototüübiga töötab. Tõepoolest, see on üsna muljetavaldav ja otsene.

5. Kuva traatraami ettevaatlikult

Kui peate oma juhtraami talle esitlema, peate olema ettevaatlik tüübi suhtes, kes on täiesti võhik. Ta võib olla teie klient, samuti võib koostööst osa võtta mittetehniline juht. Kuid ta ei tea tõde, et traatkarkass ja lõpptoode võivad tunduda seosetuna. Nii ei pruugi ta mõista nendevahelist sisemist seost ja töörežiimi. Seega peate välja mõtlema õige otsuse, kas ja kuidas peate esitlema.

Traatkarkassi kujundamise tööriistad

Paber ja pastapliiats

Lihtsaim valitud traatraami kujundamise tööriist on paber ja pliiats. Joonista pliiatsiga juhuslikult paberile, see on lihtsaim põhijoonte ja kastidega traatraam. Selle abil esitleksid disainerid ideesid klientidele ja juhtidele intuitiivselt koos üksikasjaliku teksti väljendamise või suulise rääkimisega. Kuid seda ei kasutataks suurte ettevõtete ametlikus projektis.

Balsamiq

Mõnikord eelistavad disainerid parandada kaadrite täpsust, et suurendada kasutajaliidese olulisust mõnes aspektis ning näidata kiire testi ja visuaalsete elementide vahelise interaktsiooni mõistlikkust. Balsamiq pakub elementide komplekti kahel stiilil staatiliseks traadiga raamimiseks. Selle käsitsi joonistamise stiil aitaks keskenduda paigutusele, funktsioonide kujundamisele, kõik värvid on valged ja mustad. Nii et te ei kuule kaebust värvisätete ja visuaalse efekti kohta.

Mis on prototüüp?

Prototüübi nõue on kõrgem kui traatkarkassil. Erinevus seisneb selles, et prototüüp peab olema suure täpsusega prototüüp, mis on interaktiivne ja sobib võimalikult palju lõppkasutaja liidesega. Samal ajal pakub see testijatele täielikku kasutajakogemust, simuleerides tegelikku toote liidest ja funktsionaalset interaktsiooni.

1. Prototüübi eelis

„Meeskonnasõbralik prototüüpimine soodustab disainerite ja arendajate vahelist suhtlust. “

Miks see on nii oluline? Sest prototüüpi kasutatakse tavaliselt toodete testimiseks kasutajatele. Prototüübi testimine juba varases staadiumis võib säästa palju arenduskulusid ja -aega. Nii et see ei raiskaks põhjendamatu interaktiivse liidese tõttu tagatoote arhitektuuri vaeva. Prototüüp on toote testimisel disaineritele ja arendajatele täiuslik edasiminek.

Lisaks on prototüüpide pakkumine kasutajatele tagasiside kogumiseks - see on kasulik, kui saate ülevaate oma toote kõigist üksikasjadest ja inspireerida kogu meeskonda. Paljud prototüüpimisriistad suudavad prototüüpe kiiresti ja tõhusalt üles ehitada, kuid kodeerimist pole vaja.

Prototüüpide eesmärk on üsna ilmne: simuleerida kasutaja ja liidese vahelist interaktsiooni võimalikult realistlikult. Kui nuppu vajutatakse, tuleb vastav toiming läbi viia ja vastavad lehed peavad ilmuma. Proovige toote täieliku kogemuse simuleerimiseks parimat. Kui leidsite probleemi, et „mis juhtub, kui ma sellel nupul klõpsan?“, Peate lihtsalt klõpsama ja näitama oma klientidele, kuidas see interaktiivse prototüübiga töötab. Tõepoolest, see on üsna muljetavaldav ja otsene.

2. Prototüübi visuaalsed omadused

Kahtlemata peab prototüüp sisaldama toote esteetilisi omadusi, millel see peaks olema, ja proovige sobitada lõppversioon. Põhimõtteliselt on see toote sisu, HTML / CSS / JS pole seotud ning serveri ja andmebaasi arvestamine pole vajalik.

3. Prototüüpide test

Prototüübi testimine on prototüüpide kujundamise protsessi oluline samm, mis on kogu protsessi üks peamisi verstaposte. Kuid kuidas kasutatavuse testimist läbi viia, on siin tohutu teema, millest rääkida. Lihtne test võib maksta umbes tund, piisab 5 või 6 võtmestseeni testimiseks. Siin on toodud mõned viited KKK-le:

  • Kuidas kasutaja ülesannet alustab? (Kas otsite või sirvite?)
  • Mida kasutaja kõigepealt teeb? ja järgmine?
  • Kuidas ta teeb lõpliku otsuse?
  • Kas nad saavad aru projekteerimiskavatsusest? Kas teil on raskusi?

See on pidev protsess toote prototüübi kujundamiseks ning see nõuab iteratsiooni ja täiustamist.

Prototüüpimisriistad

Kas otsite suurepärast kiiret prototüüpimisriista? Pole eelarvet? Ei mingeid vabandusi. Mockplus Black Friday 2017 on teie jaoks kohal! Liituge nüüd Mockplus Ametliku Slacki grupiga, administraator pakub teile kuponge 40% soodsamalt ja tasuta UI komplektide ja fontide paketti. See tähtajaline pakkumine kehtib kõigi pakkide jaoks ja kestab 31. novembrini, säästes tavahinnast vähemalt 80 dollarit. Lisaks saate Mockplusis eluaegse tasuta tehnilise toe, isegi kui te pole praegu tasuline kasutaja. Tule ja naudi Mockplus Black Friday 2017!

Mockplus

Mockplus on kõikehõlmav prototüüpimisriist kiireks suhtlemiseks, kiireks kujundamiseks ja kiireks eelvaateks. See võimaldab luua makete mobiili (Android ja iOS), töölaua (PC ja Mac) ning veebirakenduste jaoks. Rakenduses Mockplus 3.2 lisas see kasutajaliidese voo kujundamise režiimi, korduse, demoprojekte ja malle ning visandite importimist. Muud funktsioonid, näiteks mõttekaardi kujundamise režiim, esitatakse versioonides pärast Mockplus 3.2.

UXPin

UXPin on teile raamiraamide ja prototüüpide loomiseks ehitanud rohkem kui 900 tüüpi erinevaid kasutajaliidese elemente. Selle reageeriv murdepunkti funktsioon võimaldab kasutajatel luua reageerivaid prototüüpe ja juhtraame, mida saab kasutada erinevates seadmetes ja eraldusvõimetes.

Mis on makett?

Pilt on toote visuaalse kujunduse esitamiseks kasutatav visuaalne skript. Sellel on traatkarkassist rikkamad visuaalsed elemendid, sealhulgas graafika, paigutus, värv ja muu detailsem visuaalne esitlus. Teatud määral on see toote lõplik kujundus.

Nagu juhtraam, on ka makett staatiline ja töötamatu. See keskendub toote välimusele, lisades hulgaliselt visuaalseid elemente, et saavutada ülitäpsus. Seda kasutatakse sageli visuaalse disaini aruteludes kiire tagasiside saamiseks ja toote visuaalse kujunduse parendamiseks.

Kujundusvoog

Pärast disaini olemuse tundmaõppimist ja juhtmeraami, maketi, prototüübi erinevuse teada saamist seisate te kasutajakogemuse disainimaailma ees.

Kui suudate konkreetsed tootedisaini seeriad sidusaks ja tõhusaks töövoogiks ühendada, juhtub imelisi asju.

Näpunäited

  • Raamraami tegemisel proovige kasutada redigeeritavaid ja korduvkasutatavaid elemente. Sel juhul jätkate lihtsalt elementide täpsustamist, et viia prototüübid lõpule raamide alusel.
  • Raamraami tegemisel proovige koguda mõtteid ja arvamusi oma meeskonnalt ja klientidelt ning proovige neid kajastada kaadriraami kujundustel.
  • Kasutage oma kõige käepärasemat tööriista