Stopky v Axure RP 5.6

Stopwatch in AxurePoměrně plně funkční stopky udělané ještě ve staré verzi Axure RP 5.6 jako malá ukázka toho, co jde v Axure udělat.

Demo – stopky

Tohle na webu samozřejmě nikdy nevyužijete, ale je to ideální na procvičení a dokonalému zvládnutí práce v Axure. A je to zajímavější než furt dokola omílat jen objednávkové formuláře.

Kurz Axure RP – 1. Základní tipy pro práci

V seriálu článků, které budou následovat, se s vámi chci podělit o moje zkušenosti s prací v prototypovacím programu Axure RP Pro. Naopak vy se pak můžete podělit o ty své v komentářích. Nebudu se rozepisovat o základech, kde je jaký panel, k čemu je atd. Soustředím se na věci, které jsou v samotném programu těžko zjistitelné a přijdete na ně buď důkladným procházením zahraničních zdrojů nebo po delší práci se samotným programem. A samozřejmě se to pokusím prokládat konkrétními příklady.

Axure 5.6 × Axure 6.

Určitě víte, že je k dispozici ke stažení nová verze Axure 6 Beta (můžete si ji stáhnout a zdarma s ní pracovat, než bude oficiálně vydána verze 6). Má se tedy smysl učit ještě Axure 5.6? Ano, má. Nová verze pouze rozšiřuje možnosti (například nové funkce k matematickým výrazů, vylepšení stylů atd.) stávající. Většinu věcí tedy musíte znát pro obě verze. Naopak je lepší mít nejdřív dobře zvládnuté základní věci z verze 5.6, protože v rozšířených možnostech verze 6 se potom budete lépe orientovat.

Tipy pro začátek projektu.

Jelikož s Axure už máte zkušenosti, určitě víte co jsou „masters“, „dynamické panely“ a „image map region“. Pokud si je vložíte do stránky, jsou různě zbarvené, jak ukazuje následující obrázek.

Někdy to může být velice rušící, pokud máte na stránce příliš mnoho takovýchto prvků. Není nijak složité jejich zbarvení vypnout: wireframe > show masters. Vypnout můžete i “footnote”, což jsou ty male žluté čísílka u odkazů a dalších interaktivních prvků (s nimi si vypnete i označení poznámek, které můžete psát ke všem prvkům a které se označují stejným způsobem).

V Axure 5.6 nejsou vodící linky („guides“), je zde pouze mřížka, ke které se dají objekty přichytávat. Tady se můžete těšit, v Axure 6 jsou vodící linky a to jak lokální (vytáhnete je tažením z kraje), pro konkrétní stránku, tak i globální, které se zobrazí na všech stránkách (stejným způsobem, jen přitom držte CTRL).

Mřížka – grid system

Pokud jste zvyklý pracovat s mřížkou, je potřeba si kvůli absenci vodících linek pomoci nějak jinak. Znám dva způsoby jak na to:

  1. Mřížku si někde vygenerujete a jako obrázek ji vložíte na pozadí stránky.
  2. Druhým řešením je simulovat mřížku pomocí „image map region“. Výhodou je, že ty nejsou ve vygenerovaných prototypech vidět.

V obou případech se mřížka vloží do „mastru“. Já ji změním ještě na dynamický panel. To mně umožňuje ji kdykoliv „vypnout“ (edit dynamic panel > set hidden) a neruší tak na pozadí. Když ji potřebuji, zase si ji zapnu. Pokud si zvolíte obrázek a zvyknete si při práci a něj, budete stále generovat prototypy s mřížkou na pozadí. Toho se zbavíte jednoduše. Stačí v „masteru“ nastavit, aby se na OnPageLoad tento dynamický panel schoval. Při načtení stránky v prohlížeči tak nebude vidět a vy s nemusíte starat o jeho vypínání.

A ještě jeden tip na závěr: až budete mít tento „master“ s mřížkou hotový, nastavte mu v menu behavior > place in background. Schválně si vyzkoušejte na nějaké stránce s obsahem, co to dělá, když ho tam vložíte. Pokud jste toto chování neznali, ušetří vám to pár vteřinek práce. To že má jinou barvu, to můžete ignorovat (tak se jen odlišuje od ostatních „masters“).

V příštích dvou článcích se budu ještě věnovat různým tipům pro práci s Axure, než se dostanu k proměnným, „masters“ a dynamickým panelům. Tak pokud vás tohle nezajímá, tady je jedna malá ukázka příkladu, ke kterým se snad časem propíšu. Pokud se nudíte a tenhle trik neznáte, můžete koumat jak na to.