Osnovna razlika v konceptu oblikovanja uporabniškega vmesnika / UX-a med žičnim okvirom, prototipom in predlogo ck Posodobljeno)

prototip modela za žični okvir

Kakšna je razlika med žičnim okvirom, modelom in prototipom? Izkušeni oblikovalec je razčistil oblikovalske pogoje za oblikovalce UI / UX.

Razlike žičnih okvirjev, prototipov in vzorcev vedno zmedejo veliko oblikovalcev. Kljub izkušenim oblikovalcem sem videl, da so številni ljudje postavljali vprašanja glede Quore in Reddita o teh izrazih, zato je treba razjasniti, kaj za vraga je to. To bi rešilo veliko težav in prihranilo energijo oblikovalcem.

Kaj je žični okvir?

Gre za grafično strukturo spletnega mesta ali aplikacije, ki vsebuje vsebino in elemente. Tako kot načrt stavbe, da postane nebotičnik potrebuje tudi veliko del in udeležencev. Tudi žični okvir je videti preprost, poleg tega pa ga morajo delati tudi UX, UI, IxD. Na kratko, žični okvir je zasnova nizke vernosti, ki ima 3 preproste, a neposredne cilje:

  • Vsebuje glavne podatke
  • Narišite oris strukture in postavitve
  • Vizualni in uporabniški vmesnik

1. Vizualne značilnosti žičnega okvirja

Vizualno ima žični okvir nekaj zelo očitnih vizualnih omejitev, saj potrebuje le enostavne črte, polja in sivo barvo (različni odtenki sive označujejo različni nivo).

Žični okvir ima zelo očitne vizualne omejitve. Na splošno oblikovalci potrebujejo za dokončanje le črte, škatle in sivo barvo (različni odtenki sive označujejo različen nivo).

2. Preprost vektorski okvir

Vsebina preprostega žičnega okvira mora vsebovati slike, videoposnetke in besedilo itd. Tako bo izpuščeno nadomeščeno z nadomestnim mestom, slika namesto v senci, besedilo pa nadomeščeno z nekaj simboličnimi besedami glede na postavitev besedila.

3. Prednost žičnega okvirja

Gradnja žičnih okvirjev je hitra in poceni.

Še posebej, če uporabljate nekaj orodij za žične okvirje, kot sta papir in pisalo, Balsamiq. Seveda bi morali uporabljati ta orodja za oblikovanje, da to storite že na samem začetku.

V primerjavi s popolnim in podrobnim ogrodjem visoke zvestobe je zbiranje povratnih informacij prek žičnega okvira lo-fi veliko lažje in pomembnejše. Zakaj? Ker ljudje več pozornosti namenjajo funkcionalnosti programske opreme, arhitekturi informacij, uporabniški izkušnji, diagramu interakcije uporabnikov in njegovi uporabnosti, namesto da bi upoštevali estetske značilnosti teh elementov. Medtem ga lahko v tem primeru enostavno spremenite glede na povpraševanje, vendar vam ni treba prilagajati kodiranja in urejanja grafik.

4. Interaktivni žični okvir

Včasih oblikovalci raje izboljšajo zvestobo žičnih okvirov, da izboljšajo pomen uporabniškega vmesnika v nekaterih pogledih in prikažejo racionalnost interakcije med hitrim testom in vizualnimi elementi. Program za pravilno reševanje teh težav uporablja interaktivni žični okvir, znan tudi kot žični okvir.

Če želite ustvariti tako zapleten žični okvir, potem potrebujete UXPin, ki je orodje za oblikovanje žičnih okvirjev in oblikovanje prototipov. Interaktivno oblikovanje prototipov je morda najboljša predstavitev razvijajoči se ekipi in strankam. Ko ste naleteli na težavo, da "kaj se bo zgodilo, ko kliknem ta gumb?", Morate samo klikniti in pokazati svojim strankam, kako deluje pri interaktivnem oblikovanju prototipov. Dejansko je zelo impresivno in neposredno.

5. Previdno prikažite žični okvir

Morate biti previdni s fantom, ki je popolnoma laik, ko mu morate predstaviti svoj žični okvir. Lahko je vaša stranka, lahko je tudi sodelovanje netehničnega vodje sodelovanja. A res ne ve, da se žični okvir in končni izdelek lahko zdita nepovezana. Torej morda ne razume notranje povezave in načina delovanja med njima. Tako morate ugotoviti pravilno odločitev, ali se morate predstaviti in kako.

Orodja za oblikovanje žičnih okvirjev

Papir in pisalo

Najlažje izbrano orodje za oblikovanje žičnih okvirjev sta papir in pisalo. Na papirju s pisalom naključno narišite najpreprostejši okvir z osnovnimi črtami in škatlami. Z njo bi oblikovalci intuitivno predstavili ideje s podrobnim besednim izražanjem ali ustnim nagovorom strankam in voditeljem. Toda to ne bi bilo uporabljeno v formalnem projektu za velika podjetja.

Balzamik

Včasih oblikovalci raje izboljšajo zvestobo žičnih okvirov, da izboljšajo pomen uporabniškega vmesnika v nekaterih pogledih in prikažejo racionalnost interakcije med hitrim testom in vizualnimi elementi. Balsamiq ponuja nabor elementov za statično žično okvirjanje na dveh stilih. Njegov slog risanja z roko bi pomagal, da se osredotočimo na postavitev, funkcionalno zasnovo, vse barve so bele in črne. Tako ne boste slišali pritožbe glede barvnih nastavitev in vizualnega učinka.

Kaj je prototip?

Zahteva prototipa je višja od žičnega okvirja. Razlika je v tem, da mora biti prototip visoko zvestobe, ki je interaktiven in čim bolj ustreza končnemu uporabniškemu vmesniku. Medtem nudi preizkuševalcem popolno uporabniško izkušnjo s simuliranjem resničnega vmesnika izdelka in funkcionalne interakcije.

1. Prednost prototipa

»Skupini prijazno oblikovanje prototipov bolj spodbudi komunikacijo med oblikovalci in razvijalci. "

Zakaj je tako pomembno? Ker se prototip običajno uporablja za testiranje izdelka. Preskus prototipov na zelo zgodnji stopnji lahko prihrani veliko stroškov in časa za razvoj. Tako da zaradi nerazumnega interaktivnega vmesnika ne bi zapravili truda arhitekture zalednih izdelkov. Torej, prototip je popoln napredek pri preizkušanju izdelka za oblikovalce in razvijalce.

Poleg tega, če uporabnikom prototipov zbirate povratne informacije, je to koristno, če imate vpogled v vse podrobnosti vašega izdelka in navdihnite celotno ekipo. Številna orodja za izdelavo prototipov lahko izdelajo prototipe hitro in učinkovito, vendar kodiranja ni potrebno.

Cilj prototipov je povsem očiten: čim bolj realistično simulirati interakcijo med uporabnikom in vmesnikom. Ko pritisnete gumb, morate izvesti ustrezno operacijo in prikazati ustrezne strani, poskusite najbolje, da simulirate popolno izkušnjo izdelka. Ko ste naleteli na težavo, da "kaj se bo zgodilo, ko kliknem ta gumb?", Morate samo klikniti in pokazati svojim strankam, kako deluje pri interaktivnem oblikovanju prototipov. Dejansko je zelo impresivno in neposredno.

2. Vizualne značilnosti prototipa

Nedvomno mora prototip vsebovati estetske lastnosti izdelka, ki bi ga moral imeti, in poskušati prilegati končni različici. V bistvu gre za kožo izdelka, ne vključuje HTML / CSS / JS in ni treba upoštevati strežnika in baze podatkov.

3. Test prototipiranja

Preskušanje prototipov je ključni korak v postopku oblikovanja prototipov, ki je eden glavnih mejnikov v celotnem procesu. Toda kako opraviti preizkušanje uporabnosti, je tu ogromna tema, o kateri bomo govorili. Preprost test lahko stane približno eno uro, dovolj je, da preizkusite 5 ali 6 ključnih prizorov. V nadaljevanju je naštetih nekaj pogostih vprašanj:

  • Kako uporabnik začne nalogo? (Iskanje ali brskanje?)
  • Kaj uporabnik najprej naredi? in naslednjič?
  • Kako sprejme končno odločitev?
  • Ali razumejo načrtno namero? Kakšne težave?

Izdelava prototipa izdelka je nenehen postopek, ki ga je treba vzdrževati in izboljševati.

Orodja za izdelavo prototipov

Mockplus

Mockplus je vseobsegajoče orodje za izdelavo prototipov za hitro interakcijo, hitro oblikovanje in hiter predogled. Omogoča ustvarjanje vzorcev za mobilne (Android in iOS), namizje (PC in Mac) in spletne aplikacije. V Mockplus 3.2 je dodal način načrtovanja uporabniškega vmesnika, ponavljalnik, demo projekte in predloge ter uvoz skice. Druge funkcije, kot je Mind Map Design Mode, bodo predstavljene v različicah po Mockplusu 3.2.

https://www.mockplus.com

iDoc

Kot orodje za oblikovanje je vključeno sodelovanje iDoc, zagotavljanje oblikovalskih virov in lahka izdelava prototipov. Brezšiven potek dela omogoča oblikovalcem uporabniškega vmesnika, da naložijo vizualne skripte iz vtičnikov Photoshop, Adobe XD in Sketch.

Interaktivne povezave je enostavno in preprosto nastaviti z dodajanjem dostopne točke za izdelavo podrobnih prototipov v nekaj sekundah. S 7 kretnjami in 13 animacijami lahko preprosto dosežete klikljiv interaktivni prototip. Vroča točka ima 3 nastavitve za povratno povezavo, povezavo do domače strani in zunanjo povezavo. Raziščite ga več, presenetilo vas bo več!

UXPin

UXPin je za vas ustvaril več kot 900 vrst različnih elementov uporabniškega vmesnika za ustvarjanje žičnih okvirov in prototipov. Njegova odzivna funkcija preloma omogoča uporabnikom ustvarjanje odzivnih prototipov in žičnih okvirov, ki se lahko izvajajo na različnih napravah in ločljivostih.

Kaj je mockup?

Maket je "vizualni scenarij", ki se uporablja za predstavitev celotne vizualne zasnove izdelka. Ima bogatejši vizualni element kot žični okvir, vključno z grafiko, postavitvijo, barvo in drugo podrobnejšo vizualno predstavitvijo. Do neke mere je to končna zasnova izdelka.

Tako kot žični okvir je tudi Mockup statičen in neuporaben. Osredotoča se na videz izdelka z dodajanjem številnih vizualnih elementov, s katerimi lahko dosežete visoko zvestobo. To se pogosto uporablja v razpravah o vizualnem oblikovanju za hitre povratne informacije in izboljšanje vizualnega oblikovanja izdelkov.

Oblikovni tok

Ko spoznate bistvo oblikovanja in spoznate razliko med žičnim okvirom, modelom, prototipom, stojite pred svetom oblikovanja uporabniške izkušnje.

Če lahko serijo izdelkov oblikujete v koheziven in učinkovit potek dela, se bodo zgodile neverjetne stvari.

Nasveti

  • Pri izdelavi žičnega okvirja poskusite uporabiti elemente, ki jih je mogoče urejati in uporabiti za večkratno uporabo. V tem primeru elemente še naprej natančno določite, da dokončate prototipe, ki temeljijo na žičnih okvirih.
  • Ko izdelujete žične okvirje, poskusite zbrati misli in mnenja svoje ekipe in strank ter jih poskušajte odsevati o modelih žičnih okvirjev.
  • Uporabite svoje najbolj priročno orodje

Zanimali vas bodo tudi:

Najboljša orodja in aplikacije za oblikovanje modelov in naprav za oblikovanje UI / UX v letu 2017

UX vs UI vs IA vs IxD: 4 Določeni zmedeno določeni pogoji digitalnega oblikovanja

Najboljše UI / UX Design Knjige in viri za oblikovalce

Prvotno objavljeno na www.mockplus.com.