Prototypování, jako koncept, bylo již od doby před Internetem. Obvykle lidé, kteří vyvíjejí nový fyzický výrobek, by nejprve postavili věc a ujistili se, že funguje podle plánu. První verze by možná byla patentována a ukázala se potenciálním investorům. Pokud by měl vynálezce přístup k vlastním výrobním prostředkům (pokud by pracoval v již existující společnosti), měli by jít přímo dopředu a vyřešit chyby, dokud nebudou mít model připravený k výrobě.
Pamatujete na staré demo disky? Víte ty, které přišly s programy s omezenou funkčností, nebo první nebo dvě v hře? Prototypy jsou hodně podobné těm demámům, a to ještě jednodušší.
Stavíte prototyp webové stránky nebo aplikace, abyste se ujistili, že koncept bude fungovat tak, jak je zamýšleno
Jejich účelem není jen to, aby potenciální zákazníci koupili výrobek, aby vám pomohli lépe. Stavíte prototyp webové stránky nebo aplikace, abyste se ujistili, že koncept bude fungovat tak, jak je zamýšleno. Využijete ji také k tomu, abyste ukázali svým klientům nebo potenciálním investorům, jak má fungovat.
V poslední době jsme viděli mnoho aplikací zaměřených na vytváření prototypů pro web a mobilní aplikace. Nyní byla uvolněna Adobe Experience Designer, která kombinuje funkčnost "designové aplikace" specifické pro web a mobilní zařízení s aplikací typu prototyp. Vzhledem k pověsti společnosti Adobe a k jejich podílu na trhu v profesionálním sektoru je důvodem, že mnoho lidí, kteří v minulosti nedělali mnoho prototypů, by nyní mohli podniknout tento krok.
Stejně jako většina ostatních konečných průvodců je to pro začátečníky. Je to pro lidi, kteří začínají pravidelně vytvářet prototypy bez ohledu na předchozí zkušenosti (nebo jejich nedostatek) v designovém průmyslu.
V této příručce jsme se pokoušeli především pokrýt základní principy. Poté jsou odkazy na průvodce s dalšími informacemi a samozřejmě také velký seznam aplikací a nástrojů, s nimiž můžete pracovat.
Nyní a designér, který je na chvíli poblíž, pravděpodobně již pracoval s drátkovými rámci a / nebo navrženými mockupy v editoru obrázků. Nejsou to prototypy?
Ani náhodou. Ne vždy to tak.
Problém s drátovými a statickými mockups je, že jsou ... dobře ... statické. Existuje spousta informací, které prostě nemůžou zprostředkovat o funkčnosti věci. To může vést k mylným představám klientů, a dokonce i vašim vývojářům, o tom, jak má tato věc fungovat. Z tohoto důvodu jsou prototypy obvykle nějakým způsobem interaktivní.
Nejběžnějšími výjimkami jsou koncepční prototypy a výjimečně dobře zdokumentované statické prototypy. To, co dělá rozdíl, není samotná interaktivita, ale přenos informací o zamýšlené funkčnosti produktu.
To znamená, že drátové a mockupy se často používají při vytváření prototypů, takže je nikdo nevzdává.
Kdykoli potřebujete ukázat, jak má něco fungovat. A je to.
Zřejmým příkladem je web nebo mobilní aplikace. Aplikace mají tendenci mít spoustu funkcí, které nemusí být snadno vidět nebo odvozeny od modelu. Avšak i poměrně statické webové stránky založené na obsahu mohou vyžadovat prototyp.
Za prvé, mám klienty podívat se na makety pro jednoduché obchodní stránky a zeptat se "Dobře, takže pokud kliknou na ty věci nahoře," O nás "," Služby "a věci, které je přivedou na jiné Stránky? "nebo" Když kliknete na kontaktní formulář, obdržím e-mail? "
Dokonce i jednoduché ... úkoly jsou často plné nejistoty ... prototypy vám pomohou sjednat některé z odhadů
Dokonce i jednoduché úlohy procházení jsou často nejisté pro některé uživatele a potenciální klienty, proto prototypy mohou pomoci vyřadit některé z odhadů od procesu odhlášení.
Navíc jsou vždy užitečné při testování uživatelů. Koneckonců, pokud budete chtít provést testování uživatelů vůbec, je nejlepší začít s včasným náhledem projektu. Poslední věc, kterou chcete, je, že po velké většině práce je třeba udělat velké změny.
Než začnete prototypovat, budete chtít určit, jaký typ budete chtít použít. V každém projektu můžete vždy používat více než jeden druh; většina návrhářů dělá v určitém okamžiku.
Druh prototypu, který si vyberete, bude muset být správný pro vás, vašeho klienta, projekt a dokonce i konkrétní fázi projektu, ve kterém jste. Tak to může znít složitě, ale opravdu to není tak špatné.
Každý z nich je určen pro použití v různých etapách ve fázi návrhu. Zbytek je podle vašich preferencí a jak dobrý je váš klient při chápání abstraktních vizuálů.
Klienti, kteří nemají zkušenosti s moderními procesy návrhu, mohou očekávat, že uvidí něco, co vypadá lépe "vyleštěné", takže mohou říkat, že je to logo větší, přesuňte ten řádek doleva a jejich stránky nebudou v latině , tak byste mohl dát nějaké anglicky prosím?
Pokud máte s tím potíže, podrobnější prototypy - a spousta kávy - jsou vaše nejlepší sázka. Pokud tomu tak není, můžete použít něco trochu nejasného a zaměřit se na posměšování zamýšlené funkce.
Tito často nevypadají jako hotový výrobek v žádném tvaru či tvaru. S koncepčními prototypy nejsou důležité detaily a uspořádání rozhraní. Jediné , na čem pracujete, jsou interakce a procesy.
Cílem každého prototypu je ukázat, jak funguje něco nebo bude fungovat. V tomto smyslu je to prototyp ve své nejčistší podobě. Je to doslova všechno o této funkci, a forma se ani na ni nevyskytuje.
V této fázi mohou vypadat téměř jako cokoliv. Můžete použít průtokovou tabulku, post-it poznámky, prezentaci PowerPoint, video vysvětlující proces s hrubými ikonami založenými ilustracemi nebo nahrávání sami, které mluvíte do kamery a zblázníte divoce paže. Cokoli, co dostane přesně, to udělá.
Konceptuální prototypy se obvykle používají ve velmi rané fázi každého projektu. Váš projekt nemusí mít ani jméno. Je to jen nápad pro aplikaci nebo webové stránky a budete říkat věci jako: "Jo, myslím, že by to mělo fungovat takhle ..."
Nízkoprofilové prototypy jsou místem, kde začnete zahrnovat věci, jako je rozložení a velikost obrazovky a další hmatatelnější problémy. Obyčejně se rychle a rychleji vyhodí.
Jsou určeny k tomu, aby poskytly co nejrychlejší způsob, jak opakovat vaše nápady, dokud vy a / nebo váš klient nebude spokojen se základy. Takže se nepřipojujte. Většina z nich nebude dlouhá a to je dobrá věc.
Jak již bylo zmíněno dříve, výraz "prototypy s nízkou věrností" je často zaměnitelný s "drátovými rámci". Ve skutečnosti se tato fáze často odehrává na papíře.
Když je to v aplikaci, je vhodné používat jeden, který má základní prototypové funkce, jako je propojení s jinými obrazovkami, anotací atd. Aplikace Wireframing mají tu výhodu, že umožňují snadnější spolupráci prostřednictvím Internetu, ale často jsou o něco pomalejší použití.
Ty se také používají na začátku projektu, ale pravděpodobně máte obchodní model a představu o jménu. Je čas seřadit mezi nesčetnými nápady plovoucími kolem hlavy a opakovat, dokud nebudete mít něco, o čem byste si jistě pracovali.
Někdy prototyp s nízkou věrností prostě nedosáhne dostatečně dobrého bodu a vysoká věrnost je prozatím příliš práce. Možná jste dokonale vylepšili průvodce stylu, nebo ne všechny vaše grafické prostředky byly dosud vyrobeny.
V každém případě je to typ prototypu, který můžete použít od začátku až do poloviny fáze návrhu. Často se vyrábějí s prototypovými aplikacemi, které silně využívají simulovanou interakci. Mohou být také postaveny pomocí HTML a CSS, obvykle pomocí CSS frameworku.
Yup, Bootstrap a Foundation jsou pravděpodobně dva z největších prototypových nástrojů.
Měli byste pro ně použít značkové snímky, pokud je máte, ale uložíte obrázky. Skladové prvky uživatelského rozhraní se obvykle používají k rychlejšímu vytváření simulovaného rozhraní. Mnoho prototypových aplikací přichází s knihovnami těchto prvků, aby vaše práce rychleji.
Tyto typy prototypů jsou skvělé pro doslovnější myslitele, kteří potřebují blízké přiblížení toho, jak bude vypadat a pracovat. Je pro ně snazší ignorovat hlavičku, která je "dosud nedokončena", než nápadný tvar, který nevypadá jako záhlaví webové stránky, jak to znají.
Pro tyto klienty byste mohli chtít rychle předložit své nápady a nikdy je klientovi neukázat. Pak vytvořte středně věrný prototyp, který usnadňuje vidět, kam jedete.
No, jsme tady. A tak je váš projekt. Pro každou obrazovku máte své mockups a vše vypadá skvěle. Je čas ukázat lidem, jak to bude fungovat, v celé své slávě, když ho někdo konečně integruje s kódem zpětného konce.
Prototypy s vysokou věrností se obvykle používají pro získání konečného odpisu od zákazníka. Ale nemůžete je poslat pouze PSD. Tyto věci musí být interaktivní.
To se obvykle provádí jedním ze dvou způsobů. Někteří používají statické HTML a CSS k tomu, aby dokončily vizualizaci dohromady způsobem, který je částečně interaktivní. Ostatní používají aplikace, které importují obrázky nebo dokonce syrové soubory PSD a přidávají pseudo-interaktivní funkce, které napodobují konečnou funkcionalitu aplikace.
V závislosti na aplikaci můžete tyto prototypy dokonce provést i na webu (nebo na mobilním zařízení, pokud pracujete na aplikaci).
Nyní, když jsme prošli hlavními typy prototypů, které můžete udělat, je čas na to, aby byly zakryty nástroje, které se používají při jejich výrobě. Většinu z nich jsem zmínil v předchozí části a jejich základní využití; ale chtěl bych se dostat trochu podrobněji.
Opět platí, že zvolená metoda by měla záviset na tom, co jste spokojeni s vámi a klientem.
Tito jsou často předstíral, že prodat nějakou myšlenku dříve, než bude provedena konkrétní práce. Jsou tedy obvykle zaměřeny na potenciální investory. Mohou být použity také pro klienty; ale často existují efektivnější způsoby komunikace s klientem. Váš kilometrový výkon se může lišit.
Prototypy založené na videu a prezentaci, které se vyrábějí pro prodejní plochy, obvykle vycházejí z obchodního stylu:
Některé z těchto prototypů používají pouze ikony, text a ilustrace. Jiní mají animaci; a ještě jiní používají živou akci, aby získali bod přes. A to je ... dobře. Dokud prodáte svůj nápad, udělal jste to správně.
Zde je úžasný příklad který míchá prototypování videa s prototypováním papíru.
Drátěné rámy lze provádět na papíře nebo v aplikacích. Jsou téměř vždy považovány za prototypy s nízkou věrností, přestože mohou být upgradovány na střední věrnost, pokud jim do nich dáte dostatek času. Zřídka stojí za to úsilí.
Obvykle jsou drátěné rámy navrženy tak, aby byly rychle vytaženy a vyřazovány. Jedná se o jednu z věcí, díky nimž je kresba na papíře tak atraktivní. Aplikace mohou být mnohem přesnější a můžete snadno upravovat existující drátové snímky; ale nic nepřekročí rychlost náčrtu, který by nikdo neměl vidět jen sami ... vůbec.
Nicméně, jak již bylo zmíněno výše, drátové snímky založené na aplikaci mají tu výhodu, že snadněji napodobují funkčnost rozhraní. Klepnutím na papírový drátěný rám se dostanete příjemný zvuk tlukot.
To může být zábavné, ale nemusí to znamenat.
Můžete se rozhodnout, že použijete jak: papír, aby se nakreslily nejzákladnější koncepty, tak i aplikace, kterou je lze vyměnit a snadno sdílet.
Ty se liší od drátových rámů tím, že jsou mnohem víc než výkresy. V tomto typu prototypu se papír používá k vytvoření fyzického, i když stále plochého, modelu rozhraní. Můžete vidět jedno z nich ve výše uvedeném videu.
Prvky rozhraní jsou obvykle vykresleny, vyříznuty, někdy kopírovány, aby se doplňovaly a pak se sestavovaly na jiném papíru. To jim dává výhodu flexibility. Tam, kde byste mohli hodit celý list papíru pomocí drátěného rámu, můžete pouze znovu uspořádat prvky papírového modelu, dokud nebudete spokojeni. Máte prvek, který je špatně veliký, poté, co jste několikrát zopakoval věci? Stačí vyjmout novou verzi.
Mají také pocit, že jsou trochu "reálnější" než dráty. Přestože se nic nestane, klient se může dotknout papírového modelu. Cítí to. Tenhle hmatový pocit někdy může klientovi vysvětlit víc než něco, co byste jim někdy mohli ukázat.
Každý potřebuje fyzický kontakt, aby dosáhl lepšího porozumění jakémukoli objektu. Polovina designu UX je o obnovení pocitu fyzické interakce s digitálním rozhraním.
Ty mají hodně společného s prototypy papíru. Prototypy vyrobené s aplikací, jako je Invision, nebo jedna z mnoha dalších možností (viz níže uvedený seznam), jsou typicky vyrobeny z předem navržených prvků rozhraní a poté spojeny, aby napodobovaly konečný produkt.
Rozdíl je samozřejmě, že se vše děje na obrazovce. Oh, a můžete to udělat s finální grafikou a branding, takže prototyp vypadá přesně jako hotový výrobek. Poté, jak jsem již zmínil, některé aplikace mohou produkt demo v prohlížeči a na mobilních zařízeních.
To přináší hmatový pocit zpět do hry, a chcete to. Pokud můžete svým klientům dát pocit, a líbí se vám, v podstatě jste získali konečné schválení.
Samozřejmě, pokud je interakce, co chcete, pak je prototypy rozhraní s kódem vytvořit dobrý způsob, jak ho získat. Nyní můžete zvolit prototypy založené na kódu z jednoho z několika důvodů:
Prototypování v prohlížeči může být trochu pomalejší, zvláště pokud se stále provádějí rozsáhlé revize. Nedoporučoval bych to v raných fázích projektu, takže je to nejlepší pro střední až vysoké věrnostní prototypy.
Přesto je to jeden z nejlepších způsobů, jak předvést téměř dokončený projekt, pokud již chcete pracovat s HTML a CSS.
Prototypování s rámci
Je třeba poznamenat, že používání rámce pro vytváření prototypů může výrazně zrychlit vytváření prototypů založených na kódování. Jako bonus, pokud používáte rámec, který je určen k použití pro konečný produkt, je k dispozici méně kódování.
Jako boční poznámku, někteří lidé postavili drag 'n' drop editorů webových stránek na základě více populárních rámců, jako je Bootstrap a Nadace . S využitím těchto možností bylo možné vytvořit vše od prototypů s nízkou věrností až po konečný produkt s kódem.
Nicméně, někteří lidé je používají pouze k vytváření prototypů rychle, a pak použít vlastní kód pro konečný projekt. Funguje to jakýmkoli způsobem.
Nyní, když jsme zakryli všechny základní informace, je čas se skutečně dostat do detailů. Stejně jako u téměř všeho jiného v designu av životě neexistuje žádný správný způsob, jak postavit prototyp. Existuje pouze způsob, který vám pomůže. To znamená, že úspěšné procesy návrhu mají tendenci mít několik společných věcí.
Zde je několik různých průvodců k prototypům, které se zaměřují na různé metody a věrnosti, jen abyste mohli začít. Vezměte z nich to, co pro vás funguje, ignorujte, co ne.
(Nebudeme zahrnovat návody specifické pro aplikaci, protože je prostě příliš mnoho.)
Tato příručka z časopisu Smashing Magazine se zaměřuje na metodiku rychlého vytváření prototypů a často iterujících.
Toto je a více osobní článek Nick Pettit na blogu Treehouse, který popisuje vlastní přístup k prototypování.
Tady je a třetí článek na rychlém prototypování. Zdá se, že je populární. Tenhle je právě tady na webu Webdesigner Depot a načrtává několik tipů a úskalí, které jsou součástí tohoto procesu.
Další článek časopisu Smashing Magazine , tohle jde do detailů o prototypování s nízkou věrností.
V této hloubce a upřímně řečeno fascinující článek agentura Newfangled popisuje svůj proces v hloubce. Otočí se kolem prototypů šedé obrazovky založených na prohlížeči a jsou přesvědčivě přesvědčeni, že to zkouší.
Další na WDD , tento článek je o zajištění toho, aby vaše prototypy měly nějaký význam. Pokud provádíte testování použitelnosti pouze po dokončení finálního projektu, pravděpodobně to uděláte špatně.
Budete muset předat některé z vašich osobních informací (nebo prostě klamat), abyste se dostali tento ebook , ale hej, nepožadují peníze! obsahuje více informací o populárních metodách prototypování, výukových programech založených na aplikacích a osvědčených postupech od významných společností jako Google, Apple, Zurb a další.
Nyní to dělají lidé za UXPin, prototypovou aplikaci, takže mohou být poněkud zaujatá, o kterou aplikaci byste měli používat. Přesto má spoustu dobrých informací.
Dobře, takže máte teorii. Je čas, aby se na prototypů budovali praskliny. Za předpokladu, že se nebudete držet papírových modelů nebo kódů, budete v určitém okamžiku používat aplikaci.
Dobrá zpráva: existuje spousta skvělých aplikací, ze kterých si můžete vybrat. Špatná zpráva: existuje spousta skvělých aplikací z čeho vybírat.
Opět to všechno přijde na způsob, jakým pracujete. Potřebujete možnost demo mobilních aplikací? Potřebujete synchronizovat soubory s Disku Google, Dropbox nebo jinou službou? A co integrace Github? Low-fi, střední nebo high-fi? Pokročilé skriptování?
Aplikace uvedené níže budou obsahovat některé nebo všechny tyto možnosti. Seznamuji nejdůležitější funkce pro každou z nich, abych vám představil, kde hledat.
Je třeba poznamenat, že mnohé z nich jsou primárně známé jako nástroje pro vytváření drátu. Je běžné, aby software pro vytváření drátů integroval funkce potřebné pro interaktivní prototypy. Váš kilometr s těmito aplikacemi se může lišit.
Tento je nejnovější nabídka na trhu právě teď a je připravena poskytnout nějakou vážnou konkurenci na poněkud nasýteném trhu. Není to jen aplikace pro vytváření drátů nebo prototypů; je to designová aplikace. Je to jako Skica , nebo nyní mrtvý Ohňostroj , ale to vše dělá krok o krok dál tím, že vám umožní vyrobit prototypy ze všeho, co jste právě navrhli.
V současné době se jedná pouze o Mac a ve fázi náhledu, ale verze Windows je splatná před koncem roku.
Verze před vydáním je bezplatná, jakmile bude konečná verze dodána, bude součástí plánu předplatného Adobe Creative Cloud.
Microsoft PowerPoint , Apple Keynote , LibreOffice Impress , a Prezentace Google mohou být všechny použity pro výrobu prototypů. Většinou by tyto prototypy měly koncepční rozmanitost. Můžete napodobit určitou interaktivitu, a to tím, že propojíte svazky dohromady.
Mohlo by to fungovat stejně dobře jako pro prototypy stránek s obsahem, a je pravděpodobné, že používáte alespoň jeden z těchto programů. Pokud tomu tak není, funkce Impress a Slides jsou volné.
Invision je další z "velkých jmen", s více prototypy s vysokou věrností. Zdůrazňuje řízení verzí a je hrdá na svou spolupráci a zpětnou vazbu v reálném čase. Stejně jako app Marvel má také animaci, zabudování do prototypu, demo v zařízeních a další.
Kromě toho právě koupili Silver Flows, nástroj, který integruje prototypovou funkci s náčrtem Sketch. Zamýšlejí jej použít k integraci náčrtu se svým on-line softwarem.
Existuje bezplatný plán, ale můžete vytvořit jediný prototyp. Poté můžete začít za $ 15USD za měsíc.
Justinmind se zdá záměrně zaměřena na vytváření prototypů aplikace s vysokou věrností. Na stránkách se rovněž uvádí vzhledově reagující webové stránky. K dispozici jsou také ukázky v aplikaci.
Ceny začínají v současné době od 19 USD za uživatele za měsíc, pokud platíte každoročně.
Marvel App je obrovská aplikace (jedna z "velkých jmen" v prototypování) s bezplatným plánem a mírným stanovením cen pro všechny upgrady. Pozoruhodné funkce zahrnují podporu pro Photoshop a Sketch, synchronizaci s jednotkami Drive a Dropbox, vkládání prototypů do webových stránek) a funkce, které mění vaše prototypy na animované prezentace.
Tohle je jistě o prototypech s vysokou věrností.
Axure je trochu zvláštností s vlastnostmi pro prototypy s nízkým a vysokým výkonem. je to ještě divnější, protože je to desktopová aplikace s jednorázovou cenou. Je určen pro podnikové uživatele a velké týmy s funkcemi pro tvorbu vlastní dokumentace, správu projektů a další.
Standardní vydání je dodáváno za 289 USD za licenci.
HotGloo je všechno o nízkých až středně věrných drátech a prototypech. Začalo to především proto, že se jednalo především o aplikaci pro drátování, ale především pro pokročilejší prototypy.
Tam, kde se jiné aplikace zaměřují na prototypové aplikace, HotGloo začal s webovými designéry. Takže můžete udělat, opravdu.
Plány začínají na $ 14USD za měsíc a tento plán může zahrnovat až 10 spolupracovníků.
Annnnnd jsme zpátky k prototypům s vysokou věrností Proto.io . Obsahuje složité interakce, animace, export, tisk, vkládání a ukázky zařízení, které jsou vestavěné. Ceny začínají na $ 24USD za měsíc, ale je to 15denní bezplatná zkušební verze, pokud chcete dát víru.
Ztuhnout je nám přinesena Zurb, stejná společnost, která vytváří rámec nadace. Je navržen tak, aby zpracoval (a získal zpětnou vazbu) vše od skic až po vysoce věrné prototypy a mockups.
Místo toho, aby se soustředilo na animaci a jiné prezentační nástroje, Solidify nabízí mnoho funkcí pro testování uživatelů. Testy můžete provádět osobně nebo na dálku a výsledky sdílet se svým týmem.
POP liší se od ostatních aplikací tím, že vám pomůže vytvářet hybridní schémata kabelových rámů a digitálních prototypů. Začnete fotografováním vašich náčrtků pomocí iPhone, telefonu Android nebo telefonem Windows a otočením těchto náčrtů do interaktivního prototypu.
Pokud děláte většinu své práce na papíře, může to být skvělý způsob sdílení výsledků. Služba je k dispozici zdarma pro dva projekty a plány začínají na $ 10USD za měsíc.
Flairbuilder je další aplikace pro stolní počítače, i když má prohlížeč online pro projekty. Zdá se, že je zaměřena na středně věrné dráty a prototypy. Má funkce, které vám umožňují přidat interakci, můžete provést demo v zařízení a kladou zvláštní důraz na návrh na základě sítě.
Je to cena za jednorázový poplatek $ 99USD. To je strmé, jisté, ale mnohem levnější než Axure.
Flinto ve skutečnosti má dvě verze: existuje aplikace Mac a webová verze Lite. Rozdíl? Verze Mac přináší do tabulky složitější animace, funkce a interakce. Umožňuje také importovat vaše prostředky ze skic, které webová verze nemůže udělat.
To stojí $ 99USD jako jednorázový nákup. Zajímavé je, že verze Lite (která stojí 20 USD měsíčně) obsahuje licenci pro verzi pro stolní počítače, která vám dává to nejlepší z obou světů.
UXPin je prototypová aplikace středně vysoká věrnost se všemi funkcemi, které jsme očekávali. Stejně jako některé z ostatních má také spolupráci v reálném čase, zabudované funkce testování použitelnosti a řízení projektů.
Na rozdíl od jiných aplikací chce UXPin být designem jednoho místa. Stejně jako v aplikaci Photoshop, Sketch nebo what-you-you můžete vynechat a přeměnit drátěné rámy na mockups. To je nejméně ambiciózní, ale pokud to funguje tak, jak jsem slíbil, vidím, že je užitečné pro mnoho návrhářů.
Cena začíná na 19 USD za měsíc na uživatele.