Contenuto
- Importa da Sketch
- Crea livelli di maschera e avatar
- Definisci gli stati
- Anima tra gli stati
- Provalo su un vero dispositivo mobile
Il ragionamento alla base della prototipazione del design non è nuovo: è lo stesso di tutto il passaparola sulla progettazione nel browser. Quando vedi un design nel suo contesto reale, è completamente diverso. Prendi decisioni migliori quando non devi fare supposizioni su come funzionerà e si sentirà un'interfaccia. Questo può sembrare un lavoro extra, ma le informazioni che puoi ottenere vedendo il tuo design in funzione sono inestimabili.
Framer è un nuovo strumento di prototipazione basato su codice. Puoi creare mockup in Sketch (o Photoshop) come faresti normalmente e importarli in Framer. Quindi, scrivi un po 'di CoffeeScript e puoi ottenere molto.
Ti insegnerò le basi della prototipazione in Framer, utilizzando l'esempio di un prototipo di app iOS con due visualizzazioni: una vista profilo e una vista ingrandita dell'immagine avatar dell'utente. Realizzeremo un prototipo di come la visualizzazione della foto espansa si aprirà e si chiuderà e la animeremo anche. Visualizza la demo online qui (per vedere il codice sorgente, fai clic sull'icona nell'angolo in alto a sinistra). Avrai anche bisogno della prova gratuita di Framer, che puoi ottenere su framerjs.com.
Importa da Sketch
Il primo passaggio consiste nell'importare i livelli da Sketch a Framer. Fai semplicemente clic sul pulsante Importa in Framer mentre il disegno è aperto in Sketch e scegli il file corretto nella finestra di dialogo che segue. Framer importerà automaticamente le immagini da ogni livello e le renderà accessibili tramite codice come questo:
sketch = Framer.Importer.load "importato / profilo"
Usa quella variabile per accedere ai livelli importati. Ad esempio, per fare riferimento al livello denominato "contenuto" nel file di schizzo, digita sketch.content in Framer.
Crea livelli di maschera e avatar
La funzione principale di questo prototipo è espandere l'immagine dell'avatar quando viene toccata e quindi chiuderla quando viene toccata di nuovo. Innanzitutto, creeremo due livelli maschera: una maschera nidificata o una maschera all'interno di un'altra maschera. Animeremo entrambe le maschere contemporaneamente per creare un piacevole e sottile effetto di apertura e chiusura. Il livello headerMask ritaglierà la foto dell'avatar in un rettangolo quando è espansa e il livello maschera la ritaglierà in un piccolo cerchio nella vista profilo.
Crea il livello headerMask in questo modo:
headerMask = new Layer width: Screen.width, height: 800 backgroundColor: "transparent"
La prima riga di codice crea e assegna un nome al nuovo livello. Quindi, utilizzando la sintassi di indentazione di CoffeeScript, impostiamo le proprietà di larghezza, altezza e sfondo. Useremo uno sfondo trasparente in modo che i livelli sottostanti vengano visualizzati quando la foto dell'avatar viene espansa.
Quindi, crea il livello maschera:
mask = new Layer width: 1000, height: 1000 backgroundColor: "transparent", borderRadius: 500 y: sketch.header.height - 100 superLayer: headerMask scala: 0.2, originY: 0
Creiamo un nuovo livello e impostiamo le proprietà allo stesso modo. Il grande borderRadius rende questo strato un cerchio. Posizioniamo il livello maschera in modo che si sovrapponga al livello dell'intestazione, che è stato importato da Sketch. Scenderemo anche al 20% o allo 0,2. Un'origine zero imposta il punto di ancoraggio o la registrazione dell'immagine sul bordo superiore.
La proprietà rimanente, superLayer, imposta il livello headerMask che abbiamo creato come genitore di questo nuovo livello. Ecco come funziona il mascheramento in Framer. Basta impostare la proprietà superLayer e il livello genitore maschererà il bambino.
Successivamente, dobbiamo creare la grafica dell'avatar e posizionarla all'interno di quelle nuove maschere. Per ingrandire e animare i bordi di ritaglio, creeremo manualmente il livello avatar. Copia una foto nella sottocartella "immagini" della cartella del progetto. Quindi crea un livello usando quell'immagine:
avatar = nuova immagine livello: "images / avatar.png" larghezza: mask.width, altezza: mask.height superLayer: mask, force2d: true
Si noti che abbiamo impostato il superLayer dell'avatar come livello maschera. Entrambi sono ora nidificati all'interno di headerMask. Abbiamo anche impostato la larghezza e l'altezza in modo che l'immagine riempia completamente l'area mascherata.
Infine, creeremo una variabile per memorizzare la posizione Y della maschera che useremo per l'animazione. Lo centreremo orizzontalmente, poiché è più grande dello schermo.
maskY = mask.y mask.centerX ()
Definisci gli stati
Il primo passaggio nella creazione di un'animazione è definire gli stati di inizio e di fine. In Framer, gli stati sono come i fotogrammi chiave scritti nel codice. Uno stato è solo un insieme di proprietà. Ogni livello ha uno stato predefinito. Per questo prototipo, quel valore predefinito servirà come punto di inizio dell'animazione, quindi dobbiamo solo impostare un secondo stato per ogni livello.
La sintassi per gli stati è molto semplice. Fare riferimento al livello, utilizzare il metodo layer.states.add () e quindi elencare le proprietà da includere.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (move: {y: 120}) mask.states.add (grow: {scale: 1.1, y: maskY - 420})
Il secondo stato per il livello del contenuto, che è stato importato da Sketch e contiene tutti gli altri elementi della schermata del profilo, dovrebbe essere completamente trasparente. In questo modo, quando l'avatar viene espanso, avremo uno sfondo nero e verranno visualizzate le icone e gli elementi importati rimanenti.
La seconda riga di codice crea uno stato per headerMask, che lo sposterà semplicemente in una posizione Y di 120. Ciò consentirà al titolo e al pulsante di chiusura di essere visualizzati nella parte superiore dello schermo quando la foto dell'avatar viene ingrandita. Animerà anche i bordi di ritaglio della foto dell'avatar.
Infine, un nuovo stato per il livello maschera lo ridimensionerà e lo sposterà, usando la variabile maskY che abbiamo creato in precedenza. Poiché l'origineY (o punto di ancoraggio) del livello maschera è il suo bordo superiore, dobbiamo spostarlo verso l'alto di 420 pixel in modo che il centro dell'immagine sia visibile.
Anima tra gli stati
Per animare tra gli stati predefiniti e quelli nuovi che abbiamo appena creato, abbiamo solo bisogno di altre quattro righe di codice. Imposteremo un gestore dei clic sul livello avatar. Quando un utente lo tocca nella schermata del profilo, passeremo alla visualizzazione espansa in base agli stati ciclici. Quando viene toccato di nuovo, torneremo agli stati predefiniti in modo che ritorni a un piccolo cerchio. Le stesse righe di codice gestiscono entrambe le interazioni:
avatar.on Events.Click, -> headerMask.states.next () mask.states.next () sketch.content.states.next ()
La prima riga di questo blocco imposta il gestore dei clic sul livello avatar. Ogni volta che viene toccato, indipendentemente da come viene ritagliato o dalle sue dimensioni, verranno eseguite le istruzioni che seguono.
Quindi facciamo semplicemente riferimento a ciascun livello e utilizziamo il metodo layer.states.next () per alternare gli stati. Quando usi layer.states.next (), Framer userà le sue impostazioni di animazione predefinite interne. Questo è estremamente comodo, ma puoi creare animazioni ancora migliori perfezionando le curve di animazione.
Quando si utilizzano stati come se fossero qui, è possibile modificare facilmente ciascuna curva di animazione separatamente utilizzando la proprietà layer.states.animationOptions. Con solo tre lievi regolazioni, l'animazione sembra completamente diversa:
sketch.content.states.animationOptions = curve: "ease", time: 0.3 headerMask.states.animationOptions = curve: "spring (150, 20, 0)" mask.states.animationOptions = curve: "spring (300, 30, 0) "
Per il livello di contenuto in dissolvenza in entrata e in uscita, scegliamo una curva predefinita semplice, facilità e imposta la durata dell'animazione su 0,3 in modo che sia molto veloce.
Per la maschera header e i livelli maschera, utilizzare una curva a molla. Per i nostri scopi, devi solo sapere che i valori della curva della molla cambiano la velocità e il rimbalzo dell'animazione. I valori per il livello maschera renderanno la sua animazione molto più veloce di headerMask e contenuto. Per maggiori dettagli sulle impostazioni della curva della molla, fare riferimento alla documentazione di Framer su framerjs.com/docs.
Provalo su un vero dispositivo mobile
Vedere il design su un dispositivo reale è molto più efficace rispetto all'utilizzo di emulatori e vedrai i vantaggi nel tuo lavoro. Framer include una funzione di mirror, che è un server integrato che offre un URL al tuo prototipo sulla tua rete locale. Visita semplicemente l'URL utilizzando il tuo dispositivo.
Hai imparato tutto ciò che devi sapere per creare prototipi dei tuoi progetti in Framer. Che cosa state aspettando?
Parole: Jarrod Drysdale
Jarrod Drysdale è un autore, consulente di design, creatore di prodotti digitali. Questo articolo è stato originariamente pubblicato nel numero 270 di net magazine.
Questo mi piaceva? Leggi questo!
- Crea prototipi live cliccabili in Sketch
- Come avviare un blog
- I migliori editor di foto
