Share
La modellazione di un'app up-and-coming può essere un compito molto difficile se non si ha familiarità con software e tecniche di animazione professionale. Fortunatamente, Keynote offre un kit di animazione molto efficace che non è troppo difficile da usare. In questo tutorial dimostrerò come usare Keynote per prototipare le animazioni dell'interfaccia utente iOS; costruiremo una demo per le app basate su mappe.
Nota: Keynote versione 6.6.2 è stato utilizzato nella realizzazione di questo tutorial.
Innanzitutto, ti consigliamo di trovare un mockup di iPhone per mostrare la demo dell'app. La maggior parte dei mockup di iPhone di qualità sono oggetti di forma in formato PSD, quindi sono scalabili a seconda della dimensione richiesta. I file PSD non compatibili con Keynote, tuttavia, saranno necessarie alcune modifiche a iPhone PSD affinché la demo funzioni correttamente.
A seconda del PSD, è necessario rasterizzare ed eliminare i livelli necessari in modo che rimanga solo una "cornice" iPhone. Elimina l'immagine di sfondo in modo che diventi trasparente. Salva il file come PNG.
Il mockup di iPhone dovrebbe apparire come questo quando è pronto per la demo. Oltre all'iPhone, le uniche altre risorse che dovrai tenere a portata di mano sono mappe, set di icone e altre immagini che hai utilizzato nei tuoi modelli di app. Il resto degli elementi dell'interfaccia utente verrà ricreato in Keynote per garantire il corretto funzionamento delle animazioni.
Apri Keynote. Nella parte superiore del Scegli un tema finestra, fare clic Largo. Questo creerà una presentazione con proporzioni widescreen, dandoci un prodotto finito che possiamo caricare felicemente su Youtube in HD. Quindi, selezionare il bianca modello.
Seleziona il bianca tema. Nel Formato pannello sul lato destro dello schermo, fare clic su Cambia padrone e selezionare vuoto.
Seleziona il vuoto layout dal Cambia padrone cadere in picchiata. Ora inizia a creare la diapositiva di base. Inserisci l'immagine dell'iPhone trascinando il file PNG nel Keynote o facendo clic Inserisci> Scegli ... e trovare il file nella finestra del Finder che appare. Centra l'iPhone sulla diapositiva.
Successivamente, inserisci un'immagine della mappa sulla diapositiva. Pulsante destro del mouse sull'immagine e selezionare Mandare indietro. Questo creerà l'illusione di un'immagine all'interno dello schermo dell'iPhone.
Pulsante destro del mouse sulla mappa e selezionare Mandare indietro per creare l'illusione di un'immagine all'interno dello schermo. Dovrai anche aggiungere qualsiasi elemento dell'interfaccia utente che apparirebbe a bruciapelo nella tua app. Per i miei scopi, ho aggiunto la barra di ricerca con una query di ricerca e una ruota di caricamento, che ho creato utilizzando gli strumenti di forma e testo di Keynote.
La diapositiva di base completata. Dopo aver creato la diapositiva di base, puoi iniziare il quadro dell'animazione nella presentazione. La cosa più importante da tenere a mente in questa fase è affrontare le principali animazioni prima di affrontare quelle minori, orientate ai dettagli.
Per creare la ricerca e l'effetto pan, duplicare la diapositiva base per tasto destro del mouse sulla sua miniatura nella barra laterale e selezionando Duplicare.
Duplicare la diapositiva di base. Nella diapositiva appena duplicata, eliminare la rotella di caricamento selezionandola e premendo il tasto Elimina chiave. Quindi, sposta la foto della mappa in modo che la destinazione che stai cercando appaia nella metà superiore dello schermo dell'iPhone.
Inserisci l'immagine pin in Keynote e posizionala sopra la destinazione preferita. Nel Formato menu, aggiungere a Contatta Shadow. Modifica l'ombra a tuo piacimento. Poi, Pulsante destro del mouse sul pin e selezionare Mandare indietro. Fai lo stesso per l'immagine della mappa.
Aggiungi un'ombra di contatto al pin. Duplicare questa diapositiva e spostarla nella seconda posizione della diapositiva. Prendi il perno e spostalo dallo schermo, mantenendolo direttamente sopra la posizione originale. Questo può essere fatto più facilmente tenendo premuto il tasto Tasto freccia su, o alterando il Posizione Y. nel Organizzare pannello del Formato menu.
Spostare il perno fuori dallo schermo, mantenendolo direttamente sopra la posizione prevista. Ora che tutto è a posto, puoi iniziare a animare. Lo strumento più significativo che verrà utilizzato in questo modo è il Movimento magico animazione, che crea transizioni uniformi per un elemento che appare su più diapositive. Magic Move creerà il pan liscio e gli effetti pin-drop a cui miriamo.
Ritorna alla diapositiva 1 e applica la mossa magica aprendo il Animare menu e facendo clic Aggiungi effetto> Spostamento magico. zecca Dissolvenza degli oggetti non corrispondenti. Selezionare Abbina per oggetto. Impostato Accelerazione a Ease In & Out. Impostato Inizia transizione a Automaticamente con un 0s Ritardo. Durata è a tua discrezione, l'ho impostato su 1.50s per la padella.
Configura le animazioni di Sposta magica. Ripeti questo nella diapositiva 2, ma imposta la durata più breve della diapositiva precedente. Ho impostato questo a 0.60s.
Mancia: Prova le durate cliccando sul Anteprima pulsante per distinguere la lunghezza dell'animazione desiderata.
Con Magic Move impostato per questa parte del tutorial, torna alla diapositiva 1 per creare le animazioni di ricerca. Seleziona il testo sulla diapositiva. Nel Costruisci pannello del Animare menu, fare clic Aggiungi un effetto. Selezionare Macchina da scrivere dal menu a discesa e impostare Durata e direzione a 0.60s e Inoltrare.
Aggiungere un Costruisci animazione al testo. La rotellina di caricamento richiede un po 'più di animazione per ritrarre con precisione una trovata in un'app. Innanzitutto, aggiungi un Costruisci animazione. Selezionare Sciogliere dal menu a discesa e impostane il relativo Durata ad una velocità veloce, qualcosa sulla falsariga di 0.20s.
Aggiungere un Costruisci animazione alla ruota di caricamento. Quindi, apri il Azione pannello e Aggiungi un effetto. Selezionare Ruotare dal menu a discesa. Selezionare Facilità entrambi dal Accelerazione menu a discesa. ho impostato Durata a 1.00s, e Angolo e rotazione a a Angolo 359˚ e 0 rotazioni, ma questo può essere modificato in base alle preferenze personali.
Aggiungi un'azione alla ruota di caricamento. Infine, apri il Costruisci pannello e Aggiungi un effetto. Selezionare Sciogliere dal menu a discesa e impostane il relativo Durata ad una velocità veloce, qualcosa sulla falsariga di 0.30s.
Aggiungere un Costruisci animazione alla ruota di caricamento. Dopo aver aggiunto le animazioni, fai clic su Ordine di costruzione pulsante nella parte inferiore del Animare menu. Questo mostrerà l'ordine in cui tutte le animazioni della diapositiva attuale verranno riprodotte e potranno essere utilizzate per automatizzare la diapositiva.
Fare clic sulla prima animazione e selezionare Dopo la transizione dal Inizio menu a discesa. Regola Ritardo a tua discrezione: ciò farà sì che l'animazione si avvii automaticamente dopo che è trascorso un certo periodo di tempo.
Selezione Dopo la transizione inizierà automaticamente le animazioni durante la presentazione del Keynote. Fare clic sulla seconda animazione e selezionare Con Build 1 dal Inizio menu a discesa. Ciò farà sì che la ruota di caricamento si integri mentre viene riprodotta l'animazione della macchina da scrivere. È possibile scegliere di aggiungere un leggero ritardo regolando il tempo in Ritardo campo.
Impostare il Costruisci animazione per iniziare Con Build 1. Per la terza animazione, selezionare Dopo la build 2 dal Inizio menu a discesa e impostare Ritarda a 0 secondi. Ripeti per la quarta animazione.
Selezionare Dopo Build X dal menu a discesa per le animazioni successive. Con questo, la ricerca e l'effetto pan sono completati.
L'effetto del pannello informativo è un po 'più complicato da creare, ma migliora la demo piacevolmente. Nella terza diapositiva di Keynote, usa il forma e testo strumenti per costruire un pannello informativo con la larghezza dello schermo dell'iPhone. Non aggiungere ancora foto, ma assicurati di lasciare uno spazio per loro. Premuto il tasto Control a selezionare tutti gli elementi, tasto destro del mouse e selezionare Gruppo per combinare gli elementi. Questo rende il pannello delle informazioni molto più facile da manipolare nell'animazione.
Gruppo gli elementi del pannello informativo. Quindi, inserisci tre o quattro foto che desideri visualizzare nella demo. Ridimensionateli per adattarli in altezza allo spazio lasciato sul pannello delle informazioni. Non preoccuparti se non si adattano tutti al pannello: è qui che l'animazione arriverà un po '.
Inserisci le immagini che desideri visualizzare. Premuto il tasto Control a selezionare il pannello delle informazioni e le foto e gruppo loro. Sposta il gruppo in modo che i bordi del pannello si allineano allo schermo. In questa diapositiva, mantieni il pannello delle informazioni appena sotto lo schermo dell'iPhone in modo che non sia visibile. Poi, tasto destro del mouse su iPhone e selezionare Portare in primo piano. Questo darà l'aspetto del pannello delle informazioni visualizzato sullo schermo.
Allineare il pannello con i bordi del telefono. Duplicare la diapositiva e spostare il pannello più in alto sulla diapositiva in modo che vengano visualizzate solo le informazioni di base sulla posizione.
Sposta il pannello in modo tale che solo le informazioni di base sulla posizione sbuca dalla parte inferiore dello schermo. Poi, duplicare la diapositiva e sposta il pannello ancora più in alto, in modo che l'intero pannello venga visualizzato sullo schermo dell'iPhone.
Crea un duplicato di questa diapositiva. Poi, tasto destro del mouse sul pannello e selezionare Separa. Questo dovrebbe separare le foto mantenendo intatto il resto del pannello. Non spostare nessuno degli elementi sulla diapositiva.
Separa le foto dal pannello delle informazioni. Ancora, duplicare la diapositiva, quindi sposta le foto in modo che l'ultima foto nella riga venga visualizzata sullo schermo. Questo è l'ultimo frammento di framework che deve essere fatto prima di poter iniziare l'animazione.
Sposta le foto a sinistra in modo che l'ultimo venga visualizzato sullo schermo. Fortunatamente, creare l'animazione per questo effetto è abbastanza semplice, poiché si basa esclusivamente su di esso Movimento magico.
Tornare alla diapositiva 3 e selezionare Aggiungi un effetto> Mossa magica dal Animare menu. Assicurarsi Dissolvenza degli oggetti non corrispondenti è spuntato, Abbina per oggetto, Accelerazione è impostato per Facilità in entrata e uscita, e inizia la transizione Automaticamente con un Ritardo 0 secondi. Come il resto delle animazioni, Durata è a tua discrezione, l'ho impostato 1.50s per l'anteprima del pannello di informazioni.
Inserisci Movimento magico animazioni. Inserisci Movimento magico animazioni alle diapositive 4 e 6, mantenendo tutto uguale tranne Durata, che può essere modificato a tuo piacimento. Ho impostato il mio 2.00s e 1.00s rispettivamente.
La diapositiva 5 non dovrebbe contenere animazione, ma assicurati di esserne sicura Inizia transizione è impostato per Automaticamente con un Ritardo 0 secondi perché la demo funzioni senza intoppi. La diapositiva 7 non richiede animazione poiché è l'ultima diapositiva di Keynote.
Impostato Inizia transizione a Automaticamente con un Ritardo 0 secondi. E voilà: c'è l'effetto del pannello informativo, completato.
Una volta che tutto il contenuto è a posto e tutto è animato come dovrebbe essere, è tempo di ripulire.
Il modo più semplice per farlo è creare uno sfondo per il video. Per fare ciò, crea quattro rettangoli usando il Forma strumento che inquadra l'iPhone ma non si sovrappone allo schermo dell'iPhone. Usa gli strumenti nel Formato pannello per rendere ognuna delle scatole identica l'una all'altra.
Crea uno sfondo inquadrando l'iPhone. Mancia: Un riempimento di colore che integra i colori riflessi nella tua app funziona meglio per lo sfondo. Sfumature e riempimenti dell'immagine tendono a sembrare disordinati e incoerenti. Evita di usare anche le ombre.
Seleziona ognuna delle caselle per control-clic. Pulsante destro del mouse su una delle caselle selezionate e fare clic Gruppo per creare una forma. Quindi, fare clic sull'immagine iPhone per selezionarlo, tasto destro del mouse, e fare clic Portare in primo piano per creare l'immagine di uno sfondo dietro l'iPhone. copia la forma dello sfondo e incolla su ogni diapositiva Assicurati di portare l'iPhone in primo piano su ogni diapositiva per completare l'effetto.
Lo sfondo aggiunge il tocco finale alla demo. Tutto ciò che resta da fare è esportare la presentazione come un video. Per fare ciò, fare clic File> Esporta in> QuickTime.
Per esportare il video, selezionare File> Esporta in> Quicktime. Impostato riproduzione a Registrazione di diapositive. Formato determina la qualità del video, che può essere impostato in base alle tue preferenze. Dopo aver configurato queste opzioni come desiderato, fai clic su Il prossimo per esportare il tuo video.
Configura le impostazioni di esportazione. Tutto il lavoro in Keynote è ora completo. La registrazione può essere utilizzata così com'è o modificata ulteriormente in altre applicazioni, come Final Cut o iMovie, se si desidera aggiungere audio o altri elementi video.
In questo tutorial, ho spiegato come demo delle animazioni delle mappe per un'applicazione iOS in Keynote. Usando l'animazione Magic Move di Keynote, puoi creare animazioni uniformi modellando gli effetti search-and-pan e pannelli di informazioni che possono essere trovati in un'applicazione iOS basata su mappe.
Se hai ulteriori domande o dubbi, o desideri vedere quali altri tipi di animazioni possono essere modellati in Keynote, sentiti libero di lasciare un commento in basso!
Accentsconagua