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

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, Wireframe 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čna lestvica sive označuje različno raven).

Ž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, na primer 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 okvirja lo-fi veliko lažje in še bolj pomembno. 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 grafičnega urejanja.

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 spodbuja 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 odličen napredek pri preizkušanju izdelka za oblikovalce in razvijalce.

Poleg tega, če uporabnikom prototipov zbirate povratne informacije, je to koristno za vpogled v vse podrobnosti vašega izdelka in navdih za 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

Iščete odlično orodje za hitro izdelavo prototipov? Brez proračuna? Brez izgovorov. Mockplus Črni petek 2017 je tu za vas! Pridružite se Mockplus Official Slack skupini zdaj, skrbnik vam bo ponudil 40-odstotni popust na kupone in brezplačen paket UI Kits & Fonts. Ta časovno omejena ponudba velja za vse pakete in traja do 31. novembra, s čimer prihranite vsaj 80 dolarjev običajne cene. Poleg tega boste na Mockplusu dobili tudi dosmrtno brezplačno tehnično podporo, tudi če zdaj niste plačan uporabnik. Pridite in uživajte v Mockplus črnem petku 2017!

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.

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še vizualne elemente kot žični okvir, vključno z grafiko, postavitvijo, barvo in drugimi podrobnejšimi vizualnimi predstavitvami. 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, ki bodo dosegli 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 poznate 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 delovni tok, se bodo zgodili neverjetni tanki.

Nasveti

  • Pri izdelavi žičnih okvirov poskusite uporabiti elemente, ki jih lahko urejate in jih lahko ponovno uporabite. 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 poskusiti odraziti na žičnih okvirih.
  • Uporabite svoje najbolj priročno orodje