Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Prototype classification

1. Sketch prototype

Hand-drawn drawings are used in the early stages of planning to organize ideas.

2. Low-fidelity prototype

Simple interaction, no color matching required, mainly black, white and gray, used in product planning and review stages

Standardized low-fidelity prototypes are the basis for high-fidelity prototypes

3. High-fidelity prototype

Complex interactions, generally used for public demonstrations,

The product first produces a low-fidelity prototype, and the designer produces a design draft based on the prototype

Low-fidelity prototype + design draft = high-fidelity prototype

Axure

1. Operation interface

①Menu area ②Layer area ③Component area ④Drawing area ⑤Style area

2. Common operations

1. Create a new file: File->New
2. Open the file: File->Open
3. Save the file: File->Save
4. Main file types

• .rp: prototype file
• .rplib: component library file
• .rpteam team project file
• .html web page files

1. Autosave: Preferences->Enable backup
2. Combination: Ctrl+G
3. Publish: Generate HTML file from prototype -> It is recommended to create a new folder first
4. Help: About Axure -> View Version
5. Help: Manage Licenses->Crack Software
6. Add original library: component library + number
7. Remove component library: Open component library->More->Remove component library

3. Style design

Drag the component to the canvas and modify the style

4. Interaction Design

Interaction is the process of interaction between humans and computers, and interaction design is the design of the rules and performance of interaction.

In Axure, interactions are divided into interaction styles and interaction logic.

1. The interactive style has built-in common style changes, which is easy to use but cannot set logic

2. The setting of interactive logic is more flexible. By adding events and actions to elements, personalized styles and logical interactions can be completed.

3. The set interactive effects need to be viewed in the preview

5. Repeater

The role of the repeater is to achieve the reuse of the structure, without having to copy and paste all the time

1. Create a repeater, double-click the repeater to enter edit mode
2. Name the components to facilitate subsequent data binding
3. Exit editing, fill in table data (column names only support English)
4. View->Masks->Turn off Repeater Mask

6. Dynamic Panel

Using dynamic panels to achieve content switching effects

1. Add a left navigation bar
2. Add right dynamic panel
3. Double-click the dynamic panel to enter edit mode
4. Set different elements for different states

1. Add click events to the navigation and set dynamic panel states

1. Preview effect

Prototype Specifications

The difference between mobile and computer apps:

1. Screen adaptation (screen size, resolution)
2. Interaction method (mouse is more precise than finger control)

PC

1. Page center

The current mainstream resolution is 1920 * 1080, so the page size is generally between 960-1200, and 1200 is generally recommended.

Before 2012, the mainstream resolution was 1024 * 768, so the page size was 760

2. Navigation

3. Form

4. List

M-side

There is no fixed size specification for mobile terminals. Prototypes are made according to the size of the adapted model. For example, the size of iPhone 6 is 375 * 667

1. Fixed element size

2. Common areas

3. Common display forms