Nejnovější aktualizace Atomic.io obsahuje skrolovatelné kontejnery

01 z 03

Nejnovější aktualizace Atomic.io obsahuje skrolovatelné kontejnery

Atomic.io

Několik měsíců předtím jsem ukázal, jak atomic.io může být použit pro prototyp pohybu . Jeden z klíčových bodů, který jsem udělal ve scénáři, byl "zobrazování pohybu" spíše než to, aby to nechal na představách klienta nebo týmu. Ve skutečnosti se to stalo tak kritickým, že se na scéně objevila zcela nová kategorie nástrojů UX / UI. Patří mezi ně - Apple Keynote, Adobe Edge Animate, After Effects a UXPin , abychom jmenovali jen několik. Nové dítě na bloku je Atomic.io, který byl v beta verzi, když jsem poprvé napsal o produktu.

Úchvatná věc o otevřených beta je, že dávají výrobci softwaru možnost shromažďovat zpětnou vazbu uživatelů o sadě funkcí, včetně chybějících funkcí, a pak je přidávat do aplikace a nechat je testovat před komerčním vydáním. V případě atomové funkce, kterou jsem opravdu chyběla, byla schopnost posunout obsah vertikálně nebo horizontálně. To by mohlo zahrnovat například karty, prezentace nebo prakticky cokoli, co by uživatel mohl přemístit nebo přetáhnout v rámci rozhraní aplikace nebo webu.

To muselo být předmětem spousty uživatelů, o které se požádalo, protože právě tento měsíc byly do aplikace aplikovány zaváděcí kontejnery a musím připustit, že vytvoření prototypů s proměnlivým obsahem je mrtvý jednoduchý.

Zde je návod ...

02 z 03

Jak vytvořit vertikální posouvání obsahu v Atomic

Atomic.io

Budete se muset nejprve zaregistrovat na bezplatnou 30denní zkušební verzi a na konci tohoto období vám budou předloženy tři cenové plány.

První věc, kterou potřebujete vědět, je, že vše, co budete dělat, je v prohlížeči a aplikace je přesně zaměřena na prohlížeč Google Chrome. Po přihlášení se dostanete na stránku Projekty . Aplikaci otevřete kliknutím na tlačítko Nový projekt .

Když se objeví rozhraní, uvidíte, že existuje omezený počet nástrojů, možnost přidávat stránky a vrstvy na stránky, kreslicí prvek a na pravé straně panel s vlastnostmi na základě kontextu.
V tomto příkladu jsem začal s předvolbou iPhone 5, která je 320 x 568. Pak otevřete složku obsahující obrázky, které chcete procházet, a přetáhněte je na plátno. Byly automaticky přidány do projektu a můžete vidět, že jsou na jednotlivých vrstvách, pokud kliknete na kartu Vrstvy . Pak jsem vybral nástroj Šipka (Výběr), vybral obrázek a přetáhl ho do nové pozice, aby se mezi ně přidal nějaký prostor. Pak jsem vybral všechny obrázky a klikl na tlačítko Distribute Vertically na panelu nástrojů. Toto rovnoměrně rozložilo obrázky.

Dalším krokem je výběr veškerého obsahu, který chcete procházet, a buď kliknout na tlačítko Kontejner nebo zvolit Vytvoření kontejneru pro posun z tlačítka Skupiny . Jakmile je kontejner vytvořen - uvidíte jej v panelu Vrstvy - klikněte na kontejner a přetáhněte dolní držadlo nahoru na spodní část plátna . Klikněte na tlačítko Náhled v dolní části panelu Vlastnosti a otevře se okno prohlížeče. Pomocí kolečka rolovacího kolečka myši posuňte obsah. Chcete-li se vrátit do projektu, klikněte na tlačítko Upravit v pravém dolním rohu okna prohlížeče.

03 ze dne 03

Jak vytvořit vodorovný posuvníkový obsah v Atomic

Atomic.io

Horizontální posouvání je stejně snadné.

V tomto případě přetáhl sérii obrazů na plátno a přitiskl je proti sobě. Po výběru vybraných snímků pak klepnutím na tlačítko Top Align (Upravit) zajistěte, aby se všechny navzájem srovnaly.

Potom jsem stiskl klávesu Shift a vybral každou vrstvu v panelu Vrstvy. S vybranými snímky jsem klepnul na tlačítko Kontejner av panelu Vlastnosti jsem zvolil Vodorovně v oblasti Chování.

Poté jsem testoval projekt v okně prohlížeče kliknutím na tlačítko Náhled.

I když jsem ukázal, jak vytvořit jednotlivé verze Vertikálního a Horizontálního posouvání, pokud umístíte rolující obsah do kontejneru, můžete mít tyto kontejnery v oddělených částech obrazovky. Například webová stránka by mohla mít vertikální posouvání obsahu v bočním menu a horizontální posouvání obsahu v prezentaci na stejné stránce. Ve skutečnosti může mít kontejner vertikální i vodorovný posun pro položky, jako je například snímač obrázků, který má tucet miniatur.

Chcete-li se dozvědět více o této funkci v atomic.io, podívejte se: