01 z 03
Najnovšia verzia Atomic.io obsahuje posúvateľné kontajnery
O niekoľko mesiacov som ukázal, ako môže byť atomic.io použitý na prototyp pohybu . Jedným z kľúčových bodov, ktoré som urobil v diele, bolo "zobrazenie pohybu", skôr než ho nechať na predstavivosť klienta alebo tímu. V skutočnosti sa to stalo tak kritickým, že na scéne sa objavuje celá nová kategória nástrojov UX / UI. Zahŕňajú - Apple Keynote, Adobe Animation Edge, After Effects a UXPin , aby sme vymenovali niekoľko. Nové dieťa na bloku je Atomic.io, ktorý bol otvorený beta, keď som prvýkrát napísal o produkte.
Úprimná vec týkajúca sa otvorených beta verzií poskytuje výrobcovi softvéru príležitosť zhromaždiť spätnú väzbu používateľov o súbore funkcií vrátane chýbajúcich funkcií a potom ich pridať do aplikácie a nechať ich otestovať pred komerčným uvoľnením. V prípade atómovej, jedna funkcia, ktorú som skutočne chýbal, bola schopnosť posúvať obsah vertikálne alebo horizontálne. Môžu zahŕňať také veci, ako sú karty, prezentácie alebo prakticky čokoľvek, čo by mohol používateľ posunúť prstom alebo pretiahnuť v medziach rozhrania aplikácie alebo lokality.
Toto muselo byť predmetom mnohých používateľov, o ktoré sa žiadalo, pretože tento mesiac práve zaviedli do aplikácie škálovateľné kontajnery a musím pripustiť, že vytváranie rollovateľného obsahu v prototype je jednoducho jednoduché na to, aby bolo možné.
Tu je ako ...
02 z 03
Ako vytvoriť vertikálny posúvanie obsahu v Atomic
Budete sa najskôr zaregistrovať na bezplatnú 30-dňovú skúšobnú verziu a na konci tohto obdobia budete mať k dispozícii tri cenové plány.
Prvá vec, ktorú potrebujete vedieť, je, že práca, ktorú budete robiť, je v prehliadači a aplikácia je striktne zameraná na prehliadač Google Chrome. Po prihlásení sa dostanete na stránku Projekty . Aplikáciu otvoríte kliknutím na tlačidlo Nový projekt .
Keď sa objaví rozhranie, uvidíte obmedzený počet nástrojov, možnosť pridávať stránky a vrstvy na stránky, grafickú tabuľu a vpravo panel s vlastnosťami citlivými na kontext.
V tomto príklade som začal s predvoleným zariadením iPhone 5, ktorý je 320 x 568. Potom otvorím priečinok obsahujúci obrázky, ktoré sa majú posúvať, a presunúť ich na plátno. Boli automaticky pridané do projektu a môžete vidieť, že sú na jednotlivých vrstvách, ak kliknete na kartu Vrstvy . Potom som vybral nástroj Šípka (výber), vybral som obrázok a presunul ho do novej pozície, aby som medzi nimi pridal určitý priestor. Potom som vybral všetky obrázky a klikol na tlačidlo Distribúcia vertikálne na paneli s nástrojmi. Toto rovnomerne rozložilo obrázky.
Ďalším krokom je výber celého obsahu, ktorý sa má posúvať, a buď kliknúť na tlačidlo Kontajner alebo vybrať možnosť Vytvoriť kontajner na posúvanie z poľa Skupiny . Po vytvorení kontajnera sa zobrazí v paneli Vrstvy - kliknite na kontajner a potiahnite spodnú rukoväť smerom hore do spodnej strany plátna . Kliknite na tlačidlo Ukážka v spodnej časti panela Vlastnosti a otvorí sa okno prehliadača. Pomocou kurzorového kolieska myši posúvajte obsah. Ak sa chcete vrátiť k projektu, kliknite na tlačidlo Upraviť v pravom dolnom rohu okna prehliadača.
03 z 03
Ako vytvoriť vodorovný rolovací obsah v
Horizontálne posúvanie je rovnako jednoduché.
V tomto prípade pretiahol sériu obrazov na plátno a oprel ich proti sebe. S vybranými obrázkami potom kliknem na tlačidlo Top Align (Zarovnať na začiatok), aby ste sa uistili, že sú navzájom zarovnané.
Potom som stlačil kláves Shift a vybral každú vrstvu v paneli Vrstvy. S vybranými obrázkami som klikol na tlačidlo Kontajner av paneli Vlastnosti som v oblasti Správanie zvolil Horizontálne .
Potom som testoval projekt v okne prehliadača kliknutím na tlačidlo Ukážka.
Aj keď som ukázal, ako vytvoriť jednotlivé vertikálne vertikálne a horizontálne posúvanie, pokiaľ umiestnite posuvný obsah do kontajnera, môžete mať tieto kontajnery v oddelených oblastiach obrazovky. Napríklad webová stránka by mohla vertikálne posúvať obsah v bočnom menu a horizontálne posúvať obsah v prezentácii na tej istej stránke. V skutočnosti môže mať kontajner vertikálne i horizontálne posúvanie pre položky, ako je napríklad nástroj na výber obrázkov, ktorý má tucet miniatúr.
Viac informácií o tejto funkcii v atomic.io nájdete:
- Oznámenie blogu
- Posúvanie kontajnera tutorial
- Maskovanie pomocou kontajnerov
- Riešenie problémov s rolovaním kontajnerov