V zadnjem času sem imel veliko razprav o UI in UX. Nihče se nad tem ni pritožil, zato predvidevam, da smo prišli do točke, ko vsi, ki se ukvarjajo z razvojem aplikacij, prepoznajo pomen uporabniškega vmesnika in uporabniškega okolja.
Odlično idejo o aplikaciji tako zlahka uniči slabo premišljen vmesnik in izkušnja. In ker je zdaj na voljo veliko orodij za hitro ožičenje in izdelavo prototipov, ne bi smelo biti nobenega razloga, da ne bi izvedli briljantne izkušnje.
Čeprav se izrazi pogosto uporabljajo skupaj, obstaja jasna razlika med žičnim okvirjem in prototipom.
Žični okvir je skeletna, gola kostna postavitev strukture vaše aplikacije. Običajno se izvede brez kakršne koli barve - preproste črno-bele - in medtem ko žični okvir prikazuje, kam bodo šli besedilo, slike in drugi elementi oblikovanja, ne vključuje dejanskih slik, besedila itd. Vendar je vsak element žičnega ogrodja prikazano v resničnem merilu. Razlog za to je, da so namenjeni žičnim okvirjem, da vašo pozornost osredotočijo na strukturo in ne na dejansko zasnovo. Podobno kot načrti za hišo ali zgradbo: dobite jasno predstavo o strukturi in postavitvi vsega, ne da bi vas motil dizajn.
Prototipi spadajo med žične okvirje in popolnoma funkcionalno aplikacijo. Najpomembnejši del prototipa je uporaba animacije, ki vam omogoča, da preučite, kako se bo vaša aplikacija odzvala na interakcijo uporabnika ter prehode strani ali zaslona. Prototipi lahko vključujejo tudi dejanske slike, nabore ikon in besedilo, vendar je to določeno z namenom prototipa. Če preizkušate samo interakcije in pretok zaslona, lahko ustvarite prototip, ki vključuje samo animacije in morda malo barve. Če poskušate svojo idejo potrditi ali predstaviti potencialnim vlagateljem, želite, da je vaš prototip bolj izpopolnjen z uporabo ustreznih slik, besedila itd.
Čeprav orodja, ki sem jih vključil v ta pregled, olajšujejo ustvarjanje prototipov, vključno z več elementi nad in nad animacijo in barvnim brizgom pomeni, da potrebujete več časa za kakršne koli spremembe prototipa.
1. Balsamiq
Če vas zanima samo sestavljanje ideje za vašo aplikacijo, potem je Balsamiq orodje za vas. Na voljo kot namizna in spletna aplikacija, Balsamiq obstaja že od leta 2008.
Žični okvirji naj bi zahtevali zelo malo truda in časa, zato je Balsamiq zasnovan tako, da vam pomaga hitro ustvariti žične okvirje. Preprosto dodajte osnovne elemente, ki jih potrebujete, nato spremenite velikost, položaj in po potrebi prilagodite. Žični okvirji, ki jih ustvarite z Balsamiqom, bodo videti nekoliko grobi, a to je namerno. Ustvarjalna skupina za orodjem verjame, da žični okvir, ki je bolj podoben skici, spodbuja nevihte. Kar je sploh velik razlog za žično mreženje.
Preprost nadzor različic vam bo pomagal slediti, kje ste začeli in kje ste. In samo zato, ker je to žično ogrodje, še ne pomeni, da od potencialnih uporabnikov / strank ne morete dobiti vnosa. Z Balsamiqom ne morete ustvariti popolnoma interaktivnega prototipa, lahko pa povežete zaslone / strani, ki jih ustvarite, da ustvarite preprost prototip s klikom. Brez animacij ali interakcij: namen je zgolj prikazati tok.
In če se zdi, da je Balsamiq preveč omejen, lahko vedno dodate katero koli razširitev, predloge in pakete, ki jih je ustvarila skupnost.
Balsamiq je na voljo kot namizna aplikacija po ceni 89 USD na uporabnika, spletna aplikacija od 12 USD na mesec ali aplikacija, povezana z Google Drive, po ceni 5 USD na uporabnika na mesec. Lahko pa najprej začnete z brezplačnim preskusom, da preverite, ali je to pravo orodje za vas.
2. WireframePro
Čeprav licenca MockFlow vključuje dostop do osmih različnih aplikacij, vas WireframePro zanima, ko začnete razvijati svojo aplikacijo. Spet gre za spletno aplikacijo z vmesnikom povleci in spusti za enostavno ustvarjanje žičnega okvira.
Na voljo je z vsemi standardnimi elementi uporabniškega vmesnika, skupaj z množico drugih komponent, ki jih boste morda potrebovali, vključno z izbiro za pametne ure Apple in Android. Aplikacija vam omogoča tudi dostop do trgovine Mock Store, ki ponuja veliko izbiro predlog tretjih oseb, ki jih lahko uporabite za navdih ali kot hitro izhodišče za svoj žični okvir.
Kot pri vseh tukaj naštetih orodjih je tudi WireframePro zasnovan za posameznike in skupine z vgrajenimi orodji za sodelovanje. Lepa vključitev je zmožnost samodejnega ustvarjanja specifikacij za vsak element, zato, če oblikovalskega dela ne izvajate sami, vaš oblikovalec bo imel enostaven dostop do vseh podrobnosti, povezanih z oblikovanjem.
Nazadnje, ko delite kateri koli svoj projekt, lahko dodelite pravice, tako da nekaterim ljudem omogočite le ogled in komentiranje projekta, drugi pa bi ga lahko tudi urejali.
WireframePro nima brezplačnih paketov, lahko pa ga preizkusite 30 dni, preden preklopite na plačljiv paket. Licence se začnejo pri 19 USD na mesec za enega uporabnika in 39 USD na mesec za največ tri člane ekipe.
3. UXPin
Kot že ime pove, ekipa, ki stoji za UXPin, poudarja UX. S tem ni nič narobe, ožičenje in izdelava prototipov naj bi vam pomagali izboljšati UX aplikacije. Z UXPin-om lahko poskrbite za ožičenje in izdelavo prototipov, zato ni treba zamenjati orodij.
Kot ste pričakovali, UXPin podpira izvorne datoteke Sketch in Photoshop. Ima pa tudi vgrajen urejevalnik, ki podpira delčke kode CSS, kar vam omogoča, da prilagodite kateri koli element, ki se uporablja v vašem žičnem okvirju in prototipu. In UXPin omogoča izjemno enostavno sledenje vsaki ponovitvi vsake datoteke, ki jo dodate ali ustvarite, tako da vam ne bo treba klikniti na desetine datotek, ki iščejo prvotno različico.
Ustvarjanje osnovnih žičnih okvirjev in prototipov je hitro in enostavno, z vsemi standardnimi interakcijami prototipov. Seveda lahko po potrebi še vedno ustvarite interakcije po meri. In ko je vaš prototip pripravljen, ga lahko pošljete vsakomur na testiranje, vse interakcije pa bodo zajete v video, skupaj z zvokom komentarjev vsakega preizkuševalca.
UXPin podpira ožičenje in izdelavo prototipov spletnih mest, mobilnih aplikacij in spletnih aplikacij ter ima 14 vnaprej nastavljenih mejnih točk, ki vam omogočajo preprost ogled vašega dizajna na več napravah. Za osnovni načrt se cene začnejo pri 19 USD mesečno in za odklepanje naprednih funkcij 29 USD mesečno.
4. Prott
Čeprav je Prott označen kot orodje za izdelavo prototipov, vključuje tudi funkcijo žičnega ohišja. Če je ideja o vaši aplikaciji le nekaj več kot grobo narisane skice, jih lahko fotografirate in uvozite neposredno v aplikacijo. Te skice lahko nato animirate ali uporabite kot temelj za vaše žično ogrodje. Povlecite in spustite vnaprej nastavljene oblike in elemente uporabniškega vmesnika neposredno na skico, da takoj preidete iz drhtečih linij v profesionalno lo-fi žico.
Prott vključuje veliko število uporabniških vmesnikov za različne naprave, od iOS do Androida in spleta. Lahko pa ustvarite tudi svojo knjižnico elementov vmesnika.
Namesto da samo delite svoj prototip z drugimi, lahko zdaj vključite celo podroben zemljevid, ki jasno prikazuje strukturo vaše aplikacije. Kdor koli, s katerim delite svoj prototip, lahko komentira neposredno na vsakem zaslonu, zato lažje razumete, na kaj se nanašajo njihovi komentarji.
Prott ponuja 30-dnevno preskusno različico z brezplačnim načrtom, ki nima nobenih omejitev razen števila projektov, ki jih lahko ustvarite. Če želite ustvariti več projektov, lahko preklopite na starter ali Pro načrt po ceni 19 USD na mesec.
5. InVision
InVision je namenjen izključno izdelavi prototipov, vendar s podporo za različne namene. Z InVision lahko hitro ustvarite interaktivne prototipe svojega spletnega mesta, spletne aplikacije ali mobilne aplikacije in si nato ogledate prototip na dejanskih napravah. Sem spadajo tudi tablični računalniki in nosljivi materiali, ne samo mobilni telefoni.
Postopek je tako preprost kot:
- Sredstva za načrtovanje dodajte (InVision podpira GIF-je, PNG-je, JPEG-je, PSD-je in izvorne datoteke Sketch) z vlečenjem in spuščanjem ali s sinhronizacijo z Dropboxom.
- Na vsako sredstvo narišite vroče točke in jih nastavite tako, da se povežejo z drugimi sredstvi, zunanjimi URL-ji ali sidri.
- Dodajte interaktivnost v obliki kretenj (dotikov ali potez), fiksnih področij (menijska vrstica itd.) In prehodov.
Ko končate, si lahko projekt ogledate v telefonu, tabličnem računalniku ali računalniku ali celo sms ali pošljete povezavo do prijateljev in kolegov po e-pošti. Tako lažje vključite druge ljudi v postopek oblikovanja, saj lahko vsak, ki mu pošljete povezavo, komentira posamezen dizajn.
Cene za InVision se začnejo brezplačno za en prototip, 25 USD na mesec za neomejene prototipe in 99 USD na mesec za ekipe do 5 članov.
6. Čuditi se
Tako kot InVision je tudi aplikacija Marvel namenjena izdelavi prototipov. Vključuje standardno podporo za datoteke Sketch in Photoshop ali pa lahko uporabite njihovo vgrajeno orodje za oblikovanje Canvas. Marvel ima tudi aplikacijo za iOS in Android, ki vam omogoča fotografiranje lastnih logotipov in modelov ter njihovo nalaganje neposredno v knjižnico Marvel.
Na svojih vzorcih je enostavno ustvariti vroče točke, na voljo je na desetine interakcij in prehodov zaslona, ki bodo oživili vaš prototip. In svoj prototip lahko preizkusite na številnih zaslonih, vključno z Apple Watchom.
Seveda se o nobenem orodju za izdelavo prototipov ne splača razpravljati, če ne vključuje sodelovanja. In z Marvel lahko označite svoj prototip, da poudarite določena področja, ki jih želite, da ljudje komentirajo. Komentar lahko odda vsak, ki mu pošljete svoj prototip, ne da bi mu bilo treba najprej ustvariti račun Marvel.
Cena za Marvel se začne pri 0 uporabnikih na mesec za enega uporabnika in do dva projekta, vendar z omejenimi funkcijami. Za 14 USD mesečno dobite neomejene projekte in vse funkcije z ločenimi cenami za ekipe in poslovne stranke.
7. Proto.io
Proto.io je priljubljeno orodje za izdelavo prototipov, ki je bilo obsežno posodobljeno leta 2016. Proto.io vključuje vse funkcije, ki jih zahteva orodje za izdelavo prototipov, vendar je posodobitev prinesla tudi množico poenostavljenih funkcij.
Skupaj s prenovljenim uporabniškim vmesnikom, ki omogoča dostopnost vseh osnovnih funkcij, je Proto.io dal velik poudarek tudi animaciji. Gibanje je pomembna lastnost mobilnih aplikacij, funkcija Proto Transio State Transitions pa olajša ustvarjanje in prilagajanje animacij v svojem prototipu.
Proto.io je predstavil tudi knjižnico vzorcev za oblikovanje interakcij, s čimer je dodajanje interakcij enostavno. Ti vzorci vključujejo interakcije, kot so drsni meniji, in povlecite za osvežitev. Vse, kar morate storiti, je, da projektu dodate interakcijo in jo prilagodite.
Nova različica proto.io razširja vašo zmožnost, da uporabniki preizkusijo in komentirajo vaš prototip. Integrira se s platformami za testiranje uporabnikov, kot sta Validately in UserTesting, kar vam omogoča dostop do večjega nabora resničnih uporabnikov. In z integracijo Lookback dobite neomejene posnetke - za zdaj samo v sistemu iOS - ki vam prikazujejo, kako uporabniki komunicirajo in krmilijo po vaši aplikaciji.
Proto.io ponuja 15-dnevno preskusno različico, po kateri lahko preklopite na zelo omejen brezplačen račun. Plačljivi načrti se začnejo pri 29 USD mesečno, odvisno od velikosti vaše ekipe.
Zaključek
Ko šele začenjate z razvojem aplikacij, boste morda želeli ustvariti tako žične okvire kot prototipe ideje za svojo aplikacijo. Ko pa vam razvojni postopek postane bolj všeč, lahko razmislite le o enem ali drugem.
Ker so žični okvirji tako osnovni pri oblikovanju, vas prisilijo, da se osredotočite na pravilno pretočnost in uporabniško izkušnjo. Prototipi vam lahko pomagajo izboljšati pretok in UX, poudariti morebitne napake v oblikovanju in, kar je še pomembneje, videti bolje kot žični okvirji, če jih želite predstaviti strankam ali vlagateljem. In čeprav bi se morda zamikalo, da bi se zadovoljili z orodjem, ki združuje tako ožičenje kot prototipiranje, bi moralo biti vedno odločilno, katero orodje vključuje vse funkcije, ki jih dejansko potrebujete, in je najbolj udobno za uporabo. In ker vsako od tukaj naštetih orodij ponuja brezplačen načrt ali preizkus, zakaj ne bi porabili en dan za preizkušanje vseh, preden se odločite?
