InVision Studio: o prezentare generală și o recenzie

InVision Studio este un instrument de prototipare și animație care vă permite să creați proiecte de ecran avansate, bazate pe vectori, grație straturilor flexibile și a unei pânze infinite. Este considerat unul dintre cele mai bune instrumente de prototipare de înaltă fidelitate. Cu InVision Studio, vă puteți accelera fluxul de lucru; creați prototipuri interesante și interactive; comunicați proiectele dvs. echipei și clienților; testați-vă desenele; și îndepărtați întrebările, preocupările și modificările de proiectare înainte de etapa de dezvoltare.

InVision Studio face parte din suita de instrumente InVision, care include și InVision Cloud, unde vă puteți conecta, stoca și partaja fluxul complet de proiectare a produselor și InVision DSM, un manager de sistem de proiectare și o bibliotecă unde puteți stoca și controla toate componente de marcă și UX. InVision Studio poate fi utilizat pe Mac și Windows. Puteți importa și fișiere Sketch.

Caracteristicile InVision Studio

După descărcarea aplicației InVision Studio, veți obține o gamă de proiecte de creat. După ce alegeți ceea ce doriți să proiectați, veți primi un tur al interfeței.

Pentru a adăuga un strat sau o componentă, faceți clic pe semnul plus din partea de sus. Când adăugați o componentă, toate opțiunile dvs. apar în partea dreaptă.

Să trecem în revistă câteva dintre caracteristicile remarcabile ale InVision.

Redimensionați și decupați imaginile fără măști.

Această caracteristică, numită decupare inteligentă a imaginii, decupează automat imaginile pe măsură ce schimbați dimensiunea. Este similar cu crearea unei imagini de completare Sketch și apoi setarea acesteia la „umplere”, dar în mai puțini pași și într-un mod mai intuitiv. Decuparea inteligentă a imaginii este pentru imaginile cu un punct focal aproape de centru. De asemenea, este mai bine dacă doriți să decupați într-un cerc, dreptunghi sau dreptunghi rotunjit. Pentru imaginile care au un punct focal diferit sau o formă mai interesantă, va trebui să creați o mască pentru a accesa mai multe opțiuni de personalizare.

Sursă: LearnInVisionStudio.com

Remediați elementele în timp ce derulați.

Fixarea antetului și subsolului nu este nouă pentru InVision, dar fixarea altor elemente este. Setați derularea la orizontală, verticală sau ambele, apoi alegeți elementul pe care doriți să îl remediați dând clic pe pictograma pin din dreapta sus.

Conectați mai multe planșe de artă într-o singură animație.

Cronometrul vă oferă control asupra mai multor planșe de artă pe care doriți să le transformați într-o singură animație. Puteți, de asemenea, să buclați o animație pentru a avea ultima placă de artă îndreptată spre prima. Sau puteți avea o animație în mai mulți pași directă către o altă parte a designului. Animațiile complexe de acest gen sunt ideale pentru prezentări video și outros.

Creați declanșatoare de glisare pentru animații de paralaxă.

Declanșatoarele glisante pot crea efecte de paralaxă și alte tipuri de animații care apar pe scroll.

Creați prototipuri receptive fără a scrie cod.

Cu prototipuri receptive, puteți face totul bazat pe procente și redimensiona fiecare element în funcție de dimensiunea planșei. Apoi puteți crea prototipuri care să răspundă la tot felul de ecrane. Acest lucru face mai ușoară crearea de machete de diferite dimensiuni. De asemenea, setarea unui design ca „redimensionabil” în Studio îl va redimensiona automat atunci când este vizualizat în browser.

Sursă: LearnInVisionStudio.com

Oglindați prototipurile pe telefonul dvs.

Dacă doriți să testați o animație sau un prototip pe telefon, puteți să o partajați, să selectați „oglindă” și apoi să scanați codul QR în aplicația mobilă.

Utilizați comenzile rapide de tip schiță.

Dacă utilizați în prezent Sketch, atunci veți fi deja familiarizați cu comenzile rapide folosite de InVision Studio - cam toate sunt la fel, mai ales când vine vorba de inspector, straturi și bara de instrumente.

Comutați între temele deschise și întunecate.

Este posibil ca non-proiectanții să nu-și dea seama cât de utilă este această caracteristică. Când proiectați o interfață ușoară, contrastul adăugat al unei teme întunecate poate fi util (și invers).

Colaborați cu echipa în timp real.

Colaborarea și fluxul de lucru sunt simplificate, iar membrii echipei pot proiecta și comenta în timp real. Cu sincronizarea globală și actualizări în timp real, nimeni nu va ieși din buclă.

Proiectarea cu InVision Studio pe un browser

Vreau să vă arăt rapid cum este să lucrați cu versiunea de browser a InVision Studio. Vom analiza pe scurt proiectarea unei plăci, crearea unui prototip și utilizarea modului cu mână liberă.

Proiectarea unei placi

Centrul dvs. de comandă este în partea dreaptă sus a ecranului. Cele cinci icoane reprezintă:

• Editați antetul
• Setați tipul de aspect
• Setări
• Comentarii
• Acțiune

Editați antetul

M-am jucat puțin cu antetul. După ce ați făcut clic pe „Editați antetul”, au apărut aceste opțiuni:

Am înlocuit imaginea și textul, le-am estompat ușor și am adăugat o ușoară suprapunere pentru a face textul să iasă în evidență. Îmi place în special opțiunea „Dimensiune” - trebuie doar să plasați mouse-ul peste ea și să selectați din trei dimensiuni.

Setați tipul de aspect

Apoi am schimbat tipul de aspect în „Meticulous”. Aceasta este pentru blocurile de conținut de sub antet, care vor apărea pe măsură ce derulați în jos.

Editarea secțiunilor suplimentare

Dacă plasați cursorul în dreapta titlului secțiunii, veți vedea trei pictograme. Săgeata în jos este „Mută secțiunea în jos”, iar „X” este „Elimină titlul secțiunii”. Dacă îl ștergeți și apoi vă răzgândiți, puteți trece peste aceeași zonă și veți avea opțiunea de a adăuga un nou titlu de secțiune.

Dând clic pe semnul plus în dreapta săgeții și pe „X”, veți obține un nou meniu. De la stânga la dreapta, pictogramele reprezintă:

• Adăugați o mostră de culoare
• Adaugă o notiță
• Incarca fisier

Plasând cursorul peste un bloc de conținut, veți vedea din nou opțiunile de redimensionare, ca la antet. Selectarea unei dimensiuni diferite va actualiza automat restul aspectului pentru a remonta blocurile. Dacă faceți clic pe un bloc de conținut, se deschide o fereastră din dreapta.

Plasând cursorul peste una dintre culorile din bara va apărea codul său de culoare. Această fereastră este, de asemenea, în care membrii echipei pot lăsa un comentariu asupra acestui bloc special de design.

Crearea unui prototip

M-am jucat și cu prototipul demo, pentru a vă arăta care sunt opțiunile.

Aici, centrul dvs. de control se află de-a lungul fundului. Începând cu pictograma ochi de la stânga la dreapta, pictogramele sunt după cum urmează:

• Mod de previzualizare
• Modul Build
• Mod comentariu
• Modul Inspectare
• Mod Istorie
• Partajare socială
• Încărcați ecrane
• Configurare
• Stare ecran

Mod Freehand

Modul Freehand începe cu o demonstrație interactivă pentru a vă arăta rapid cum să o utilizați. Apoi, lucrați cu o pânză infinită pentru a vă pune proiectul împreună. Dacă lucrați în aplicație, puteți trimite linkul „Colaborați live cu mâna liberă” către un membru al echipei și acesta poate atrage și adăuga text la proiect în timp real.

Prețuri InVision Studio

Planul gratuit include un prototip cu colaboratori și ecrane nelimitate. Dacă de asta ai nevoie, atunci nu trebuie să plătești niciodată. Demonstrațiile nu sunt luate în considerare până la limită. Dacă proiectați mai mult de un prototip, veți obține șase zile de acces gratuit pentru a crea prototipuri nelimitate. După aceea, va trebui să faceți upgrade pentru a crea și utiliza prototipuri suplimentare. Dacă doriți să faceți upgrade, iată planurile lor:

Gânduri finale

În comparație cu alte instrumente de proiectare, este posibil ca InVision Studio să fie puțin lent și uneori buggy - asta nu înseamnă că este lent în general, doar mai lent (uneori) decât alte instrumente similare, cum ar fi Adobe XD, Figma și Sketch. Nu am experimentat personal această problemă, dar apare foarte mult în recenzii. De asemenea, InVision Studio nu oferă suport pentru pluginuri, deci dacă este ceva important pentru dvs., luați în considerare Sketch.

Totuși, când vine vorba de realizarea de prototipuri, InVision Studio este greu de învins, mai ales dacă trebuie să colaborați cu o echipă. Este posibil să nu fie la fel de puternic ca Adobe XD, dar este totuși unul dintre cele mai bune instrumente de prototipare pe care le veți găsi.

Interfața InVision Studio este ușor de învățat și de utilizat, iar pictogramele sunt elegante și moderne. Există și o mulțime de ajutor, cu tutoriale, tururi și linkuri către mai multe îndrumări. (Acum, acestea fiind spuse, am citit recenzii care spun contrariul, așa că presupun că este o chestiune de gust.) Există foarte puține presupuneri cu InVision Studio și puteți ajunge direct la ceea ce faceți: creați.

Când proiectați, o regulă de aur este să utilizați raportul de aur. Consultați ghidul meu final pentru utilizarea și înțelegerea raportului de aur.

Imagine prezentată prin Visual Generation / shutterstock.com