Den seneste Atomic.io opdatering omfatter rullende containere
Et par måneder tilbage viste jeg, hvordan atomic.io kan bruges til prototype bevægelse. Et af de vigtigste punkter, jeg lavede i stykket, var at "vise bevægelse" i stedet for at overlade det til klientens eller holdets fantasi er vigtigt. Faktisk er det blevet så kritisk, at en helt ny kategori af UX / UI-værktøjer vises på scenen. De omfatter - Apple Keynote, Adobes Edge Animation, After Effects og UXPin, for at nævne nogle få. Det nye barn i blokken er Atomic.io, som var i åben beta, da jeg først skrev om produktet.
Den pæne ting ved åbne betas er, at de giver softwareproducenten mulighed for at indsamle brugerfeedback på funktionssætet, herunder manglende funktioner, og derefter tilføje dem til applikationen og få dem testet før kommerciel udgivelse. I tilfælde af atom, en funktion jeg virkelig savnede var evnen til at rulle indhold lodret eller vandret. Dette kan omfatte sådanne ting som kort, diasshow eller praktisk talt alt, hvad en bruger ville svinge eller trække inden for rammerne af en apps eller et websteds grænseflade.
Dette skal have været et emne, mange af brugerne bad om, fordi rullende containere blev introduceret til appen i denne måned, og det må jeg indrømme, at skabe rullerbart indhold i prototypen, er let at aktivere.
Her er hvordan …
02 af 03Sådan oprettes lodret rulningsindhold i atom
Du skal først tilmelde dig en gratis 30-dages prøveperiode, og i slutningen af den periode vil du blive præsenteret med tre prisplaner.
Det første du skal vide, er alt arbejde, du skal gøre, i browseren, og appen er rettet mod Google Chrome. Når du logger ind, bliver du taget til Projekter side. For at åbne appen skal du klikke påNy projektknap.
Når grænsefladen vises, vil du se, at der er et begrænset antal værktøjer, evnen til at tilføje sider og lag til siderne, tegnebrættet og, til højre til højre, et kontekstfølsomt egenskabspanel.I dette eksempel startede jeg med en iPhone 5-forudindstilling, der er 320 x 568. Jeg åbner derefter mappen, der indeholder de billeder, der skal rulles, og trækker dem på lærredet. De blev automatisk tilføjet til projektet, og du kan se, at de er på individuelle lag, hvis du Klik på fanen Lag. Jeg valgte derefter Pilværktøjet (Valg), valgte et billede og trak det til en ny position for at tilføje plads mellem dem. Jeg valgte derefter alle billederne og klikket på knappen Distributér vertikalt på værktøjslinjen. Dette adskilt jævnt mellem billederne. Det næste skridt er at vælge alt indhold, der skal rulles, og til enten Klik på Container-knappen eller vælg Opret rullecontainer fra gruppen Knappen pop ned. Når beholderen er oprettet, vil du se den i panelet Lag - klik på beholderen og træk det nederste håndtag opad til bunden af lærredet. Klik på knappen Preview nederst på panelet Egenskaber, og dette vil starte et browservindue. Brug musens scrollhjul til at rulle indholdet. For at vende tilbage til dit projekt, Klik på knappen Rediger nederst til højre i browservinduet. Horisontal rulning er lige så let at opnå. I dette tilfælde trak en række billeder på lærredet og stødte dem mod hinanden. Med de valgte billeder klikker jeg på knappen Top Align for at sikre, at de alle stemmer overens med hinanden. Jeg holdt derefter Shift-tasten nede og valgte hvert lag i panelet Lag. Med de valgte billeder, jeg klikket på Container-knappen og, i Horisontalt valgte felter i området Behaviors. Jeg testede derefter projektet i et browser vindue ved at klikke på knappen Preview. Selv om jeg har vist, hvordan man opretter individuelle versioner af vertikal og vandret rulning, så længe du lægger det rullbare indhold i en beholder, kan du få disse beholdere i separate områder af skærmen. For eksempel kan en webside have lodret rulning af indhold i en sidemenu og vandret rullende indhold i et diasshow på samme side. Faktisk kan en beholder have både lodret og vandret rulning for elementer som en billedvælger, der har et dusin eller så miniaturer. For at lære mere om denne funktion i atomic.io check ud: Sådan oprettes vandret rullende indhold i atom
