Axure RP 入門教程

總結(jié)了下學(xué)校軟工課上用的PPT上的內(nèi)容以及網(wǎng)上一些教程內(nèi)容。看完基本入門Axure RP了。第一次學(xué)感覺還是蠻有用的。圖片發(fā)不出來。。

附上軟件下載地址以及PPT地址：

http://pan.baidu.com/s/1i3sZxy9

入門篇

 

第一章  介紹以工具欄工具(widgets)繪制示意圖(Wireframe)

第二章  流程圖（FlowDiagrams）撰寫網(wǎng)頁說明(Page Notes)

第三章  高級(jí)交互設(shè)計(jì)（RichInteraction）

第四章實(shí)例

 

第一章介紹

第1節(jié)  認(rèn)識(shí) Axure RP

第2節(jié)  線框圖及其注釋

第3節(jié)  基本交互設(shè)計(jì)

第4節(jié)  使用模塊（Master）

第5節(jié)  HTML 原型

第6節(jié)  輸出規(guī)格說明

 

第一章軟件介紹

第1節(jié)  認(rèn)識(shí)Axure RP

1 . Axure RP

Axure 的發(fā)音是“Ack-sure”， RP 則是“RapidPrototyping”的縮寫。 Axure RP Pro

是美國(guó) Axure Software Solution公司的旗艦產(chǎn)品， 是一個(gè)快速的原型工具， 主要是針對(duì)負(fù)

責(zé)定義需求、定義規(guī)格、 設(shè)計(jì)功能、 設(shè)計(jì)界面的專家， 包括用戶體驗(yàn)設(shè)計(jì)師、 交互設(shè)

計(jì)師、業(yè)務(wù)分析師、 信息架構(gòu)師、 可用性專家和產(chǎn)品經(jīng)理。 

 

Axure能讓你快速的進(jìn)行線框圖和原型的設(shè)計(jì)， 讓相關(guān)人員對(duì)你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，

向用戶進(jìn)行演示、溝通交流以確認(rèn)用戶需求，并能自動(dòng)生成規(guī)格說明文檔。另外， Axure還

能讓團(tuán)隊(duì)成員進(jìn)行多人協(xié)同設(shè)計(jì)，并對(duì)設(shè)計(jì)進(jìn)行方案版本控制管理。 

Axure使原型設(shè)計(jì)及和客戶的交流方式發(fā)生了變革： ?進(jìn)行更加高效的設(shè)計(jì)；   讓你體驗(yàn)動(dòng)態(tài)的原型； ? 更加清晰的交流想法；

2 .  原型的作用和好處

制作 Prototype 是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶在軟件開始投入編程前就確認(rèn)需求。快速原型法（Rapid Prototyping）是一種有效且高效的以用戶為中心（User-Centered Design）的技術(shù)，可以幫助用戶體驗(yàn)專家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財(cái)富 1000 大的公司和重要機(jī)構(gòu)在使用 Axure RP，國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。

 

3、Axure 的工作環(huán)境

Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。

無需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。 Axure 可一體化生成線框圖、HTML 交互原型、規(guī)格說明 Word 文檔。以下是對(duì) Axure RP 工作環(huán)境的簡(jiǎn)要說明：

 

?    1主菜單和工具欄（Main Menu & Toolbar） 執(zhí)行常用操作，如文件打開、保存、格式化控件、輸出原型、輸出規(guī)格等操作。

?    2頁面導(dǎo)航板（Sitemap Pane）對(duì)所設(shè)計(jì)的頁面進(jìn)行添加、刪除、重命名和組織。

?    控件面板（WidgetsPane）該面板中有線框圖控件和流程圖控件，用這些控件進(jìn)行線框圖和流程圖的設(shè)計(jì)。

?    3模塊面板（Masters Pane）模塊是一種可以復(fù)用的特殊頁面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織。

?    4線框圖面板（Wireframe Pane）在線框圖面板中可以進(jìn)行頁面線框圖的設(shè)計(jì)，線框圖面板也就是進(jìn)行頁面設(shè)計(jì)的工作區(qū)。

?    5控件交互面板（Interactions Pane）定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。

?    6控件注釋面板（Annotations Pane）對(duì)控件進(jìn)行注釋定義和對(duì)控件的功能進(jìn)行說明。

?    7頁面交互和注釋面板（Pages Notes & Page Interactions Pane） 添加和管理頁面的注釋和交互。

 

1. 頁面導(dǎo)航面板（Sitemap） 在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。

明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對(duì)頁面層次進(jìn)行重新組織。

頁面的添加、刪除和重命名

點(diǎn)擊面板工具欄上的“Add Child Page”按鈕可以添加一個(gè)頁面，點(diǎn)擊“Delete Page”按鈕可以刪除一個(gè)頁面。

右鍵單擊選擇“Rename Page”菜單項(xiàng)可對(duì)頁面進(jìn)行重命名。

頁面組織排序

在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁面的位置和重新組織頁面的層次。

打開頁面進(jìn)行設(shè)計(jì)在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會(huì)在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。

2.控件（Widgets）

控件是用于設(shè)計(jì)線框圖的用戶界面元素。

在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。

添加控件

從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中，就可以添加一個(gè)控件。

控件可以從一個(gè)線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個(gè)線框圖中。

操作控件

添加控件后，在線框圖中點(diǎn)選該控件，然后可以拖拉移動(dòng)控件和改變控件的大小，還可以一次同時(shí)對(duì)多個(gè)控件進(jìn)行選擇、移動(dòng)、改變尺寸。

另外，還可以組合、排序、對(duì)齊、分配和鎖定控件。這些操作可通過控件右鍵菜單中進(jìn)行，也可在 Object 工具欄上的按鈕進(jìn)行。

編輯控件風(fēng)格和屬性

有多種方法可以編輯控件的風(fēng)格和屬性：

?         鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對(duì)控件的最常用屬性進(jìn)行編輯。

例如，雙擊一個(gè)圖片控件可以導(dǎo)入一張圖片；雙擊一個(gè)下拉列表或列表框控件可以編輯列表項(xiàng)。

?         工具欄：點(diǎn)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。

?         右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。

 

3. 注釋（Annotations）

可以為控件添加注釋，以說明控件的功能。

添加注釋

 在線框圖中選擇控件，然后在控件注釋和交互（Annotations and Interactions）面板中編輯字段中的值，即可為控件添加注釋。面板頂部的 Label 字段是為控件添加一個(gè)標(biāo)識(shí)符。

自定義字段（Fields）

通過主菜單 Wireframe->Customize Annotation Fields and Views 或點(diǎn)擊面板上Annotations 頭部的“Custommize Fields and Views” 然后在彈出的 CustommizeFields and ， Views 對(duì)話框中可以添加、刪除、修改、排序注釋字段。

4. 頁面?zhèn)渥ⅲ≒age Notes）

頁面?zhèn)渥⒖墒菍?duì)頁面進(jìn)行描述和說明。

添加頁面?zhèn)渥?/strong>

在線框圖下面的 Page notes 面板中可以添加頁面?zhèn)渥?nèi)容。

第3節(jié)基本交互設(shè)計(jì)

 

1.   控件的交互

控件交互面板用于定義線框圖中控件的行為，包含定義簡(jiǎn)單的鏈接和復(fù)雜的 RIA 行為，所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行。

在控件交互面板中可以定義控件的交互，交互事件（Events）、場(chǎng)景（ Cases）和動(dòng)作（Actions）組成：

?   用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和OnMouseOut；

?    每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；

?   每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。

事件場(chǎng)景和動(dòng)作的關(guān)系

 

以下是 Axure RP支持的事件如下：

?     OnClick：鼠標(biāo)點(diǎn)擊

?     OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對(duì)象上 ?

?     OnMouseOut：鼠標(biāo)的指針移動(dòng)出對(duì)象外 ?

?     OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)） ?

?     OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài) （失去焦點(diǎn)） ?

?     OnPageLoad：頁面或模塊載入

?     大多對(duì)象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter 與 OnMouseOut，

 一些特殊的控件可觸發(fā)的事件有些不同： ?

?     按鈕控件只有OnClick ?

?     單選框和復(fù)選框則具有OnFocus、 OnLostFocus

?     文本框、文本域、下拉框、列表框則具有 OnKeyUp、OnFocus、OnLostFocus ? 頁面加載或模塊被載入時(shí)則發(fā)生 OnPageLoad

 

2、定義鏈接

下列步驟說明如何在按鈕控件上定義一個(gè)鏈接：

1. 首先，拖拉一個(gè)按鈕控件到線框圖中，并選擇這個(gè)按鈕；

2. 然后，控件交互面板中鼠標(biāo)雙擊“OnClick”這個(gè)事件，這時(shí)會(huì)出現(xiàn)“InteractionCase Properties”對(duì)話窗，在這個(gè)對(duì)話框中可以選擇要執(zhí)行的動(dòng)作；

3. 在“Step 2”中，勾選“OpenLink in Current Window”動(dòng)作。

4. 在“Step 3”中，點(diǎn)擊“Link”，在彈出的 LinkProperties 對(duì)話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。

 

除了上面的步驟，加入一個(gè)鏈接的最快的方法是單擊控件交互面板頂部的“Quick Link” ，在彈出的Link Properties 對(duì)話框中選擇要鏈接的頁面。

 

1.      設(shè)置動(dòng)作

除了簡(jiǎn)單的鏈接之外，Axure 還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場(chǎng)景中執(zhí)行。

以下是 Axure 所支持的動(dòng)作： 

Open Linkin Current Window：在當(dāng)前窗口打開一個(gè)頁面?

Open Linkin Popup Window：在彈出的窗口中打開一個(gè)頁面?

Open Linkin Parent Window：在父窗口中打開一個(gè)頁面

CloseCurrent Window：關(guān)閉當(dāng)前窗口?

Open Linkin Frame：在框架中打開一個(gè)頁面?

Set Panelstate(s) to State(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài)

ShowPanel(s)：顯示動(dòng)態(tài)面板?

HidePanel(s)：隱藏動(dòng)態(tài)面板?

ToggleVisibility for Panel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)（顯示/隱藏）?

MovePanel(s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來移動(dòng)動(dòng)態(tài)面板

SetVariable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 ?

Open Linkin Parent Frame：在父頁面的嵌框架中打開一個(gè)頁面

Scroll toImage Map Region：滾動(dòng)頁面到

Image Map所在位置

EnableWidget(s)：把對(duì)象狀態(tài)變成可用狀態(tài)?

DisableWidget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài)?

WaitTime(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作?

Other：顯示動(dòng)作的文字說明

 

4.多個(gè)場(chǎng)景（條件）

一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。

5. 頁面上的事件: OnPageLoad

 

Axure 支持一個(gè)頁面層級(jí)的觸發(fā)事件：OnPageLoad，這個(gè)事件在原型載入頁面時(shí)觸發(fā)。

頁面 OnPageLoad 事件在頁面?zhèn)渥⒚姘逯械?Interactions子面板中定義， OnPageLoad 為事件添加場(chǎng)景的方式與控件事件相同

 

實(shí)例―用戶登錄

 

第一步，添加一個(gè)點(diǎn)擊事件

選中登陸按鈕，雙擊鼠標(biāo)點(diǎn)擊時(shí)新增一個(gè)用例，在彈出的用例編輯器中點(diǎn)擊新增條件。

第二步，添加條件

在條件生成器中，配置 如果部件 "username" 文本框的內(nèi)容 = “jinwu”
我們這個(gè)案例要做的效果是，對(duì)用戶登陸名和密碼進(jìn)行判斷，如果正確就打開新頁面，如果失敗就提示錯(cuò)誤。
這個(gè)條件的意思就是，如果輸入的用戶名 = jinwu

 

第三步，添加第二個(gè)條件

在條件生成器中，點(diǎn)擊條件表達(dá)式右側(cè)的 + 號(hào)，添加一個(gè)條件。
配置：如果部件 “pwd” 文本框的內(nèi)容 = “l(fā)aoshi”
此條件的意思就是 如果 輸入的密碼 = laoshi

要注意的是，在條件生成器的左上角，我們使用的是滿足全部以下 條件，也就是and狀態(tài)。
意思就是要同時(shí)滿足我們添加的兩個(gè)條件才執(zhí)行動(dòng)作。

第四步，給用例添加動(dòng)作

當(dāng)要添加的條件定義完畢后，我們就要添加當(dāng)條件被滿足后所要執(zhí)行的動(dòng)作了。

第四步，給用例添加動(dòng)作

當(dāng)要添加的條件定義完畢后，我們就要添加當(dāng)條件被滿足后所要執(zhí)行的動(dòng)作了。

在用例編輯器左側(cè)，點(diǎn)擊 當(dāng)前窗口 選擇 successed 頁面。點(diǎn)擊確定，關(guān)閉該對(duì)話框。

第五步，添加第二個(gè)用例else if

現(xiàn)在我們已經(jīng)添加了 登陸成功 時(shí)的用例，讓我們來繼續(xù)添加 登陸失敗時(shí) 的用例。
雙擊鼠標(biāo)單擊時(shí)事件或者點(diǎn)擊 新增用例， 注意 else if true 會(huì)自動(dòng)添加到第二個(gè)用例中。
默認(rèn)情況下，第二個(gè)用例是設(shè)定在第一個(gè)用例不被滿足的情況下執(zhí)行的。
在這個(gè)例子中，我們就不需要給第二個(gè)用例添加條件了。（因?yàn)闆]有其他條件，如果登陸不成功，就是失敗。）

第六步，添加顯示動(dòng)作

當(dāng)?shù)顷懯r(shí)，我們想讓他在登陸按鈕下面顯示一條錯(cuò)誤提示，我們添加一個(gè) 文本標(biāo)簽，并輸入內(nèi)容：“用戶名或密碼錯(cuò)誤，請(qǐng)重新登陸！”
給該文本部件命名為 ErrorMessage 并將其設(shè)置為 隱藏。
在第二個(gè)用例中點(diǎn)擊 顯示 動(dòng)作，并 選擇 ErrorMessage 設(shè)置為 顯示。

 

第七步，使用 F5 鍵 快速預(yù)覽效果！

 

學(xué)習(xí)資料

 

?     http://www.axure.com/learn

 

 

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)