AXURE RP教学

AxureRP教學1AXURERP教學一.認識AxureRP1.什麼是AxureRP2.Prototype的效益3.AxureRP可以幫助哪些人4.如何學習AxureRP的操作1.什麼是AxureRPAxure的發音是”Ack-sure”，RP則是”RapidPrototyping”快速原型的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的精心傑作，如果你本身是軟體專案經理，Web產品經理，或網站企劃工作者，那麼你不能不知道這套軟體。AxureRP是一個快速繪製Wireframe和Prototyping的工具，主要用來定義應用程式的需求與規格，以及設計使用者介面與功能，使用者包括UserExperienceDesigners、商業分析師、資訊架構師、UsabilityExpert與產品經理等專業人士。.在AxureRP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者，以確保在有限的專案時間與資源下，開發出有用和可用的應用程式。傳統上，製作prototype不但昂貴而且費時，讓程式設計師很難在開發過程中搭配合作。商務專家(Businessprofessional)也不斷的在使用簡報與圖示的工具建立prototype和持續對製作過程與結果不滿意之間掙扎著。為了要能有效且快速的建立prototype，AxureRP結合了廣受歡迎的簡報與圖示工具中簡易操作的特性和其他必要的功能。這樣一來，商務專家就可以在不需要大量的文件製作下快速的建立prototype，而專案成員與專案關係人也可以在不中斷開發的情況下輕鬆完成prototype。AxureRP很容易上手且絕對值回票價的，所以當專案成員在第一個專案中使用這個工具時就會發現他們的投資已經得到了顯著的回報。不只省下了在收集與溝通需求上的時間與成本，同時也降低了改善需求時的重工。透過prototype可以省下驚人的成本，以及預防潛在性的商業損失、機會損失與專案關係人信心喪失等的災難成本。AxureRP教學22.Prototype的效益“沒有比製作prototype更易取得使用者介面與特殊功能可用性上的一致性了。Prototype不只可確認需求，它更可贏得顧客的心。”AlanM.DavisandDeanA.LeffingwellUsingRequirementsManagementtoSpeedDeliveryofHigherQualityApplicationsRationalSoftwareCorporation/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教學3三.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)窗格：您可以在這個窗格中加入網頁層級的說明與互動效果到設計中。AxureRP教學4示意圖及註解1.定義Sitemap2.以介面物件(Widgets)繪製示意圖(Wireframe)3.撰寫物件註解(Annotation)4.撰寫網頁說明(PageNotes)5.密技(QuickTips)1.定義Sitemap企劃一個網站或WebAP，在動手開始繪製網站頁面的示意圖(Wireframe)或流程圖之前，您應該事先思考網站架構，並決定資訊內容與層級。當您心中已經有了明確的網站架構，接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。Sitemap窗格是用來管理設計中網頁的工具，您可以在Sitemap窗格中可以新增、刪除和調整網頁層級。新增/刪除網頁：想要新增網頁的話，請點選Sitemap工具列上的【AddChildPage】鈕。在網頁上按滑鼠右鍵，然後選擇「RenamePage」或慢慢的在網頁上連續按滑鼠左鍵兩下可編輯網頁名稱。AxureRP教學5想要刪除網頁的話，請點選想要刪除的網頁，然後按下Sitemap工具列上的【DeletePage】鈕，或是在網頁上按下滑鼠右鍵，然後選擇「DeletePage」。調整網頁層級：您可以將網頁從Sitemap中拖曳到目標母網頁中來移動網頁位置，您也可以使用Sitemap工具列上的箭頭按鈕來上下移動網頁，或改變網頁的階層。開啟網頁：在Sitemap中的任一網頁上連續按滑鼠左鍵兩下，網頁會在Wireframe窗格中開啟。2.以介面物件(Widgets)繪製示意圖(Wireframe)介面物件(Widget)是用來設計Wireframe的使用者介面元素，您可以在Widgets窗格中找到一些常用的WireframeWidget，例如：Button、Image和TextPanel。AxureRP各種Widgets呈現效果，請參考Widgets效果總覽AxureRP教學6在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)：AxureRP教學7在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)AxureRP教學8網頁說明可以用來收集網頁層級的描述或需求。撰寫網頁說明(PageNotes)網頁說明會被保留在Wireframe下方的窗格內。管理網頁說明類別AxureRP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。比如您可以新增TestCase，操作說明，SD等不同類別的網頁說明。而當您要輸出規格文件時，可以個別指定哪些種類的網頁說明要輸出到文件，如此一來，您就可以輸出專屬於TestCase,操作說明或SD文件了。想要新增/編輯網頁說明類別的話，請點選功能表「Wireframe-ManagePageNotes」，或按一下「PageNotes–Default」右方的向下箭頭並選擇「ManagePageNotes」，此時會出現PageNotes對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。想要切換說明類別的話，請按一下「PageNotes–Default」右方的向下箭頭，來選擇說明類別。5.密技(QuickTips)密技一.超快速挪動畫面：當您設計的網頁畫面變大時，為了選取不同位置的物件，您必須經常使用垂直與水平的捲軸，這會使得選取物件的動作變慢。請試試這招，滑鼠游標focus在Wireframe，按住鍵盤的空白鍵，這麼一來就會切換成Handtool，此時滑鼠游標會切換成手狀，您可以