Ultima actualizare Atomic.io include containere scrollabile
Câteva luni în urmă am arătat cum atomic.io poate fi folosit pentru a face prototipul mișcării. Unul dintre punctele cheie pe care le-am făcut în piesă a fost "prezentarea mișcării", mai degrabă decât lăsarea în seama imaginației clientului sau a echipei, este importantă. De fapt, acest lucru a devenit atât de important încât o nouă categorie de instrumente UX / UI apare pe scena. Acestea includ - Apple Keynote, Edge Animate Adobe, After Effects și UXPin, pentru a numi câteva. Noul copil pe bloc este Atomic.io care a fost in beta deschis cand am scris prima data despre produs.
Lucru clar despre beta-urile deschise le oferă producătorului de software posibilitatea de a colecta feedback-ul utilizatorilor cu privire la setul de caracteristici, inclusiv caracteristicile care lipsesc, apoi le adăugați la aplicație și să le testați înainte de lansarea comercială. În cazul atomicului, o caracteristică pe care am pierdut-o într-adevăr a fost abilitatea de a derula conținutul pe verticală sau pe orizontală. Acestea ar putea include lucruri cum ar fi cărți, expuneri de diapozitive sau practic orice lucru pe care un utilizator îl poate glisa sau trage în limitele interfeței unei aplicații sau a unui site.
Acest lucru trebuie să fi fost un subiect pe care mulți dintre utilizatori au cerut-o deoarece containerele derulante au fost introduse în aplicație în această lună și, trebuie să recunosc, crearea de conținut scrollabil în prototip este mort simplu de activat.
Iată cum…
02 din 03Cum să creați un conținut de derulare verticală în atomic
Va trebui să vă înregistrați mai întâi pentru un proces gratuit de 30 de zile și, la sfârșitul acelei perioade, veți primi trei planuri de stabilire a prețurilor.
Primul lucru pe care trebuie să-l cunoașteți este că toată lucrarea pe care o veți face este în browser și aplicația este îndreptată strict la Google Chrome. După ce vă conectați, veți fi dus la proiecte pagină. Pentru a deschide aplicația, faceți clic peButonul nou de proiect.
Când apare interfața, veți vedea că există un număr limitat de instrumente, capacitatea de a adăuga pagini și straturi la pagini, tabloul de bord și, în partea dreaptă, un panou de proprietăți sensibile la context.În acest exemplu, am început cu o presetare iPhone 5, care este de 320 x 568.I deschid apoi folderul care conține imaginile care urmează să fie defilate și târât pe panza. Acestea au fost adăugate automat în proiect și puteți vedea că acestea sunt pe straturi individuale dacă sunteți faceți clic pe fila Straturi. Apoi am selectat instrumentul Arrow (Selecție), am selectat o imagine și l-am târât într-o nouă poziție pentru a adăuga un spațiu între ele. Apoi am selectat toate imaginile și a făcut clic pe butonul Distribuiți vertical pe bara de instrumente. Distribuția uniformă a imaginilor. Următorul pas este să selectați tot conținutul care urmează să fie derulat și la oricare dintre ele faceți clic pe butonul Container sau selectați Create Create Scroll Container din butonul Group te rog. Odată ce containerul este creat - îl veți vedea în panoul Straturi - dați clic pe container și trageți mânerul de jos în sus spre partea inferioară a pânzei. Faceți clic pe butonul Previzualizare în partea inferioară a panoului Proprietăți, iar acest lucru va lansa o fereastră de browser. Utilizați rotița de defilare a mouse-ului pentru a defila conținutul. Pentru a vă întoarce la proiectul dvs., faceți clic pe butonul Editați în partea din dreapta jos a ferestrei browserului. Deplasarea orizontală este la fel de ușor de realizat. În acest caz, a tras o serie de imagini pe pânză și le-a împins unul împotriva celuilalt. Cu imaginile selectate, apoi dau clic pe butonul Top Align (Aliniere de sus) pentru a vă asigura că toate sunt aliniate unele cu altele. Apoi am ținut apăsată tasta Shift și am selectat fiecare strat din panoul Straturi. Cu imaginile selectate, I a făcut clic pe butonul Container și, în panourile Proprietăți, selectate pe orizontală în zona "Comportamente". Am testat apoi proiectul într-o fereastră de browser făcând clic pe butonul Previzualizare. Deși am arătat cum să creați versiuni individuale de derulare verticală și orizontală, atâta timp cât plasați conținutul scrollabil într-un container, puteți avea aceste containere în zone separate ale ecranului. De exemplu, o pagină web ar putea să deruleze în mod vertical conținutul într-un meniu lateral și să deruleze în mod orizontal conținutul într-o expunere de diapozitive pe aceeași pagină. De fapt, un container poate avea derulare atât pe verticală, cât și pe orizontală pentru elemente cum ar fi un picker de imagini care are o minuscule de minuscule. Pentru a afla mai multe despre această caracteristică în atomic.io, verificați: Cum să creați conținut de derulare orizontală în
