I det siste har jeg hatt mange diskusjoner om UI og UX. Ingen har klaget på dette, så jeg antar at vi når et punkt der alle som er involvert i apputvikling anerkjenner viktigheten av UI og UX.
En flott appidee blir så lett ødelagt av et lite gjennomtenkt grensesnitt og erfaring. Og med mange verktøy som nå er tilgjengelige for rask wireframing og prototyping, burde det ikke være noen grunn til ikke å utføre en strålende opplevelse.
Selv om begrepene ofte brukes sammen, er det et klart skille mellom en trådramme og en prototype.
En trådramme er et skjelett, bare bein layout av appens struktur. Det gjøres vanligvis uten farge - enkelt svart-hvitt - og mens en trådramme viser hvor tekst, bilder og andre designelementer vil gå, inkluderer den ikke faktiske bilder, tekst osv. Imidlertid er hvert av trådrammeelementene vist i sann skala. Årsaken til dette er at wireframes er ment å fokusere oppmerksomheten din på strukturen, ikke selve designet. I likhet med tegningene for et hus eller en bygning: du får en klar ide om strukturen og plasseringen av alt, uten å bli distrahert av designet.
Prototyper faller mellom trådrammer og en fullt funksjonell app. Den viktigste delen av en prototype er bruken av animasjon, som lar deg undersøke hvordan appen din vil reagere på brukerinteraksjon, og side- eller skjermoverganger. Prototyper kan også inneholde faktiske bilder, ikonsett og tekst, men dette bestemmes av formålet med prototypen. Hvis du bare tester ut interaksjoner og skjermflyt, kan du lage en prototype som bare inkluderer animasjoner og kanskje litt farge. Hvis du prøver å validere ideen din, eller pitching til potensielle investorer, vil du at prototypen din skal være mer polert, ved å bruke riktige bilder, tekst osv.
Selv om verktøyene jeg har tatt med i denne samlingen, blir det lettere å lage prototyper, inkludert flere elementer utover animasjon og et fargeklatt, betyr at du trenger mer tid til å gjøre endringer i prototypen.
1. Balsamiq
Hvis du bare er interessert i å sette sammen en trådramme for appideen din, er Balsamiq verktøyet for deg. Balsamiq er tilgjengelig både som stasjonær og webapplikasjon, siden 2008.
Wireframes er ment å kreve veldig lite krefter og tid, så Balsamiq er designet for å hjelpe deg med å lage wireframes raskt. Bare legg til de grunnleggende elementene du trenger, og endre størrelsen, plasser og tilpass etter behov. Trådrammene du lager med Balsamiq vil se litt grove ut, men det er forsettlig. Det kreative teamet bak verktøyet mener at en trådramme som ser mer ut som en skisse, oppmuntrer til idédugnad. Som er en stor grunn til wireframing i utgangspunktet.
Enkel versjonskontroll hjelper deg å holde oversikt over hvor du startet, og hvor du er nå. Og bare fordi dette er en trådramme, betyr ikke det at du ikke kan få innspill fra potensielle brukere / klienter. Du kan ikke opprette en fullt interaktiv prototype ved hjelp av Balsamiq, men du kan koble skjermene / sidene du oppretter for å generere en enkel klikk-gjennom prototype. Ingen animasjoner eller interaksjoner: Hensikten er utelukkende å demonstrere flyt.
Og hvis Balsamiq virker litt for begrenset, kan du alltid legge til noen av fellesskapslagde utvidelser, maler og ikonpakker.
Balsamiq er tilgjengelig som en stasjonær app, priset til $ 89 / bruker, en nettbasert app som starter på $ 12 / mo, eller en Google Drive-tilknyttet app, priset til $ 5 / bruker / måned. Men du kan starte med en gratis prøveperiode først for å se om det er riktig verktøy for deg.
2. WireframePro
Selv om en MockFlow-lisens inkluderer tilgang til åtte forskjellige apper, er det WireframePro du vil være interessert i når du begynner å utvikle din egen app. Igjen er det en nettbasert app, med et dra og slipp-grensesnitt for enkelt å lage en trådramme.
Den leveres med alle standard UI-elementer, sammen med en rekke andre komponenter du trenger, inkludert et utvalg for Apple- og Android-smartklokker. Appen gir deg også tilgang til Mock Store, som tilbyr et stort utvalg av tredjepartsmaler som du enten kan bruke til inspirasjon, eller som et raskt utgangspunkt for din egen trådramme.
Som med alle verktøyene som er oppført her, er WireframePro designet for enkeltpersoner og team, med samarbeidsverktøy innebygd rett i. En fin inkludering er muligheten til å automatisk generere spesifikasjoner for hvert element, så hvis du ikke gjør designarbeidet selv, din designer vil ha enkel tilgang til alle designrelaterte detaljer.
Til slutt, når du deler noen av prosjektene dine, kan du tildele rettigheter, og begrenser noen til å bare kunne se og kommentere et prosjekt, mens andre også kan redigere det.
WireframePro har ingen gratis planer, men du kan prøve det i 30 dager før du bytter til en betalt plan. Lisenser starter på $ 19 / mo for en bruker, og $ 39 / mo for opptil tre teammedlemmer.
3. UXPin
Som navnet antyder, legger teamet bak UXPin vekt på UX. Ingenting galt med det, wireframing og prototyping er ment å hjelpe deg med å avgrense appens UX. Med UXPin kan du ta vare på både wireframing og prototyping, så du trenger ikke bytte verktøy.
Som du forventer, støtter UXPin Sketch-kildefiler og Photoshop-filer. Men den har også en innebygd editor som støtter CSS-kodebiter, slik at du kan tilpasse ethvert element som brukes i trådrammen og prototypen. Og UXPin gjør det superenkelt å holde rede på hver iterasjon av hver fil du legger til eller oppretter, slik at du ikke trenger å klikke gjennom dusinvis av filer på jakt etter originalversjonen.
Å lage grunnleggende trådrammer og prototyper er raskt og enkelt, med alle tilgjengelige prototype-interaksjoner tilgjengelig. Naturligvis kan du fremdeles lage tilpassede interaksjoner hvis behovet oppstår. Og når prototypen din er klar, kan du sende den til hvem som helst for testing, med alle interaksjoner fanget på video, sammen med lyd fra hver testers kommentarer.
UXPin støtter wireframing og prototyping av nettsteder, mobilapper og webapper, og leveres med 14 forhåndsinnstilte brytepunkter, slik at du enkelt kan se designet ditt på flere enheter. Priser starter ved $ 19 / mo for grunnplanen, og $ 29 / mo for å låse opp avanserte funksjoner.
4. Prott
Selv om Prott er merket som et prototypeverktøy, inkluderer det også en wireframing-funksjon. Hvis appideen din er litt mer enn grove tegninger, kan du fotografere skissene dine og importere dem direkte til appen. Disse skissene kan deretter animeres, eller brukes som grunnlag for trådrammen. Dra og slipp forhåndsinnstilte former og brukergrensesnittelementer direkte på skissen din for å umiddelbart gå fra rystende linjer til profesjonell trådløs ramme.
Prott inkluderer et stort antall UI-sett for en rekke enheter, fra iOS til Android og web. Men du kan også lage ditt eget bibliotek med grensesnittelementer.
I stedet for bare å dele prototypen din med andre, kan du nå til og med inkludere et detaljert kart som tydelig viser strukturen til appen din. Og alle du deler prototypen din med, kan kommentere direkte på hver skjerm, så det er lettere for deg å forstå hva kommentarene deres har å gjøre med.
Prott tilbyr en fullverdig prøveperiode på 30 dager, med en gratis plan uten begrensninger annet enn antall prosjekter du kan lage. Hvis du trenger å lage flere prosjekter, kan du bytte til en Starter- eller Pro-plan, priset fra $ 19 / mnd.
5. InVision
InVision er utelukkende for prototyping, men med støtte for en rekke bruksområder. Med InVision kan du raskt lage interaktive prototyper av nettstedet ditt, webappen eller mobilappen din, og deretter se prototypen på faktiske enheter. Og dette inkluderer nettbrett og wearables, ikke bare mobiltelefoner.
Prosessen er så enkel som:
- Legg til designelementene dine (InVision støtter GIF, PNG, JPEG, PSD og Sketch-kildefiler) via dra og slipp, eller ved å synkronisere med Dropbox.
- Tegn hotspots på hvert aktivum, og sett dem til å lenke til andre eiendeler, eksterne URL-er eller ankre.
- Legg til interaktivitet i form av bevegelser (kraner eller sveip), faste områder (menylinje osv.) Og overganger.
Når du er ferdig, kan du se prosjektet på telefonen, nettbrettet eller datamaskinen, eller til og med SMS eller sende en lenke til venner og kolleger via e-post. Dette gjør det lettere for deg å involvere andre mennesker i designprosessen, med alle du sender en lenke til, kan kommentere hvert design.
Priser for InVision starter uten kostnad for en prototype, $ 25 / mo for ubegrensede prototyper og $ 99 / mo for team på opptil 5 medlemmer.
6. Marvel
I likhet med InVision er Marvel-appen for prototyping. Den inkluderer standardstøtte for Sketch- og Photoshop-filer, eller du kan bruke deres innebygde Canvas-designverktøy. Marvel har også en iOS- og Android-app som lar deg fotografere dine egne doodles og design, og laste dem opp direkte til Marvel-biblioteket ditt.
Det er enkelt å lage hotspots på designene dine, med dusinvis av interaksjoner og skjermoverganger tilgjengelig for å gi prototypen din liv. Og du kan teste prototypen din på en rekke skjermer, inkludert Apple Watch.
Selvfølgelig er det ikke verdt å diskutere noe prototypeverktøy hvis det ikke inkluderer samarbeid. Og med Marvel kan du kommentere prototypen din for å markere spesifikke områder du vil at folk skal kommentere. Kommentarer kan komme av alle du sender prototypen din til, uten at de først trenger å opprette en Marvel-konto.
Priser på Marvel starter på $ 0 / mo for en bruker og opptil to prosjekter, men med begrensede funksjoner. For $ 14 / mnd får du ubegrensede prosjekter, og alle funksjoner, med separat pris for team og bedriftskunder.
7. Proto.io
Proto.io er et populært prototypeverktøy som fikk en massiv oppdatering i 2016. Proto.io inkluderer alle funksjonene som kreves i et prototypingsverktøy, men oppdateringen har også brakt en rekke forenklede funksjoner.
Sammen med et redesignet brukergrensesnitt som gjør alle kjernefunksjonene mer tilgjengelige, har Proto.io også lagt stor vekt på animasjon. Bevegelse er en viktig funksjon i mobilapper, og Proto.ios State Transitions-funksjon gjør det enkelt for alle å lage og tilpasse animasjoner i sin prototype.
Proto.io har også introdusert et interaksjonsdesignmønsterbibliotek, noe som gjør tillegg av interaksjoner uanstrengt. Disse mønstrene inkluderer interaksjoner som innskyvningsmenyer, og trekk for å oppdatere. Alt du trenger å gjøre er å legge til en interaksjon i prosjektet ditt, og tilpasse det.
Den nye versjonen av Proto.io utvider muligheten din for å få brukere til å teste og kommentere prototypen din. Den integreres med brukertestplattformer som Validately og UserTesting, og gir deg tilgang til et større utvalg av virkelige brukere. Og med Lookback-integrering får du ubegrensede opptak - bare på iOS for nå - som viser hvordan brukerne samhandler og navigerer gjennom appen din.
Proto.io tilbyr en fullverdig 15-dagers prøveperiode, hvoretter du kan bytte til en veldig begrenset gratis konto. Betalte planer starter på $ 29 / mo, avhengig av størrelsen på teamet ditt.
Konklusjon
Når du nettopp er i gang med apputvikling, kan det være lurt å lage både trådrammer og prototyper av appideen din. Men når du blir mer komfortabel med utviklingsprosessen, kan du vurdere å bare gjøre det ene eller det andre.
Fordi wireframes er så grunnleggende i design, tvinger de deg til å fokusere på å få strømmen og brukeropplevelsen riktig. Prototyper kan hjelpe deg med å avgrense både flow og UX, markere eventuelle designfeil, og enda viktigere, se bedre ut enn wireframes hvis du trenger å presentere for kunder eller investorer. Og selv om det kan være fristende å ta til takke med et verktøy som kombinerer både trådramming og prototyping, bør den avgjørende faktoren alltid være hvilket verktøy som inneholder alle funksjonene du faktisk trenger, og som er mest behagelig å bruke. Og siden hvert av verktøyene som er oppført her, tilbyr en gratis plan eller prøveperiode, hvorfor ikke bruke en dag på å teste dem alle før du tar en beslutning?
