01 din 03
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 03
Cum 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 dusi la pagina Proiecte . Pentru a deschide aplicația, faceți clic pe butonul Nou 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. Ele au fost adăugate automat în proiect și puteți vedea că acestea se află pe straturi individuale dacă 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 am făcut clic pe butonul Distribuie vertical pe bara de instrumente. Distribuția uniformă a imaginilor.
Următorul pas este să selectați tot conținutul pe care doriți să îl derulați și fie să faceți clic pe butonul Container, fie să selectați Create Create Scroll Container din butonul Group . Odată ce containerul este creat - îl veți vedea în panoul Straturi - faceți clic pe container și trageți mânerul de jos spre partea de jos a pânzei . Faceți clic pe butonul Previzualizare din partea de jos a panoului Proprietăți și acesta va lansa o fereastră de browser. Utilizați rotița de defilare a mouse-ului pentru a defila conținutul. Pentru a reveni la proiectul dvs., faceți clic pe butonul Editați din partea dreaptă jos a ferestrei browserului.
03 din 03
Cum să creați conținut de derulare orizontală în
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, am făcut clic pe butonul Container și , în Panourile de proprietăți, l-am selectat 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 articole 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:
- Anunțul blogului
- Derulați tutorialul pentru containere
- Mascarea folosind containere
- Depanarea deplasării containerelor