Principle Using Tutorials

The main points of this share are as follows:

1. First knowledge interface 2. Two key operations 3. Case one: Slide 4. Case two: Click to jump

5. Case three: Follow the animation (drawer effect)

1 The interface of principle interface is basically consistent with sketch, such as:

A. Attribute area:

• In this area, you can adjust the individual properties of the selected layer. such as position, size, transparency, etc.

• After opening the software, first choose the environment you want to demonstrate demo, click "Size presets" to select the menu in the popup

B. Layer area:

• A "Artoard" is a canvas, or it is understood as a page. Layers in the canvas overlap each other in their list of ascending and lower order

• "Artoard" can be directly copied and pasted, in order to quickly achieve the jump between the page effect

C. Main Stage:

Draw or import pictures directly into the panel

D. Workspace:

Show page effects directly in this area and interact with preview, with "One-click initial" and "record" features

E. Functional area:

• Drivers: An artifact that makes interactive animations, using the same way as "set KeyFrames"

• Animate: Use it primarily to adjust the effect of transition animations

• Group: Tools for playing groups

• Fonward/backward: Adjusting the upper and lower relationships of overlapping layers

2 two key operations 1. How is the interaction implemented?
A. Click the interactive control B. In the pop-up menu, select the interaction you want

C. Press and hold the option and drag to the target page (the system will give the user feedback in purple)

2. How is the transition action set?
A. Select the transition animation you want to set B. In the list that pops up, adjust the properties (including size, position, transparency, and so on) that are changing. If you click on the previous "Green block", you can stop the effect of this property

C. Click the "Default" button to transition the animation effect (linear not recommended, there is a small crying face)

3 Case one: Sliding

Principle drawing is not convenient, so I still cooperate with Axure to draw a line block diagram, then paste into principle.

1. Import the "fixed layer" into the principle, in the title module

2. Slide the page vertically, then import the "slide only" layer separately

3. Some modules can also be sliding horizontally, they are imported separately (for example, four parts are imported: fixed title, portrait, landscape, two graphs)

4. Group the "sliding" layer

5. Set "vertical draggable" in whole set

6. Select the horizontal slide layer and set "drag horizontally"

The effect is as follows:

4 Case Two: Click to jump (floating card effect)1. First import a menu layer and paste it above the page

2. Copy the entire "Artoard" and move the menu to the position after the jump (make sure the moving layer is named in two Artoard)

3. Animate (make a transparent rectangle as the touch point)

The effect is as follows:

5 Case Three: Follow the animation (gradient drawer)1. Import the required layer, set it to slide after grouping 2. Import "drawer layer" (not following slide)

3. Open "Drivers", select "Can traverse Group", create "X" starting keyframe at 0 points (+ number after point group)

4. Drag the handle to move the "can traverse group" to create the end keyframe when the drawer is fully rendered (click the + sign again)

5. Select drawer layer, click the Start Keyframe, and create a transparency keyframe. and set the starting frame's transparency to 0

6. Similarly, move the handle to the position of the "Can traverse Group" end frame, set the end keyframe to a transparency of 100%

7. Copy the entire "Artoard" and in the new canvas, adjust the effect of the layer to the drawer open

8. In the previous canvas, set the "swipe end" to jump the interaction

The effect is as follows:

These are some of the more commonly used in principle operation, very good understanding is also very easy to use, can greatly improve the work efficiency of designers.

It is also important to note that principle is more suitable for "big process" demonstrations, when you want to comb the overall product architecture or operation process, can help you quickly create an interactive prototype, to identify problems or deficiencies. If you want to do some precise animation, it will not meet your needs, it is recommended to use other prototyping tools such as origami.

Principle Using Tutorials