Teach you to use keynote to make app prototypes

Apple itself has a prototype team that is involved in all the prototyping work, including animation and interaction, among the various project teams. Their main tool is keynote.

This comes from WWDC 2014 session videos. There's a video prototyping:fake it Till you made it, which is how they guide you to make realistic interactive prototypes with keynote, which I've just seen, and I've always wanted to get to the previous answer. In Here's a screenshot of this video that describes how they can give full play to the keynote features.

A summary of the first:

1, Static diagram

First with a drawn wireframe or directly in the keynote with the color block layout

Fill in the picture, you can adjust the basic effects such as shading

Export the picture and put it in the phone.

Adjust according to user feedback

2, animation effect

Using Keynote's own animated objects

Utilize keynote's best "magic Move" transition effect

Mobile phone loaded with keynote app open demo document

Adjust effects based on feedback

3, interactive events

Adjust Picture dimensions Import Xcode

Use simple code for pictures only

With simple interactive gesture code

The first stage: the production of static diagrams

First with the drawing of a good wireframe or directly in the keynote with the color block layout, Keynote provides a variety of intelligent alignment, layout, format and so on, the whole process will be very easy. such as automatic ruler adsorption equidistant, and so on, than most prototyping software is simple and user-friendly.

2. Control some of the wireframes can continue to spread the color block and layout, this process you will find that the alignment and adsorption process is how magical.

3. Import pictures, keynote There are many ways to adjust the material style, package box, shadow, transparent map, real-time mask and so on. Yes, you can play with PS slowly, you can also use keynote a key to complete.

4. Many people use the prototype software is to fancy those controls, in fact, most controls are not as good as their own keynote in the production of fast. And keynote with a lot of signs and icon, completely do not have to look around. For example in this example of scoring with five-star, to change a yellow on it.

5. And so on, you can quickly make a lot of pages, export picture format, in the mobile phone to view

The second stage: false interaction, add animation effect

Specifically on why to do so, each stage after the feedback process, goals and so on the principle of things please see video or PDF, here the main next process and how they are fully play keynote in the prototype production characteristics.

This is the final phase of the interactive prototype, for instance, if you don't need to xcode the fake interaction phase. The basic principle is to utilize the picture, utilize the object animation, utilize the transition animation, enough to make the original prototype, as long as your test users do not blind point ...

There are very many and fine tuning effects on Keynote's own animations, at first I didn't quite understand, because a lot of fancy effects are hard to use on the slides until we start prototyping and find that many of the animations are tuned to be good interactive, including some amazing bounce, latency, and other realistic details that are now seen. Keynote has long been able to fine-tune the simulations.

It is said that hammer cell phone and Apple's many interactive effects, are first made with keynote to the engineer to write out. (It seems to be, not remember, no responsibility is said to warn)

1. There are many ways to make animation, according to your career, the habit of choosing different methods.

There are also a lot of clever ways, the simplest and fastest is to be sure to use the picture flexibly. Flexible to what extent, I give a video inside the audience comedy example. The animation is like this: tapping on the keyboard, the characters are popping up on the screen. It says, I can do it with just one line or simply without the code. This can be achieved with keynote, you can think about it.

That's what they do:

Make a picture of each letter ...

You can also make different effects by resizing the order size of the picture.

2. Special mention is made of a keynote unique "magical movement" effect. You can move or enlarge an object on the previous page to the next page. The effect is very outstanding.

Well, in fact, most of the animation effect can be done out. If you're not satisfied with this, learn some simple syntax, and in Xcode you can make more realistic prototypes with only the code for pictures and interactions.

And then compare the difference between using code and keynote

Review the three phases:

Here is Apple's official prototype of how to make a keynote app for the main tool.

I uploaded the video and documents to the Baidu Keynote_ free high speed download

Another about the use of keynote, recommended that everyone in the Http://weibo.com/xucen to follow the study, enough to start from scratch to complete the prototype, you can do a beautiful slide investment go, two birds!

(non-advertising, easy to relax)