Den nyeste Atomic.io Update inkluderer rullbare containere
Noen måneder tilbake viste jeg hvordan atomic.io kan brukes til å prototype bevegelse. Et av de viktigste punktene jeg lagde i stykket var å vise bevegelse i stedet for å forlate det til klientens eller lagets fantasi er viktig. Faktisk har dette blitt så kritisk at en helt ny kategori av UX / UI-verktøy vises på scenen. De inkluderer - Apple Keynote, Adobes Edge Animate, After Effects og UXPin, for å nevne noen. Den nye gutten på blokken er Atomic.io som var i åpen beta da jeg først skrev om produktet.
Den ryddige tingen om åpne betas er at de gir programvareprodusenten muligheten til å samle tilbakemeldinger fra brukeren på funksjonssettet, inkludert manglende funksjoner, og deretter legge dem til applikasjonen og få dem testet før kommersiell utgivelse. I tilfelle av atom, en funksjon jeg virkelig savnet var muligheten til å bla innholdet vertikalt eller horisontalt. Dette kan inkludere slike ting som kort, lysbildefremvisninger eller praktisk talt alt som en bruker ville sveipe eller dra innenfor begrensninger av en apps eller nettstedets grensesnitt.
Dette må ha vært et emne som mange brukere ba om fordi rullbare containere bare ble introdusert til appen denne måneden, og jeg må innrømme at å lage rullbart innhold i prototypen er enkelt å aktivere.
Dette er hvordan…
02 av 03Slik oppretter du vertikal rullingsinnhold i atom
Du må først registrere deg for en gratis 30-dagers prøveversjon, og i slutten av den perioden vil du bli presentert med tre prisplaner.
Det første du må vite er alt arbeidet du skal gjøre i nettleseren, og appen er rettet strengt på Google Chrome. Når du logger inn, blir du tatt til prosjekter side. For å åpne appen klikker du påNy prosjektknapp.
Når grensesnittet vises, vil du se at det er et begrenset antall verktøy, muligheten til å legge til sider og lag til sidene, tegnebrettet og, over til høyre, et kontekstsensitivt egenskaper panel.I dette eksemplet startet jeg med en forhåndsinnstilt iPhone 5 som er 320 x 568. Jeg åpner deretter mappen som inneholder bildene som skal rulles og dras dem på lerretet. De ble automatisk lagt til i prosjektet, og du kan se at de er på individuelle lag hvis du Klikk på Lag-fanen. Jeg valgte deretter Pil-verktøyet (Valg), valgte et bilde og trakk det til en ny posisjon for å legge til litt mellomrom mellom dem. Jeg valgte deretter alle bildene og klikket på knappen Distribuer vertikalt på verktøylinjen. Dette jevnt fordelte bildene. Det neste trinnet er å velge alt innholdet som skal rulles og til enten Klikk på Container-knappen eller velg Opprett rullegardin fra gruppen Knappen pop ned. Når beholderen er opprettet, vil du se den i Lagpanelet - klikk på beholderen og dra bunnhåndtaket oppover til bunnen av lerretet. Klikk på forhåndsvisningsknappen nederst på Egenskaper panelet, og dette vil starte et nettleservindu. Bruk musens rullehjul til å bla innholdet. For å gå tilbake til prosjektet ditt, Klikk på Rediger-knappen nederst til høyre i nettleservinduet. Horisontal rulling er like lett å oppnå. I dette tilfellet slepte en serie bilder på lerretet og stødte dem mot hverandre. Med de valgte bildene klikker jeg på toppjustering-knappen for å sikre at de alle justeres med hverandre. Jeg holdt nede Shift-tasten og valgte hvert lag i Lagpanelet. Med de valgte bildene, jeg klikket på Container-knappen og, i Egenskaper-panelene, valgt Horisontalt i området Behaviors. Jeg testet prosjektet i et nettleservindu ved å klikke på forhåndsvisningsknappen. Selv om jeg har vist hvordan du lager individuelle versjoner av vertikal og horisontal rulling, så lenge du setter rullbart innhold i en beholder, kan du ha disse beholderne i separate områder på skjermen. For eksempel kan en nettside ha vertikalt rullende innhold i en sidemeny og horisontalt rulle innhold i et lysbildefremvisning på samme side. Faktisk kan en beholder ha både vertikal og horisontal rulling for elementer som en bildeväljare som har et dusin eller så miniatyrbilder. For å lære mer om denne funksjonen i atomic.io sjekk ut: Slik lager du horisontalt rullende innhold i atom
