Hvordan Demo en iOS Prototype i Keynote

How til Demo en iOS Prototype i Keynote
Hva du skal lage

Modellering en up-and-coming app kan være en svært vanskelig oppgave hvis du ikke er kjent med profesjonell animasjon programvare og teknikker. Heldigvis leverer Keynote en svært effektiv animasjon verktøykasse som ikke er for vanskelig å bruke. I denne opplæringen vil jeg vise hvordan du bruker Keynote til prototype iOS UI animasjoner; vi kommer til å bygge en kartbasert app demo.

Merk: Keynote versjon 6.6.2 ble brukt i fremstillingen av denne opplæringen.

Komme i gang

Nedlasting Resources

Først vil du ønsker å finne en iPhone mockup å vise frem din app demo. De fleste kvalitet iPhone mockups er form objekter i PSD-format, slik at de er skalerbar til hvilken størrelse er nødvendig. Rå PSD-filer er ikke kompatible med Keynote, men noen endringer til iPhone PSD vil være behov for demoen til å fungere ordentlig.

Avhengig av PSD, vil du muligens trenger for å rastrere og slett nødvendig lag så bare en iPhone "ramme" gjenstår. Slett bakgrunnsbildet slik at det blir gjennomsiktig. Lagre filen som en PNG.
IPhone mockup skal se slik ut når det er demo-klar.

Bortsett fra iPhone, den eneste andre ressursene du trenger for å holde på hånden er kart, ikonsett, og andre bilder som du brukte i din app mockups. Resten av UI elementer vil bli gjenskapt i Keynote for å best sikre animasjoner fungere ordentlig.

Konfigurering av Keynote

Åpne Keynote. På toppen av Velg et tema vinduet, klikk Wide. Dette vil skape en lysbildefremvisning med en widescreen-sideforhold, gir oss et ferdig produkt som vi kan gjerne laste opp til Youtube i HD. Deretter velger du Hvite mal.
Velg White
tema.

I Format-panelet til høyre side av skjermen, klikker du på Change Master og velg Blank.
Velg Blank layout fra Change Master drop-down.
Opprette Base Slide

Nå, begynne å lage basen lysbilde. Sett iPhone image ved å dra PNG-fil inn i Keynote eller ved å klikke Sett > Velg ... og finne filen i Finder-vinduet som vises. Sentrer iPhone på lysbildet.

Deretter setter et kartbilde på lysbildet. Høyreklikk på bildet og velg Send til rygg. Dette vil skape en illusjon av et bilde inne i iPhone-skjermen.
Høyreklikk på kartet og velg Send til Back for å skape en illusjon av et bilde inne i skjermen.

Du vil også være lurt å legge noen UI element som ville dukke opp kloss i programmet ditt. For mitt formål, la jeg søkelinjen med et søk, og en lastehjul, som jeg laget ved hjelp av Keynote form og tekstverktøy.
Ferdig basen lysbilde.
Sette alt sammen

Når du har opprettet base lysbilde, kan du begynne rammen av animasjon i lysbildefremvisningen. Det viktigste å huske på dette stadiet er å takle de store animasjoner før håndtere de små, detaljorientert seg.

Opprette Søk og Pan Effect

Å skape søket og pan effekt, duplisere basen lysbilde ved å høyreklikke på miniatyrbildet i sidepanelet og velge Duplicate.
Duplicate basen raset.

I den nylig duplisert lysbildet, sletter lasting hjulet ved å velge den og trykke på slettetasten. Deretter skifter bildet av kartet slik at målet du søker etter vises i den øvre halvdelen av iPhone-skjermen.

Sett pinnen bildet inn i Keynote og legg den over den foretrukne destinasjonen. I Format-menyen, legge til en kontakt Shadow. Tweak skyggen til din smak. Deretter Høyreklikk på pinnen og velger Send til tilbake. Gjør det samme for kartbildet.
Legg til en kontakt skygge til pinnen.

Duplicate dette lysbildet, og flytte det opp til den andre lysbildet posisjon. Ta pinnen og flytte den ut av skjermen, holder den rett over sin opprinnelige plassering. Dette kan gjøres enkelt ved å trykke og holde pil opp-tasten, eller ved å endre Y posisjon i Ordne panelet på Format-menyen.
Flytt pinnen utenfor skjermen, holder den rett over sin tiltenkte posisjon.
Begynne Animere!

Nå som alt er på plass, kan du begynne å animere. Den mest betydningsfulle verktøy som vil bli brukt i å gjøre dette er Magic Move animasjon, som danner jevne overganger for et element som vises på flere lysbilder. . Magisk flytting vil skape den glatte pan og pin-slipp effekter vi sikter for

Gå tilbake til Slide 1, og bruke magi Move ved å åpne Animate menyen og klikke Legg til effekt > Magisk flytting. Tick ​​Fade Uslåelig Objects. Velg Match By Object. Still Akselerasjon å lette In & Ute. Satt på Start Overgang til automatisk med en 0s Delay. Varighet er opp til skjønn-jeg sette den til 1,50s for pannen.
Konfigurer Magisk Flytt animasjoner.

Gjenta dette på Slide 2, men satt varighet kortere enn den forrige lysbilde. Jeg satt denne til 0.60s

Tips:.. Test varigheten ved å klikke på Forhåndsvisning-knappen for å skjelne ønsket animasjon lengde

Med Magic Move avgjort for denne delen av opplæringen, retur Slide 1 for å lage de søker animasjoner. Velg teksten på lysbildet. I Bygg i panelet på Animate menyen, klikk på Legg til en effekt. Velg Skrivemaskin fra rullegardinmenyen, og angi Varighet & Retningen til 0.60s og Forward.
Legg en bygge i animasjon til teksten.
Den Laster Wheel

Laste hjulet krever litt mer animasjon til nøyaktig skildre en funnet i en app . Først legger en bygge i animasjon. Velg Løs opp fra rullegardinmenyen, og angi varigheten til en rask hastighet, noe i retning av 0.20s.
Legg en bygge i animasjon til lasting rattet.

Deretter åpner Handling panel og Legg en effekt. Velg Roter fra rullegardinmenyen. Velg Brukervennlighet Både fra Akselerasjon rullegardinmenyen. Jeg satt Varighet å 1.00s, og Angle & Rotasjon til en 359˚ Angle og 0 rotasjoner, men dette kan endres til personlige preferanser.
Legg en handling til lasting rattet.

Til slutt åpner Bygg Out panel og Legge til en effekt. Velg Løs opp fra rullegardinmenyen, og angi varigheten til en rask hastighet, noe i retning av 0.30s.
Legg en Build Out animasjon til lasting rattet.
Bygg Bestill

Når animasjonene er lagt til, klikker du på Build Bestill-knappen nederst på Animate menyen. Dette vil vise i hvilken rekkefølge alle animasjoner på gjeldende lysbilde vil spille, og kan brukes til å automatisere raset.

Klikk på den første animasjon, og velg Etter overgangen fra Start rullegardinmenyen. Juster Delay til skjønn-dette vil føre til at animasjonen til å starte automatisk etter en viss tid har gått.
velger Etter Transition
starter animasjonene automatisk når de presenterer Keynote.

Klikk på den andre animasjonen, og velg med bygge en fra Start rullegardinmenyen. Dette vil føre til at laste hjulet til å bygge i mens skrivemaskin animasjon spiller. Du kan velge å legge til en liten forsinkelse ved å justere tiden i Forsinkelse feltet.
Sett Bygg I
animasjon for å starte Med Build en
.

For tredje animasjon, velger du Etter Bygg 2 fra Start rullegardinmenyen, og sette Delay til 0s. Gjenta for fjerde animasjon.
Velg Etter Build X
fra rullegardinmenyen for de påfølgende animasjoner.

Med det, vil søket og pan effekt fullført.

Opprette informasjonspanelet Effect

Informasjonen panel effekten er litt mer komplisert å lage, men det polerer demo pent. På den tredje lysbildet av Keynote, bruker form og tekstverktøy for å bygge et informasjonspanel med bredden på iPhone-skjermen. Ikke legg til bilder helt ennå, men sørg for å legge igjen en plass for dem. Ctrl-klikk for å velge alle elementene, høyreklikk og velg Group for å kombinere elementene. Dette gjør informasjonspanelet mye lettere å manipulere i animasjon.
Gruppe informasjonspanelelementene.

Deretter setter tre eller fire bilder som du vil vise i demoen din. Endre størrelse på dem til å passe høyde-messig i gapet du igjen på informasjonspanelet. Ikke bekymre deg hvis de ikke alle passer på panel-dette er hvor animasjonen vil komme i litt.
Sette inn bilder du vil vise.

Ctrl-klikk for å velge informasjonen panel og bildene og gruppere dem. Flytte gruppen slik at kantene av platen faller i linje med skjermen. På dette lysbildet, holde informasjonen panelet rett under iPhone-skjermen slik at den ikke er synlig. Deretter høyreklikker du på iPhone og velg Bring til forsiden. Dette vil gi inntrykk av informasjonspanelet som vises på skjermen.
Juster panelet med kantene på telefonen.

Duplicate raset, og skifte panel høyere opp på lysbildet slik at bare grunnleggende informasjon om plasseringen vises.
Shift panelet så bare grunnleggende informasjon om plassering kikker ut fra bunnen av skjermen.

Så, duplisere raset, og skifte panel enda høyere, slik at hele panelet vises i iPhone-skjermen.

Lag en kopi av dette lysbildet. Deretter høyreklikker du på panelet og velg Del opp gruppe. Dette skal dele opp bilder samtidig som resten av panelet intakt. Ikke flytte noen av elementene på lysbildet.
Del opp bildene fra informasjonspanelet.

Igjen, duplisere raset, deretter skifte bildene slik at det siste bildet i linjen vises endelig på skjermen. Dette er den siste bit av rammeverk som må gjøres før du kan begynne å animere.
Shift bildene til venstre så den siste vises på skjermen.
Magisk Flytt

Heldigvis, skaper animasjon for denne effekten er ganske enkel, som den bygger utelukkende på Magisk flytting

Gå tilbake til Slide 3, og velg Legg til en Effect >.; Magisk flytting fra Animate menyen. Pass på at Fade Uslåelig Objects er krysset av, Match ved objektet, Akselerasjon er satt til Enkel In & Lette ut, og overgangen starter automatisk med en 0s forsinkelse. Som resten av animasjonene, er varighet til skjønn-jeg sette den til 1,50s for den første glimt av informasjonspanelet.
Legg Magisk Flytt animasjoner.

Legg Magisk Flytt animasjoner til Slides 4 og 6, holde alt det samme med unntak av varighet, som kan endres til din smak. Jeg satt meg til henholdsvis 2.00s og 1.00s.

Slide 5 bør inneholde ingen animasjon, men sørg for å være sikker på Start Transition er satt til automatisk med en 0s forsinkelse for demoen til å kjøre glatt. Slide 7 krever ingen animasjon som det er den siste lysbildet i Keynote.
Sett start Overgang til automatisk med en 0s forsinkelse.

Og voila-der er den informasjonen panel effekt, fullført.

Polering Up

Når alt innholdet er på plass og alt er animert som det skal være, er det på tide å rydde opp .

Den enkleste måten å gjøre dette på er å lage en bakgrunn for videoen. For å gjøre dette, opprette fire rektangler ved hjelp av Shape verktøy som ramme iPhone, men ikke overlapper med iPhone-skjermen. .. Bruk verktøyene i Format-panelet for å gjøre hver av boksene ser identiske med hverandre
Lag en bakgrunn av framing iPhone

Tips: En fargefyll som utfyller fargene reflekteres i programmet ditt fungerer best for den bakgrunn. Graderinger og bildefyll tendens til å se rotete og inkonsekvent. Unngå å bruke skygger også.

Velg hver enkelt bokser av kontroll-klikke. Høyreklikk på en av de utvalgte boksene, og klikk Gruppe for å opprette én form. Deretter klikker du på iPhone bildet for å velge den, høyreklikk og klikk Bring til fronten for å skape bildet av en bakgrunn bak iPhone. Kopier bakgrunnen form og lim den inn på hvert lysbilde. Husk å ta med iPhone til fronten på hvert lysbilde for å fullføre effekten.
Bakgrunn legger siste hånd på verket til demoen.
Opptak Demo

Alt som gjenstår å gjøre er å eksportere lysbildeserien som en video. For å gjøre dette, klikk på Fil > Eksporter til > . QuickTime
å eksportere video, velger du Fil > Eksporter til > Quicktime.

Set Avspilling til Slideshow opptak. Format avgjør kvaliteten på video, som kan settes til dine preferanser. Når du har konfigurert disse alternativene til din smak, klikker du Neste for å eksportere videoen.
Konfigurer eksportinnstillingene.

Alt arbeid i Keynote er nå fullført. Innspillingen kan brukes som den er eller redigert ytterligere i andre programmer, for eksempel Final Cut eller iMovie, hvis du ønsker å legge til lyd eller andre videoelementer.

Konklusjon

I denne opplæringen, Jeg instruerte hvordan å demo kart animasjoner for en iOS-applikasjonen i Keynote. Ved hjelp av Keynote Magic Move animasjon, kan du lage glatte animasjoner modellering søk-og-pan og informasjon panel effekter som kan bli funnet i et kartbasert iOS søknad.

Hvis du har ytterligere spørsmål, eller ønsker å se hva andre typer animasjoner som kan modelleres i Keynote, legg gjerne igjen en kommentar der nede! Anmeldelser