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

Izraza „žični okvir“ in „prototip“ oblikovalca vedno zmedeta, kljub izkušenemu oblikovalcu, morda zaradi nerazumevanja ali kakšnih drugih razlogov. Pravzaprav je koncept med obema izrazoma precej očiten in drugačen. Zdaj pa jasno ločimo oba izraza.

Kaj je žični okvir?

Žični okvir je zasnova nizke vernosti zasnove, ki ima 3 preproste, a neposredne cilje:

1. Predstavlja glavno informacijsko skupino

2. Narišite oris strukture in postavitve

3. Vizija in opis uporabniškega vmesnika

To bo glavna struktura vašega izdelka, ko boste pravilno ustvarili žični okvir. Tako kot načrt zgradbe podrobno in konkretno opisuje podrobnosti.

Vizualne značilnosti žičnega okvirja

Žični okvir ima zelo očitne vizualne omejitve. Na splošno morajo oblikovalci za dokončanje uporabljati samo črte, škatle in sivo barvo (različna odtenka sive označuje različno raven).

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.

Prednost žičnih okvirjev

Gradnja žičnih okvirjev je hitra in poceni, še posebej, če uporabljate ta orodja za izdelavo prototipov, kot so UXPin, Mockplus, Balsamiq in Axure. Seveda bi morali to orodje za izdelavo prototipov uporabiti že na samem začetku.

V primerjavi s popolnim in podrobnim okvirjem z visoko zvestobo je zbiranje povratnih informacij veliko 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.

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.

Pozorno pokaži ž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.

To je diagram poteka delovanja uporabnika aplikacije, ki ga je skiciral Fernando Guillen. Seveda gre za zgodnjo oblikovalsko različico.

Žični okvir je najpomembnejši del zasnove. Ko ste videli ta diagram poteka, boste razumeli, zakaj je zamudno razložiti, kaj se imenuje žični okvir in zakaj moramo uporabljati žični okvir. Ali pa ta korak preprosto preskočite.

Kaj je prototip

Zahteva prototipa je višja od žičnega okvirja / interaktivnega žičnega okvira, mora biti prototip visoke zvestobe, ki je interaktiven in čim bolj ustreza končnemu uporabniškemu vmesniku.

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.

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.

Prednost prototipa

Zakaj je tako pomembno? Ker se prototip uporabnikov 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.

Oblikovni tok

Ko spoznate bistvo oblikovanja in poznate razliko med žičnim okvirom in 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 okvirjev 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 poskusiti odraziti na žičnih okvirih.

Uporabite svoje najbolj priročno orodje.

UXPin

UXPin je za vas ustvaril več kot 900 vrst različnih elementov uporabniškega vmesnika za ustvarjanje žičnih okvirov in prototipov.

Proto.io

Proto.io je zelo robustno orodje za izdelavo prototipov, na njem pa lahko izvozite HTML / CSS kodo, ki temelji na prototipu, in interaktivni prototip za zaslon na dotik, ki uporabnikom omogoča testiranje na dejanskih napravah.

Balzamik

Populacijsko orodje je dolgotrajno žično ogrodje samo za statične žične okvirje.

Mopsi

To orodje podpira izdelavo žičnih okvirov neposredno v spletu.

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 Mockplusu 3.0 je dodal učinkovito sodelovanje v skupini.

Osveži se

Ali potrebujemo več orodja za oblikovanje žičnih okvirjev in prototipov? Mislim, da ne.

Protoshare

To orodje lahko naredi tudi žične okvirje in prototipe v spletu.

InvisionApp

To orodje vam lahko pomaga ustvariti uporaben prototip, ničesar ne morete narisati, lahko pa dodate povezave med različnimi zasloni.

Ali želite svoje oblikovalske misli zapisati na .dsgnrs. blog? Preberi več…