AXURE RP教学.docx

AXURE RP教学.docx

《AXURE RP教学.docx》由会员分享，可在线阅读，更多相关《AXURE RP教学.docx（25页珍藏版）》请在冰点文库上搜索。

AXURERP教学

AxureRP教學

一.認識AxureRP

1.什麼是AxureRP

2.Prototype的效益

3.AxureRP可以幫助哪些人

4.如何學習AxureRP的操作

1.什麼是AxureRP

Axure的發音是”Ack-sure”，RP則是”RapidPrototyping”快速原型的縮寫。

AxureRPPro是美國AxureSoftwareSolution公司的精心傑作，如果你本身是軟體專案經理，Web產品經理，或網站企劃工作者，那麼你不能不知道這套軟體。

AxureRP是一個快速繪製Wireframe和Prototyping的工具，主要用來定義應用程式的需求與規格，以及設計使用者介面與功能，使用者包括UserExperienceDesigners、商業分析師、資訊架構師、UsabilityExpert與產品經理等專業人士。

.

在AxureRP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者，以確保在有限的專案時間與資源下，開發出有用和可用的應用程式。

傳統上，製作prototype不但昂貴而且費時，讓程式設計師很難在開發過程中搭配合作。

商務專家（Businessprofessional）也不斷的在使用簡報與圖示的工具建立prototype和持續對製作過程與結果不滿意之間掙扎著。

為了要能有效且快速的建立prototype，AxureRP結合了廣受歡迎的簡報與圖示工具中簡易操作的特性和其他必要的功能。

這樣一來，商務專家就可以在不需要大量的文件製作下快速的建立prototype，而專案成員與專案關係人也可以在不中斷開發的情況下輕鬆完成prototype。

AxureRP很容易上手且絕對值回票價的，所以當專案成員在第一個專案中使用這個工具時就會發現他們的投資已經得到了顯著的回報。

不只省下了在收集與溝通需求上的時間與成本，同時也降低了改善需求時的重工。

透過prototype可以省下驚人的成本，以及預防潛在性的商業損失、機會損失與專案關係人信心喪失等的災難成本。

2.Prototype的效益

“沒有比製作prototype更易取得使用者介面與特殊功能可用性上的一致性了。

Prototype不只可確認需求，它更可贏得顧客的心。

”

AlanM.DavisandDeanA.Leffingwell

UsingRequirementsManagementtoSpeedDeliveryofHigherQualityApplications

RationalSoftwareCorporation/IBM

根據StandishGroup的“2003ChaosChroniclesReport“，大約66%的軟體開發專案不是失敗，就是超出預算、超出專案時間，或是交付縮水的功能。

專案失敗或虧損的前三大原因為：

1.缺乏使用者的參與

2.需求或規格不完整

3.需求或規格變更

在過去，需求管理工具或工作表中所儲存的數千個需求與上百頁的文件早已不合時宜，現在，這些需求更是不適用於目前快速發展的環境。

製作Prototype是個有效簡化文件製作、吸引使用者參與、早期辨認需求遺漏，與將外在需求降到最低的方法。

大量文件製作可以改捕捉成有註釋與互動性的畫面，如此更能抓住專案關係人（stakeholder）與使用者的注意。

3.AxureRP可以幫助哪些人

網站企劃人員

網站專案經理

系統分析師

軟體介面設計師

互動設計師

使用者經驗設計師

Usability專家

產品經理

4.如何學習AxureRP的操作

如果您本身已經會使用PowerPoint或者Visio，您可以很快學會AxureRP的操作。

學習AxureRP的最好方式就是下載安裝，直接去體驗，任意的玩一玩各種功能，然後試著按下［F5］輸出成Prototype。

或者您也可以下載我們提供的AxureRP範例，打開這些範例的RP檔（AxureRP專屬的ProjectFile），然後試著按下［F5］輸出成Prototype。

三.AxureRP基本操作

（1）認識AxureRP操作介面

主選單/工具列：

在主選單與工具列中，可以執行常用的動作指令，例如：

開啟與儲存檔案、輸出Prototype或Spec文件。

Sitemap窗格：

Sitemap窗格將您所設計的網頁以樹狀結構的方式呈現，您可以在這裡新增、移除、重新命名和組織設計的網頁。

Widgets窗格：

包含一系列常用的使用者介面物件，例如：

按鈕、影像、TextPanel與矩形，您可以直接透過拖拉的方式來設計網頁。

Masters窗格：

在這裡您可以新增、移除、重新命名和組織設計好的Master。

Master是一種可以容納多項界面元素的集合樣板（Temlate），您可以將常用的共用區塊設計成Master，未來在設計Wireframe時重複使用Master，來提高規劃的效率。

Wireframe窗格：

您可以在這個窗格中設計網頁資訊元素，編排內容，設計介面，設計互動特性等等。

未來可以將這些設計好的頁面，輸出成Prototype或Spec文件。

互動設定（Interaction）窗格：

互動的範圍很廣，從最基本的超連結、pop-ups，一直到動態顯示和隱藏widget。

您可以在這個窗格中定義Widget的互動。

物件註解（Annotation）窗格：

您可以為Widget加上註解來指定功能，您可以在這個窗格中增加和自訂Widget的註解。

網頁說明及互動（PagesNotes&Interactions）窗格：

您可以在這個窗格中加入網頁層級的說明與互動效果到設計中。

示意圖及註解

1.定義Sitemap

2.以介面物件（Widgets）繪製示意圖（Wireframe）

3.撰寫物件註解（Annotation）

4.撰寫網頁說明（PageNotes）

5.密技（QuickTips）

1.定義Sitemap

企劃一個網站或WebAP，在動手開始繪製網站頁面的示意圖（Wireframe）或流程圖之前，您應該事先思考網站架構，並決定資訊內容與層級。

當您心中已經有了明確的網站架構，接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。

Sitemap窗格是用來管理設計中網頁的工具，您可以在Sitemap窗格中可以新增、刪除和調整網頁層級。

新增/刪除網頁：

想要新增網頁的話，請點選Sitemap工具列上的【AddChildPage】鈕。

在網頁上按滑鼠右鍵，然後選擇「RenamePage」或慢慢的在網頁上連續按滑鼠左鍵兩下可編輯網頁名稱。

想要刪除網頁的話，請點選想要刪除的網頁，然後按下Sitemap工具列上的【DeletePage】鈕，或是在網頁上按下滑鼠右鍵，然後選擇「DeletePage」。

調整網頁層級：

您可以將網頁從Sitemap中拖曳到目標母網頁中來移動網頁位置，您也可以使用Sitemap工具列上的箭頭按鈕來上下移動網頁，或改變網頁的階層。

開啟網頁：

在Sitemap中的任一網頁上連續按滑鼠左鍵兩下，網頁會在Wireframe窗格中開啟。

2.以介面物件（Widgets）繪製示意圖（Wireframe）

介面物件（Widget）是用來設計Wireframe的使用者介面元素，您可以在Widgets窗格中找到一些常用的WireframeWidget，例如：

Button、Image和TextPanel。

AxureRP各種Widgets呈現效果，請參考Widgets效果總覽

在Wireframe中新增介面物件（Widget）:

想在Wireframe中新增物件的話，只要從Widgets窗格中將想要新增的物件拖曳（drag&drop）到Wireframe窗格上就可以了。

您也可以在Wireframe中利用複製（Ctrl+C）與貼上（Ctrl+V）的方式來新增物件。

提醒:

熟悉PowerPoint操作方式的使用者剛開始可能不太習慣，因為AxureRP的操作方式類似Visio選擇圖形的作法，是利用拖放（Drag&Drop）的方式，跟PowerPoint是不一樣的。

移動物件（Widget）

在Wireframe中新增物件之後，您可以拖放Widget來移動的位置，拖曳Widget四周的控制點來改變Widget的大小。

您也可以一次選取多個物件，一次改變所有被選取的物件的位置和大小。

除此之外，您還可以在選取的Widget上按下滑鼠右鍵，使用快顯功能表（contextmenu）來設定Widgets的群組（Grouping）、順序（Order）、對齊（Align）、分散（Distribute）與鎖定（Lock）；您也可以利用Object工具列來做這些設定，請先利用功能表「View->Toolbars->Object」將Object工具列叫出。

編輯物件（Widget）的樣式與屬性

編輯Widget的樣式與屬性有下列3種方式：

a.連續按滑鼠左鍵兩下：

在Widget上連續按滑鼠左鍵兩下可以讓您變更一些基本的Widget屬性，例如：

在ImageWidget上連續按滑鼠左鍵兩下可以讓您匯入影像；在Droplist或ListBoxWidget上連續按滑鼠左鍵兩下可以讓您編輯選單項目。

b.工具列：

使用工具列可編輯Widget的樣式，例如：

外框色彩、填滿色彩、字型和字體大小。

c.快顯功能表（ContextMenu）：

在Widget上按下滑鼠右鍵會出現快顯功能表，您可以透過功能表中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。

3.撰寫物件註解（Annotation）

您可以在Wireframe中為任何物件（Widget）加上註解。

新增註解

想要幫物件加上註解的話，請先選擇Wireframe中的物件，如圖箭頭1所示，被選取的物件呈現綠色框線狀態，然後在物件註解窗格（Annotations&InteractionsPane）的Specification欄位（箭頭2），輸入對這個物件的解釋內容，您也可以在窗格最上方的「Label」欄位（箭頭3）輸入名稱來幫物件命名。

自定欄位

您可以透過功能表「Wireframe->CustomizeAnnotationFieldsandViews」，或是按一下Annotations&Interactions的標頭來自訂註解欄位。

註腳（Footnote）

一旦在Widget上加上後，Widget右上方會多一個黃色小方塊，裡面有一個註腳編號（Footnotenumber），您可以在Widget上按下滑鼠右鍵，使用Footnotes次功能表來增加或減少這個編號數字。

4.網頁說明（PageNotes）

網頁說明可以用來收集網頁層級的描述或需求。

撰寫網頁說明（PageNotes）

網頁說明會被保留在Wireframe下方的窗格內。

管理網頁說明類別

AxureRP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。

比如您可以新增TestCase，操作說明，SD等不同類別的網頁說明。

而當您要輸出規格文件時，可以個別指定哪些種類的網頁說明要輸出到文件，如此一來，您就可以輸出專屬於TestCase,操作說明或SD文件了。

想要新增/編輯網頁說明類別的話，請點選功能表「Wireframe->ManagePageNotes」，或按一下「PageNotes–Default」右方的向下箭頭並選擇「ManagePageNotes」，此時會出現PageNotes對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。

想要切換說明類別的話，請按一下「PageNotes–Default」右方的向下箭頭，來選擇說明類別。

5.密技（QuickTips）

密技一.超快速挪動畫面：

當您設計的網頁畫面變大時，為了選取不同位置的物件，您必須經常使用垂直與水平的捲軸，這會使得選取物件的動作變慢。

請試試這招，滑鼠游標focus在Wireframe，按住鍵盤的空白鍵，這麼一來就會切換成Handtool，此時滑鼠游標會切換成手狀，您可以用來抓著畫面任意滑動，而且不會打亂任何物件的位置，輕鬆愉快。

密技二.穿透物件（Widget）選取下層的物件：

以滑鼠右鍵慢慢的按一下物件，當您放開滑鼠右鍵時，可以穿透上層物件，選取到位於下層的物件。

密技三.引用MicrosoftOffice或其他軟體的物件：

您可以利用複製/貼上（Coyp/Paste）的功能，將其他應用程式中，例如：

PowerPoint,Excel,Visio,Photoshop與Illustrator的物件，並貼到AxureRP中。

一般來說，這些貼上的物件會變成Wireframe中的影像物件。

反之亦然，您也可以複製AxureRP中的物件或畫面，貼到其他應用程式。

密技四.單選群組（收音機按鈕群組RadioButtonGroup）：

您可以一次選取多個RadioButton，按下滑鼠右鍵，並選擇「EditRadioButton->AssignRadioGroup」來設定RadioButton的群組關係。

如此一來，當這些RadioButton輸出到Prototype時，就會形成真正的單選使用者介面。

初級互動設計

1.互動（Interaction）

2.定義基本連結

3.動作（Actions）

4.多重條件（MultipleCases）

5.網頁層級的互動:

OnPageLoad

6.密技（QuickTips）

1.互動（Interaction）

Interactions窗格是用來定義Widget在Wireframe中的行為，包含範圍從基本連結到RichInternetApplication（RIA）的複雜行為，而這些定義的互動都可以在產生的Prototype中執行。

互動是由觸發事件（Event）、條件（Case）與動作（Action）所組成。

當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一個事件（Evnt）。

目前AxureRP5支援的人機介面觸發事件，及相對應的觸發事件（Event）名稱如下：

以滑鼠點擊-OnClick

滑鼠的指標移動到物件之上-OnMouseEnter

滑鼠的指標移動出物件之外-OnMouseOut

滑鼠的指標進入文字輸入狀態-OnFocus

滑鼠的指標離開文字輸入狀態-OnLostFocus

敲鍵盤-OnKeyUp

瀏覽器載入網頁-OnPageLoad

大多數的物件，只具備最常見的三種觸發事件（Event）-OnClick、OnMouseEnter與OnMouseOut。

某些特定的Widget的可觸發事件有些不同：

Button物件只有OnClick。

RadioButton，CheckBox這2種物件則具有OnFocus/OnLostFocus觸發事件。

TextField，TextArea這2種物件則具備OnKeyUp/OnFocus/OnLostFocus觸發事件。

Droplist，ListBox這2種物件則具備OnChange/OnFocus/OnLostFocus觸發事件。

網頁載入瀏覽器時，則有OnPageLoad觸發事件。

（請參考5.網頁層級的互動:

OnPageLoad）

您不需要硬背上述的物件及對應的Event，在AxureRP的操作介面上，您只要點選物件，就可以查看Interaction窗格所顯示的對應Event。

每一個觸發事件都可以有一或多個條件（Case），例如，一個按鈕的OnClick觸發事件可以有兩個條件：

其中一個導引至某個網頁，另一個則導引至另一個網頁。

而每一個條件（Case）又可以執行一或多個動作（Action），舉例來說：

「OpenLinkinCurrentWindow」的動作就是一個基本連結。

2.定義基本連結

下列步驟說明如何新增一個基本連結到ButtonWidget。

加入基本連結最快的方法就是按一下Interactions窗格中的「QuickLink」，彈出Sitemap窗格的網頁清單後，你可以為選定的物件（Widget）指定連結到哪一個網頁。

如果不是透過QuickLink的話，那麼請按照下列步驟進行互動的設定。

首先，再Wireframe中新增一個ButtonWidget並選取它

新增條件（AddCase）：

在Interactions窗格中選擇OnClick，並點選「AddCase」（或在OnClick上連續按滑鼠左鍵兩下）以增加一個條件（Case）到按鈕的OnClick觸發事件，這時會出現「InteractionCaseProperties」對話窗，您可以在此處選擇想要執行的動作。

指定動作（AddAction）：

在InteractionCaseProperties對話窗的Step2.SelectActions，勾選「OpenLinkinCurrentWindow」動作。

編輯動作選項：

按一下下方的”Link”以選擇動作執行時要開啟的網頁。

3.設定動作（Action）

除了基本連結之外，AxureRP還提供了許多的動作，這些動作都可以在任何觸發事件的條件中被執行。

以下是AxureRP所支援的動作清單：

OpenLinkinCurrentWindow：

在目前的視窗中開啟一個網頁

OpenLinkinPopupWindow：

在彈出的視窗中開啟一個網頁

OpenLinkinParentWindow：

在彈出的視窗中開啟一個網頁到母視窗

CloseCurrentWindow：

關閉目前的視窗

OpenLinkinFrame：

在內嵌框架中開啟一個網頁

SetPanelstate（s）toState（s）：

將某個DynamicPanel的State設定為該Panel的顯示狀態

ShowPanel（s）：

顯示（設為visible）一或多個DynamicPanel

HidePanel（s）：

隱藏一或多個DynamicPanel

ToggleVisibilityforPanel（s）：

根據目前的顯示狀態來顯示或隱藏DynamicPanel

MovePanel（s）：

移動DynamicPanel，可根據絕對座標或相對座標來移動

SetVariableandWidgetvalue（s）equaltoValue（s）：

設定一個或多個變數與Widget的值

OpenLinkinParentFrame：

在上層內嵌框架中開啟一個網頁

ScrolltoImageMapRegion：

捲動畫面到ImageMap所在位置

EnableWidget（s）：

把物件狀態變成可用狀態

DisableWidget（s）：

把物件狀態變成不可用狀態

WaitTime（s）：

等待多少毫秒（ms）後再進行這個動作

Other：

顯示動作的文字說明，例如：

”Sendemailtouser”

4.多重條件（MultipleCases）

一個觸發事件（Event）可以加入多個條件，以進行條件流程或互動。

舉例來說，您可以在一個按鈕的OnClick觸發事件中加入兩個條件，第一個條件可以加入一個說明（“IfYes”）和一個開啟第一頁的動作，第二個條件則可加入一個說明（”IfNo”）與一個開啟第二頁的動作。

當按紐在Prototype中被按下時，會顯示出這兩個條件的說明（”IfYes”與”IfNo”），此時點選其中一個條件的說明，就會執行該條件所關連的動作。

使用條件說明可以有效溝通條件流程，但是，如果需要建立一個高親合度的Prototype，則必需在條件中定義條件邏輯，根據在表單Widget中輸入的值或變數值來執行動作，這個主題將會在後面做深入的說明。

5.網頁層級的互動:

OnPageLoad

AxureRP支援一個網頁層級的觸發事件（Event）-OnPageLoad，這個觸發事件發生在Prototype載入網頁時。

OnPageLoad互動必須在PageNotes窗格的Interactions窗格中定義，加入條件的方式與在Widget中相同。

OnPageLoad觸發事件（Event）會在OnPageLoadEvent的介紹中做深入的說明。

6.密技（QuickTips）

密技一.快速連結（QuickLink）

選擇Widget，然後按一下Interactions窗格中的「QuickLink」並選擇目標網頁，可以快速地在Widget中加入一個基本連結。

密技二.連結外部網頁

在「LinkProperties」對話方塊中指定網頁連結的時候，取消勾選「Linktoapageinthisdesign」選項，然後在「Hyperlink」欄位指定一個外部網頁的url就可連結外部網頁的連結設定。

密技三.重複設定類似的互動方式

如果你要進行一連串類似的互動設定，可以在Interaction窗格上，對著某個Case按滑鼠右鍵選擇”Copy”的動作，然後到你想加上互動設定的另一個Case，以滑鼠右鍵選”Paste”動作，然後再修改這個新的互動設定。

如此一來，就可以更快速的完成物件的互動設定。

使用Master（共用區塊）

1.什麼是Master（共用區塊）?

2.套用Master到網頁中

3.應用實例

4.密技（QuickTips）

1.什麼是Master（共用區塊）?

Master（共用區塊）是一組在設計過程中可以重複使用的Widget，一些常用的Master包括了頁首（Header）、頁尾（Footer）與導覽（Navigation），Master可以被放置在網頁或是其他的Master中，只要Master做了修改，其他使用到這個Master的地方也會跟著修改。

我們也可以從其他的軟體/程式技術經驗來認識AxureRP的Master。

如果您熟悉PowerPoint的母片功能，那麼AxureRP的Master功能，在”重複使用”的這一點特性上，有一點點類似PowerPoint的母片，但不完全是。

如果您熟悉ASP或PHP程式語言的”Include”語法，或DreamWeaver的Template（DWT），那麼AxureRP的Master就是同樣的概念，您只要使用Master，其他頁面把Master放進來，就可以產生共用的特性。

若想要提升企劃的速度跟效率，讓AxureRP在Web/AP規畫專案的效益展現出來，那麽Master肯定是您必須要學會並熟練運用