UX Notes

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

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.


    1. petrdousa reblogged this from jakubspanihel
    2. jakubspanihel posted this