1. Open AxureRP software and select "RP Prototype" template when creating a new project.

2. Create a new page in AxureRP for image conversion.

3. Drag the image to be converted onto the page and adjust the size and position of the image.

4. Select "Hot Zone" in the "Interaction" panel of AxureRP, and use the hot zone tool to cut the picture into the required shape, such as rectangle and circle.

5. For each hotspot, you can add links and interactive effects in the interactive panel, such as popping up layers and switching states.

6. After adding all hotspots and interactive effects, you can preview the page effects in AxureRP to check whether they meet the requirements.

7. Save the page as an RP prototype file.

How to put the elements in a web page into the new prototype design is actually very easy to learn, that is, drag the controls to complete the layout. You can learn from the design of static pages, get familiar with each control, and then understand what this control can do (what events can be added) and what controls can be accepted (what events can do to it, such as enabling/disabling? Receiving parameters? Change state? )。 In this process, paying attention to the design idea of axure software itself will get twice the result with half the effort. Then start learning interaction, find some websites instead of sample tutorials to practice, draw static first, then see what the interaction of websites is like, and try to make it with axure. At this time, you will encounter specific problems. According to your understanding of software thinking, think about how to solve it, first explore and then find a solution. After repeating it several times, you will basically achieve a common interactive effect, and in the process, your understanding of axure itself will also deepen. Then there are more and more effects, and they will take the effect control route, always trying to achieve the highest fidelity, even to the css level of the generated file. Some effects can actually be described clearly in one sentence, but it is troublesome and unnecessary to realize them. Finally, take the easy route slowly. Simple and practical is good. At this time, we will pay more attention to efficiency, how to make a module into a template for multiple pages to reuse, how to package and share components with other colleagues, and how to complete a prototype design through axure and multi-person cooperation.

What software does the ui prototype diagram use? 1. Rapid prototyping.

Rapid prototyping focuses on the rapid output of wireframe prototype, which lacks interactive function and can also be said to be a prototype with low security. Commonly used tools are:

1, pencil. It is an open source hand-drawn prototype drawing tool with rich components. There is no interaction except using hyperlinks, which can only be used to draw the interface quickly. Can be exported to PNG, pdf, web format.

Stupid. A prototype design tool (English website) can be opened directly in the browser without registration or download. Mainly used for designing sketches. Simple function, less interaction and fewer parts. Although lumzy is relatively simple, it is fast to use, suitable for rapid prototyping, and is also used by many UI designers. It can be exported as pdf and jpg documents.

3. Simulation Creator. Can prototype the interface but can't interact, that is, the output is only a conceptual sketch. At present, only three static file formats, PNG, RTF and PDF, are supported for export.

4. Simulate the building. It is also a sketch prototype, with more parts than lumzy and MockupCreater, and can only achieve interactive effect with hyperlinks. At present, only PNG and PDF formats can be exported.

Second, interactive prototype.

Compared with rapid prototyping, interactive prototyping can not only make wireframe prototypes, but also realize rich interactive functions. In the case of sufficient project scheduling time, it is suggested to adopt interactive prototype design. In addition, these interactive prototypes can also be comfortable prototypes with high fidelity. Among them, the representative tools are:

1, Tencent UIDesigner. It has powerful template and prefabrication functions, and can quickly build a high-fidelity prototype of the software interface. It can realize rapid communication among designers, product managers and program development engineers and reduce unnecessary internal friction. Version 2.0 is characterized by comprehensive interaction and quick response, but it is designed for PC platform applications. UIDesigner preview is very convenient, and you can export exe files.

2. Flash. From the most popular FlashMX and Flash8.0 to the current CSN, various versions have been iterated, which is as long as PS. It is powerful, it can make almost all kinds of desired effects, even UI, and can even be directly developed, but the technical requirements are high, and you need to know some AS scripts to make good effects. Export is very convenient, except for its own swf format, exe, picture format and even web format.

3. Axis. Is a professional rapid prototyping design tool, which enables experts responsible for defining requirements and specifications, designing functions and interfaces to quickly create wireframes, flowcharts, prototypes and specification documents of application software or websites. As a professional prototype design tool, it can quickly and efficiently create prototypes and support multi-person collaborative design and version control management.

Third, high fidelity prototype.

Simple high-fidelity prototype pays more attention to visual effect, but lacks interactive function, which is the basic visual design prototype software that UI designers must master. The tools used are mainly PS and illustrator. The existing version can even be directly cut and saved as a web format. Skillful use can replace the work of a large part of visual designers and reconstruction engineers.