Share
Al giorno d'oggi, non hai bisogno di software di editing delle immagini come Adobe Photoshop o Gimp per creare modelli di interfaccia utente per le tue app mobili. Un'app conforme al linguaggio di Material Design di Google è solitamente composta solo da semplici forme geometriche, colori a tinta unita, icone e testo. Un prototipo di interfaccia utente per tale app può essere creato facilmente utilizzando solo il codice.
In questa serie in due parti, imparerai le basi di Framer, un framework Javascript open source che ti consente di creare prototipi interattivi e realistici con bellissime animazioni per applicazioni iOS e Android.
Per seguire questo tutorial, avrai bisogno di:
Poiché un prototipo Framer non è altro che una normale pagina Web scritta in HTML, CSS e Javascript, iniziamo creando una pagina HTML vuota. Chiamerò questa pagina index.html.
"html
"
Per utilizzare le API di Framer in questa pagina, è necessario aggiungere un copione tag che punta al framer.js file scaricato.
html
Poiché Framer utilizza URL relativi al protocollo per caricare varie risorse, non è sufficiente fare doppio clic sul file creato per aprirlo in un browser. Fare così porterà ad errori di rete. Invece, dovresti accedervi tramite un server HTTP.
Per creare rapidamente un server HTTP in grado di servire la tua pagina web, puoi usare Python SimpleHTTPServer modulo.
Aprire un terminale, navigare nella directory che contiene la pagina Web creata ed eseguire il seguente comando.
bash python -m SimpleHTTPServer 8000
Questo avvierà un server che gira sulla porta 8000 per impostazione predefinita. Ora puoi aprire Google Chrome e visualizzare la tua pagina web visitando http: // localhost: 8000 /.
Per rendere realistico il tuo prototipo su un browser desktop, dovresti visualizzare tutti i suoi elementi all'interno del frame di un dispositivo mobile. Framer ti consente di disegnare una serie di dispositivi mobili popolari, quali iPhone, telefoni e tablet Nexus, iPad, Apple Watch e altro ancora. Per questo tutorial, userò un iPhone 5c rosa.
Per disegnare un dispositivo, devi prima creare un'istanza di DeviceComponent classe e chiama il suo setupContext metodo. Puoi quindi cambiarlo tipo di dispositivo al dispositivo di tua scelta. Aggiungi un altro copione tag alla pagina HTML creata in precedenza e aggiungi il seguente codice:
"javascript var device = new Framer.DeviceComponent ();
device.setupContext (); device.deviceType = "iphone-5c-pink"; "
Quando aggiorni la tua pagina web, dovresti vedere quanto segue nella finestra del tuo browser:
Se lo desideri, puoi anche eseguire il rendering di una mano che regge il dispositivo aggiungendo -mano alla fine di tipo di dispositivo stringa. Se il dispositivo sembra troppo grande o troppo piccolo, puoi utilizzare il setDeviceScale metodo per cambiare le sue dimensioni.
"javascript // Mostra una mano con il dispositivo device.deviceType =" iphone-5c-pink-hand ";
// Cambia la dimensione device.setDeviceScale (0.3); "
Questo completa la configurazione iniziale. Il risultato dovrebbe essere simile a questo:
Quasi ogni elemento del tuo prototipo Framer sarà un'istanza di Strato classe. UN Strato è molto simile a un HTML div elemento e può essere utilizzato per disegnare rettangoli, immagini e testo.
Per creare un Strato devi chiamare il suo costruttore e passargli un oggetto JSON che definisce varie proprietà del Strato. Durante la creazione di a Strato, di solito specifichi le sue dimensioni (larghezza e altezza) e posizione (X e y). Puoi anche usare il centerX e centerY metodi per centrarlo orizzontalmente e verticalmente. Ecco un esempio di come creare un Strato.
"javascript // Disegna un quadrato bianco
var whiteSquare = new Layer (backgroundColor: "#FFFFFF", width: 400, height: 400, y: 20);
// Centra orizzontalmente whiteSquare.centerX (); "
Per visualizzare un'immagine, devi creare un Strato di chi Immagine proprietà punta al file immagine che si desidera visualizzare.
"javascript // Disegna un'immagine
var pic = new Layer (image: "painting.jpg", larghezza: 400, altezza: 400, y: 440);
pic.centerX ();"
Per visualizzare il testo (o HTML), puoi usare il html proprietà. Puoi anche aggiungere lo stile CSS a a Strato usando il suo stile proprietà.
"javascript // Scrivi testo
var text = new Layer (width: Screen.width, height: 100, y: 860, html: "Questo è un prototipo", style: fontSize: "50px", textAlign: "center", color: "# f1f2f3 ", PaddingTop:" 18px ");"
Con i tre Strato oggetti che abbiamo creato in questo passaggio, il prototipo sarebbe simile a questo:
È possibile associare i gestori di eventi a a Strato usando il sopra metodo. Il sopra il metodo è molto simile a quello di Javascript addEventListener metodo. Prende il nome di un evento come suo primo parametro e una funzione come suo secondo parametro.
Ecco come si aggiunge a clic gestore al testo strato che abbiamo creato nel passaggio precedente:
javascript text.on ("click", function () text.html = "Sono stato cliccato";);
Vedrai più gestori di eventi più avanti in questo tutorial.
Framer si distingue dalla concorrenza grazie ai suoi effetti di animazione avanzati. Con Framer, puoi animare quasi tutte le proprietà del tuo Strato oggetti che usano il animare metodo. Il animare il metodo prende come input un oggetto JSON che specifica le proprietà che dovrebbero essere animate.
L'oggetto JSON può anche includere vari dettagli di configurazione dell'animazione, come la sua durata e il suo comportamento.
Ad esempio, lascia che ti mostri come creare un'animazione che gira whiteSquare in un cerchio cambiando il suo borderRadius.
"javascript // Animate borderRadius
whiteSquare.animate (proprietà: borderRadius: whiteSquare.width / 2,
tempo: 2, // durata è una curva di due secondi: "easy-in-out" // applica easing); "
Ecco un altro esempio che mostra come animare l'ombra di whiteSquare quando viene cliccato.
"javascript // Animate Shadow
whiteSquare.on ("clic", funzione ()
Accentsconagua
// Imposta prima il colore dell'ombra whiteSquare.shadowColor = "# 555555"; whiteSquare.animate ("properties": shadowBlur: 40, shadowSpread: 10,); );" Nota che solo le proprietà i cui valori sono numeri possono essere animate. Come shadowColor non è un numero, dovrebbe essere impostato prima di chiamare animare.
Se si utilizza Framer, è probabile che si stia tentando di creare un prototipo altamente interattivo con molte animazioni. Chiamando il animare metodo più volte su a Strato può diventare noioso Invece, è possibile associare un elenco di stati con a Strato e basta passare tra gli stati quando necessario.
Ogni Strato ha un stati proprietà che è un'istanza del LayerStates classe. Per aggiungere nuovi stati a a Strato, tu chiami il Inserisci metodo sul stati proprietà. Nel seguente snippet di codice, aggiungiamo due nuovi stati al pic oggetto.
"javascript // Aggiungi due stati
pic.states.add ("myState1": borderRadius: 100,
"myState2": borderRadius: 200); "
L'aggiunta di uno stato non comporta una modifica visiva immediata. Tuttavia, quando a Strato passa da uno stato all'altro, sarete in grado di vedere l'animazione. Per cambiare lo stato di a Strato, tu chiami il interruttore metodo sul stati proprietà del Strato oggetto. Il seguente frammento di codice mostra come modificare lo stato di pic quando viene cliccato.
"javascript // Cambia stato quando si fa clic
pic.on ("click", function () // Passa a myState2 pic.states.switch ("myState2");); "
Per scorrere gli stati di a Strato, puoi chiamare il Il prossimo metodo del suo stati oggetto.
javascript pic.states.next ();
Per aggiungere un colore di sfondo o un'immagine al tuo prototipo, crei a BackgroundLayer oggetto. UN BackgroundLayer è un Strato le cui dimensioni sono uguali alle dimensioni dello schermo del dispositivo. Ecco come si aggiunge un grigio BackgroundLayer:
javascript var bg = new BackgroundLayer (backgroundColor: "#BDBDBD");
Poiché il prototipo Framer è solo una normale pagina HTML, puoi anche usare i CSS per modellarlo. Ad esempio, se non sei soddisfatto del colore bianco che circonda il dispositivo, puoi modificarlo applicando un nuovo stile alla pagina Web corpo etichetta.
"html
"
Con queste modifiche, il prototipo apparirà come questo al termine delle animazioni:
Fare un Strato trascinabile, tutto ciò che devi fare è impostarlo draggable.enabled proprietà a vero.
"javascript // Consenti il trascinamento
pic.draggable.enabled = true; "
Se una Strato è trascinabile, puoi aggiungere ascoltatori di eventi che rispondono a vari eventi correlati al trascinamento, come ad esempio dragend e DRAGMOVE. Ad esempio, ecco a dragend gestore di eventi che restituisce pic nella sua posizione originale:
"javascript // Gestisci il trascinamento
pic.on ("dragend", function () pic.animate ("properties": x: Screen.width / 2 - pic.width / 2, // Place at Center y: 440 // Original Y );); "
In questo tutorial, hai imparato le basi della creazione di prototipi interattivi per le app mobili usando Framer. Poiché i prototipi Framer sono pagine Web statiche, puoi caricarle su qualsiasi server HTTP per condividerle con amici e clienti.
Vorrei anche dirti che, se sei competente con Adobe Photoshop, non devi creare gli elementi dell'interfaccia utente dei tuoi prototipi a livello di codice. Puoi progettare il layout in Photoshop e convertire i gruppi di livelli nel tuo PSD in Framer Strato oggetti. Hai anche la possibilità di acquistare e utilizzare Framer Studio, un IDE creato appositamente per lavorare con i progetti Framer.
Per ulteriori informazioni sul framework Framer, è possibile fare riferimento alla documentazione di Framer. Nella seconda parte di questa serie, approfondirò la navigazione, lo scorrimento e l'animazione.
