Usa Frameer X per creare prototipi interattivi

Come designer, c'è sempre la questione di quali strumenti di prototipazione dovresti usare per il tuo progetto. C'è un sacco di software là fuori per compiti come wireframing (vedi il nostro top Strumenti wireframing ed eccellente costruttori di siti Web ), prototipazione e costruire interazioni complesse; Comunque pochissimi strumenti sono in grado di gestire tutti questi. Cornere è uno strumento che ha tutte queste funzioni e velocizza notevolmente il processo di creazione di piccole animazioni e interazioni.

L'ultima iterazione, Corner X. , ora utilizza reagire e JavaScript invece di utilizzare CoffeeScript per lo sviluppo di micro-interazioni e animazioni. Questo aiuta a fornire tempi di carico più rapidi e prestazioni migliori. Inoltre, l'uso dei componenti reagire significa che gli utenti hanno più ambito da aggiungere ed estendere, compresi i lettori multimediali incorporati, i dati in tempo reale e i grafici all'interno dei prototipi.

Il test è una parte principale del processo di costruzione del prototipo e mentre Frafer X è fantastico nella creazione di prototipi interattivi che ha bisogno di aiuto per vedere quanto sono buone le sue creazioni. Controlla il nostro Test dell'utente Posta per alcuni dei migliori strumenti per completare il corniera e aiutare a costruire prototipi del mondo reale e assicurati di utilizzare il meglio web hosting Servizio per te.

Come creare un'app con frame x

Per apprezzare appieno il potere del Frameer X, creeremo un progetto di vita reale: una semplice applicazione di ricette di cottura con alcuni contenuti e supporti (beni che vengono sottoposti ad essere affidabili deposito cloud. ). La prima cosa da costruire è la homepage. Terremo le cose semplici con i seguenti elementi:

• Barra di ricerca standard per trovare ricette
• Attività recente per mostrare le ultime ricette visualizzate
• Carte ricette che mostrano cose come le ricette più popolari
• Creazione di una vista dettagliata della ricetta con opzioni video e condivisione

Per iniziare è necessario creare un nuovo fotogramma (una tavola da disegno) facendo clic sull'icona + sulla navbar a sinistra. Seleziona qualsiasi stile di articoli in una scheda da un elenco di modelli di iPhone / Android standard sulla barra giusta. Ora sei pronto per andare.

01. Costruisci una barra di ricerca

Iniziamo costruendo la barra di ricerca. Invece di creare un rettangolo e aggiungere un'icona di ricerca come faremmo normalmente, possiamo effettivamente utilizzare componenti riutilizzabili rapidi in Framer X, questi sono chiamati pacchetti. Ci sono migliaia di pacchetti che possono essere trovati nella barra di navigazione sinistra in negozio. Clicca su Store, cerca il kit Android e il kit di esempio e quindi installarli.

Questi pacchetti contengono elementi come carte, pulsanti, tastiere, cursori, ingressi e voci del menu di navigazione. Dopo aver installato questi pacchetti, è possibile utilizzare gli elementi dal menu Componenti a sinistra.

Trova gli elementi che desideri cercando nel filtro - in questo caso una barra di ricerca, che viene trovata sotto il kit di esempio. Basta trascinare e rilasciarlo sul telaio. Ora è possibile modificare le proprietà come testo segnaposto, dimensione del carattere e colore utilizzando la barra giusta.

02. Creare uno stack di contenuti

Per questo recente blocco di attività, aggiungi prima il testo 'recente attività', che è piuttosto semplice. Ora possiamo usare una nuova funzionalità del frameer X chiamato Stacks. Questo può essere fatto cliccando sull'icona + e selezionando Stack S dal menu. Dopo aver selezionato lo stack, trascinare e rilasciare un'area di 600 x 300 sul telaio funzionante per creare uno stack. Questo stack sarà mostrato come blu.

Ora torniamo alla sezione Componenti e sotto il kit Android, cerca l'elemento della scheda 5 e trascinalo nello stack che abbiamo appena creato. Duplica queste carte due volte e assicurati che tutte le tre carte siano nella pila.

Finché sono nella pila, queste tre carte possono essere facilmente riorganizzate senza che tu debba preoccuparsi della spaziatura. Se si desidera aumentare la spaziatura tra le carte, è possibile aumentare la larghezza dell'intero stack. E 'così semplice. Puoi anche personalizzare queste carte cambiando il nome del titolo e del background secondo i tuoi gradimento.

Ora che abbiamo creato una pila, facciamolo scorrere. Spostalo dal telaio / tavoletta. Fare clic sull'icona + dal nav sinistro e fai clic sull'opzione Scroll. Proprio come abbiamo creato un'area con lo stack, crea un'area scorrevole sulla cornice / cartongesso che è la stessa dimensione della pila.

Ora cambia la proprietà del rotolo nella barra giusta modificando le frecce di direzione per renderlo un rotolo orizzontale. Dopo aver creato il nostro contenitore di scorrimento, abbiamo bisogno di contenuti per questo, che è servito dallo stack che abbiamo precedentemente creato. Quindi collega semplicemente il contenitore di scorrimento allo stack utilizzando il prompt della freccia sul contenitore di scorrimento. Funziona trascinando il puntatore del mouse nella pila.

03. Creare uno stack verticale

Per le carte ricette, è necessario seguire un metodo simile al passaggio 2, ma invece di creare un rotolo orizzontale di carte, creerai un simile verticale che è essenzialmente un elenco delle ricette più popolari con le miniature. Per questo esercizio, ogni carta per una ricetta ha quattro elementi: una foto in miniatura, valutazione, nome della ricetta e tempo necessario per prepararlo.

Non preoccuparti dei dettagli di ogni carta. Possono essere personalizzati in base al tuo gusto del design. Seguire lo stesso metodo di utilizzo di una carta dai componenti, duplicandoli e aggiungendoli tutti a uno stack con lo scorrimento verticale.

04. Crea una nuova pagina

Ora creiamo una nuova pagina per entrare nei dettagli di una particolare ricetta. Ad esempio, prendiamo il caso della seconda carta qui: Pasta francese. Per creare questa nuova pagina, creare un nuovo telaio / cartongesso e introdurre gli elementi di cui abbiamo bisogno per mostrare maggiori dettagli sulla ricetta della pasta francese. Questa nuova pagina può essere suddivisa in un video, un titolo, il rating, il tempo necessario per renderlo e alcuni pulsanti di azione, come Salva all'elenco e condividere i social media.

Per aggiungere video, vai al negozio e installare il pacchetto YouTube, che consente di aggiungere facilmente video al tuo prototipo. Ora vai al pannello dei componenti e trascina e lascia cadere l'elemento di YouTube da sotto il componente di YouTube nel telaio.

Regolare la larghezza della miniatura in modo che si adatti alla larghezza del telaio. Nel riquadro Proprietà giusta, è possibile inserire l'URL del video che si desidera riprodurre nel prototipo. Se desideri, c'è anche un modo per AutoPlay Video attraverso la casella di controllo nel pannello Proprietà.

Sotto questo video, puoi aggiungere il titolo, il punteggio e le varie icone. Per aggiungere icone per il nostro esempio, ho utilizzato il componente dall'icona del Generator Store. È un processo facile: semplicemente trascina e rilasciare l'icona di base sul telaio e quindi modificare la proprietà chiamata icona sul pannello lato destro in "Cuore" e "Condividi". Ciò cambierà le icone di base nelle icone di salvataggio e condivisione rispettivamente. I loro colori possono anche essere facilmente modificati usando il pannello giusto.

Per rendere le cose facili per i visitatori, è possibile aggiungere una sezione chiamata ingredienti, che elencherebbe tutti gli ingredienti necessari per la nostra ricetta - in questo caso, pasta francese.

05. Introdurre interazioni

Ora rendiamo il nostro design più coinvolgente aggiungendo interazioni per un pulsante. Idealmente, quando si fa clic sull'icona Condividi, è necessario essere invitati con una schermata per condividere la ricetta su vari canali social media. Costruiamo che usando un nuovo telaio.

Assicurarsi che la larghezza e l'altezza di questo fotogramma sia la stessa larghezza e altezza degli altri due fotogrammi che abbiamo creato. L'idea è per questa nuova schermata di condivisione per far scorrere e sostituire la schermata attuale quando si fa clic sull'icona AZIENDA.

Per aiutare a rendere lo schermo distinto, aggiungiamo un po 'di colore e riempilo con icone di social media come Facebook, Instagram, Whatsapp ed e-mail. Questa schermata di condivisione dovrebbe anche avere un'icona X aggiunta ad essa, che quando si faceva cliccata riporterle allo stato originale.

Assicurati che tutte le icone siano disposte all'interno di una pila. Non appena l'icona X è inclusa, il passo successivo è quello di collegare questo frame in modo che si apre quando si fa clic sull'icona Condividi.

Per fare ciò, selezionare la cornice che contiene l'icona Condividi. Nel pannello di destra, c'è una proprietà chiamata link. Dopo aver fatto clic su questo, l'interfaccia dell'applicazione ti fornirà una freccia che è possibile trascinare sul nuovo fotogramma della condivisione che abbiamo creato. Questo creerà un link in background.

Ora, quando si seleziona l'icona Condividi, osserverai nuove proprietà nel pannello di destra in link, che sono destinatari, transizione e direzione. Ciascuna di queste proprietà consente di modificare gli elementi, come tipo di transizioni e la direzione in cui lo schermo deve comparire, ecc.

È possibile verificare se il prototipo funziona o non facendo clic sull'icona PLAY trovata nell'angolo in alto a destra dell'interfaccia. Allo stesso modo, è necessario collegare la schermata di condivisione alla schermata video in modo che quando l'utente fa clic sull'icona X, ritorna alla schermata precedente.

Questo può essere ottenuto utilizzando una proprietà di collegamento simile e aggiungendo il bersaglio come schermo video. Se vuoi avere un accesso all'aggiunta di un po 'di variazione, puoi rendere la direzione lasciata anziché in alto e quindi utilizzare il comando PLAY per verificare se l'interazione funziona o meno.

06. Aggiungi un pulsante Salva

Ora aggiungiamo un'interazione di sovrapposizione all'icona Salva. Qui, il nostro obiettivo è che ogni volta che un visitatore fa clic sull'icona a forma di cuore, dovrebbe esserci una finestra pop-up che viene visualizzata se si desidera salvare la ricetta in un elenco personalizzato.

Iniziamo creando un nuovo frame chiamato Elenchi salvati. Proprio come hai fatto con quello precedente, assicurati che questa cornice abbia la stessa larghezza ma questa volta è necessario ridurre la sua altezza perché apparirà come una sovrapposizione quando si fa clic. Per lo styling del telaio delle liste salvate, aggiungi un'intestazione, un input di testo per inserire il nome dell'elenco e un pulsante che è un CTA per salvarlo.

Per collegare, selezionare l'icona a forma di cuore sul telaio video e aggiungere un collegamento al telaio degli elenchi salvati. Ora, invece della proprietà di transizione essere una spinta, renderla una sovrapposizione. Regolarlo all'80% e quindi testarlo utilizzando il pulsante PLAY. Modifica fino a quando non sei soddisfatto della sovrapposizione. Collega l'icona X sull'icona Elenchi salvati nella pagina VIDEO.

Questo è come utilizzare Fraker X per creare facilmente prototipi interattivi funzionanti. Ci sono anche strumenti avanzati che è possibile utilizzare, oltre a aggiungere snippet di codifica reagire agli elementi dei fotogrammi. Inoltre, la parte migliore del frameer X è che chiunque può padroneggiarlo provandolo su alcuni prototipi.

Questo articolo è stato originariamente pubblicato in questione 325 di NET, la rivista best-seller del mondo per i web designer e sviluppatori. Comprare il problema 325. o sottoscrivi in rete.

Unisciti a noi nell'aprile del 2020 con la nostra formazione di JavaScript Superstar a Generatejs - La conferenza ti aiuta a costruire meglio JavaScript. Prenota ora a. generateconf.com.

Per saperne di più:

• Come distinguersi e essere assunti come designer UX
• I 20 consigli UX che devi sapere
• 22 migliori strumenti di progettazione UI