UX Notes

Píše Jakub Španihel. Stručněji také přes Twitter.

Posts tagged axure

Jun 2

Axure RP tip: Jak na AJAX

Jak simulovat AJAXové záložky v generovaném prototypu.

Pokud navrhujete pomocí Axure nějaký prototyp, dříve nebo později určitě použijete návrhový vzor známý jako záložky (taby) - více zde, zde nebo zde.
 
Demo ajaxových záložek.

Postupů, jak vytvořit záložky v Axure je celá řada. Níže je zmíněn postup s dynamickými panely a záložkami jako “selection group” (tato funkce je dostupná až v Axure RP verze 6).

Základ vypadá to takhle: přepínací záložky a jeden dynamický panel se všemi stavy obsahu.

Záložky jsou seskupené do skupiny (selection group), což funguje obdobně jako radio-group.


Při využití tohoto postupu je třeba vždy zavolat zvýraznění požadované záložky po načtení stránky. V našem případě vezmeme třeba hned první záložku.


Dynamický panel, který se stará o zobrazování obsahu jednotlivých záložek, obsahuje i speciální “state” navíc - v ukázce pojmenován jako “Loading”. Obsahem “Loadingu” může bý buď nějaký text typu “Načítám….”, nebo třeba klasický načítací animovaný GIF (ano, Axure umí zobrazit animované GIFy v exportovaném prototypu - viz demo níže).


Při kliknutí na záložku pak místo obyčejné změny stavu dynamického panelu zavoláme nejdřív zobrazení “Loadingu” a až po chvíli zobrazíme požadovaný “state” záložky.



Podobně jako se záložkami můžete pracovat i s dalšími dynamickými bloky vašeho prototypu.


    Nov 19

    Co přinese Axure RP 6?

    Updated: Betaverze ke stažení zde: http://www.axure.com/downloadBeta.aspx

    Vývojáři pilně pracují již na šesté verzi Axure RP, která posune stále oblíbenější prototypovací nástroj ještě o kousek dál. Vybírám pár novinek, na které se můžeme těšit.

    Sketchy style

    Hranaté a pixelové wireframy si budete moci přepnout do ručně kresleného designu.

    Populární featurka, známá především z Balsamiqu. Určitě to bude užitečné při prezentaci výstupů před klienty, kteří občas berou wireframy za “skoro vlastně hotový web”.

    Lepší práce s objekty stránky

    Nastavení obrázku na pozadí stránky nebo zarovnání celé stránky na střed prohlížeče. Nastavení “line-height” a “padding” widgetům a další drobnosti.

    Nový Custom Style Engine

    Vlastní styly bude možné nově aplikovat i na rollover stavy widgetů. To by mělo výrazně zjednodušit globální změny vzhledu nad celým prototypem z jednoho místa.

    Nový editor interakcí

    Jednou ze slabin stávající verze Axure je zdlouhavé “klikání” interakcí při tvorbě prototypu. Do nové Windows verze dorazí tedy uživatelsky přívětivější editor interakcí, který znají už teď uživatelé Axure pro Mac.

    Slíbená je i snazší práce se “selected” widgety. Snad se tedy konečně dočkáme jednoduchého řešení např. záložek, aktivních položek v menu a podobných legrácek, které se teď řeší různými workaroundy.

    Feedback

    Zprovozněním projektu AxShare si tvůrci Axure připravili půdu pro žádanou funkci zpětné vazby v rámci prototypu. Zatím to vypadá tak, že u hostovaných prototypů bude možné přidávat komentáře k jednotlivým stránkám prototypu.

    Animace a Drag&Drop

    Přibude možnost pro zobrazování animovaných interakcí (rozšíření stávající funkce “MoveTo” a “Hide/Show/Toggle”) a také pro simulaci drag&drop (!).

    Na tohle jsem docela zvědavej. Pokud se sliby naplní a Axure bude tyhle funkce v použitelné formě obsahovat, stane se bezkonkurenčně nejlepším nástrojem pro prototypování webu (vynechme teď flame o prototypování v HTML).

    A kdy to bude?

    Veřejná betaverze měla být dostupná už před dvěma týdny, ale kde nic, tu nic. Vývojáři mlčí, uživatelé čekají. Plán vydat verzi 6 začátkem roku 2011 je tedy možná až příliš optimistický. Nezbývá ale nic než čekat :/

    Updated: Betaverze ke stažení zde: http://www.axure.com/downloadBeta.aspx

    A co vy? Těšíte se? A na co nejvíc? Nebo jste na Axure už definitivně zanevřeli a máte alternativu?


    Aug 30

    Axure RP tip: Jak na lightbox

    Drobný tip pro všechny (spíš začátečníky), kteří pracují s Axure RP.

    Můj postup na vytváření lightboxů 

    Axure používám pro navrhování wireframes a tvorbu interaktivních prototypů webu. Celkem často potřebuji udělat nějaký ten lightbox.

    Axure sice umí pracovat s vrstvami pomocí dynamických panelů (Dynamic Panel) přímo v rámci každé stránky, nicméně tohle řešení se při větších projektech stává poněkud těžkopádným. Také z důvodu větší přehlednosti je lepší mít všechny stránky včetně lightboxů pohromadě v sidebaru Sitemap.

    Proč lightbox jako samostatná stránka?

    Výhodou lightboxu jako samostatné stránky je zejména větší přehled o všech unikátních stránkách (hodí se například pro grafika - nezapomene to nakreslit). 
    Druhou výhodou je taky to, že na lightbox můžete odkazovat z více než jen jedné (rodičovské) stránky.
    V neposlední řadě je tvorba samostatných stránek řádově rychlejší než používání standardní metody s Dynamic Panel widgetem.

    Pozadí lightboxu jako Master

    Předpokládejme, že všechny lightboxy na stránce by měly vypadat vizuálně podobně (konzistence). Tím mám na mysli barvu pozadí, pozici zavíracího tlačítka apod.
    Z toho důvodu je jednodušší připravit si část lightboxu jako Master šablonu. Výhodou je pochopitelně možnost opakovaného používání a jednoduchých úprav napříč všemi stránkami, na kterých se lightbox bude používat. Pokud chcete, můžete si do Master šablony pochopitelně připravit mimo zavíracího tlačítka lightoxu i některé další prvky.

    Zavírání lightboxu

    Reálný lightbox v HTML a Javascriptu funguje jako layer, který se zobrazí bez znovunačtení stránky. Zavření lightboxu tedy pouze tento layer skrývá.
    Axure umožňuje toto chování nasimulovat pomocí OnClick událostí Back in Current Window. Pokud přiřadíme tuto událost jak na celou (tmavou) plochu lightboxu, tak na zavírací tlačítko, budeme po kliknutí vždy přesměrování na předcházející stránku. Správné přesměrování proběhne i v případech, že lightbox otevíráme z několika různých stránek.

    Náhled a soubor ke stažení

    Výsledek výše zmiňovaného postupu si můžete prohlédnout v HTML exportu z Axure RP, případně přímo stáhnout jako .rp soubor.

    Hotovo. Bylo to užitečný? Mám psát další tipy? Nebo jsem mimo mísu a tohle všichni znáte? Omluva: je to starší text, co jsem vyhrabal z virtuálního šuplíku.