Demoo use cheats for mobile end Scheme design Demo

Tencent has previously mentioned a lightweight and efficient demo Demo tool, today this article with the Universal K-Song prototype production as an example, introduced from scratch to create a prototype process, and in each process to introduce the process of the technique.

For every designer's daily work, how to effectively explain their own plan is a very important step, if only a prototype diagram scheme, no matter how clearly labeled, there will be a certain degree of communication understanding cost, so usually will need a prototype demo to help you to the program for intuitive demonstration, To clarify the various details of the scheme, operating experience and so on. In order to help everyone in the mobile internet era, rapid and simple prototyping Demo,demoo emerged.

Demoo is a web-based design tool for visualizing operations within a browser. By uploading plane manuscripts, using gestures or contact hot zone to connect the interface, join the transition effect, output a simulation of the app, can experience the operation of the design, to meet in the computer, conference projection site and mobile phone experience operation.

　　Step 1: Import pictures

　　Techniques involved: Bulk Import

In the design tool, I have designed the Universal K song 5 main pages of the map and named well saved in the folder, ready to start making prototypes. As shown in the picture, Demoo support to bulk import pictures, I need to select all the pictures, drag and drop into the virtual box, you can complete the picture import work. After the import, it is equivalent to you have to put the app raw materials on the workbench, then the operation will be particularly convenient.

　　Techniques involved: Picture sort

Demoo support us to drag and drop pictures, in the title bar area mouse Stop, you can find the mouse pointer into 10 font, at this point can drag the page. Tips: According to the app's main tab logic placement page, the following Establishment tab jump, will be more relaxed Oh!

　　Step 2: Create a jump between tabs

　　Tips: Use copy-and-paste hot zones to quickly establish links

After the import, the nature is to create a jump link to each page, where you need to jump links, drag the mouse, you can set up a hot zone, loosen the mouse to see the hot Zone small tail, click the corresponding jump page, click again, a link to complete. At this time, you will realize that so many jumps, then how many times do I have to order? Demoo has a very striking design--the hot zone can be replicated!!! This means that all pages, the same jump can be copied to reduce the operation. This is a lot of things to do in the process of making tabs. For example, all navigation inside the "discovery" is actually linked to the second page, so I just need to create a hot zone link, in the next few pages copy and paste hot zone, the other several pages quickly set up a good hot zone! The most effective is that the process of copying and pasting, the location of the hot zone will not change!

　　Step 3: Fixed scrolling area for long pages

　　Tips: Remember top bar and bottom navigation height, accurately set scrolling area without leaving white

For example, dynamic pages are very long, you need to simulate the effect of scrolling page, the actual app, the top bar and the bottom of the navigation is not moving, at this time, only need to drag up and down fixed anchor point to fixed position. Here Demoo has a little bit of praise for the small details that are when you drag the anchor, it zooms in on the middle of the page and displays the pixel value of the anchor drag, so just remember the top bar and the height of the bottom navigation, you can always drag it to a perfect location with no white edges.

　　Step 4: Set the page slide gesture

　　Tips: Double-click the gesture area to quickly set the gesture hotspot

When large-screen mobile phones become more and more flooded, gesture sliding becomes a very common operation, Demoo can also simulate gesture operation Oh!

As shown in the page to the left of a row of fingers, is used to set gestures, from top to bottom respectively for the left, right, slide, slide, the gesture operation, you can choose according to need. Double-click Gestures, you can appear and hot area tail like blue connector, in the corresponding need to stay on the page to complete the gesture operation of the set, finished, the fingers into blue, motioned to have gestures. Figure, I gave this page a right sliding back to the homepage of the operation, analog gesture returned.

　　Step 5: Create a page switching direction, grinding details

　　Tips: The mouse stays in the toggle signal area, previewing the animation effect

In real-world apps, pages often use direction to indicate hierarchical relationships, such as a recreated process, which typically creates a page that is called up from the bottom, so that when the hot zone link is established, we need to set the direction of the link. As shown in the diagram, I will call the song station to appear in the form of the page, set to go up from the bottom up. If you are not very sure of the switching effect, Demoo very carefully designed in this animation preview, the mouse to stay on the small box, there will be micro-animation signals, read a few times also understand.

　　Step 6: Preview the prototype effect on the phone

　　Tips: Adding prototypes to your mobile desktop to simulate the most authentic app experience

Demoo support Everyone with a hand Q sweep on the phone to see the prototype, but in the hand Q open link particularly unstable, accidentally returned, and again sweep the two-dimensional code. One trick is that you can add prototypes to your desktop, and as long as you're set up, Demoo can do the app's icon and splash screen to simulate it, allowing you to experience the real sense of opening the app from your desktop! Click on the right side of the screen settings, upload a good app icon and splash screen, with mobile phone QQ sweep two-dimensional code to open the page, Then open the link in Safari and share it to the screen in Safari, so you're done, you can open the app from the desktop! Is it silly to know whether it's app or app prototype?

At this point, the design of an app prototype is complete, you are welcome to sweep the two-dimensional code onlookers this simple prototype. When the national K Song 3.0 proposal, take this prototype to the product manager to see, product managers are stunned Yo!

Finally, I heard that a lot of trial friends are asking, how to simulate the effect of floating layer in the Demoo, Demoo is actually better at the jump between the pages, then how to simulate it? Here's a little trick.

Step 1: There will be no floating layer and floating layer of two graphs, import Demoo

Step 2: In the absence of the floating layer of the figure, click out the area of the floating layer to establish a hotspot, connected to a floating layer status page.

Step 3: In the floating layer of the page to create a click on the blank returned no floating layer page of the Hotspot link (note that the choice of transition animation fade OH)

Yes, with two states of the jump, you can simulate the floating layer appeared ~ Of course, this technique is not perfect in the dynamic effect, the play through, Demoo team is fully improve the design of the floating layer Oh, I believe that the follow-up will be better use of the method!