Top Banner
AxureRP 進進進進 Day 2
40

Axure rp 6.5 教育訓練 day2

Aug 06, 2015

Download

Education

Tim Huang
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Axure rp 6.5 教育訓練 day2

「 AxureRP」進階功能

Day 2

Page 2: Axure rp 6.5 教育訓練 day2

大綱• Widgets & Masters• Building Interactions• Dynamic Panels• Conditions, Values, and Variables• 練習

Page 3: Axure rp 6.5 教育訓練 day2

Widgets & Masters

Page 4: Axure rp 6.5 教育訓練 day2

Widgets & Masters

• Add, edit, and style a widget. Then, convert them to a master that you can manage centrally and reuse throughout your design.

Page 5: Axure rp 6.5 教育訓練 day2

1:Add a Button Shape and Set the Rollover Style

Page 6: Axure rp 6.5 教育訓練 day2

2:Duplicate and Distribute the Button Shapes

Page 7: Axure rp 6.5 教育訓練 day2

3:Convert the Button Shapes to a Master

Page 8: Axure rp 6.5 教育訓練 day2

4:Change the Master to Place in Background

Page 9: Axure rp 6.5 教育訓練 day2

5: Place the Master on Each Page

Page 10: Axure rp 6.5 教育訓練 day2

6: Add Links to the Button Shapes in the Master

Page 11: Axure rp 6.5 教育訓練 day2

DEMO

• 招募系統 _第一階段 V0.16

Page 12: Axure rp 6.5 教育訓練 day2

Building Interactions

Page 13: Axure rp 6.5 教育訓練 day2

Building Interactions

• Make the OnClick Event of a Button Shape enable and set focus on a Text Field using the Case Editor. Then, use the page's OnPageLoad event to put the cursor in a Text Field when the page is loaded.

Page 14: Axure rp 6.5 教育訓練 day2

1: Add a Button Shape and Two Text Fields

Page 15: Axure rp 6.5 教育訓練 day2

2: Disable the Second Text Field

Page 16: Axure rp 6.5 教育訓練 day2

3: Make Clicking the Button Disable the First Text Field

Page 17: Axure rp 6.5 教育訓練 day2

4: And Enable the Second Text Field

Page 18: Axure rp 6.5 教育訓練 day2

5: And Set Focus on the Second Text Field

Page 19: Axure rp 6.5 教育訓練 day2

6: Set Focus on Text Field 1 when the Page Loads

Page 20: Axure rp 6.5 教育訓練 day2

DEMO

• 下拉式選單連動

Page 21: Axure rp 6.5 教育訓練 day2

Dynamic Panels

Page 22: Axure rp 6.5 教育訓練 day2

Dynamic Panels

• Create a simple image carousel using the dynamic panel. Start by placing an Image Widget on each panel state. Then, add an interaction to a Button Shape to advance through the states with animation.

Page 23: Axure rp 6.5 教育訓練 day2

1: Add an Image and a Button Shape

Page 24: Axure rp 6.5 教育訓練 day2

2: Convert to Dynamic Panel and Add States

Page 25: Axure rp 6.5 教育訓練 day2

3: Add An Image to Each State

Page 26: Axure rp 6.5 教育訓練 day2

4: Make Clicking Next Set the Panel to the Next State

Page 27: Axure rp 6.5 教育訓練 day2

DEMO

• Ball Free Fall

Page 28: Axure rp 6.5 教育訓練 day2

Conditions, Values, and Variables

Page 29: Axure rp 6.5 教育訓練 day2

Conditions, Values, and Variables

• Create a Condition to check if the text in a Text Field is blank and link to the appropriate page. Use a Variable to store the text entered into a Text Field. Then, use the Variable to set the text on a Widget on the next page.

Page 30: Axure rp 6.5 教育訓練 day2

1: Add a Text Field and Button Shape

Page 31: Axure rp 6.5 教育訓練 day2

2: Add a Condition to Check that the Text Field in Not Blank

Page 32: Axure rp 6.5 教育訓練 day2

3: Set the OnLoadVariable to the Text Field Value

Page 33: Axure rp 6.5 教育訓練 day2

4: Add the Action to Open Page 1

Page 34: Axure rp 6.5 教育訓練 day2

5: Add a Second Case for When the Text Field is Blank

Page 35: Axure rp 6.5 教育訓練 day2

6: Add a Rectangle to Page 1

Page 36: Axure rp 6.5 教育訓練 day2

7: Set the Rectangle Text When the Page Loads

Page 37: Axure rp 6.5 教育訓練 day2

8: Put the OnLoadVariable in the Welcome Message

Page 38: Axure rp 6.5 教育訓練 day2

練習• 依權限看到不同頁面

• 請使用 AxureRP V6.5版

Page 39: Axure rp 6.5 教育訓練 day2

Q&A

Page 40: Axure rp 6.5 教育訓練 day2

謝謝