To teach you how to use HYPE3 to do the basics of app prototypes.

Hype3

Official website: http://tumult.com/hype/

APP store:https://itunes.apple.com

　　Scene setting

Demo: IPhone-built music App

1. Open Hype3, the website download the trial version can be used for a long time, there are Jane in the interface, first grab down to play and see, like to buy again. (This set of prices is also very cheap!)

2. Since it is the IPhone Prototype, to change the scene size. I use the 640x1136px, the quality is relatively fine.

3. Because the picture is long, I move the timeline and layers from the bottom to the right.

　　Import Map File

4. Screenshot of mobile phone, throw into Hype3 directly.

(means to do your own things can directly take mockup jpg or PNG map directly on!)

　　Set Action Range

5. To do "the range of Action trigger," on the diagram to draw a rectangle first.

6. The right menu is set without fill, without stroke.

7. The 2nd position of the tab BAR below has a transparent area, which is "range of action triggering".

8. Set the action, although the mobile phone will not have a cursor, but I like to change the trigger area of the cursor to the finger, in the Browser preview can quickly confirm that the link has not been set.

9. Remember, all scenes, layers, and so on, to be renamed into meaningful names, when the number of pages and components is not easy to error.

10. Like Keynote, you can make several components at a time, and select them to copy to other scenes.

(The layers will affect the operation and component display, and if you find that some place is not effective or invisible, check the order of the layers.) )

　　Cut-off mode

11. Click on a BTN, play the page is from the right to the left to advance.

12. So remember to change the effect to "push" (from right to left).

13. The number of seconds I used to set 0.3s, depending on the individual feel different, please try to see for yourself.

14. This Btn point, will appear from the bottom of the song list page. Remember to set "push" (from bottom to top).

15. After the "completion" point, the page will be from the top down.

(When many pages have the same back page, Tab link to deal with, you can finish a page, leaving Copy, past is good.) )

　　Export HTML File

Choose HTML5, Binder, file name well named.

An HTML file and a folder appear. Upload these two files to the server, you can use the phone to open the Web site test.

If you want to preview how you do it, there's a Chrome or Safari icon on the toolbar, just press it. However, it is not real time, every time you modify the save to click again this icon to produce a preview, direct point Browser to see will be modified before the appearance.

　　prototype-specific browser-- Frameless

Official website: http://stakes.github.io/Frameless/

APP store:https://itunes.apple.com

This is a browser that doesn't even have a "status bar", really full screen. Free!

Enter your prototype URL and you can test it with your mobile phone like a real App.

I wish you well!

　　Example

Please use your phone to open the Http://goo.gl/0X0sWV or sweep the QRCode.

The best way to browse is to open it with frameless.

(Proficiency in about 20 minutes in absolute order to make the above steps.) Examples of some details, flaws, the gap is not adjusted. For example, from the bottom up push should not be really pushed away, some more exquisite settings I keep the next experience to share. )