it-swarm-eu.dev

Jaké nástroje (nejlépe dostupné) by lidé doporučili pro vytvoření drátového modelu webu?

Jaké nástroje (nejlépe dostupné) by lidé doporučili pro vytvoření drátového modelu webu? Jaké nástroje jste použili a našli jste je lépe než pero a papír?

33
James Page

V těchto dnech používáme Balsamiq Mockups nábožně. Je to takový rychlý nástroj pro rychlé vytváření hrubých obrysů a dokonce i jednoduchých interaktivních průchodů. Je to velmi levné a má bezplatnou zkušební verzi, ale také rozdává bezplatné právo na komunitní projekty. Vyzkoušejte verzi pro stolní počítače, používáme ji již několik měsíců a stalo se součástí našeho procesu specifikace a prototypování.

27
DannyT

Papír je v dnešní době relativně levný.

Také dávám přednost tužkám, protože jejich gumové tlačítko pro vrácení zpět.

27
KevBurnsJr

Zjistil jsem, že pomocí jednoduchého pera a papíru rychle nakreslím několik drátových modelů a poté přejdu k prototypu html/css. Většinou proto, že jsem dobrý integrátor, je prototypování na začátku jednodušší než použití komplexního softwaru pro drátový model.

Jinak bych doporučil Omnigraffle, ne příliš drahé a se správnými šablonami, to funguje skvěle. Linky . Je to užitečné pro wireframing i sitemapping.

12

Musím zde souhlasit s některými dalšími plakáty. Papír a tužka (nebo pero nebo značka) je nejlepší a nejlevnější způsob, jak začít s prototypováním. Není důvod používat něco jako Photoshop, protože neděláte plně rozvinutý design. Různé softwarové balíčky určené speciálně pro makety a prototypy jsou všechny pěkné, ale mohou se stát velmi drahými a také to opravdu nepřispívá k tomu, co pro vás může papír udělat. Řekl bych, že jsou zřídka ještě efektivnější z časového hlediska.

Pokud chcete jít s prototypovou aplikací, myslím, že nejlepší volbou je Axure. Nejsou příliš drahé a mají velké množství funkcí. A můžete si vyzkoušet software zdarma po dobu 30 dní (a myslím, že to je během této doby plně funkční).

Doporučuji proti používání HTML/CSS pro vaše prototypy, pokud nevíte, že lidé, kteří vytvářejí prototypy, úplně porozumí rozdílu mezi prototypem HTML a skutečným fungujícím webem. Obvykle se stane jedna ze dvou věcí:

  1. Zaměřují se na estetiku namísto funkčnosti, protože „je to již web, takže by to mělo vypadat dobře“.
  2. Nerozumí tomu, proč to nemůžete dokončit pár dní poté, co jim ukážete prototyp, protože „web již funguje, musíme to udělat hezčí“. Trvá šarže práce, aby se netechnickým lidem porozumělo rozdílu mezi prototypem HTML a skutečným fungujícím webem.

Pokud jde o PowerPoint - podle mého názoru je to jedna z nejvíce zneužívaných a zneužívaných aplikací v okolí. Nemohu spočítat, kolikrát jsem obdržel prezentaci v PowerPointu jako přílohu, jako jediný prostředek, jak něco oznámit osobou HR. Použití pro prototypování je na stejných liniích. Nebyla navržena pro tento účel a ve skutečnosti nemá nástroje, které by umožňovaly efektivní prototypování.

12
Charles Boyung

Většinou používám notebook k načrtnutí super drsných nápadů, pak používám Omnigraffle se šablonami Konigi.com, abych provedl skutečné simulace.

Pokud provádím testování WoZ, dělám to všechno v papírové podobě s vytištěnými prvky prohlížeče.

9
BJ Clark

Na konferenci UPA před půl rokem jsem byl na zasedání, ve kterém lidé diskutovali o nástrojích: HTML vs Axure vs Balsamiq vs FlairBuilder pro prototypování.

Axure a Balsamiq dostali několik hlasů. FlairBuilder získává můj hlas.

Byl jsem live-twittering a někdo mimo zasedání navrhl, abychom si stáhli a vyzkoušeli demo FlairBuilder. Udělali jsme to za běhu a mohli jsme jej okamžitě použít bez předchozí zkušenosti. FlairBuilder je ve stejné cenové relaci jako Balsamiq a každá z nich měla některé funkce, které ostatní ne. Například FlairBuilder má živé multimédia, a to i z YouTube, což bylo pro některé účastníky důležité, nikoli pro jiné.

Během diskuse jeden účastník uvedl: „Visio je noční můra“, a přestože si myslím, že je to silné prohlášení, musím ho používat v práci a zjistím, že „bojuji“ s Visio (tj. Ztrácím čas).

Microsoft na této konferenci předvedl nový nástroj pro návrh/skicování, který vyrábí prototypy s nízkou věrností, ale které měly vyšší cenu. Zapomněl jsem na název produktu [editovat: Je to SketchFlow ], ale demo bylo působivé, „jak byste očekávali, že bude nějaké demo hands-off,“ dodal cynicky. Tento produkt nebyl diskutován v diskusní relaci, kterou jsem popsal výše, [upravit: protože to ještě nebylo vydáno].

Doporučuji vyzkoušet FlairBuilder , protože je snadné jej používat a učit se, zejména pokud začnete změnou ukázkového projektu. Budete muset přehlédnout časté „Kupte mi hned!“ zpráva ve zkušební verzi zdarma.

Nejsem spojen ani zaplacen žádným výše uvedeným produktem

8
JeromeR

Mluvil jsem s:

FlairBuilder Balsmiq Axure SketchFlow PowerPoint Fireworks

Osobně začínám na bílou tabuli. Myslím, že FlairBuilder a Balsmiq jsou velmi snadno použitelné - snad nejjednodušší.

Myslím, že Axure je opravdu mocný, ale ne tak přátelský.

Myslím, že PowerPoint funguje, když se snažíte udělat něco opravdu rychle na náhodném PC.

Můj osobní favorit je SketchFlow, protože způsob, jakým propojují stránky dohromady, a jeho schopnost vytvářet chování a morph do plně funkčního fungujícího proto-typu (opravdu vysoká věrnost), který může sloužit jako počáteční kód aplikace Silverlight nebo úžasný dokument pro vývojový tým na jiné technologii.

Také se mi líbí snímání a design animací a budování chování/kontroly ve srovnání s ostatními programy, které skutečně používají pouze předem navržené nebo málo věrné vlastní ovládací prvky.

8
Chris Kluis

Fireworks je úžasný nástroj, který je často přehlížen - je to opravdu vyzrálé, zejména pro spoustu dokumentace a stavů.

Největší výhodou Fireworks oproti jiným řešením je to, že jej lze použít pro Webapps nejen pro webovou stránku. Existuje obrovský rozdíl v úrovni složitosti, kterou je třeba mezi nimi propojit; to se často nebere v úvahu u MOST drátových nástrojů.

7
Mike Cuesta

Použil jsem: Visio, Illustrator, Axure RP Pro, OmniGraffle, Balsamiq Mockups vážně, a vyzkoušel jsem všechny webové aplikace. Také jsem provedl prototypování HTML a prototypování papíru.

Nejúčinnějším nástrojem pro práci je stále skicování na papíře, rafinace v OmniGraffle nebo přechod na makety v HTML. To, co se rozhodnu doručit, závisí na tom, pro koho je návrhový dokument určen a jaký je jeho účel. Většinou volím OmniGraffle pro rychlost, nebo dodávám skici a HTML. Zřeknutí se odpovědnosti je, že jsem v interním návrháři uživatelského rozhraní.

7
jibbajabba

Mám sklon chytit pero Stabilo Poit 88, podle toho, která barva vezme mé fantazie a vytrhne nápady na drátěný skici pad mého vlastního designu (6 x nahoru na A4 na šířku).

Také jsem zjistil, že když oříznete blok čtverečních poznámek Post-It, zkrátíte na šířku 2/3, funguje dobře - nutí vás, abyste se nezachytili do detailů, ale soustředili se na celkovou stránku.

Pak jdu přes určité oblasti s jinou barvou, abych vytvořil bod zájmu/akce. Poté načrtnu více detailů ve větším měřítku (2 x na šířku A4).

Jakmile jsem spokojený s vedením a koncepty, přejdu na OmniGraffle pomocí osobní šablony a různých šablon (zkuste Konigi.com & graffletopia.com). Pokud mě v této fázi něco zakopne, je to zpět k peru a papíru.

Nakonec uložím svůj Omni dokument jako PDF obsahující odkazy s možností kliknutí).

7
DereckJohnson

Můžete zkusit nový nástroj Blend SketchFlow od společnosti Microsoft. Je to neuvěřitelně silné, ale může být trochu obtížné se k němu dostat (zkuste bokem a plátek citronu).

Může generovat prototypy, které lze prohlížet na webu (pomocí Silverlight) nebo stolní aplikace Windows pomocí WPF s kompletním navigačním systémem, a věřím, že dokáže sledovat uživatele. To může také zaznamenávat komentáře uživatelů, zatímco oni běží přes to ...

6
Kieron

Osobně používám pero a papír (obzvláště se mi líbí konigiho drátěný grafický papír ), poté je vykreslen do aplikace Visio, se šablonami drátového modelu Lombardi a drátěnými šablonami Nicka Fink (oba jsou zdarma). Takže na rozdíl od nákladů na MS Visio mě to dobře sluší.

V minulosti jsem také používal:

  • PowerPoint k vytvoření „klikatelných“ drátových modelů, ale nikdy v hněvu.
  • Axure k vytvoření rychlých prototypů, ale verze, kterou jsem použil, nedělala úlohu zhroucení dynamického panelu, když byly stavy různé výšky (může být lepší) Nyní)

Matt

5
Matt Goddard

Jdu o používání tužky a papíru (vlastně ořezávátko a papír). Obecný pohled na věci získám poté, co se rozhodnu, které prvky jsou nejdůležitější, a pak přímo do HTML.

Photoshop a Balsamiq a Omnigraffle jsem už dříve používal, ale vždycky jsem měl pocit, že ztrácím čas, protože bez ohledu na to, jak vypadají hezky, musím začít znovu, až se dostanu k označení.

Cítil jsem se mnohem lépe při zmačkání papíru, na kterém jsem pracoval po dobu 10 minut, než jsem se cítil při mazání souboru Omnigraffle, na kterém jsem pracoval několik hodin.

5
kevinholesh

Už nějakou dobu byl uživatel PowerPoint , ale už ho unavily jeho omezené funkce a skutečnost, že nejsou interaktivní.

I když to není nejlevnější možnost, musím říci, že pidoco se zdá být jedním z nejlepších řešení drátových nástrojů pro moje potřeby, protože jsou založeny na prohlížeči a nechte mě exportovat do různých formátů a rychle získám kontrolu mé práce. Ano, funkce kontroly jsou opravdu skvělé.

Určitě existuje několik dobrých maketa nástrojů, ale většinou jim chybí přenositelnost .. ano, pidoco je pro mě zatím řešením!

5
Valentino

Používáme Adobe InDesign. Může to vypadat trochu divně, ale existují funkce, které se mi líbí:

  • má rozhraní „Adobe“. Pokud jste pracovali s Photoshopem nebo jinými produkty Adobe, bylo by snadné naučit se používat InDesign
  • může exportovat vaše drátové snímky jako soubory PDF, na které lze kliknout
  • má silné schopnosti pracovat s typografií, tabulkami, styly, mřížkami atd
  • je snadné vytvořit nejen jednoduchý drátový model, ale v případě potřeby i komplexní vizuální design
5
Kostya

Tužka pro FireFox je zdarma flugin a může běžet také jako samostatný nástroj.

Další je něco jako Open Office Draw (také zdarma).

Pero a papír jsou také dobré.

Můžete také vyzkoušet něco jako FlairBuilder, což je aplikace AIR.

4
Jason Grant

Pomocí Photoshopu upravím .psd v mřížce 960 ( http://960.gs/ ), abych vytvořil drátěné snímky.

4
Nitish

Jsem docela šťastný, když jsem začal s náčrtky tužkou a pak se přestěhoval do OmniGraffle.

Použili jsme také FlairBuilder. Je to slušné pro drátové modely a velmi jednoduché prototypy, ale narazili jsme na řadu omezení. Když jsme pokračovali v aktualizaci prototypu, zjistili jsme, že se stal bolestivě pomalý. Nyní zvažujeme Axure pro prototypování.

4
Jeff Van Campen

Používám Post-its pro strukturu a celkové rozvržení, pak přejdu k Balsamiq Mockups nebo OmniGraffle a pro prototypy s vysokou věrností nic nepřekonává Apple Keynote. :)

4
Martin

Nemohu říci dost dobrých věcí o http://hello.hotgloo.com/ Používal jsem to pro kooperativní drátěný rám a je to úžasné.

Jo a je to zdarma, když jsou v beta verzi.

3
MatthewFord

Miluji iPlotz. Některé funkce, které mě prodaly:

  • Cenově dostupné!
  • Správa úkolů
  • Klikatelné prototypy
  • Export do obrázku nebo PDF
  • Sdílení a komentování schopností
  • Jednoduché uživatelské rozhraní s mnoha dostupnými widgety
  • Skiny pro skicu, Windows a Mac

Před iPlotzem jsem používal Photoshop.

  • Candace
3
Candace

Pro drátové snímky používám makety Balsamiq. Pokud je návrh interaktivní, používám PowerPoint. Pro makety s vysokou věrností je PowerPoint králem.

3
Sushant Anand

Pokud jde o prototypy s vysokou věrností, existují nástroje, které vám umožňují simulovat téměř konečný design a efekty, jako jsou iRise a Justinmind Prototyper . Ty nejen umožňují načrtnout drátový model, ale vkládat videa, vytvářet bohaté interakce (například vyplňování formulářů a využití dat) a lépe vytvářet specifikace a testování uživatelů.

Jsou o krok dále od jednoduchých nástrojů pro kreslení, jako jsou Visio, OG nebo Balsamiq.

3
Alex

Vyzkoušeli jsme několik wireframingových nástrojů, ale spokojili jsme se s pidoco.com , protože obsahuje některé užitečné věci testující použitelnost a je online.

3
Chris Michael

Ohňostroje, ruce dolů, jsou jedním z nejlepších nástrojů tam; nejen pro wireframing, ale také pro přechod z wireframe na maketu a export interaktivních prototypů HTML.

Nabízí knihovnu součástí Nice. Nástroje lze snadno zjistit. Podporuje stránky a stavy.

Nemusí to být nejlevnější volba, ale ve vší upřímnosti je to jeden z nejlepších nástrojů tam.

3
Jeremy D Johnson

Použil jsem (a byl na mě velmi ohromen) Balsamiq Mockups, ale jak říká Nathanel, má to určitá omezení.

Nejste si jisti, zda jste to viděli nebo ne, ale Sitepoint toto zveřejnil před několika měsíci, ale pravděpodobně je to stále relevantní. Může to být pár věcí, které stojí za podrobnější vyšetřování.

2
Sam K

Jako většina lidí zde se zdá, že používám Balsamiq k provádění hrubých maket za běhu, ale omezení rozhraní (a občasná tendence ke zhroucení) mandátují, že pro pevnější drátovou práci používám Omnigraffle, obvykle se vzorníky Konigi, ale stále více také s mým vlastním. Zjistil jsem, že jakmile investujete čas potřebný k tomu, abyste si zvykli na vytváření šablon a šablon, stejně jako na zvládnutí sdílených vrstev a proměnných, Omnigraffle je perfektní kombinací výkonné aplikace bohaté na funkce a rychlé/snadné výroby. Jedinou nevýhodou je samozřejmě to, že jej nelze snadno sdílet s lidmi Visio. Říká se, že můžete použít export souborů na bázi XML, které oba balíčky podporují, ale nikdy to nebude fungovat bezchybně a ocitnete se ručním řešením všech chyb.

2
theothermatt

Navrhuji, abyste se podívali na EightShapes Unify ( http://unify.eightshapes.com/ ) ... Právě jsem se na to začal dívat a nedostal jsem nový projekt, který bych vyzkoušel to vypadá s, ale ve skutečnosti to vypadá jako zabijácký rámec pro drátěné rámy a další konstrukční výstupy.

PS Je to zcela zdarma, ale pro jeho použití potřebujete Adobe InDesign.

2
Michael

Přepnul jsem z Balsamiq + Napkee na iPlotz - absolutně to miluji, protože si můžete vytvořit funkční hrubý prototyp a zároveň dělat své makety bez další práce. Udělal jsem zde zápis: http://www.snipe.net/2010/02/wireframes/

2
snipe

Stejně jako všechny věci, i zde záleží na tom, čeho doufáte.

PowerPoint jsem používal dlouhou dobu a bylo to v pořádku.

Nejobsáhlejším drátovým nástrojem, na který jsem narazil, je Axure (http://www.axure.com/), což je skvělé pro vytváření vysoce věrohodných navigačních drátových modelů. Plus byl nedávno spuštěn pro Mac.

Připadá mi Balsmiq (http://www.balsamiq.com/products/mockups) trochu chmurně, ačkoli se mi líbí přístup „skica“, jako by vaše hledání zpětné vazby, našel jsem více leštěné něco vypadá - méně pravděpodobné musíte získat zpětnou vazbu kvůli strachu, že je příliš daleko za hranicí.

http://gomockingbird.com/ je skvělý bezplatný nástroj, ale docela jednoduchý.

Pokud máte mac, Omnigraffle je skvělý a můžete si stáhnout řadu bezplatných šablon od http://graffletopia.com/

Ale nikdy nepodceňujte sílu pera a papíru - to je zdaleka to nejlepší pro rychlejší šíření nápadů

2
Mike Clarke

Tento blogový příspěvek o používání dokumentů Google, zvuky Google kresby zní zajímavě:

http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

2
Michael Mistak

Nejvhodnější nástroje pro drátový model a prototypování do značné míry závisí např. o struktuře vašeho týmu (interoperabilita, sdílení, ...), stavu projektu (=> nezbytná vizuální a funkční věrnost) a typu zúčastněných stran, s nimiž musíte svůj návrh sdělit. Pokud s distribuovaným týmem pracujete alespoň částečně na dálku, požadavky jsou ve srovnání s tím, že jsou všichni na místě, zcela odlišné. Mezi další vlivy patří např. distribuované úpravy a verzování. (IMHO, kniha Zaki Warfela o prototypování je užitečným výchozím bodem, když musíte vyhodnotit alternativy.)

Můj vlastní pracovní postup se točí kolem papíru (ruční kreslení, skicování w/základní šablony mřížky, někdy kartonové šablony pro často používané prvky,…) a poté nejčastěji OmniGraffle v pozdější fázi, někdy doplněné Indesign, Fireworks (pouze u některých klientů, pokud jsou vyžadovány hifi compy - jinak je jeho GUI výkon hlavní PITA) nebo Keynote (skvělé, pokud potřebujete všechny druhy přechodů). V současné době však uvažuji o přechodu na Axure RP. Pohybující se prototypy papíru a makety, na které lze kliknout, v současné době v podstatě ponechávají nativní formát, tj. Nejčastěji HTML/JS (včetně jQuery). Balsamiq a další řešení založená na prohlížeči nebo RIA se mi zatím zdály příliš pomalé a trapné, prostě se mi zdá, že se s nimi nedostanu do proudu. (Funkce spolupráce a testování Pidoco však mohou být za určitých okolností zajímavé.)

2

Používám Gliffy (online nástroj) pro jednoduché wireframy

1
Maikel

Mockingbird je online nástroj, který vám usnadňuje vytváření, propojování, náhled a sdílení maket vašeho webu nebo aplikace.

Je to stále brzy beta a nejsem si jistý cenou, ale stojí za to dohlížet. Je to webová aplikace napsaná v Cappuccino, takže není třeba Flash ...

Na zdraví R

1
richcb

I když jsem si jistý, že mnoho z těchto nástrojů je mnohem lepší, zde je řešení „low-tech“ (vzhledem k tomu, že máte PowerPoint) http://www.raizlabs.com/blog/294/wireframing-in -PowerPoint

1
user628

Házení zdroje do ** na podporu skicování jako skvělého nástroje pro drátové hraní:

50 zdrojů skicování pro návrháře uživatelských zkušeností ** což zahrnuje skicování:

  • články
  • nástroje
  • šablony
  • prezentace
  • videa
  • knihy
  • příklady
1
Nathalie C

Doplněk Firefox Pencil Plugin je další nástroj k odhlášení.

http://pencil.evolus.vn/en-US/Home.aspx

Je zdarma, má pěknou základní sadu šablon a některé povrchní šablony. Můžete udělat nějaké hrubé makety docela rychle. Ne tolik šablon jako jiné nástroje, ale funguje to docela dobře.

1
George

Používám Axure a jsem s tím docela spokojený. Měl bych však nějaké nápady na vývoj, aby byla použitelnost programu pohodlnější a rychlejší. Například při práci s textem chybí funkce (zarovnání, zarovnání textového obrázku atd.)

Ještě jsem nezkoušel jiné věci!

1
Roland Pokornyik

WireframeSketcher je softwarový nástroj, který pomáhá rychle vytvářet wireframy, makety a prototypy pro stolní, webové a mobilní aplikace. Přichází jako plug-in pro všechny IDE založené na Eclipse a samostatná verze.

WireframeSketcher Website Mockup

1
Peter Severin

Používám Justinmind, skvělé pro wireframe a prototypování dynamických webů (události typu JS a integrace vašich vlastních dat) bez kódování (dokonce i interakce jsou přetahovány).

Nabízejí také službu pro sdílení vašich drátových modelů online, aby lidé mohli komentovat prvky přímo a dokonce můžete provádět uživatelské testy, protože integruje většinu nástrojů pro testování uživatelů (clicktale, userzoom, google analytics ...).

http://www.justinmind.com

1
Etienne

Zjistil jsem, že MS Visio je docela flexibilní, pokud máte správné podpůrné soubory. Používám...

Visio - nehtová pistole návrháře interakce (3. vydání)
Základní webové widgety ve standardní a „útržkovité“ verzi

Tipy a triky aplikace Visio pro návrháře interakcí
Makra, která usnadňují práci s aplikací Visio. Zejména kopírování stránek a kopírování/vkládání položek „na místě“.

1
smallclub

Zde je online nástroj, který má bezplatný plán a skutečně levný jeden za 50 $/rok: http: //www.mockflow. com /

0
John Sanford

Jsem dost unavený z lidí, kteří říkají, že používají pouze pero a papír.

Pokud dokážete vytvořit složité rámce s perem a papírem, pak jste buď neefektivní, nebo nikdy znovu nepoužíváte moduly z dřívějších návrhů, nebo je to váš první;)

Celým bodem s nástrojem pro skicování musí být vytvoření knihovny vzorů a její použití, abyste se mohli soustředit na kousky projektu, které jsou zajímavé a inovativní místo nudných částí, které jste už tolikrát provedli.

Celek „Používám pouze pero a papír“ mi připomíná dny, kdy každý kodér HTML s hrdostí tvrdil, že na kódování nikdy nepoužíval nic jiného než Poznámkový blok. Dobře, nástroje zpět v den byly špatné (pamatujte Frontpage?) - ale přesto ...

Pojď! Pero a papír samozřejmě používáte někdy, ale vážně, když lidé žádají o radu ohledně nástrojů - neosmívat se jim, že navrhují pero a papír - nemyslíte si, že vědí o peru a papíru dříve, než položili otázku?

Používám Axure. Není to hezké, ale zvládne to.

(Nenechte mě začít tím, kdo říká, že skočí přímo do HTML. Jsou horší než pero a papírový ppl.)

0
Haakon Halvorsen

Používám ForeUI, což je skvělý nástroj pro vytváření prototypů, ve kterém můžete přidat chování k simulaci poměrně složitého chování systému. - Pokud je to nutné pro váš prototyp.

Prototyp DHTML lze exportovat a spustit v libovolném prohlížeči, který podporuje Javu, a snadno je sdílet s kolegy a zákazníky.

Navrhuji software pro Windows, ale ForeUI lze použít pro cokoli - včetně webu.

Běží na Windows, Mac, Linux a Solaris a cena i 99 $. Obvykle je nová verze vydávána každé dva týdny. Další podrobnosti naleznete na www.foreui.com.

0
Ulrich Böttger

Chtěl bych přidat ZDARMA, RYCHLÝ, ZÁKLADNÍ, ONLINE MockUp stavitel: (vyžaduje Silverlight) http://www.mockupbuilder.com/App

Používám to, když potřebuji něco konceptu, rychle, online!

0