Axure RP 入門教程

總結了下學校軟工課上用的PPT上的內容以及網上一些教程內容。看完基本入門Axure RP了。第一次學感覺還是蠻有用的。圖片發不出來。。

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

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

入門篇

 

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

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

第三章  高級交互設計（RichInteraction）

第四章實例

 

第一章介紹

第1節  認識 Axure RP

第2節  線框圖及其注釋

第3節  基本交互設計

第4節  使用模塊（Master）

第5節  HTML 原型

第6節  輸出規格說明

 

第一章軟件介紹

第1節  認識Axure RP

1 . Axure RP

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

是美國 Axure Software Solution公司的旗艦產品， 是一個快速的原型工具， 主要是針對負

責定義需求、定義規格、 設計功能、 設計界面的專家， 包括用戶體驗設計師、 交互設

計師、業務分析師、 信息架構師、 可用性專家和產品經理。 

 

Axure能讓你快速的進行線框圖和原型的設計， 讓相關人員對你的設計進行體驗和驗證，

向用戶進行演示、溝通交流以確認用戶需求，并能自動生成規格說明文檔。另外， Axure還

能讓團隊成員進行多人協同設計，并對設計進行方案版本控制管理。 

Axure使原型設計及和客戶的交流方式發生了變革： ?進行更加高效的設計；   讓你體驗動態的原型； ? 更加清晰的交流想法；

2 .  原型的作用和好處

制作 Prototype 是個有效的簡化文檔編制、吸引使用者參與、早期辨認需求遺漏、將外在需求風險降到最低的方法。將大量文字性文檔轉變為帶有注釋與互動性的可視畫面，如此更能抓住利益相關者與使用者的注意，讓用戶在軟件開始投入編程前就確認需求。快速原型法（Rapid Prototyping）是一種有效且高效的以用戶為中心（User-Centered Design）的技術，可以幫助用戶體驗專家、設計師、工程師創造更加有用、可用的產品。目前全球有財富 1000 大的公司和重要機構在使用 Axure RP，國內的淘寶、雅虎、騰訊、當當等公司的產品經理也都在使用。

 

3、Axure 的工作環境

Axure 的工作環境可進行可視化拖拉操作，可輕松快速的創建帶有注釋的線框圖。

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

 

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

?    2頁面導航板（Sitemap Pane）對所設計的頁面進行添加、刪除、重命名和組織。

?    控件面板（WidgetsPane）該面板中有線框圖控件和流程圖控件，用這些控件進行線框圖和流程圖的設計。

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

?    4線框圖面板（Wireframe Pane）在線框圖面板中可以進行頁面線框圖的設計，線框圖面板也就是進行頁面設計的工作區。

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

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

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

 

1. 頁面導航面板（Sitemap） 在繪制線框圖(Wireframe)或流程圖（Flow）之前，應該先思考界面框架，決定信息內容與層級。

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

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

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

右鍵單擊選擇“Rename Page”菜單項可對頁面進行重命名。

頁面組織排序

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

打開頁面進行設計在頁面導航面板中，鼠標雙擊頁面將會在線框面板中打開頁面以進行線框圖設計。

2.控件（Widgets）

控件是用于設計線框圖的用戶界面元素。

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

添加控件

從控件面板中拖動一個控件到線框圖面板中，就可以添加一個控件。

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

操作控件

添加控件后，在線框圖中點選該控件，然后可以拖拉移動控件和改變控件的大小，還可以一次同時對多個控件進行選擇、移動、改變尺寸。

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

編輯控件風格和屬性

有多種方法可以編輯控件的風格和屬性：

?         鼠標雙擊：鼠標雙擊某個控件，可以對控件的最常用屬性進行編輯。

例如，雙擊一個圖片控件可以導入一張圖片；雙擊一個下拉列表或列表框控件可以編輯列表項。

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

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

 

3. 注釋（Annotations）

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

添加注釋

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

自定義字段（Fields）

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

4. 頁面備注（Page Notes）

頁面備注可是對頁面進行描述和說明。

添加頁面備注

在線框圖下面的 Page notes 面板中可以添加頁面備注內容。

第3節基本交互設計

 

1.   控件的交互

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

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

?   用戶操作界面時就會觸發事件，如鼠標的 OnClick、OnMouseEnter 和OnMouseOut；

?    每個事件可以包含多個場景，場景也就是事件觸發后要滿足的條件；

?   每個場景可執行多個動作，例如：打開鏈接、顯示面板、隱藏面板、移動面板。

事件場景和動作的關系

 

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

?     OnClick：鼠標點擊

?     OnMouseEnter：鼠標的指針移動到對象上 ?

?     OnMouseOut：鼠標的指針移動出對象外 ?

?     OnFocus：鼠標的指針進入文字輸入狀態（獲得焦點） ?

?     OnLostFocus：鼠標的指針離開文字輸入狀態 （失去焦點） ?

?     OnPageLoad：頁面或模塊載入

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

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

?     按鈕控件只有OnClick ?

?     單選框和復選框則具有OnFocus、 OnLostFocus

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

 

2、定義鏈接

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

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

2. 然后，控件交互面板中鼠標雙擊“OnClick”這個事件，這時會出現“InteractionCase Properties”對話窗，在這個對話框中可以選擇要執行的動作；

3. 在“Step 2”中，勾選“OpenLink in Current Window”動作。

4. 在“Step 3”中，點擊“Link”，在彈出的 LinkProperties 對話框中可以選擇要鏈接的頁面或其它網頁地址。

 

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

 

1.      設置動作

除了簡單的鏈接之外，Axure 還提供了許多豐富的動作，這些動作可以在任何觸發事件的場景中執行。

以下是 Axure 所支持的動作： 

Open Linkin Current Window：在當前窗口打開一個頁面?

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

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

CloseCurrent Window：關閉當前窗口?

Open Linkin Frame：在框架中打開一個頁面?

Set Panelstate(s) to State(s)：為動態面板設定要顯示的狀態

ShowPanel(s)：顯示動態面板?

HidePanel(s)：隱藏動態面板?

ToggleVisibility for Panel(s)：切換動態面板的顯示狀態（顯示/隱藏）?

MovePanel(s)：根據絕對坐標或相對坐標來移動動態面板

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

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

Scroll toImage Map Region：滾動頁面到

Image Map所在位置

EnableWidget(s)：把對象狀態變成可用狀態?

DisableWidget(s)：把對象狀態變成不可用狀態?

WaitTime(s)：等待多少毫秒(ms)后再進行這個動作?

Other：顯示動作的文字說明

 

4.多個場景（條件）

一個觸發事件可以包含有多個場景，根據條件執行流程或互動。

5. 頁面上的事件: OnPageLoad

 

Axure 支持一個頁面層級的觸發事件：OnPageLoad，這個事件在原型載入頁面時觸發。

頁面 OnPageLoad 事件在頁面備注面板中的 Interactions子面板中定義， OnPageLoad 為事件添加場景的方式與控件事件相同

 

實例―用戶登錄

 

第一步，添加一個點擊事件

選中登陸按鈕，雙擊鼠標點擊時新增一個用例，在彈出的用例編輯器中點擊新增條件。

第二步，添加條件

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

 

第三步，添加第二個條件

在條件生成器中，點擊條件表達式右側的 + 號，添加一個條件。
配置：如果部件 “pwd” 文本框的內容 = “laoshi”
此條件的意思就是 如果 輸入的密碼 = laoshi

要注意的是，在條件生成器的左上角，我們使用的是滿足全部以下 條件，也就是and狀態。
意思就是要同時滿足我們添加的兩個條件才執行動作。

第四步，給用例添加動作

當要添加的條件定義完畢后，我們就要添加當條件被滿足后所要執行的動作了。

第四步，給用例添加動作

當要添加的條件定義完畢后，我們就要添加當條件被滿足后所要執行的動作了。

在用例編輯器左側，點擊 當前窗口 選擇 successed 頁面。點擊確定，關閉該對話框。

第五步，添加第二個用例else if

現在我們已經添加了 登陸成功 時的用例，讓我們來繼續添加 登陸失敗時 的用例。
雙擊鼠標單擊時事件或者點擊 新增用例， 注意 else if true 會自動添加到第二個用例中。
默認情況下，第二個用例是設定在第一個用例不被滿足的情況下執行的。
在這個例子中，我們就不需要給第二個用例添加條件了。（因為沒有其他條件，如果登陸不成功，就是失敗。）

第六步，添加顯示動作

當登陸失敗時，我們想讓他在登陸按鈕下面顯示一條錯誤提示，我們添加一個 文本標簽，并輸入內容：“用戶名或密碼錯誤，請重新登陸！”
給該文本部件命名為 ErrorMessage 并將其設置為 隱藏。
在第二個用例中點擊 顯示 動作，并 選擇 ErrorMessage 設置為 顯示。

 

第七步，使用 F5 鍵 快速預覽效果！

 

學習資料

 

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

 

 

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈