Den senaste Atomic.io Update innehåller rullbara behållare
Några månader tillbaka visade jag hur atomic.io kan användas för att prototypa rörelse. En av de viktigaste punkterna jag gjorde i stycket var att "visa rörelse" istället för att lämna det till klientens eller lagets fantasi är viktigt. Det har faktiskt blivit så viktigt att en helt ny kategori av UX / UI-verktyg visas på scenen. De inkluderar - Apple Keynote, Adobes Edge Animation, After Effects och UXPin, för att nämna några. Det nya barnet på blocket är Atomic.io som var i öppen beta när jag först skrev om produkten.
Den snygga grejen om öppna betas är att de ger mjukvaruleverantören möjlighet att samla in användaråterkoppling på funktionsuppsättningen, inklusive saknade funktioner, och sedan lägga till dem i programmet och få dem testat före kommersiell release. När det gäller atom, var en egenskap som jag verkligen saknat möjligheten att rulla innehåll vertikalt eller horisontellt. Det kan innehålla sådana saker som kort, bildspel eller nästan vad som helst som en användare skulle dra eller dra inom ramen för en app eller webbplatsens gränssnitt.
Detta måste ha varit ett ämne som många användare bad om eftersom rullbara behållare just introducerades i appen den här månaden och jag måste erkänna att skapa rullbart innehåll i prototypen är död enkelt att aktivera.
Här är hur…
02 av 03Hur man skapar vertikalt rullningsinnehåll i atom
Du måste först registrera dig för en gratis 30-dagars provperiod, och i slutet av den perioden kommer du att presenteras med tre prisplaner.
Det första du behöver veta är allt arbete du ska göra i webbläsaren och appen riktar sig strängt till Google Chrome. När du är inloggad kommer du att tas till projekt sida. För att öppna appen klickar du påNy projektknapp.
När gränssnittet visas kommer du att se att det finns ett begränsat antal verktyg, möjligheten att lägga till sidor och lager till sidorna, tavlan och över till höger en kontextkänslig egenskapspanel.I det här exemplet började jag med en förinställd iPhone 5 som är 320 x 568. Jag öppnar sedan mappen som innehåller bilderna som ska rullas och släpade dem på duken. De läggs automatiskt till i projektet och du kan se att de finns på enskilda lager om du klicka på fliken Lager. Jag valde sedan pilverktyget (Val), markerade en bild och slog den till en ny position för att lägga till lite mellanslag mellan dem. Jag valde sedan alla bilder och klickade på knappen Distribute Vertically på verktygsfältet. Detta fördelade jämnt bilderna. Nästa steg är att välja allt innehåll som ska rullas och till antingen klicka på Container-knappen eller välj Skapa Scroll Container från gruppen Knapp pop ner. När behållaren är skapad kommer du att se den i panelen Lager - klicka på behållaren och dra det nedre handtaget uppåt till undersidan av duken. Klicka på knappen Förhandsgranska längst ner på panelen Egenskaper och detta startar ett webbläsarfönster. Använd musens rullhjul för att bläddra i innehållet. För att återvända till ditt projekt, klicka på knappen Redigera längst ned till höger i webbläsarfönstret. Horisontell rullning är lika lätt att åstadkomma. I det här fallet slog en serie bilder på duken och stötte dem mot varandra. Med de valda bilderna klickar jag på toppjustera-knappen för att säkerställa att de alla ligger i linje med varandra. Jag höll sedan ned Shift-tangenten och valde varje lager i panelen Lager. Med de valda bilderna, jag klickade på Container-knappen och, i Egenskaper paneler, valda Horisontellt i området Behavior. Jag testade sedan projektet i ett webbläsarfönster genom att klicka på förhandsgranskningsknappen. Även om jag har visat hur man skapar enskilda versioner av vertikal och horisontell rullning, så länge du lägger in det rullbara innehållet i en behållare, kan du få dessa behållare i separata delar av skärmen. En webbsida kan till exempel ha vertikalt rullande innehåll i en sidovy och horisontellt rulla innehåll i en bildspel på samma sida. Faktum är att en behållare kan ha både vertikal och horisontell rullning för objekt som en bildväljare som har ett dussin eller så miniatyrbilder. För att lära dig mer om den här funktionen i atomic.io kolla in: Hur man skapar horisontellt rullningsinnehåll i atom
