it-swarm-eu.dev

Které prototypové nástroje?

To silně souvisí s následující otázkou:

Nechtěl jsem však omezit návrhy na nástroje „založené na webu“, v minulosti jsem s určitým úspěchem našel a používal následující nástroje pro prototypování, wireframing a makety.

Jsem si také vědom toho, že někteří návrháři se rozhodnou pro tuto úlohu použít grafické aplikace, jako je Photoshop a Illustrator.

Toto je komunitní otázka Wiki, proto zveřejňujte své myšlenky, zkuste si ponechat jeden balíček na odpověď, abychom si mohli vytvořit představu o tom, jak se komunita cítí k těmto nástrojům.

34
Richard Slater

Je pro mě důležité udržovat prototypy alespoň ve dvou vláknech, a tři, pokud se snažím porozumět podrobným interakcím s animací.

Vlákno 1: Tok, funkce, forma a data

  • Počínaje papírem (obvykle se jedná o návrh tabule s ostatními). Zaměřte se na tok obrazovky, poté na hlavní funkce a potenciální rozvržení zvláště důležitých obrazovek. Zkuste alespoň dva různé nápady.
  • Další úroveň věrnosti v Balsamiq. Přidejte funkční detaily, vylaďte rozvržení, přidejte na obrazovku konkrétní, smysluplná vzorová data (v kontextu prokazatelného scénáře).
  • Vytvořte prototyp pracovního postupu spojením řetězců krok za krokem, scénáře jedné cesty s obrazovkami a konkrétních očekávaných interakcí, které se přesunou na další obrazovku. Mám sklon používat PowerPoint, uvádím všechny makety obrazovky postupně. Tento prototyp vám umožňuje získat zpětnou vazbu se skutečnými uživateli pomocí pluralistických průchodů , což je velmi efektivní při zdokonalování konceptů, pracovních postupů, funkčních požadavků, terminologie atd.
  • Iterujte brzy, často a rychle.

Vlákno 2: Vizuální program a styl

  • Pomocí některých klíčových maket z vlákna 1 je vizualizujte (jako kompasy) v detailech na pixelech pomocí Photoshopu nebo jiného podobného mechanismu. Prozkoumejte barvy, proporce, vizuální metafory, typografii atd. Vytvořte alespoň 3 nápady.
  • Získejte zpětnou vazbu k těmto nezávisle na prototypech pracovního postupu. Použijte přednostní testování, testování AB, kritika, charety atd.
  • Iterujte a vylepšujte.

Vlákno 3: Podrobná interakce a animace

  • Zaměření na jedinou, podrobnou interakci nebo animaci posekává dohromady funkční prototyp v jakémkoli nástroji, který vám nejlépe vyhovuje: HTML/CSS/JS, Flash, programovací jazyky nižší úrovně, rámce/knihovny komponent uživatelského rozhraní atd. Alespoň dvě alternativní interakce .
  • Spusťte malý počet krátkých testů použitelnosti včetně sběru dat časování. Proveďte srovnávací testy. Počítejte úhozy/myši/gesta.
  • Iterujte a vylepšujte.

Stručně řečeno, vytvářejte konkrétní druhy prototypů pro konkrétní účely ... k zodpovězení konkrétních otázek. Žádný typ nefunguje pro všechny situace. Vyvarujte se estetickým problémům mimo smyčku zpětné vazby pracovního postupu/funkce. Pro různé typy otázek používejte vhodné a efektivní metody. "Nepřekračujte potoky."

Zjistil jsem, že téměř všechna základní vylepšení designu pocházejí z vlákna 1 a vlákna 2, ale vlákno 3 je nutné, pokud překračujete standardní ovládací prvky nebo pokud je vaše doména nová/komplexní/specifická (např. Gestické interakce, vícerozměrný model) manipulace, vlastní ovládací prvky pro fantastický nový operační systém, optimalizace lidského výkonu v určité dimenzi).

35
Jim Jarrett

Tužka je dobrý nástroj pro vytváření maket uživatelského rozhraní. Je k dispozici jako doplněk Firefox nebo samostatná aplikace .

alt text

Má výhodu oproti některým dalším zmíněným nástrojům, protože je-li to volný a otevřený zdroj.

12
david4dev

Před časem jsem četl velmi zajímavý článek, který se jmenoval „Načrtnout nebo nevykreslit“ - měli byste se podívat: otázka na náčrt Kdykoli je potřeba kreativita, neměli byste omezovat své myšlenky pomocí nástrojů používáš. Moje osobní volba pro pozdější vyčištění je nástroj v blízkosti oblasti, se kterou pracuji. U HTML/CSS obvykle začínám jednoduchými rozvrženími a krok za krokem zvyšuji podrobnosti. Totéž by se mohlo ukázat užitečné i v jiných oblastech. Prototypování z nízkých do vyšších detailů. Takže nemám konkrétní nástroj, který bych doporučil ... záleží.

Nemám tedy konkrétní nástroj, který bych doporučil ... , záleží .

10

Já osobně používám Balsamiq pro prvních pár revizí, a pak jdu rovnou k HTML prototypu pomocí CSS framework jako Blueprint .

8

Zajímavé je, že Adobe Fireworks si na tomto webu nemalou lásku.

Mimo jiné se mi líbilo

  1. Budování v různých státech
  2. Hlavní stránky
  3. HTML objekty, jako jsou odkazy a ikony, lze označit exportem (interní a externí odkazy, metadata, vše dobré)
  4. Exportuje rozvržení založená na standardech CSS se skutečnými šablonami stylů
  5. Integrace nativního Illustratoru a Photoshopu pro loga atd.

Líbí se mi Balsamiq pro předání IA klientovi, poté Fireworks pro splavný prototyp, jakmile designér spolupracuje. Práce provedená v Fireworks dostatečně snadno exportuje do HTML a CSS, které se dostatečně snadno převádějí do úplného statického webu nebo jako stránky šablony/motivy pro dynamický web.

8
Matt

Řeknu jen papír je nejlepší prototypový nástroj. Ano, je to zřejmé, ale je to lepší než začít s elektronikou.

  • Papír říká klientovi, že se jedná o nápad, jeden z mnoha možných.
  • Papír nedovolí, aby se klient chytil do písem nebo barev, tvarů nebo obrázků. Existuje důvod , že balsamiq zvolil drátové modely náčrtu.
  • Revize jsou rychlé
  • Je snadné získat na ně svůj vlastní rukopis a není to zastrašovat, aby na to kreslili.
  • Můžete jej naskenovat nebo faxovat, pokud potřebujete, aby byl elektronický.

Jsem velkým fanouškem html funkčních prototypů poté, ale papír snižuje bariéru pro brainstorming a rychlé testy na chodbě ui.

Je snadné někoho projít papírovou skici:

"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"

Pokud nezačnete s náčrtky a nedostanete nějakou validaci uživatele, skáčete zbraň a je jen dražší vrátit zpět a iterovat později.

5
MattK

Upřednostňuji makety webových uživatelských rozhraní v HTML/CSS.

  1. Funkční prototypování je mnohem lepší řešení, protože uživatelé získají skutečný zážitek spíše než nedimenzionální (při pohledu na vás Photoshop).

  2. Funkční prototypy nejsou odhodilé.

  3. Je mnohem rychlejší iterovat přes funkční prototyp během zpětné vazby

4
abrudtkuhl

Používám Axure .

Přestože je poměrně drahá (téměř 600 USD za licenci), poskytuje úžasnou flexibilitu a umožňuje vám přizpůsobit téměř všechno.

Schopnost používat vlastní ovládací prvky (nebo jejich makety), mistři atd. Je při vytváření aplikace nezbytná, nikoli webová stránka.

4
Dan Barak

Papír a HTML je nejlepší.

Rychlé náčrtky na papíře. Pak vytvořte skutečnou věc v HTML. StaticMatic text odkaz je skvělý pro prototypování.

V minulosti jsem použil Axure, ale wireframing je ztráta času.

3
Miki

Také bych hlasoval pro Axure. Naše kancelář používá své nástroje pro spolupráci k rozdělení odpovědnosti mezi našimi IA a grafickými designéry.

I když to není Omnigraffle, možnosti wireframing jsou více než dostačující. Tento software má skvělou funkčnost mistrů, takže můžeme rychle odhadnout věrnost prototypu.

A jak řekl Dan, je to zcela přizpůsobitelné a vytváří dokumenty profesionální specifikace.

r.

3
Robert Hamburger

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

  • Rozhraní ve stylu Adobe. Pokud jste pracovali s Photoshopem nebo jinými produkty Adobe, bylo by velmi snadné přejít na InDesign
  • výkonné nástroje pro práci s typografií, tabulkami, styly, mřížkami atd
  • ve skutečnosti můžete vytvořit nejen drátový model, ale i grafický design
  • můžete exportovat drátové snímky jako soubory PDF, na které lze kliknout
3
Kostya

Souhlasím s některými z výše uvedených odpovědí, ale rád bych přidal další informace a tip. Téměř začnu každý projekt s tabulí, pera v různých barvách a také nějaké post-it. Nejjednodušší způsob, jak komunikovat nápady a získat rychlou zpětnou vazbu. V závislosti na druhu projektu se poté pokusím načrtnout hlavní vývojové diagramy pomocí programu s názvem yEd . Je to pro mě jednoduchý způsob, jak strukturovat myšlenky. Pokud mám v blízkosti mac, vybral bych OmniGraffle (vynikající program pro více než vývojový diagram).

Stále dělám prototypy v Balsamiq , Flow sketch a Illustrator , abych získal různé druhy prototypů low-fi a hi-fi.

Pokud jde o tyto informace, považoval jsem za vhodné mít k dispozici bohatou nabídku nástrojů. Je pro mě důležité, abych mohl zvolit různé přístupy v závislosti na typu projektu.

2
Anna

Podpořím návrh Daniela Bleisteinera: „To záleží.“

U 90% projektů považuji můj hlas za papír. Zdůvodnění papíru je v tomto vlákně hojné, takže nebudu opakovat.

Design není nikdy stejný mezi projekty a rozhodně ne mezi klienty. (Mluvím o designu v nejasném smyslu, tj. O designu, vývoji, prototypování, wireframingu - buďme upřímní, všichni se postupně slučují.)

Takže pro dalších 10% projektů bude nástroj protoypingu záviset na projektu. Pokud to vyžaduje spolupráci na dlouhou vzdálenost, může být Axure nejlepší. Pokud to vyžaduje spolupráci s interním týmem klienta, který používá především Adobe, může být Fireworks nejlepší. Existuje mnoho nástrojů. Nástroje se bohužel podle definice nemohou přizpůsobit tak rychle, jak problémy, které jsou vytvořeny k vyřešení; proto se zdá, že mnoho z těchto produktů se navzájem velmi podobají, ale ne zcela identicky. A je na nás, abychom vyhodnotili, co je pro danou práci nejlepší.

Další myšlenka: iPad začíná pomáhat rozostřovat čáry mezi osobní klientskou spoluprací vs. osobní klientskou kontrolou „přes rameno“. Omnigraffle, SketchBook, TouchDraw, Draft a další aplikace iPad připravují cestu pro lepší spolupráci. (Mluvím o zlepšení, protože se snažím o dosažení konečného cíle, aby se klient cítil stejně pohodlně na iPadu jako na papíře, jeho výhodou je, že klient mohl místo statické stránky použít funkční protoype.) konečným cílem je jen můj názor.)

2
Tyler Hayes

Dodržuji tyto kroky ...

1. Prototypování. Používám Balsamiq Mockups , protože je to snadné. Celým cílem prototypu je zjistit základní uspořádání věcí. V této fázi provádíte drastické změny. Naštěstí Balsamiq nepředstírá, že je ničím, co není, a zůstává velmi snadno použitelný. Je pro mě rychlejší používat Balsamiq, než jak to kreslit. Výhodou je, že je možné přetahovat prvky po obrazovce, nikoli je mazat a překreslovat.

2. Dokončete design. K tomu používám Photoshop a někdy i trochu Illustratoru, abych mohl grafiku zdokonalit, než napíšu jakýkoli kód.

Ve Photoshopu je obtížnější provést drastické změny ve vašem designu, protože máme tendenci se unášet dokonalostí pixelů. A je to ještě obtížnější, jakmile bude ve vaší aplikaci. To je důvod pro můj postup a proč začínám s nejjednodušším možným nástrojem ... Balsamiq.

2
Steve Wortham

Jsem první skicák/tužka a Balsamiq - druhý druh chlapa. Poté Photoshop upřesňuje podrobnosti, dokud není dost místa na to, aby skočily do HTML a CSS.

1
blackant

Balsamiq. Je to dobré také pro stolní software a je velmi snadné se ho naučit.

1
franz976

Také stojí za to se podívat gomockingbird , který právě vychází z beta

1
Paul McKeever

Interaktivní agentura mé ženy měla úspěch s:

http://www.mockflow.com/

Rychle začít a přiměřené množství vestavěných ovládacích prvků a obrazovek pro prototypy a drátové modely.

1
noluckmurphy

Otázka se zmiňuje o potřebě prototypovacího nástroje, ale ne o tom, jak realistický musí být váš prototyp. Pro útržkovitý typ drátového modelu souhlasím s většinou komentářů, že pero/papír, Balsamiq nebo dokonce Visio jsou dobré nástroje. Pokud však budete potřebovat realističtější vypadající prototyp, nebudou to dělat, a pak bych doporučil podívat se na to, co se líbí Axure nebo Adobe Fireworks/Catalyst (iRise je o něco dražší), a přestože má své problémy, půjdu pro Axure .

0
Geert

Používám tužku také, i když má některé nevýhody:

  • žádné zpracování dat tabulky: Pokud chcete drátěný stůl, jste ztraceni.
  • v textových polích není WordWrap. Když se snažím umístit nějaké lorem ipsum, musím si udělat obal sám. To naštve.

tento nástroj se mi však velmi líbí.

0
cukabeka

Někdy používám tento nástroj http://www.hotgloo.com/

0
512x512

Vzhledem k tomu, že vaše otázka se týkala konkrétně prototypování, předpokládám, že děláte veškeré kroky, které považujete za nezbytné před prototypováním, jako je skicování atd.

Pokud bude váš produkt dodáván prostřednictvím webu, vytvořte své prototypy pomocí webu (HTML, CSS, JS). Nakonec je to rychlejší, levnější a přesnější než cokoli jiného, ​​co můžete použít. Zjistil jsem, že nástroje jako Axure jsou v pořádku pro jednoduché věci, ale pak vyžadují strmou křivku učení, aby udělaly něco středně složitého. V tuto chvíli trávíte čas učením proprietárního nástroje, když se můžete učit webovým standardům, které vám budou dlouhodobě výhodnější.

Pokud máte obavy o to, že si klient myslí, že je to „hotové“, můžete styling vynechat až do konce, ale zjistil jsem, že čím „skutečnější“ váš prototyp, tím snáze je vyhodnocen.

0
Craig Villamor

To opravdu záleží na tom, co je to za projekt.

Pokud bude web, na kterém prototypujete, jen pár stránek se statickým obsahem, bude pravděpodobně dobré používat grafický editor, jako je Photoshop nebo Fireworks. Pokyny, jak zabránit konstrukčním prvkům před prototypováním „za každou cenu“, zde nemusí být vhodné.

Na druhém konci spektra, ve kterém stavíte rozsáhlou aplikaci s mnoha případy použití, bych však doporučil něco více, než odpověď Jim Jarretta. Dodal bych, že aplikace ve velkém měřítku jsou (nebo přinejmenším by měly být) iteračním procesem: budete prototypovat pro fázi I a poté znovu prototypovat pro vydání fáze II atd. Každá z těchto fází prototypování může vyžadovat různé úrovně detailů . Možná budete chtít pracovat od sestavení/prototypu současné fáze, nebo může být čas vrátit se k prvním principům a začít od nuly.

0
skybondsor

Axure je skvělý nástroj pro drátový model/prototypování/specifikace. To vám umožní soustředit se na to, co vytváříte, a umožňuje velmi snadno specifikovat věci, jako jsou anotace, poznámky, interakce.

Výhodou je, že když zadáte interakce, když generujete prototypy z drátových rámců, tyto interakce se převedou na skutečné pracovní widgety. (Axure generuje prototypy HTML)

Můžete také provést návrh obrazovky (například ve formátu JPEG), importovat obrázek, aktivovat oblasti obrazu pomocí nástroje „obrazová mapa“ a poté máte efektivně vyšší prototyp věrnosti!

Axure také umožňuje vytvářet akce založené na proměnných (můžete je nastavit nebo přečíst). K dispozici je také koncept získání widgetu pro vygenerování události, můžete si nechat poslouchat další widget a pak tento widget může nějakým způsobem reagovat.

Mohu pokračovat dál a dál ... Nevýhodou je cena ~ 550 $, ale časová úspora stojí za to. Jejich zákaznická podpora prostřednictvím e-mailu je skvělá; obvykle se ke mně vrátí během několika hodin ... někdy okamžitě.

0
milesmeow

Našel jsem Mockingbirda v pořádku pro jednoduché drátové modely. Nebude mi brzy odcházet omnigraffle, ale pro webový nástroj je to docela dobré: http://gomockingbird.com/

0
fluxd

Podívejte se na App Sketcher (v současné době u kandidáta na vydání), abyste zjistili, zda vyhovuje vašim potřebám. Je to rychlý prototypovací nástroj HTML pro vytváření prototypů drátových modelů a interaktivních webových aplikací. Jako konstrukční povrch používá zabudovaný prohlížeč WebKit, kde můžete přidávat komponenty HTML, komponenty uživatelského rozhraní jQuery, webové widgety (například Mapy Google a přehrávač YouTube) a upravovat je pomocí motivu jQuery a vlastností CSS. Lze také definovat jednoduché akce. Uživatelé mohou spustit/testovat prototyp ve svém výchozím prohlížeči a exportovat zdroj HTML/CSS/JavaScript, jakmile jsou s návrhem spokojeni. Tento nástroj je více zaměřen na Axure jako zkušenost, ale klade důraz na „design v prohlížeči pro běh v prohlížeči“, protože zajišťuje, že makety/drátové snímky jsou realizovatelné ve vývojové fázi s webovými technologiemi.

Jsem vývojář této aplikace. Je mi to líto této nestydaté vlastní propagace. Přesto si myslím, že to může být dobrý nástroj pro vytváření prototypů HTML a stojí za to se na něj podívat.

0
Feng Chen