7 najboljih alata za izradu žičanih okvira i prototipa za programere

U posljednje vrijeme imao sam puno rasprava o korisničkom sučelju i korisničkom sučelju. Nitko se zbog toga nije žalio, pa pretpostavljam da smo došli do točke kada svi koji su uključeni u razvoj aplikacija prepoznaju važnost korisničkog sučelja i korisničkog sučelja.

Izvrsnu ideju o aplikaciji tako je lako pokvariti loše promišljeno sučelje i iskustvo. A s mnogim alatima koji su sada dostupni za brzo oblikovanje žica i izradu prototipova, ne bi trebao postojati nijedan razlog da se ne izvrši sjajno iskustvo.

Iako se pojmovi često koriste zajedno, postoji jasna razlika između žičanog okvira i prototipa.

Žičani je okvir skeletni, goli kosti rasporeda strukture vaše aplikacije. Obično se radi bez ikakve boje - jednostavne crno-bijele - i dok žičani okvir pokazuje kamo će ići tekst, slike i drugi elementi dizajna, on ne uključuje stvarne slike, tekst itd. Međutim, svaki od elemenata žičanog okvira je prikazan u istinitom mjerilu. Razlog tome je što su žičani okviri usmjereni na vašu strukturu, a ne na stvarni dizajn. Slično kao i nacrti kuće ili zgrade: imate jasnu predodžbu o strukturi i rasporedu svega, a da vas dizajn ne ometa.

Prototipi se nalaze između žičanih okvira i potpuno funkcionalne aplikacije. Najvažniji dio prototipa je upotreba animacije koja vam omogućuje da ispitate kako će vaša aplikacija reagirati na interakciju korisnika i prijelaze stranica ili zaslona. Prototipovi također mogu uključivati ​​stvarne slike, skupove ikona i tekst, ali to je određeno svrhom prototipa. Ako samo testirate interakcije i protok zaslona, ​​možete stvoriti prototip koji uključuje samo animacije i možda malo boje. Ako pokušavate potvrditi svoju ideju ili predstaviti potencijalnim investitorima, želite da vaš prototip bude poliraniji, koristeći odgovarajuće slike, tekst itd.

Iako alati koje sam uključio u ovaj pregled olakšavaju stvaranje prototipova, uključujući više elemenata iznad i iznad animacije i prskanje boje, znači da vam treba više vremena za bilo kakve promjene na prototipu.

1. Balsamiq

Ako vas zanima samo sastavljanje žilave ideje vaše aplikacije, tada je Balsamiq alat za vas. Dostupan kao desktop i kao web aplikacija, Balsamiq postoji od 2008. godine.

Žičani okviri trebaju vrlo malo truda i vremena, pa je Balsamiq osmišljen kako bi vam pomogao da brzo stvorite svoje žičane okvire. Jednostavno dodajte osnovne elemente koji su vam potrebni, a zatim po potrebi promijenite veličinu, pozicionirajte i prilagodite. Žičani okviri koje napravite s Balsamiqom izgledat će pomalo grubo, ali to je namjerno. Kreativni tim koji stoji iza alata vjeruje da žičani okvir koji više nalikuje skici potiče na pamet. Što je u prvom redu veliki razlog za postavljanje žičane mreže.

Jednostavna kontrola verzija pomoći će vam da pratite gdje ste započeli i gdje ste sada. A to što je ovo žičani okvir ne znači da ne možete dobiti ulaz od potencijalnih korisnika / klijenata. Ne možete stvoriti potpuno interaktivni prototip pomoću Balsamiq-a, ali možete povezati zaslone / stranice koje stvorite kako biste generirali jednostavan prototip s klikom. Bez animacija ili interakcija: svrha je samo pokazati protok.

A ako se Balsamiq čini malo previše ograničenim, uvijek možete dodati bilo koje proširenje, predloške i pakete koje je stvorila zajednica.

Balsamiq je dostupan kao aplikacija za stolna računala po cijeni od 89 USD po korisniku, web aplikacija koja se kreće od 12 USD mjesečno ili kao aplikacija povezana s Google Driveom po cijeni od 5 USD mjesečno. Ali prvo možete započeti s besplatnim probnim razdobljem da biste provjerili je li to pravi alat za vas.

2. WireframePro

Iako licenca MockFlow uključuje pristup osam različitih aplikacija, WireframePro bi vas zanimao kad započnete s razvojem vlastite aplikacije. Ponovno je riječ o web aplikaciji s povlačenjem i ispuštanjem sučelja za stvaranje napora bez napora.

Dolazi sa svim standardnim elementima korisničkog sučelja, zajedno s mnoštvom drugih komponenata koje će vam možda trebati, uključujući izbor za pametne satove Apple i Android. Aplikacija vam također daje pristup Mock Storeu, koji nudi velik izbor predložaka trećih strana koje možete koristiti ili za nadahnuće, ili kao brzo polazište za vlastiti žičani okvir.

Kao i svi ovdje navedeni alati, WireframePro je dizajniran za pojedince i timove, s ugrađenim alatima za suradnju. Lijepo uključivanje je mogućnost automatskog generiranja specifikacija za svaki element, tako da ako dizajner ne radite sami, vaš dizajner imat će jednostavan pristup svim detaljima vezanim uz dizajn.

Napokon, kada dijelite bilo koji od svojih projekata, možete dodijeliti prava, ograničavajući neke ljude da mogu samo pregledavati i komentirati projekt, dok bi drugi također mogli uređivati.

WireframePro nema besplatne planove, ali možete ga isprobati 30 dana prije prelaska na plaćeni paket. Licence počinju od 19 USD mjesečno za jednog korisnika i 39 USD mjesečno za do tri člana tima.

3. UXPin

Kao što i samo ime govori, tim koji stoji iza UXPina naglašava UX. Ništa loše u tome, žičano postavljanje i izrada prototipa trebali bi vam pomoći da poboljšate UX aplikacije. Pomoću UXPina možete se pobrinuti i za postavljanje žica i za izradu prototipova, tako da nema potrebe za promjenom alata.

Kao što biste očekivali, UXPin podržava izvorne datoteke Sketch i Photoshop. Ali također ima ugrađeni uređivač koji podržava isječke CSS koda, omogućujući vam prilagodbu bilo kojeg elementa koji se koristi u vašem žičanom okviru i prototipu. A UXPin omogućuje super lako praćenje svake iteracije svake datoteke koju dodate ili izradite, tako da nećete morati kliktati na desetke datoteka u potrazi za izvornom verzijom.

Stvaranje osnovnih žičanih okvira i prototipova je brzo i jednostavno, uz dostupne sve standardne interakcije prototipa. Naravno, još uvijek možete stvoriti prilagođene interakcije ako se ukaže potreba. A nakon što vaš prototip bude spreman, možete ga poslati svima na testiranje, pri čemu će se sve interakcije zabilježiti na videozapisu, zajedno sa zvukom komentara svakog ispitivača.

UXPin podržava izradu žičanog okvira i izradu prototipa web stranica, mobilnih aplikacija i web aplikacija, a isporučuje se s 14 unaprijed postavljenih točaka prekida, što vam omogućuje da lako vidite svoj dizajn na više uređaja. Cijene počinju od 19 USD mjesečno za osnovni plan i 29 USD mjesečno za otključavanje naprednih značajki.

4. Prott

Iako je Prott brendiran kao alat za izradu prototipova, on uključuje i značajku žičanog okvira. Ako je ideja za vašu aplikaciju nešto više od grubo nacrtanih skica, možete fotografirati svoje skice i uvesti ih izravno u aplikaciju. Te se skice tada mogu animirati ili koristiti kao temelj vašeg žičanog okvira. Povucite i ispustite unaprijed postavljene oblike i elemente korisničkog sučelja izravno na skicu kako biste odmah prešli s klimavih linija na profesionalni lo-fi žičani okvir.

Prott uključuje velik broj korisničkih sučelja za razne uređaje, od iOS-a do Androida i weba. Ali također možete stvoriti vlastitu knjižnicu elemenata sučelja.

Umjesto da samo dijelite svoj prototip s drugim ljudima, sada možete čak uključiti i detaljnu mapu koja jasno prikazuje strukturu vaše aplikacije. I svi s kojima dijelite svoj prototip mogu komentirati izravno na svakom zaslonu, pa vam je lakše razumjeti na što se njihovi komentari odnose.

Prott nudi 30-dnevno probno razdoblje s besplatnim paketom koji nema ograničenja osim broja projekata koje možete stvoriti. Ako trebate izraditi više projekata, možete se prebaciti na početni ili profesionalni plan po cijeni od 19 USD mjesečno.

5. InVision

InVision je isključivo za izradu prototipova, ali s podrškom za razne namjene. Pomoću InVisiona možete brzo stvoriti interaktivne prototipove svoje web stranice, web aplikacije ili mobilne aplikacije, a zatim pregledati prototip na stvarnim uređajima. A to uključuje tablete i nosive uređaje, ne samo mobilne telefone.

Postupak je jednostavan kao:

  • Dodajte svoja dizajnerska sredstva (InVision podržava GIF-ove, PNG-ove, JPEG-ove, PSD-ove i izvorne datoteke Sketch-a) povlačenjem i ispuštanjem ili sinkronizacijom s Dropboxom.
  • Nacrtajte žarišne točke na svakom snimljenom materijalu i postavite ih da se povezuju s drugim sredstvima, vanjskim URL-ovima ili sidrima.
  • Dodajte interaktivnost u obliku gesta (dodirivanja ili prevlačenja), fiksnih područja (traka izbornika, itd.) I prijelaza.

Kad završite, projekt možete pogledati na telefonu, tabletu ili računalu, ili čak SMS-om ili e-poštom povezati prijatelje i kolege. To vam olakšava uključivanje drugih ljudi u postupak dizajniranja, tako da svatko kome pošaljete vezu može komentirati svaki dizajn.

Cijene za InVision počinju bez troškova za jedan prototip, 25 USD mjesečno za neograničene prototipove i 99 USD mjesečno za timove do 5 članova.

6. Čudi se

Kao i InVision, aplikacija Marvel namijenjena je prototipiranju. Uključuje standardnu ​​podršku za datoteke Sketch i Photoshop ili možete koristiti njihov ugrađeni alat za dizajn Canvas. Marvel također ima iOS i Android aplikaciju koja vam omogućuje da fotografirate vlastite doodle logotipe i dizajne i prenesete ih izravno u vašu Marvel knjižnicu.

Lako je stvoriti žarišne točke na svojim dizajnom, s desecima interakcija i prijelaza zaslona koji će oživjeti vaš prototip. A svoj prototip možete testirati na mnoštvu zaslona, ​​uključujući Apple Watch.

Naravno, nijedan alat za izradu prototipova nije vrijedan rasprave ako ne uključuje suradnju. A s Marvelom možete označiti svoj prototip da biste istaknuli određena područja koja želite da ljudi komentiraju. Komentare može dati svatko kome pošaljete svoj prototip, bez potrebe da prvo stvori Marvel račun.

Cijena za Marvel kreće se od 0 USD mjesečno za jednog korisnika i do dva projekta, ali s ograničenim značajkama. Za 14 USD mjesečno dobivate neograničene projekte i sve značajke, s odvojenim cijenama za timove i poslovne klijente.

7. Proto.io

Proto.io je popularan alat za izradu prototipova koji je dobio masovno ažuriranje 2016. Proto.io uključuje sve značajke potrebne u alatu za izradu prototipa, ali ažuriranje je donijelo i mnoštvo pojednostavljenih značajki.

Zajedno s redizajniranim korisničkim sučeljem koje čini sve temeljne značajke dostupnijima, Proto.io je također puno naglasio na animaciji. Pokret je važna značajka mobilnih aplikacija, a značajka Proto.io-a State Transitions svima olakšava stvaranje i prilagodbu animacija u njihovom prototipu.

Proto.io je također predstavio biblioteku uzoraka za dizajn interakcija, čineći dodavanje interakcija laganim. Ti obrasci uključuju interakcije poput kliznih izbornika i povlačenja za osvježavanje. Sve što morate učiniti je dodati interakciju vašem projektu i prilagoditi ga.

Nova verzija Proto.io proširuje vašu sposobnost da korisnici testiraju i komentiraju vaš prototip. Integrira se s korisničkim platformama za testiranje kao što su Validately i UserTesting, pružajući vam pristup većem skupu stvarnih korisnika. A integracijom Lookback dobivate neograničene snimke - za sada samo na iOS-u - pokazujući vam kako korisnici komuniciraju i kreću se kroz vašu aplikaciju.

Proto.io nudi 15-dnevno probno razdoblje s puno značajki, nakon čega se možete prebaciti na vrlo ograničeni besplatni račun. Plaćeni planovi počinju od 29 USD mjesečno, ovisno o veličini vašeg tima.

Zaključak

Kada tek započinjete s razvojem aplikacija, možda ćete htjeti stvoriti žičane okvire i prototipove ideje za svoju aplikaciju. Ali kako vam bude ugodnije s razvojnim postupkom, možete razmišljati samo o jednom ili o drugom.

Budući da su žičani okviri tako osnovni u dizajnu, prisiljavaju vas da se usredotočite na točan protok i korisničko iskustvo. Prototipovi vam mogu pomoći da poboljšate protok i UX, istaknete sve nedostatke u dizajnu i što je još važnije, izgledate bolje od žičanih okvira ako ih želite predstaviti klijentima ili investitorima. I dok bi moglo biti primamljivo zadovoljiti se alatom koji kombinira i žičanu strukturu i izradu prototipova, presudni faktor uvijek bi trebao biti koji alat uključuje sve značajke koje vam zapravo trebaju i najudobniji je za upotrebu. A budući da svaki od ovdje navedenih alata nudi besplatni plan ili probu, zašto ne biste proveli dan testirajući ih sve prije nego što donesete odluku?