Ochutnávka nových funkcí z připravované sedmé verze Axure RP

Axure uvolnilo beta verzi Axure RP 7, která má přinést možnost vytvářet responsivní prototypy. Sedmá verze oblíbeného nástroje na tvorbu wireframů a funkčních prototypů toho ale přináší mnohem více. Pojďte se podívat na konkrétních příkladech na nové možnosti této verze.

Předně je dobré poznamenat, že novinky se týkají hlavně interaktivních prvků, které využijete především při vytváření funkčních prototypů. Zajásají tedy spíše pokročilejší uživatelé. Naopak těm ostatním se práce může na chvíli zkomplikovat, protože došlo i ke změnám v UI.

Velké množství malých změn a novinek

V nové verzi najdete velké množství drobných změn. Všechny je nemá smysl vypisovat. Namátkou je to možnost hýbat se všemi prvky (nejen s dynamickými panely), reagovat na skrolování stránky, rušit dynamické panely, reagovat na stisk pravého tlačítka myši, další nové události nebo drobné detaily jako nastavení barvy mřížky. Už jen ty jsou dostatečně lákavé.

Obrázek 1: přehled nových událostí pro běžné prvky

Další samostatnou kapitolou jsou vestavěné proměnné. Oproti původním asi dvaceti narostl počet o dalších více než šedesát. Najdete zde jak pozici kurzoru, tak velikosti okna či souřadnice prvků na stránce.

Cesta k responsivnímu prototypu webu

Tou nejočekávanější novinkou je možnost navrhovat responsivní design. Po prvních pokusech s jednoduchým obsahem musím říct, že to vypadá slibně. Axure se vydalo cestou, která není ideální, ale díky tomu přináší alespoň částečné řešení. To vypadá upotřebitelné pro běžnou práci a uživatelům může ušetřit čas.

Řešení spočívá v možnosti definovat breakpointy, na kterých se bude měnit layout či obsah webu. Bohužel už nelze obsah přizpůsobit velikosti okna mezi jednotlivými breakpointy. Není ani možnost obsah za sebe skládat, aby se automaticky posouval tak, jak roste jeho výška. Je potřeba vše ručně posunout v každé variantě.

Obrázek 2: nastavení breakpointů, jejich dědičnosti a vlastností

Co vám usnadní práci, je editace prvků a interakcí. Není potřeba editovat všude, ale jen na jednom místě. Navíc lze definovat dědičnost jednotlivých variant. Můžete si tedy nastavit, že změny, které provedete ve variantě pro 500px, se projeví i ve variantách s menším rozlišením, a naopak v těch s vyšším ne. Navíc se zdá, že Axure se snaží chytře usnadnit práci, a pokud budete třeba vkládat nadpisy do stránky, už vám je přizpůsobí podle prvního nadpisu (nemusíte v každé variantě měnit jeho velikost).

Obrázek 3: přepínání mezi breakpointy

Co je důležité, lze reagovat i na typ zobrazené varianty. Je tedy možné obsah a jeho funkce měnit podle typu zařízení. V příkladu níže máme nejmenší rozlišení (480px), kdy se navigace mění v interaktivní prvek, který funguje jinak než v ostatních variantách.

Jako ukázku jsem připravil navigaci, která se mění podle velikosti okna. Samotná navigace je jeden prvek (Master), který můžeme editovat na jednom místě. Pro jednotlivé varianty je upravena pouze velikost prvků, jejich pozice a funkce zobrazení (řešeno pomocí dynamického panelu). 

Kromě živé ukázky lze stáhnout i zdrojový RP soubor a příklad si prohlédnout.

Práce s daty – nový prvek Repeater

Překvapením je zcela nový prvek nazvaný Repeater. Zjednodušeně řečeno jde o jakýsi „Master“, ke kterému připojíte v Axure data, a on už každý záznam do daného „Masteru“ vloží a zobrazí na stránce.

 Obrázek 4: takto vypadá prvek, který musíte 

Obrázek 5: toto jsou data vložená v Axure

Obrázek 6: a toto je výsledek, který se zobrazí po vygenerování prototypu

Následně je pak možné data třídit podle různých kritérií, filtrovat a podobně. Poměrně zajímavá je možnost prvky vkládat a mazat (přímo ve vygenerovaném prototypu), což otevírá další široké možnosti využití.

V následujícím příkladu se můžete podívat, jak lze pomocí tohoto prvku vytvořit stránku v e-shopu s produkty, které se dají filtrovat a různě řadit. V předchozích verzích toto nebylo možné uskutečnit. Opět je ke stažení zdrojový RP soubor.

Slibný začátek

Po pár pokusech musím říct, že možnosti Axure se posunuly o pořádný kus dopředu. Pokud tedy děláte funkční prototypy, vaše možnosti, co lze v Axure vytvořit, se hodně rozšíří. Zbývá už jen počkat, až se uvolní finální verze.

Důležité upozornění nakonec, nová verze bude opět k dispozici pro všechny, kdo vlastní jakoukoliv licenci k Axure („Also, version 7 willbe a free update forallcustomer­s.“)!

 Autorem článku je Jan Hlaváč aka Ošklivý sup.