Programování

Sedm nejlepších nástrojů pro vytváření drátů a prototypování pro tvůrce aplikací

V poslední době jsem hodně diskutoval o UI a UX. Nikdo si na to nestěžoval, takže předpokládám, že se dostáváme do bodu, kdy všichni, kdo se zabývají vývojem aplikací, uznávají důležitost UI a UX.

Skvělý nápad na aplikaci je tak snadno zničen špatně promyšleným rozhraním a zkušenostmi. A díky mnoha nástrojům, které jsou nyní k dispozici pro rychlé vytváření drátů a vytváření prototypů, by neměl existovat žádný důvod nevykonat skvělý zážitek.

Ačkoli se tyto výrazy často používají společně, existuje jasný rozdíl mezi drátovým modelem a prototypem.

Drátový model je kosterní rozložení struktury vaší aplikace s holými kostmi. Obvykle se to děje bez jakékoli barvy - jednoduché černé a bílé - a zatímco drátový model ukazuje, kam bude text, obrázky a další prvky návrhu směřovat, nezahrnuje skutečné obrázky, text atd. Každý z prvků drátového modelu je však zobrazeno ve skutečném měřítku. Důvodem je to, že drátové modely jsou určeny k zaměření vaší pozornosti na strukturu, nikoli na skutečný design. Podobně jako plány pro dům nebo budovu: získáte jasnou představu o struktuře a umístění všeho, aniž byste byli rozptylováni designem.

Prototypy spadají mezi drátové modely a plně funkční aplikaci. Nejdůležitější částí prototypu je použití animace, která vám umožní zkoumat, jak bude vaše aplikace reagovat na interakci uživatele a přechody stránky nebo obrazovky. Prototypy mohou také zahrnovat skutečné obrázky, sady ikon a text, ale je to určeno účelem prototypu. Pokud testujete pouze interakce a tok obrazovky, můžete vytvořit prototyp, který obsahuje pouze animace a možná trochu barvy. Pokud se snažíte ověřit svůj nápad nebo oslovit potenciální investory, chcete, aby byl váš prototyp vyleštěnější pomocí správných obrázků, textu atd.

Přestože nástroje, které jsem do tohoto přehledu zahrnul, usnadňují vytváření prototypů, včetně dalších prvků nad a nad animací a splash barev, znamená to, že na provedení změn prototypu potřebujete více času.

1. Balsamiq

Pokud vás zajímá pouze sestavení drátového modelu vaší aplikace, pak je pro vás nástrojem Balsamiq. K dispozici jako desktopová i webová aplikace, Balsamiq existuje od roku 2008.

Drátové modely mají vyžadovat jen velmi malé úsilí a čas, proto je Balsamiq navržen tak, aby vám pomohl rychle vytvořit drátové modely. Jednoduše přidejte základní prvky, které potřebujete, a poté podle potřeby změňte jejich velikost, umístění a přizpůsobení. Drátové modely, které vytvoříte pomocí Balsamiq, budou vypadat trochu drsně, ale to je záměrné. Kreativní tým za nástrojem věří, že drátový model, který vypadá spíše jako skica, podporuje brainstorming. Což je především velký důvod pro wireframing.

Jednoduché ovládání verzí vám pomůže sledovat, kde jste začali a kde jste nyní. A právě proto, že se jedná o drátový model, neznamená to, že nemůžete získat vstup od potenciálních uživatelů / klientů. Pomocí Balsamiqu nemůžete vytvořit plně interaktivní prototyp, ale můžete propojit obrazovky / stránky, které vytvoříte, a vygenerovat tak jednoduchý proklikový prototyp. Žádné animace nebo interakce: účelem je pouze demonstrovat tok.

A pokud se vám zdá Balsamiq trochu omezený, můžete vždy přidat jakékoli rozšíření, šablony a sady ikon vytvořené komunitou.

Balsamiq je k dispozici jako aplikace pro stolní počítače s cenou 89 USD za uživatele, webová aplikace od 12 USD za měsíc nebo aplikace propojená s Diskem Google za 5 USD za uživatele / měsíc. Nejprve však můžete začít s bezplatnou zkušební verzí, abyste zjistili, zda je pro vás tím správným nástrojem.

2. WireframePro

Ačkoli licence MockFlow zahrnuje přístup k osmi různým aplikacím, je to WireframePro, o který byste se při zahájení vývoje své vlastní aplikace zajímali. Opět se jedná o webovou aplikaci s rozhraním drag and drop pro snadné vytváření drátového modelu.

Dodává se se všemi standardními prvky uživatelského rozhraní a s řadou dalších komponent, které možná budete potřebovat, včetně výběru pro chytré hodinky Apple a Android. Aplikace vám také umožňuje přístup do Mock Store, který nabízí velký výběr šablon třetích stran, které můžete použít buď pro inspiraci, nebo jako rychlý výchozí bod pro svůj vlastní drátový model.

Stejně jako u všech zde uvedených nástrojů je i WireframePro navržen pro jednotlivce a týmy a nástroje pro spolupráci jsou zabudovány přímo do systému. Pěkným začleněním je schopnost automaticky generovat specifikace pro každý prvek, takže pokud sami neděláte návrhovou práci, váš návrhář bude mít snadný přístup ke všem detailům souvisejícím s designem.

A konečně, když sdílíte jakýkoli ze svých projektů, můžete přidělit práva a omezit některé lidi tak, aby mohli projekt pouze prohlížet a komentovat, zatímco ostatní by jej také mohli upravovat.

WireframePro nemá žádné bezplatné plány, ale můžete si je vyzkoušet po dobu 30 dnů, než přejdete na placený plán. Licence začínají na 19 USD / měsíc pro jednoho uživatele a 39 $ / měsíc až pro tři členy týmu.

3. UXPin

Jak název napovídá, tým za UXPin zdůrazňuje UX. Na tom není nic špatného, ​​drátové rámování a prototypování vám má pomoci vylepšit UX vaší aplikace. S UXPin se můžete postarat jak o wireframing, tak o prototypování, takže není třeba měnit nástroje.

Jak byste očekávali, UXPin podporuje zdrojové soubory Sketch a soubory Photoshopu. Má ale také vestavěný editor, který podporuje fragmenty kódu CSS, což vám umožňuje přizpůsobit jakýkoli prvek použitý ve vašem drátovém modelu a prototypu. A díky UXPin je velmi snadné sledovat každou iteraci každého souboru, který přidáte nebo vytvoříte, takže nebudete muset klikat na desítky souborů a hledat původní verzi.

Vytváření základních drátových modelů a prototypů je rychlé a snadné a jsou k dispozici všechny standardní interakce prototypů. Samozřejmě můžete v případě potřeby vytvářet vlastní interakce. Jakmile bude váš prototyp připraven, můžete jej poslat komukoli k testování, přičemž všechny interakce budou zachyceny na video spolu se zvukem komentářů každého testera.

UXPin podporuje wireframing a prototypování webů, mobilních aplikací a webových aplikací a přichází s přednastavenými 14 zarážkami, které vám umožní snadno zobrazit váš design na více zařízeních. Ceny začínají na 19 $ / měsíc pro základní tarif a 29 $ / měsíc pro odemčení pokročilých funkcí.

4. Prott

Přestože je Prott označen jako prototypový nástroj, obsahuje také funkci drátového rámování. Pokud je váš nápad na aplikaci o něco více než zhruba nakreslené náčrtky, můžete své náčrtky vyfotografovat a importovat přímo do aplikace. Tyto náčrtky lze poté animovat nebo použít jako základ pro váš drátový model. Přetažením přednastavených tvarů a prvků uživatelského rozhraní přímo do náčrtu můžete okamžitě přejít od vratkých čar až po profesionální lo-fi drátový model.

Prott obsahuje velké množství sad uživatelského rozhraní pro různá zařízení, od iOS po Android a web. Můžete si ale také vytvořit vlastní knihovnu prvků rozhraní.

Místo toho, abyste svůj prototyp sdíleli s dalšími lidmi, můžete nyní dokonce zahrnout podrobnou mapu, která jasně ukazuje strukturu vaší aplikace. Kdokoli, s kým sdílíte svůj prototyp, může komentovat přímo na každé obrazovce, takže je pro vás snazší pochopit, k čemu se jeho komentáře vztahují.

Prott nabízí plně vybavenou 30denní zkušební verzi s bezplatným plánem, který nemá žádná omezení kromě počtu projektů, které můžete vytvořit. Pokud potřebujete vytvořit více projektů, můžete přejít na plán Starter nebo Pro v ceně od 19 USD / měsíc.

5. InVision

InVision je výhradně pro prototypování, ale s podporou nejrůznějších použití. S InVision můžete rychle vytvářet interaktivní prototypy svého webu, webové aplikace nebo mobilní aplikace a poté prototyp zobrazit na skutečných zařízeních. A to zahrnuje tablety a nositelná zařízení, nejen mobilní telefony.

Proces je tak jednoduchý jako:

  • Přidejte své návrhové prvky (InVision podporuje zdrojové soubory GIF, PNG, JPEG, PSD a Sketch) pomocí přetažení nebo synchronizací s Dropboxem.
  • Nakreslete aktivní body na každé aktivum a nastavte je tak, aby odkazovaly na další aktiva, externí adresy URL nebo kotvy.
  • Přidejte interaktivitu ve formě gest (klepnutí nebo přejetí prstem), pevných oblastí (lišta nabídek atd.) A přechodů.

Po dokončení si můžete projekt prohlédnout na svém telefonu, tabletu nebo počítači, nebo dokonce SMS nebo e-mailem odkaz na přátele a kolegy. Díky tomu můžete do procesu návrhu snadněji zapojit další lidi, s každým, komu pošlete odkaz, abyste mohli každý návrh komentovat.

Ceny za InVision začínají bez nákladů na jeden prototyp, 25 $ / měsíc pro neomezené prototypy a 99 $ / měsíc pro týmy do 5 členů.

6. Zázrak

Stejně jako InVision je i aplikace Marvel pro prototypování. Zahrnuje standardní podporu pro soubory Sketch a Photoshop, nebo můžete použít jejich integrovaný nástroj pro návrh plátna. Marvel má také aplikaci pro iOS a Android, která vám umožní fotografovat vaše vlastní čmáranice a vzory a nahrávat je přímo do vaší knihovny Marvel.

Vytváření hotspotů na vašich designech je snadné. K dispozici jsou desítky interakcí a přechodů obrazovky, které váš prototyp uvedou do života. A svůj prototyp můžete otestovat na mnoha obrazovkách, včetně Apple Watch.

Žádný prototypovací nástroj samozřejmě nestojí za diskusi, pokud neobsahuje spolupráci. A s Marvelem můžete anotovat svůj prototyp a zvýraznit konkrétní oblasti, které mají lidé komentovat. Komentáře může dělat kdokoli, komu pošlete svůj prototyp, aniž byste si museli nejprve vytvořit účet Marvel.

Cena na Marvel začíná na 0 $ / měsíc pro jednoho uživatele a až pro dva projekty, ale s omezenými funkcemi. Za 14 $ / měsíc získáte neomezené projekty a všechny funkce se samostatnou cenou pro týmy a podnikové klienty.

7. Proto.io

Proto.io je populární nástroj pro vytváření prototypů, který v roce 2016 obdržel rozsáhlou aktualizaci. Proto.io obsahuje všechny funkce vyžadované nástrojem pro vytváření prototypů, ale aktualizace přinesla také spoustu zjednodušených funkcí.

Spolu s přepracovaným uživatelským rozhraním, díky kterému jsou všechny základní funkce přístupnější, proto Proto.io také klade velký důraz na animaci. Pohyb je důležitou funkcí mobilních aplikací a funkce State Transitions společnosti Proto.io usnadňuje komukoli vytvářet a přizpůsobovat animace ve svém prototypu.

Proto.io také představila knihovnu návrhových vzorů interakcí, díky níž je přidávání interakcí snadné. Mezi tyto vzory patří interakce, jako jsou zasouvací nabídky, a obnovení obnovením. Jediné, co musíte udělat, je přidat do projektu interakci a přizpůsobit ji.

Nová verze Proto.io rozšiřuje vaši schopnost nechat uživatele testovat a komentovat váš prototyp. Integruje se s platformami pro testování uživatelů, jako jsou Validately a UserTesting, což vám umožní přístup k většímu fondu skutečných uživatelů. A díky integraci Lookback získáte neomezené záznamy - zatím pouze v systému iOS - ukazující, jak uživatelé interagují a procházejí vaší aplikací.

Proto.io nabízí plně vybavenou 15denní zkušební verzi, po které můžete přejít na velmi omezený bezplatný účet. Placené plány začínají na 29 $ / měsíc, v závislosti na velikosti vašeho týmu.

Závěr

Když s vývojem aplikací teprve začínáte, možná budete chtít vytvořit drátové modely i prototypy nápadu vaší aplikace. Ale jakmile se s vývojovým procesem stanete pohodlnější, můžete zvážit provedení jednoho nebo druhého.

Vzhledem k tomu, že drátové rámy mají tak základní design, přinutí vás soustředit se na správný tok a uživatelský komfort. Prototypy vám mohou pomoci vylepšit tok i UX, zvýraznit jakékoli nedostatky v designu a co je důležitější, vypadat lépe než drátové modely, pokud je potřebujete prezentovat klientům nebo investorům. A i když by mohlo být lákavé spokojit se s nástrojem, který kombinuje jak drátové rámce, tak prototypování, rozhodujícím faktorem by vždy mělo být to, který nástroj obsahuje všechny funkce, které skutečně potřebujete, a jeho používání je nejpohodlnější. A protože každý z zde uvedených nástrojů nabízí bezplatný plán nebo zkušební verzi, proč ne strávit den jejich testováním, než se rozhodnete?

$config[zx-auto] not found$config[zx-overlay] not found