Nejnovější aktualizace Atomic.io obsahuje skrolovatelné kontejnery
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 03Jak vytvořit vertikální posouvání obsahu v Atomic
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. Jakmile se přihlásíte, budete odvezeni Projekty stránka. Aplikaci otevřete kliknutím naTlačí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 vy klikněte 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 klikněte na tlačítko Distribuovat vertikálně 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 do kteréhokoli z nich klikněte na tlačítko Kontejner nebo vyberte možnost Vytvořit kontejner pro posun z tlačítka Skupiny pop dolů. Jakmile je kontejner vytvořen - uvidíte jej v panelu Vrstvy - klepněte na kontejner a přetáhněte dolní držadlo směrem nahoru ke spodní části 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 k projektu, klikněte na tlačítko Upravit v pravém dolním rohu okna prohlížeče. 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. Při výběru vybraných snímků jsem klikněte na tlačítko Kontejner a, na panelech Vlastnosti vybrané Horizontálně 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: Jak vytvořit vodorovný posuvníkový obsah v Atomic
