Prototip cu ușurință – Un tutorial InVision Studio

Dacă nu ați dormit în prima jumătate a anului 2018, probabil că erați foarte conștienți de anticiparea febrilă din comunitatea de design interactiv care a condus la lansarea aplicației InVision Studio. InVision este cel mai bine cunoscut pentru suitele lor de plugin-uri Sketch și Photoshop, cum ar fi Craft, și pentru că este platforma ideală pentru transformarea rapidă a design-urilor de interfețe statice în prototipuri pe care se poate face clic și se poate partaja. Într-un pas îndrăzneț, anul trecut, au anunțat dezvoltarea propriului software de design digital pentru a concura cu favoritele din industrie precum Sketch și Figma.

Produsul a fost promovat ca fiind revoluționar și a făcut niște promisiuni importante pentru un flux de lucru fără întreruperi de la design la prototip, funcționalitate complexă de interacțiune, animație tranzițională uluitoare - și ar fi gratuit. InVision a lansat câteva videoclipuri teaser și demonstrații destul de interesante pentru a-i impresiona pe designeri. Anticiparea a crescut și mai mult, deoarece lansarea inițială beta a fost respinsă de mai multe ori la începutul anului.

Pe măsură ce mai mulți designeri au început să se joace cu software-ul, apar tot mai multe tutoriale și ghiduri pentru a demonstra elementele de bază ale instrumentului de proiectare a interfeței aplicației. InVision a creat, de asemenea, câteva proprii pentru a integra utilizatorii la elementele de bază ale InVision Studio.

Chiar dacă versiunile cu acces timpuriu primesc recenzii mixte, Studio are câteva caracteristici interesante și mult potențial. Acest tutorial are scopul de a prezenta utilizatorii timpurii prin elementele de bază ale prototipării InVision Studio și să adauge câteva animații de prototipuri de bază.

Creați în cel mai scurt timp un prototip interactiv cu tranziții animate, urmând acest tutorial InVision Studio!

Turul Nickel al spațiului de lucru InVision Studio

O mare parte din Studio ar trebui să fie familiară pentru designerii UI și pentru oricine a folosit software de design digital precum Sketch. O mare parte din spațiul de lucru împrumută indicii din interfața de utilizare a lui Sketch, cu panoul din stânga care adăpostește pagini, straturi și grupuri; panoul lateral drept pentru inspectori; și o bară de instrumente contextuală în partea de sus.

Veți găsi, de asemenea, multe dintre aceleași instrumente, chiar dacă unele funcționalități sunt denumite diferit. De exemplu, un „simbol” Sketch este numit o componentă în Studio.

Panoul de interacțiuni

În scopul acestui tutorial, ne vom concentra pe utilizarea instrumentelor de interacțiune pentru a crea puncte interactive între ecrane și pentru a crea tranziții fluide între ele. O mare parte din magie se va întâmpla în „panoul de interacțiuni” din partea dreaptă a spațiului de lucru Studio.

Modul simplu de a crea interacțiuni este să selectați un strat sau un grup de declanșare și să apăsați „c” de pe tastatură (sau să faceți clic pe pictograma fulger din bara de instrumente de sus), care inițiază un bici albastru cu care să selectați un ecran de destinație. Studio va cere apoi designerului să selecteze gestul sau intrarea utilizatorului care declanșează evenimentul și să aleagă între un set de tranziții prestabilite sau o tranziție de „mișcare”.

Animație InVision Studio

Există multe elemente pentru un design excelent de interacțiune, dar utilizarea corectă a tranzițiilor animate și a microinteracțiunilor într-o interfață cu utilizatorul este mai mult decât o simplă aranjare.

Ele sporesc gradul de utilizare și pot face diferența între un produs iubit și o mizerie confuză.

Pe parcursul acestui tutorial, folosim o combinație de tranziții prestabilite și tranziții de mișcare pentru a crea prototipul aplicației noastre. Tranzițiile prestabilite sunt destul de simple și vor fi familiare utilizatorilor platformei prototip online InVision.

Regulile care guvernează modul în care funcționează tranzițiile de mișcare între ecrane sunt puțin mai misterioase. Deși există o mulțime de considerații evidente ale designerului luate în considerare la construirea instrumentului - de exemplu, conectarea automată a elementelor între ecrane - este nevoie de câteva încercări și erori pentru a obține anumite efecte atunci când adăugați mișcare la tranziții. Sperăm că acest tutorial îi va ajuta pe designeri să devină puțin mai confortabili să experimenteze cu ceea ce are de oferit InVision Studio.

Lucruri de reținut

Studio promite o mulțime de funcționalități inteligente în jurul animațiilor. De exemplu, poate crea tranziții de mișcare între obiectele duplicate de la o planșă de artă la alta atunci când sunt conectate printr-o interacțiune. Designerii pot modifica apoi aceste animații după cum doresc pentru a realiza niște efecte frumoase de relaxare și alte efecte de mișcare. Învățarea excentricităților modului în care funcționează atunci când încercați să faceți tranziția unui teanc de obiecte într-o anumită secvență poate necesita răbdare și puțină practică.

Tranzițiile în mișcare funcționează cel mai bine cu obiectele de pe planșele de artă care au fost duplicate unul de altul. Funcția de animație este „inteligentă” prin faptul că recunoaște obiectele duplicate cu aceleași nume de straturi, așa că aveți grijă să nu eliminați sau redenumiți straturi cheie între ecrane (care este o modalitate frustrant de ușor de a strica o animație grozavă).

Rețineți că Studio este încă la început, așa că designerii ar trebui să fie pregătiți să întâmpine o parte echitabilă de erori. De exemplu, butonul „previzualizare” lansează o previzualizare interactivă a prototipului, dar ocazional interacțiunile nu se declanșează deloc, caz în care va trebui să salvați și să redeschideți fișierul.

În timp ce învățam software-ul, mi s-a părut că mai mult de un fișier se corupă în mod ciudat - ștergând toate tablourile de desen și făcând toate panourile de instrumente inaccesibile. Am raportat eroarea și am învățat să salvez mai multe versiuni ale fișierelor mele pentru a nu pierde prea multă muncă.

În cele din urmă, întotdeauna ajută să fii organizat. Când creați un prototip pe orice platformă, fie că este vorba de Studio sau Sketch sau Marvel, urmărirea obiectelor și a etichetelor straturilor va economisi timp și frustrare, mai ales dacă lucrați cu o echipă sau predați fișierul la un moment dat. Luați notă de ordonarea straturilor și a grupurilor de straturi atunci când construiți interacțiuni; acest lucru face adesea o mare diferență în obținerea efectului de animație dorit.

Tutorialul!

Sa incepem! Dacă nu ați făcut-o deja, accesați InVision Studio pentru a descărca o versiune cu acces anticipat a aplicației Studio. După ce aveți InVision Studio pe computer, descărcați fișierele tutorial aici. Odată ce lansați software-ul Studio, alegeți să deschideți fișierul de oriunde l-ați salvat.

Pasul 1: Deschideți fișierul și aruncați o privire

Acest prototip interactiv va fi pentru o aplicație mobilă despre artiștii moderni de la sfârșitul secolului al XIX-lea până la începutul secolului al XX-lea. Toate ecranele au fost create în avans folosind o duplicare atentă a planșei de grafică, care este necesară pentru utilizarea corectă a funcției de tranziție a mișcării.

Ierarhia are 3 niveluri de profunzime, începând de la „Acasă”, apoi în biografia fiecărui artist în parte și, în final, până la un carusel de patru exemple ale lucrării artistului. Veți observa că tabloul de artă „Acasă” are o pictogramă mică a unei case, care desemnează tabloul de artă de pornire pentru prototip.

Tutorialul se va concentra pe crearea de căi de navigare simple care conectează aceste trei niveluri de adâncime. Vom folosi instrumentele de interacțiune și tranziție ale Studio pentru a face prototipul să se simtă ca o aplicație interactivă corespunzător.

Pasul 2: Conectați Tila artistului la Biografia artistului

Accesați prima planșă de artă. Luați un moment pentru a extinde grupul de straturi „Artist Tile 1”. Veți observa trei grupuri imbricate: unul pentru numele artistului, unul pentru o imagine prezentată și un al treilea strat care conține „Text bio”.

Privind ecranul tabloului de desen, al treilea grup de straturi nu este imediat vizibil din cauza modului în care Studio gestionează tranzițiile de mișcare - la care vom ajunge într-un moment. Doar notează-l pentru moment.

Selectați grupul de straturi care conține toate aceste elemente: „Artist Tile 1”. Cu acest grup selectat, apăsați „c” de pe tastatură (sau faceți clic pe pictograma fulger din bara de instrumente de sus) pentru a iniția instrumentul de interacțiune. Cursorul dvs. va fi urmat de un bici albastru pentru a alege ecranul de destinație pentru interacțiunea dvs.

Selectați tabloul de desen imediat din dreapta intitulat „Artist Bio 1” și vi se va solicita să alegeți declanșatorul și tipul de tranziție. Pentru declanșator, alegeți „Atingeți”, apoi alegeți „Mișcare” ca tranziție. Puteți alege apoi durata tranziției. Să setăm această tranziție la 2 secunde și să apăsăm „Salvare”.

Faceți clic pe butonul de redare pentru a previzualiza prototipul. Ați văzut cum se mișcă lucrurile de-a lungul ecranului și cum stratul bio a alunecat în jos de sub imagine? Felicitări, ați creat o tranziție de interacțiune destul de elegantă!

Pasul 3: Conectați un buton Înapoi la ecranul de pornire

Acum ar trebui să oferim utilizatorilor o modalitate de a reveni la ecranul de pornire. Accesați tabloul de grafic „Artist Bio 1” și selectați componenta „btn_back” din colțul din stânga sus. Creați un declanșator aici apăsând „c” și selectând tabloul de desen „Acasă”.

Din nou, să setăm declanșatorul la „Atingeți”, interacțiunea la „Mișcare” și durata la 2 secunde. Faceți clic pe Previzualizare și bucurați-vă de tranzițiile de deschidere și închidere pe care tocmai le-ați creat. Observați cum animația declanșată prin închiderea plăcii este o inversare a animației redate la deschiderea plăcii.

Pasul 4: Conectați Galeria

Dacă luați notă de numele straturilor din primul și al doilea plan de lucru, este posibil să observați că sunt identice. Acest lucru se datorează faptului că, așa cum am menționat anterior, animațiile Studio leagă automat straturile duplicate de la o planșă de desen la alta dacă au un nume. Schimbarea numelui acestor straturi va întrerupe legătura de animație, iar tranziția va fi implicită la o decolorare simplă, mai ales provocatoare pentru cei obsedați de etichete semnificative ale straturilor.

Dorim să aplicăm încă o tranziție de mișcare îngrijită pentru deschiderea galeriei de imagini carusel. Tabla de grafică intitulată „Artist 1 - Imaginea 1” conține elemente duplicate din tabloul de grafic „Artist Bio 1”, redimensionate pentru a afișa mai mult din imaginea exemplu.

Începeți prin a face clic în stratul „Artist Bio 1” pentru a selecta grupul „Featured Image”. Acesta va fi declanșatorul deschiderii galeriei. Creați o interacțiune „Atingeți” aici conectându-vă la prima panou de desen din galerie și selectați „Mișcare”. De data aceasta, setați durata să fie puțin mai rapidă: 1 secundă.

Pentru a crea o tranziție plăcută pentru închiderea galeriei, pur și simplu selectați stratul butonului de închidere din tabloul de grafic „Artist 1 - Imagine 1” și conectați-l înapoi la tabloul de grafic „Artist Bio 1”, cu aceleași setări ca înainte.

Previzualizați această animație și minunați-vă de cât de frumos trece prototipul de la ecranul bio al artistului la caruselul de imagini și înapoi. Acum am conectat navigarea prin trei niveluri ale ierarhiei aplicației noastre!

Pasul 5: Conectați toate imaginile din galerie

Am făcut majoritatea tranzițiilor de mișcare pe care va trebui să le facem și acum vom începe să folosim unele dintre presetările de animație pentru restul galeriei.

Modelul de interacțiune de aici pentru ca utilizatorul nostru să răsfoiască acest carusel de imagini va fi un gest familiar de glisare. Vestea bună este că această ultimă parte este destul de simplă și nu va dura deloc folosind presetările de animație ale Studio.

Selectați panoul de grafică „Artist 1 - Imaginea 1” și creați o interacțiune care duce la următoarea planșă de grafică, „Artist 1 - Imaginea 2”. De data aceasta, setați declanșatorul la „Glisați spre stânga”. Pentru tranziție, selectați „Preset” și alegeți „Apăsați stânga” din meniul drop-down.

Pentru a crea o interacțiune inversă, selectați tabloul de grafic „Artist 1 - Imagine 2” și conectați-l la tabloul de grafic anterior, doar de data aceasta folosind un gest „Swipe Right” și tranziția „Push Right”.

Repetați acest model cu următoarele câteva plăci de artă, conectând panourile de artă pentru Imaginea 2 la Imaginea 3 și Imaginea 3 la Imaginea 4. Ușor!

Pentru a face acest lucru și mai realist, haideți să închidem bucla dintre Imaginea 1 și Imaginea 4. Selectați planșa pentru imaginea 4 și conectați-o la Imaginea 1. Alegeți un declanșator „Swipe Left” și tranziția „Push Left” așa cum ați face pentru următoarea imagine dintr-o serie. Conectați tabloul de grafică Imagine 1 la Imaginea 4 cu inversul și presto - ați creat o galerie în buclă!

În cele din urmă, selectați fiecare dintre componentele „btn_close” din tablourile de grafică ale galeriei de imagini și conectați-le înapoi la tabloul de desen bio. Puteți alege orice tranziție doriți aici, dar am optat pentru „Push Right”.

Până acum aveți o cale de navigare destul de bine ordonată de arătat. Faceți clic pe previzualizare și încercați-l; Prototipul dvs. ar trebui să funcționeze la fel ca gif-ul de la începutul acestui tutorial. Dă-ți o palmă bine câștigată pe spate.

Pasul 6: Repetați

Acum că ați conectat toate ecranele pentru primul exemplu de artist cu interacțiuni elegante, repetați pașii pentru celelalte două seturi de ecrane din fișierul tutorial. Sunt organizate într-un mod similar și va fi o bună practică pentru a vă obișnui cu modul în care funcționează Studio.

Pasii urmatori

Sperăm că acest tutorial a oferit o introducere la unele dintre caracteristicile interesante ale prototipurilor InVision Studio. În timp ce înțelegeți Studio, ar trebui să încercați să modificați tranzițiile folosind instrumentele avansate de animație. Experimentați cu celelalte instrumente din spațiul de lucru și încercați să urmați alte tutoriale InVision Studio. Cu practică, puteți deveni unul dintre guru de design InVision Studio.

Este posibil să fi întâlnit unele erori sau un comportament neașteptat pe parcurs, dar aceasta este natura încercării de software nou. Oamenii de la InVision au fost foarte receptivi la feedback și vor continua cu siguranță să îmbunătățească Studio, făcându-l din ce în ce mai stabil și mai util.

Studio este un instrument distractiv de încercat și nu există niciun motiv să nu experimentați cu un instrument gratuit de prototipare a aplicației. Deși nu este probabil să înlocuiască software-ul folosit ca Sketch în comunitatea de design de astăzi, are un potențial foarte mare.

Citiri suplimentare pe Blogul Toptal Design:

• Perfecționați-vă procesul de design UX – Un ghid pentru proiectarea prototipului
• Puterea Figma ca instrument de proiectare
• Prototiparea cu date reale - Un tutorial Framer
• Ghidul fundamental pentru utilizarea mobilă
• Cele mai bune practici și greșeli în designul aplicațiilor mobile