Prototyping, som et koncept, har eksisteret siden før internettet. Typisk vil folk, der udvikler et nyt fysisk produkt, først bygge ting, og sørge for, at det fungerede som beregnet. Den første version ville måske være patenteret og vist til potentielle investorer. Hvis opfinderen havde adgang til deres egne produktionsmetoder (hvis de f.eks. Arbejdede i et eksisterende firma), ville de bare gå lige frem og udarbejde fejlene, indtil de havde en produktionsklar model.
Husk de gamle demodiske? Ved du, dem der fulgte med programmer med begrænset funktionalitet, eller det første eller to niveauer i et spil? Prototyper er meget som demos, kun endnu enklere.
Du opbygger en prototype af et websted eller en app for at sikre, at konceptet fungerer som ønsket
Deres formål er ikke så meget at få potentielle kunder til at købe et produkt, for at hjælpe dig med at gøre en bedre. Du opbygger en prototype af et websted eller en app for at sikre, at konceptet fungerer som ønsket. Du bruger også den til at vise dine kunder eller potentielle investorer, hvordan det skal fungere.
For nylig har vi set mange apps rettet mod at bygge prototyper til internettet og til mobile apps. Nu er Adobe Experience Designer blevet frigivet, kombineret funktionaliteten af en web-og-mobil-specifik "design app" med en prototypeprogram. I betragtning af Adobes omdømme og deres markedsandel i den professionelle sektor står det til grund, at mange mennesker, der ikke tidligere har lavet mange prototyper, måske nu kan tage dette skridt.
Så, som de fleste andre ultimative guider, er denne for begyndere. Det er for mennesker, der lige er begyndt at bygge prototyper med jævne mellemrum, uanset deres tidligere erfaring (eller mangel deraf) i designbranchen.
I denne vejledning har vi forsøgt at dække de grundlæggende principper frem for alt. Derefter er der links til hjælpelinjer med yderligere oplysninger, og selvfølgelig en stor lang liste over apps og værktøjer, som du kan arbejde med.
Nu og designeren, der har eksisteret i et stykke tid, har sikkert allerede arbejdet med wireframes og / eller designet mockups i nogle billedredaktører. Er det ikke prototyper?
Nix. Ikke altid, alligevel.
Problemet med wireframes og statiske mockups er, at de er ... godt ... statiske. Der er mange oplysninger, som de simpelthen ikke kan formidle om en funktionalitet. Dette kan føre til misforståelser i klientens sind, eller endda dine udviklere, om, hvordan sagen skal arbejde. Af denne grund er prototyper normalt interaktive på en eller anden måde.
De mest almindelige undtagelser er konceptuelle prototyper og undtagelsesvis veldokumenterede statiske prototyper. Hvad der gør forskellen, er ikke interaktivitet selv, men formidling af information om en produkts tilsigtede funktionalitet.
Når det er sagt, bruges wireframes og mockups ofte til fremstilling af prototyper, så ingen overgiver dem.
Når du skal vise, hvordan noget skal arbejde. Det er det.
Det oplagte eksempel er en web- eller mobilapp. Apps har en tendens til at have en retfærdig smule funktionalitet, som måske ikke let kan ses eller udledes af en mockup. Dog kan selv ret statiske, indholdsdrevne websites kræve en prototype.
For det første har jeg fået kunderne til at se på mockups for et simpelt forretningsside og spørg "Okay, så hvis de klikker på disse ting øverst," Om os "," Tjenester "og ting, der tager dem til andre sider? ", eller" Når de klikker send på kontaktformularen, får jeg en mail? "
Selv simple ... opgaver er ofte fyldt med usikkerhed ... prototyper kan hjælpe med at tage nogle af gættet ud
Selv enkle browsingopgaver er ofte fyldt med usikkerhed for nogle brugere og potentielle kunder, så prototyper kan hjælpe med at tage nogle af gættet ud af afmeldingsprocessen.
Derudover er de altid nyttige i brugertest. Når alt kommer til alt, er det bedst at starte med en tidlig forhåndsvisning af projektet, hvis du vil gøre brugerprøvning overhovedet. Det sidste, du vil have, er at skulle foretage store ændringer, efter at det meste af arbejdet allerede er gjort.
Inden du starter prototyping, vil du gerne afgøre, hvilken type du vil bruge. Du kan altid bruge mere end én art i et givet projekt; de fleste designere gør på et tidspunkt.
Den slags prototype, som du vælger, skal være rigtig for dig, din klient, projektet og endda den specifikke fase af projektet, som du er i. Nu kan det lyde komplekst, men det er virkelig ikke så slemt.
Hver af disse er beregnet til at blive brugt på forskellige stadier i designfasen. Resten er op til din præference, og hvor god din klient er ved at forstå abstrakte billeder.
Kunder, der er mindre erfarne med moderne designprocesser, kan forvente at se noget, der ser mere poleret ud, så de kan fortælle dig at gøre logoet større, flytte den linje en tomme til venstre, og at deres websted ikke vil være på latin , så kan du sætte nogle engelsk i tak?
Hvis du har problemer med det, er mere detaljerede prototyper - og en masse kaffe - din bedste indsats. Hvis ikke, så kan du bruge noget lidt mere vagt, og fokusere på at mocking op den planlagte funktionalitet.
Disse ser ofte ikke ud som det færdige produkt på nogen måde form eller form. Med konceptuelle prototyper er grænsefladens detaljer og layout ikke ligegyldigt. De eneste ting, du arbejder på, er interaktioner og processer.
Målet med enhver prototype er at vise, hvordan noget virker eller vil fungere. I den forstand er dette prototyper i sin reneste form. Det handler helt bogstaveligt om funktionen, og formen kommer ikke engang ind i den.
De kan se ud på næsten alt, på dette tidspunkt. Du kan bruge et rutediagram, post-it noter, en PowerPoint-præsentation, en video, der forklarer processen med rå ikonbaserede illustrationer eller en optagelse af dig selv, der taler ind i kameraet og smutter dine arme vildt. Alt, hvad der kommer point over, vil gøre.
Konceptuelle prototyper anvendes typisk i det allerførste trin af ethvert projekt. Dit projekt har muligvis ikke et navn. Det er bare en ide for en app eller et websted, og du vil sige ting som: "Ja, jeg synes, det skulle være sådan et arbejde ..."
Low-fi prototyper er hvor du begynder at inkludere ting som layout og skærmstørrelse og andre mere håndgribelige bekymringer. De laves typisk hurtigt og kasseres hurtigere.
De har til formål at give den hurtigste mulige måde at gentage dine ideer på, indtil du og / eller din klient er tilfredse med det grundlæggende. Så ikke blive vedhæftet. De fleste af disse vil ikke være længe, og det er en god ting.
Som tidligere nævnt er udtrykket "lavfidelitetsprototyper" ofte udskiftelige med "wireframes". Faktisk sker dette trin ofte på papir.
Når det er gjort i en app, er det tilrådeligt at bruge en, der har grundlæggende prototypefunktioner som at forbinde til andre skærme, annotation osv. Wireframing-apps har den fordel at gøre det nemmere at samarbejde via internettet, men de er ofte lidt langsommere til at brug.
Disse bruges også i starten af et projekt, men du har sandsynligvis en forretningsmodel og en ide til et navn nu. Det er på tide at sortere gennem de myriade ideer, der flyder rundt om dit hoved og gentage, indtil du har noget, du er helt sikker på, vil fungere.
Nogle gange vil en prototype med lav troværdighed bare ikke få det godt nok, og en højfidelighed er for meget arbejde for øjeblikket. Måske har du ikke helt raffineret stilguiden, eller ikke alle dine grafiske aktiver er blevet lavet endnu.
Under alle omstændigheder er det den slags prototype, du kan bruge i begyndelsen til midten af designfasen. De er ofte lavet med prototyping apps, som gør stor brug af simuleret interaktion. De kan også bygges med HTML og CSS, normalt ved hjælp af en CSS-ramme.
Yup, Bootstrap og Foundation er nok to af de største prototypeværktøjer derude lige nu.
Du bør bruge branded billeder til disse, hvis du har det, men billeder vil gøre. Lager UI-elementer bruges typisk til at udbygge den simulerede grænseflade hurtigere. Mange prototypeprogrammer kommer med biblioteker af disse elementer for at gøre dit arbejde hurtigere.
Disse slags prototyper er gode for de mere bogstavelige tænkere, der har brug for at se en nærbillede af, hvordan det vil se og arbejde. Det er lettere for dem at ignorere en overskrift, der er "ikke færdig endnu", end en skitseret udseende, der ikke ser noget som en hjemmesideoverskrift som de ved det.
For disse kunder vil du måske hurtigt udarbejde dine ideer og aldrig vise dem til kunden. Derefter lav en prototype med mellemfidelighed, der gør det lettere for dem at se, hvor du skal hen.
Nå, vi er her. Og så er dit projekt. Du har dine mockups til hver skærm, og alt ser godt ud. Det er på tide at vise folk, hvordan det skal fungere, i al sin herlighed, når nogen endelig integrerer den med back-end-koden.
High-fidelity prototyper bruges normalt til at få en endelig afmærkning på designet fra klienten. Men du kan ikke bare sende dem PSD'erne. Disse ting skal være interaktive.
Dette opnås typisk på en af to måder. Nogle bruger statisk HTML og CSS til at sætte de færdige visualer sammen på en måde, der er semi-interaktiv. Andre bruger apps, der importerer billeder, eller endda rå PSD-filer, og tilføjer pseudo-interaktive funktioner for at efterligne den endelige funktionalitet i appen.
Afhængig af appen kan du endda demo disse prototyper på nettet (eller på en mobil enhed, hvis du har arbejdet på en app).
Nu hvor vi er gået over de vigtigste typer prototyper, du kan lave, er det tid til at dække de værktøjer, der bruges til at lave dem. Jeg nævnte de fleste af disse i det foregående afsnit og deres grundlæggende brug; men jeg vil gerne gå ind i lidt mere detaljeret.
Igen afhænger den metode du vælger af, hvad både dig og klienten er trygge med.
Disse er ofte lavet til at sælge en ide, før noget konkret arbejde er blevet gjort. Således er de normalt rettet mod potentielle investorer. De kan også bruges til klienter; men der er ofte mere effektive måder at kommunikere med en klient på. Din kilometertal kan variere.
De video- og præsentationsbaserede prototyper, der er lavet til salgssteder, følger normalt en kommerciel formel:
Nogle af disse prototyper bruger kun ikoner, tekst og illustrationer. Andre har animation; og stadig andre bruger live handling for at få point på tværs. Og det er godt ... punktet. Så længe du sælger din ide, har du gjort det rigtigt.
Her er et fantastisk eksempel der blander video prototyper med papir prototyping.
Trådrammer kan udføres på papir eller i apps. De betragtes næsten altid som prototyper med lav troskab, selvom de kan opgraderes til mellemfidelighed, hvis du lægger tilstrækkelig tid til dem. Det er dog sjældent værd at gøre.
Normalt er wireframes designet til både at blive trukket og kasseret hurtigt. Dette er en af de ting, der gør at trække dem på papir så attraktivt. Apps kan være langt mere præcise, og du kan nemt redigere eksisterende wireframes; men intet slår hastigheden på en skitse, som ingen skal se, men dig selv ... nogensinde.
Som tidligere nævnt har appbaserede trådrammer imidlertid den fordel, at de lettere efterligner funktionaliteten af en grænseflade. Tapping på en papirtrådramme vil bare gøre en behagelig thunk-thunk-thunk lyd.
Det kan være sjovt, men det kan ikke formidle din mening.
Du kan vælge at bruge begge: Papir til at søm ned de mest grundlæggende begreber, og en app til at kød den ud og dele det nemt.
Disse adskiller sig fra wireframes, fordi de er meget mere end tegninger. I denne type prototype bruges papir til at lave en fysisk, men stadig flad, model af grænsefladen. Du kan se en af disse i videoen ovenfor.
Interface elementer er normalt trukket, skåret ud, undertiden kopieret for at lave ekstramateriale, og derefter samlet på et andet stykke papir. Dette giver dem fordelene ved fleksibilitet. Hvor du måske smider et helt ark papir med en wireframe, kan du bare omorganisere elementerne i en papirmodel, indtil du er tilfreds. Fik et element, der er den forkerte størrelse, efter at du har re-arrangeret ting et par gange? Bare skære en ny version ud.
De har også en tendens til at føle sig lidt mere "ægte" end en trådramme. Selvom intet interessant vil ske, kan en kunde røre ved en papirmodel. De kan mærke det. Den taktile sensation kan undertiden forklare mere for en klient end noget, du nogensinde kunne vise dem.
Alle har brug for fysisk kontakt for at opnå en bedre forståelse af ethvert objekt. Halvdelen af UX-design handler om at genskabe følelsen af fysisk interaktion med en digital grænseflade.
Disse har meget til fælles med papirprototyper. Prototyper lavet med en app som Invision, eller en af de mange andre muligheder derude (se listen nedenfor), er typisk lavet af pre-designede interfaceelementer, og derefter pieced sammen for at efterligne det endelige produkt.
Forskellen er selvfølgelig, at alt er gjort på skærmen. Åh, og du kan gøre det med den endelige grafik og branding, hvilket gør prototypen til at se ud som det færdige produkt. Så, som jeg nævnte tidligere, kan nogle apps demo produktet i browseren og på mobilenheder.
Dette bringer den taktile følelse tilbage i spil, og du vil have det her. Hvis du kan give dine kunder den følelse, og de kan lide det, har du stort set fået deres endelige godkendelse.
Selvfølgelig, hvis interaktion er det, du ønsker, så bygger interface-prototyper med kode en god måde at få det på. Nu kan du vælge kodebaserede prototyper af en eller flere årsager:
Prototyping i browseren kan være lidt langsommere, især hvis der stadig foretages store revisioner. Jeg vil ikke anbefale det til de tidlige stadier af et projekt, så det er bedst for mellem-til-høj troskab prototyper.
Alligevel er det en af de bedste måder at vise frem et næsten færdigt projekt, hvis du allerede kan lide at arbejde med HTML og CSS.
Prototyper med rammer
Det skal bemærkes, at ved hjælp af en ramme for at opbygge prototyper kan der hurtigst muligt fremskyndes kodebaseret prototyper. Som en bonus, hvis du bruger rammen, der er beregnet til at blive brugt til slutproduktet, er der mindre kodning til at gøre overordnet.
Som en sidebesked har nogle mennesker bygget drag 'n' drop webside redaktører baseret på mere populære rammer, som bootstrap og Fundament . Ved hjælp af disse kan man på én gang tænke sig at skabe alt fra lavfidelitetsprototyperne til det endelige produkt med kode.
Men nogle mennesker bruger dem kun til at bygge prototyper hurtigt, og derefter bruge brugerdefineret kode til det endelige projekt. Det virker enten måde.
Nu hvor vi har dækket alle de grundlæggende, er det tid til virkelig at komme ind på detaljer. Som med næsten alt andet i design og i livet, er der ingen rigtig måde at opbygge en prototype på. Der er kun den måde, der virker for dig. Når det er sagt, har succesfulde designprocesser tendens til at have et par ting til fælles.
Her er et par forskellige guider til prototyper, der fokuserer på forskellige metoder og troværdigheder, bare for at komme i gang. Tag fra dem, hvad der virker for dig, ignorere hvad der ikke gør.
(Vi vil ikke inkludere app-specifikke vejledninger, fordi der simpelthen er for mange.)
Denne vejledning fra Smashing Magazine fokuserer på en metode til at opbygge prototyper hurtigt og gentage ofte.
Dette er en mere personlig artikel af Nick Pettit på Treehouse blog, der beskriver sin egen tilgang til prototyping.
Her er en tredje artikel på hurtig prototyping. Det ser ud til at være populært. Denne er lige her på Webdesigner Depot, og det beskriver et par tips til og faldgruber, der er forbundet med processen.
En anden artikel af Smashing Magazine , dette går nærmere ind på prototyper med lavt troværdighed.
I denne dybdegående og ret ærligt fascinerende artikel Det Newfangled agentur beskriver deres proces i dybden. Det drejer sig om browserbaseret greyscreen prototyping, og de gør et overbevisende tilfælde for at prøve det.
En anden her på WDD , denne artikel handler om at sikre, at din prototyping har et punkt. Hvis du kun gør din brugervenlighedstest, når du har gennemført det endelige projekt, så gør du nok det forkert.
Du bliver nødt til at give over nogle af dine personlige oplysninger (eller bare lyve) for at få denne ebook , men hej, de beder ikke om penge! den indeholder mere information om populære prototyper metoder, app-baserede tutorials og bedste praksis fra større virksomheder som google, apple, zurb og meget mere.
Nu er det lavet af folkene bag UXPin, en prototypeprogram, så de kan være lidt forudindtaget om hvilken app du skal bruge. Alligevel har den masser af god information.
Okay, så du har teorien. Det er på tide at få revner på at bygge prototyper. Forudsat at du ikke vil holde fast i papirmodeller eller kode, vil du bruge en app på et eller andet tidspunkt.
Den gode nyhed: Der er mange gode apps at vælge imellem. De dårlige nyheder: Der er mange gode apps at vælge imellem.
Endnu en gang vil det hele komme ned på den måde, du arbejder på. Har du brug for evnen til at demo mobile apps? Har du brug for at synkronisere dine filer med Google Drev, Dropbox eller en anden tjeneste? Hvad med Github integration? Lav-fi, medium eller high-fi? Avanceret scripting?
Apperne anført nedenfor indeholder nogle eller alle disse muligheder. Jeg vil liste de mest relevante funktioner for hver enkelt for at give dig en ide om, hvor man skal kigge.
Det skal bemærkes, at mange af disse primært er kendt som trådrammeringsværktøjer. Det er almindeligt for wireframing-software at integrere de funktioner, der er nødvendige for interaktive prototyper. Din kilometertal med disse apps kan variere.
Det her er det nyeste tilbud på markedet lige nu, og det er parat til at levere en seriøs konkurrence til et noget mættet marked. Det er ikke bare en wire-frame eller prototyping app; det er en design app. Det er ligesom Skitse , eller den nu-døde Fyrværkeri , men det tager et skridt videre ved at give dig mulighed for at lave prototyper ud af alt, hvad du netop har designet.
Det er i øjeblikket kun Mac-kun, og i forhåndsvisningstrinnet ved det, men en Windows-version forfalder inden årets udgang.
Forudgivelsesversionen er gratis, når den endelige version sendes, vil den indgå i Adobes Creative Cloud-abonnement.
Microsoft PowerPoint , Apple Keynote , LibreOffice Impress , og Google Slides kan alle bruges til at lave prototyper. For det meste vil disse prototyper være af den konceptuelle variation. Du kan efterligne en vis mængde interaktivitet ved blot at forbinde dias sammen.
Det kan fungere lige så godt til prototyping af indholdsdrevne websteder, og chancerne er, at du allerede bruger mindst et af disse programmer. Hvis ikke, er Impress og Slides gratis.
invision er en anden af de "store navne", med mere high-fidelity prototyper. Det fremhæver versionsstyring og stoler på sin real-time samarbejde og feedback funktioner. Ligesom Marvel app har den også animation, prototype-indlejring, demo-enheder og mere.
Derudover har de for nylig købt Silver Flows, et værktøj, der integrerer prototypefunktionalitet med Sketch. De har til hensigt at bruge den til at integrere Sketch med deres online-software.
Der er en gratis plan, men du kan kun lave en enkelt prototype. Derefter kan du starte med $ 15USD pr. Måned.
Justinmind synes bevidst gearet til at skabe high-fidelity applikations prototyper. Webstedet nævner også prototypebesvarende hjemmesider. Der er også demo-apper.
Prissætning starter for øjeblikket på $ 19USD pr. Bruger, pr. Måned, hvis du betaler årligt.
Marvel App er en stor app (en af de "store navne" i prototyping) med en gratis plan og moderat prisfastsættelse for alle opgraderinger. Bemærkelsesværdige funktioner omfatter: support til Photoshop og Sketch, synkronisering med Drive og Dropbox, indlejring af prototyper på websider) og funktioner, der gør dine prototyper til animerede præsentationer.
Denne handler om højfidelighedsprototyper.
Axure er lidt underligt med funktioner til både lav-fi og high-fi prototyper. det er endnu mere underligt, fordi det er en desktop app med en engangspris. Det er designet til virksomhedens brugere og store teams, med funktioner til at skrive din egen dokumentation, projektstyring og meget mere.
Standardversionerne kommer ind på $ 289USD pr. Licens.
HotGloo handler om lav-til-medium-troskab wire rammer og prototyper. Det startede som primært en wireframing-app, primært, men funktionaliteten til mere avancerede prototyper er der.
Hvor andre apps fokuserer på prototypeprogrammer, startede HotGloo med webdesignere. Så du kan også gøre det rigtigt.
Planer starter med $ 14USD pr. Måned, og denne plan kan omfatte op til 10 personer, der samarbejder.
Annnnnnd vi er tilbage til high-fidelity prototyping med Proto.io . Det har komplekse interaktioner, animation, eksport, udskrivning, indlejring og enhedsdemonstrationer alt indbygget. Priserne starter ved $ 24USD pr. Måned, men der er en 15-dages gratis prøveversion, hvis du vil give det en hvirvel.
størkne er bragt til os af Zurb, det samme firma, der laver fondets ramme. Det er designet til at håndtere (og få feedback på) alt fra skitser til high-fidelity prototyper og mockups.
I stedet for at fokusere på animation og andre præsentationsværktøjer tilbyder Solidify en overflod af brugertestfunktioner. Du kan køre test personligt eller eksternt, og del resultaterne med dit team.
POP skelner sig fra andre apps ved at hjælpe dig med at lave en hybrid af wire-frame skitser og digitale prototyper. Du starter med at tage billeder af dine skitser med en iPhone, Android-telefon eller Windows-telefon og dreje disse skitser til en interaktiv prototype.
Hvis du gør det meste af dit arbejde på papir, kan det være en god måde at dele resultaterne med. Tjenesten er gratis for to projekter, og derefter planer begynder på $ 10USD per måned.
Flairbuilder er en anden desktop app, selv om den har en online seer til projekter. Det ser ud til at være rettet mod mellemfidelity wireframes og prototyper. Det har funktioner, der giver dig mulighed for at tilføje interaktion, det kan gøre dem i enheden, og det lægger særlig vægt på gitterbaseret design.
Det er prissat til et engangsgebyr på $ 99USD. Det er stejlt, men meget billigere end Axure.
Flinto Der er faktisk to versioner: Der er en Mac-app og en web-baseret Lite-version. Forskellen? Mac-versionen bringer mere komplekse animationer, funktioner og interaktioner til bordet. Det giver dig også mulighed for at importere dine aktiver fra Sketch, som webversionen ikke kan gøre.
Det koster $ 99USD som et engangs køb. Interessant nok indeholder Lite-versionen (som koster 20USD om måneden) en licens til desktop-versionen, hvilket giver dig det bedste fra begge verdener.
UXPin er en prototypeprogram med mellem til høj kvalitet og alle de funktioner, vi har forventet. Ligesom et par af de andre har det også real-time samarbejde, indbygget brugervenlighed testfunktioner og projektledelse.
I modsætning til andre apps sigter UXPin på at være en one-stop design shop. Som i kan du springe over Photoshop, Sketch eller hvad-har-dig, og drej dine ledningsrammer i mockups. Dette er ambitiøst at sige mildt, men hvis det virker som lovet, kan jeg se, at det er nyttigt for mange designere.
Prissætning starter ved $ 19UD pr. Måned, pr. Bruger.