In addition, this work also contains a variety of commonly used mobile components such as court navigation, calendar, repeater, form, action panel, chart, card and so on. , which can be directly copied or dragged into the project for use. For beginners, it is also a friendly template for Axure interactive learning.
Click here to preview the complete prototype.
Some pictures
Drawing the prototype Axure with Axure is one of the most commonly used prototype jobs. You don't need any HTML/CSS/JavaScript foundation, and you can make a prototype diagram with good interactive effect by using Axure. This series of notes is based on Sun Wu's book AxureRP7 Website and APP Prototype from Entry to Proficiency, and systematically studies Axure as a prototype tool software and the design idea behind it.
Before we begin, let's ask some basic questions:
(1) What is user experience design? What is interaction design? What is visual design? What is the relationship between them?
(2) What is UE? What is UX? User experience? Availability? What are the indicators and elements to measure "user experience"? How to understand "availability"?
(3) What's the difference between wireframe, prototype and visual sketch? What is the usage scenario?
Wireframe:
The real picture of the minimum living allowance is usually represented by "black, white and gray" lines, and the production speed is fast.
Prototype diagram:
High-fidelity images can represent the final product and be used for communication among stakeholders.
Visual manuscript:
High fidelity image, good visual effect.
In most companies, there is no clear line between product managers and user experience designers, and you can even regard them as the same role.
The product manager "mediates" among development engineers, system functions, visual design, users, business logic, project managers and investors, coordinates resources and promotes product development. As product managers, we must deeply understand the perspectives of stakeholders (what they really want) and communicate closely with them, so as to create a barrier-free collaborative environment and promote the development of products within a controllable range.
As product managers, we must comprehensively express many different information, which are often contradictory or conflicting. We should not only be familiar with business processes, but also understand technical constraints and resource constraints, understand the impact of user experience on the performance of software programs, and do user research and data analysis repeatedly. We should find a crucial balance in the chaotic multi-condition mode and create the best feasible user experience.
In fact, any tool is just a means to achieve product goals. Axure is just a tool. The most important element in work is not these tools, but you and your thoughts.
1, division of public functional areas on Axure workbench
Menu bar, toolbar, site map, parts panel, main panel, parts interaction and annotation panel, parts attribute and style panel, parts management panel and page attribute panel (including three tabs: page annotation, page interaction and page style).
View > reset view
, you can reset the Axure workbench.
( 1)
Site map
: Used to add, delete and organize pages in the prototype.
(2)
Component panel
: Used to manage Axure built-in component libraries, third-party component libraries and custom component libraries.
2. What are the commonly used built-in components of 2.Axure?
A wireframe is made up of a series of components, just like the front page. This page consists of a series of UI components. Different parts have different functional attributes, so these parts should be selected properly in the process of drawing the prototype.
3. What operations can be performed on Axure parts?
4. What are the common operations of 4.PageStyle?
5. Interaction foundation in 5.Axure
Create in Axure
mutually
Interaction needs to include the following three components, namely:
event
Events,
Use case
Case,
behaviour
Action. Interaction is triggered by events, which are used to perform actions; The purpose of interactive design is to change static elements into dynamic elements, thus improving the user experience of products.
Interaction is a building block in Axure, which is used to transform static wireframes into interactive HTML prototypes. each
mutually
It consists of three basic units, namely
When and when (event)
、
Where where (use case)
、
Do what (action)
( 1)
Event (when)
: When did the interaction happen? Interaction is event-driven. Events in Axure can be divided into two categories, one is page events and the other is component events. An event can contain multiple use cases, and multiple use cases decide which use case path to execute according to conditional judgment.
(2)
Use case case (among them)
Use cases are abstract expressions of the interaction process between users and applications or websites, and each use case can encapsulate an independent path. Usually, we let the prototype perform actions according to the main path, but in order to respond to different operations or other conditions of users, we need to make alternative paths to perform other actions. Use cases in Axure are used to create different execution paths for events.
An event can contain one or more use cases (execution should be judged according to conditional logic when using multiple use cases), and one use case contains one or more actions. In fact, you can think of use cases as containers for actions.
(3)
Action action (what)
An action is a response to an event defined by a use case. Actions in Axure are divided into six categories, namely, link, metablog, variable, repetition and miscellaneous.
How to draw an app prototype with axure? Learn more and practice more.
After drawing the prototype,
1. Download Axure
2. If it is aimed at itouch or iPhone, it will be easier. Draw auxiliary lines directly with a resolution of 320×480, and then draw the prototype.
3. When you press F5 to generate a prototype, you can set a special prototype suitable for mobile devices in the "Phone/Device" option.
4. See the following figure for the description of the settings: (The page size shows that my setting is 320×480, and it is not scaled by default).
5. Use your mobile device to access the prototype link you generated (such as a local server or a Dropbox host).
6. Create a desktop shortcut for this page. 7. Done (with icon and splash screen)
In addition: mouse action or complicated page interaction is troublesome and not recommended. Try to be concise.