InVision Studio: una panoramica e una recensione

InVision Studio è uno strumento di prototipazione e animazione che ti consente di creare rapidamente progetti di schermi avanzati basati su vettori grazie a livelli flessibili e una tela infinita. È considerato uno dei migliori strumenti di prototipazione ad alta fedeltà in circolazione. Con InVision Studio, puoi velocizzare il tuo flusso di lavoro; creare prototipi interessanti e interattivi; comunicare i tuoi progetti al team e ai clienti; prova i tuoi progetti; e raddrizzare domande, preoccupazioni e modifiche progettuali prima della fase di sviluppo.

InVision Studio fa parte della suite di strumenti InVision, che include anche InVision Cloud, in cui è possibile connettere, archiviare e condividere il flusso di lavoro completo di progettazione del prodotto, e InVision DSM, un gestore di sistemi di progettazione e una libreria in cui è possibile archiviare e controllare tutti i propri marchio e componenti UX. InVision Studio può essere utilizzato su Mac e Windows. Puoi anche importare file di schizzo.

Caratteristiche di InVision Studio

Dopo aver scaricato l'app InVision Studio, avrai una scelta di progetti da creare. Dopo aver scelto ciò che vuoi progettare, avrai un tour dell'interfaccia.

Per aggiungere un livello o un componente, fai clic sul segno più in alto. Quando aggiungi un componente, tutte le opzioni vengono visualizzate sulla destra.

Esaminiamo alcune delle caratteristiche degne di nota di InVision.

Ridimensiona e ritaglia le immagini senza maschere.

Questa funzione, chiamata ritaglio intelligente delle immagini, ritaglia automaticamente le immagini quando cambi le dimensioni. È simile alla creazione di un riempimento immagine in Sketch e quindi all'impostazione di "riempimento", ma in meno passaggi e in un modo più intuitivo. Il ritaglio intelligente delle immagini è per le immagini con un punto focale vicino al centro. È anche meglio se vuoi ritagliare un cerchio, un rettangolo o un rettangolo arrotondato. Per le immagini che hanno un punto focale diverso o una forma più interessante, ti consigliamo di creare una maschera per accedere a più opzioni di personalizzazione.

Fonte: LearnInVisionStudio.com

Correggi gli elementi mentre scorri.

La correzione dell'intestazione e del piè di pagina non è una novità per InVision, ma lo è la correzione di altri elementi. Imposta lo scorrimento su orizzontale, verticale o entrambi, quindi scegli l'elemento che desideri correggere facendo clic sull'icona a forma di puntina in alto a destra.

Collega più tavole da disegno in un'unica animazione.

Il timer ti dà il controllo su più tavole da disegno che vuoi trasformare in un'animazione. Puoi anche ripetere un'animazione per fare in modo che l'ultima tavola da disegno punti alla prima. Oppure puoi avere un'animazione in più passaggi diretta a un'altra parte del tuo progetto. Animazioni complesse come questa sono ideali per intro e outro video.

Crea trigger di scorrimento per le animazioni di parallasse.

I trigger di scorrimento possono creare effetti di parallasse e altri tipi di animazioni che si verificano durante lo scorrimento.

Crea prototipi reattivi senza scrivere codice.

Con i prototipi reattivi, puoi rendere tutto basato sulla percentuale e ridimensionare ogni elemento in base alle dimensioni della tavola da disegno. È quindi possibile creare prototipi che rispondono a tutti i tipi di schermi. Ciò semplifica la creazione di prototipi di varie dimensioni. Inoltre, l'impostazione di un design come "ridimensionabile" in Studio lo ridimensionerà automaticamente quando viene visualizzato nel browser.

Fonte: LearnInVisionStudio.com

Specchia i prototipi sul tuo telefono.

Se vuoi testare un'animazione o un prototipo sul tuo telefono, puoi condividerlo, selezionare "specchio" e quindi scansionare il codice QR nell'app mobile.

Usa scorciatoie simili a Sketch.

Se attualmente utilizzi Sketch, avrai già familiarità con le scorciatoie utilizzate da InVision Studio: sono quasi tutte uguali, specialmente quando si tratta di inspector, livelli e barra degli strumenti.

Alterna tra temi chiari e scuri.

I non designer potrebbero non rendersi conto di quanto sia utile questa funzione. Quando stai progettando un'interfaccia chiara, il contrasto aggiunto di un tema scuro può essere utile (e viceversa).

Collabora con il team in tempo reale.

La collaborazione e il flusso di lavoro sono semplificati e i membri del team possono progettare e commentare in tempo reale. Con la sincronizzazione globale e gli aggiornamenti in tempo reale, nessuno sarà fuori dal giro.

Progettare con InVision Studio su un browser

Voglio mostrarti rapidamente com'è lavorare con la versione browser di InVision Studio. Esamineremo brevemente la progettazione di una scheda, la creazione di un prototipo e l'utilizzo della modalità a mano libera.

Progettare una tavola

Il tuo centro di comando è in alto a destra dello schermo. Le cinque icone stanno per:

• Modifica intestazione
• Imposta tipo di layout
• Impostazioni
• Commenti
• Condividere

Modifica intestazione

Ho giocato un po' con il colpo di testa. Dopo aver fatto clic su "Modifica intestazione", sono apparse queste opzioni:

Ho sostituito l'immagine e il testo, l'ho leggermente sfocato e ho aggiunto una leggera sovrapposizione per far risaltare il testo. Mi piace particolarmente l'opzione "Dimensione": basta passare il mouse su di essa e selezionare tra tre dimensioni.

Imposta tipo di layout

Ho quindi cambiato il tipo di layout in "Meticoloso". Questo è per i blocchi di contenuto sotto l'intestazione, che verranno visualizzati mentre scorri verso il basso.

Modifica di sezioni aggiuntive

Se passi con il mouse a destra del titolo della sezione, vedrai tre icone. La freccia giù è "Sposta sezione giù" e la "X" è "Rimuovi titolo sezione". Se lo elimini e poi cambi idea, puoi semplicemente passare il mouse sulla stessa area e avrai la possibilità di aggiungere un nuovo titolo di sezione.

Facendo clic sul segno più a destra della freccia e sulla "X", otterrai un nuovo menu. Da sinistra a destra, le icone stanno per:

• Aggiungi un campione di colore
• Aggiungi una nota
• Caricare un file

Passando con il mouse su un blocco di contenuto, vedrai di nuovo le opzioni di ridimensionamento, come con l'intestazione. La selezione di una dimensione diversa aggiornerà automaticamente il resto del layout per rimontare i blocchi. Facendo clic su un blocco di contenuto si apre una finestra sulla destra.

Passando il mouse su uno dei colori nella barra verrà mostrato il suo codice colore. Questa finestra è anche il punto in cui i membri del team possono lasciare un commento su questo particolare blocco di progettazione.

Creazione di un prototipo

Ho anche giocato con la demo del prototipo, solo per mostrarti quali sono le opzioni.

Qui, il tuo centro di controllo è in fondo. A partire dall'icona a forma di occhio da sinistra a destra, le icone sono le seguenti:

• Modalità anteprima
• Modalità di costruzione
• Modalità commento
• Modalità di ispezione
• Modalità Storia
• Condivisione sociale
• Carica schermate
• Configurazione
• Stato dello schermo

Modalità a mano libera

La modalità a mano libera inizia con una demo interattiva per mostrarti rapidamente come utilizzarla. Quindi, lavori con una tela infinita per mettere insieme il tuo progetto. Se stai lavorando nell'app, puoi inviare il link "Collabora dal vivo con Freehand" a un membro del team e loro possono disegnare e aggiungere testo al progetto in tempo reale.

Prezzi di InVision Studio

Il piano gratuito include un prototipo con collaboratori e schermi illimitati. Se è tutto ciò di cui hai bisogno, non dovrai mai pagare. Le demo non contano per il limite. Se progetti più di un prototipo, avrai sei giorni di accesso gratuito per creare prototipi illimitati. Successivamente, dovrai eseguire l'aggiornamento per creare e utilizzare ulteriori prototipi. Se vuoi aggiornare, ecco i loro piani:

Pensieri finali

Rispetto ad altri strumenti di progettazione, potresti trovare InVision Studio un po' lento e talvolta pieno di bug, ma questo non vuol dire che sia lento in generale, solo più lento (a volte) di altri strumenti simili, come Adobe XD, Figma e Sketch. Non ho riscontrato personalmente questo problema, ma compare molto nelle recensioni. Inoltre, InVision Studio non offre supporto per i plug-in, quindi se è qualcosa che è importante per te, considera invece Sketch.

Quando si tratta di prototipazione, tuttavia, InVision Studio è difficile da battere, soprattutto se devi collaborare con un team. Potrebbe non essere potente come Adobe XD, ma è comunque uno dei migliori strumenti di prototipazione che troverai.

L'interfaccia di InVision Studio è facile da imparare e da usare e le icone sono eleganti e moderne. C'è anche molto aiuto, con tutorial, tour e collegamenti a ulteriori indicazioni. (Ora, detto questo, ho letto recensioni che dicono il contrario, quindi suppongo che sia una questione di gusti.) Ci sono pochissime congetture con InVision Studio e puoi arrivare direttamente a quello che sei lì per fare: creare.

Quando si progetta, una regola d'oro è usare la sezione aurea. Dai un'occhiata alla mia guida definitiva all'utilizzo e alla comprensione della sezione aurea.

Immagine in primo piano tramite Visual Generation / shutterstock.com