01 od 03
Najnovija ažuriranja Atomic.io uključuje skrolovane kontejnere
Nekoliko meseci unazad sam pokazao kako se atomic.io može koristiti za pokretanje prototipa . Jedna od ključnih tačaka koju sam napravio u tom delu je "pokazivanje kretanja", a ne ostavljajući ga klijentovoj ili maštovitoj osobi je važno. Zapravo, ovo je postalo tako kritično da se na sceni pojavljuje čitava nova kategorija UX / UI alata. Oni uključuju - Apple Keynote, Adobe's Edge Animate, After Effects i UXPin , da imenuju nekoliko. Novi klinac u bloku je Atomic.io koji je bio otvoren beta kada sam prvi put pisao o proizvodu.
Odlična stvar u vezi sa otvorenim betama je da proizvođaču softvera daju priliku da prikupe povratne informacije korisnika o skupu funkcija, uključujući nedostajuće funkcije, a zatim ih dodaju aplikaciji i testiraju ih pre komercijalnog izdanja. U slučaju atomske, jedna od osobina koju sam stvarno propustila bila je mogućnost pomeranja sadržaja vertikalno ili horizontalno. Ovo bi moglo uključivati stvari poput kartica, slajd šoua ili praktično bilo čega koji bi korisnik povukao ili povukao unutar ograničenja interfejsa aplikacije ili sajta.
Ovo je moralo biti tema koju su mnogi korisnici tražili, jer su se skrolovani kontejneri upravo upoznali sa aplikacijom ovog mjeseca i, moram priznati, stvaranje skrolovog sadržaja u prototipu je mrtvo jednostavno omogućiti.
Evo kako ...
02 od 03
Kako kreirati vertikalni skrolovani sadržaj u atomskoj
Prvo će se trebati prijaviti za besplatni probni period od 30 dana, a na kraju tog perioda će vam biti predstavljeni tri planiranja cijena.
Prva stvar koju trebate znati jeste sve što ćete raditi je u pregledaču i aplikacija je strogo usmerena na Google Chrome. Kada se prijavite, odvešće se na stranicu Projekat . Da biste otvorili aplikaciju, kliknite na dugme New Project .
Kada se pojavi interfejs, videćete da postoji ograničen broj alata, mogućnost dodavanja stranica i slojeva na stranice, artboard i preko desne strane kontekstno osjetljiv paneli svojstava.
U ovom primjeru sam počeo sa postavkama iPhone 5 koji je 320 x 568. Zatim otvorite fasciklu koja sadrži slike za skrolovanje i vuče ih na platnu. Oni su automatski dodati u projekat i možete videti da su na pojedinačnim slojevima ako kliknete na karticu Slojevi . Zatim sam odabrao alatku Arrow (Selection), izabrao sliku i povukao ga na novu poziciju kako bi dodao malo prostora između njih. Zatim sam izabrao sve slike i kliknula dugme Distribute Vertically na traci sa alatkama. Ovo je ravnomerno razmaklo slike.
Sledeći korak je da izaberete sve sadržaje koji želite da se pomiču i da kliknete na dugme Kontejner ili izaberite Kreiraj skrolovu kontejner sa dugmeta grupe . Kada se kontejner kreira - videćete je na panelu Layers - kliknite na kontejner i povucite donju dršku prema gore na dno platna . Kliknite na dugme Preview na dnu ploče Properties (Svojstva) i ovo će pokrenuti prozor pregledača. Pomoću točkića za pomicanje miša pomerite sadržaj. Da biste se vratili na svoj projekat, kliknite na dugme Izmeni u donjem desnom uglu prozora pregledača.
03 od 03
Kako kreirati horizontalni sadržaj za skrolovanje u atomskoj
Horizontalno skrolovanje je isto tako lako postići.
U tom slučaju, vuče niz slika na platnu i podupire jedan protiv drugog. Sa odabranim slikama, potom kliknite na dugme Top Align da biste se uverili da su svi poravnati.
Zatim sam držao taster Shift i izabrao svaki sloj na panelu Layers. Sa odabranim slikama, kliknula sam na dugme Kontejner i na pločama svojstava izabrana je Horizontalno u oblasti Behaviors.
Zatim sam testirao projekat u prozoru Browser klikom na dugme Preview.
Iako sam pokazao kako da kreiram pojedinačne verzije Vertikalne i Horizontalne skrolovanja, sve dok stavljate sadržaj koji može da se kreće u kontejneru, možete imati ove kontejnere u odvojenim oblastima na ekranu. Na primjer, web stranica može imati vertikalno skrolovanje sadržaja u bočnom meniju i horizontalno skrolovanje sadržaja u slajd-show na istoj stranici. U stvari, kontejner može imati i vertikalno i horizontalno skrolovanje za predmete kao što je izbornik slika koji ima desetak ikona sličica.
Da saznate više o ovoj funkciji u atomic.io pogledajte:
- Obaveštenje o blogu
- Tutorijal za skrolovanje kontejnera
- Maskiranje pomoću kontejnera
- Rešavanje problema Skrolovanje kontejnera