什麼是Axure

什麼是Axure Axure RP教學 1 Axure RP教學 一. 認識Axure RP 1. 什麼是Axure RP 2. Prototype的效益 3. Axure RP可以幫助哪些人 4. 如何學習Axure RP的操作 1. 什麼是Axure RP Axure的發音是”Ack-sure”，RP則是”Rapid Prototyping”快速原型的縮寫。Axure RP Pro是美國Axure Software Solution公司的精心傑作，如果你本身是軟體專案經理，Web產品經理，或網站企劃工作者，那麼你不能不知道這套軟體。 Axure RP是一個快速繪製Wireframe 和Prototyping的工具，主要用來定義應用程式的需求與規格，以及設計使用者介面與功能，使用者包括User Experience Designers、商業分析師、資訊架構師、Usability Expert與產品經理等專業人士。. 在Axure RP中建立Wireframe和Prototype可以幫助您快速且有效地分析需求、驗證設計並傳達給所有參與者，以確保在有限的專案時間與資源下，開發出有用和可用的應用程式。 傳統上，製作prototype 不但昂貴而且費時，讓程式設計師很難在開發過程中搭配合作。商務專家(Business professional)也不斷的在使用簡報與圖示的工具建立prototype和持續對製作過程與結果不滿意之間掙扎著。 為了要能有效且快速的建立prototype，Axure RP 結合了廣受歡迎的簡報與圖示工具中簡易操作的特性和其他必要的功能。這樣一來，商務專家就可以在不需要大量的文件製作下快速的建立prototype，而專案成員與專案關係人也可以在不中斷開發的情況下輕鬆完成prototype。 Axure RP很容易上手且絕對值回票價的，所以當專案成員在第一個專案中使用這個工具時就會發現他們的投資已經得到了顯著的回報。不只省下了在收集與溝通需求上的時間與成本，同時也降低了改善需求時的重工。透過prototype 可以省下驚人的成本，以及預防潛在性的商業損失、機會損失與專案關係人信心喪失等的災難成本。 Axure RP教學 2 2. Prototype的效益 “沒有比製作prototype更易取得使用者介面與特殊功能可用性上的一致性了。Prototype 不只可確認需求，它更可贏得顧客的心。” Alan M. Davis and Dean A. Leffingwell Using Requirements Management to Speed Delivery of Higher Quality Applications Rational Software Corporation / IBM 根據 Standish Group的 “2003 Chaos Chronicles Report “，大約 66% 的軟體開發專案不是失敗，就是超出預算、超出專案時間，或是交付縮水的功能。 專案失敗或虧損的前三大原因為: 1. 缺乏使用者的參與 2. 需求或規格不完整 3. 需求或規格變更 在過去，需求管理工具或工作中所儲存的數千個需求與上百頁的文件早已不合時宜，現在，這些需求更是不適用於目前快速發展的環境。 製作Prototype是個有效簡化文件製作、吸引使用者參與、早期辨認需求遺漏，與將外在需求降到最低的方法。大量文件製作可以改捕捉成有註釋與互動性的畫面，如此更能抓住專案關係人(stakeholder)與使用者的注意。 3. Axure RP可以幫助哪些人 網站企劃人員 網站專案經理 系統分析師 軟體介面設計師 互動設計師 使用者經驗設計師 Usability專家 產品經理 Axure RP教學 3 4. 如何學習Axure RP的操作 如果您本身已經會使用PowerPoint或者Visio，您可以很快學會Axure RP的操作。 學習Axure RP的最好方式就是下載安裝，直接去體驗，任意的玩一玩各種功能，然後試著按下,F5,輸出成Prototype。 或者您也可以下載我們提供的Axure RP範例，打開這些範例的RP檔(Axure RP專屬的Project File)，然後試著按下,F5,輸出成Prototype。 Axure RP教學 4 三. Axure RP基本操作 (1) 認識Axure RP操作介面 主選單/工具列: 在主選單與工具列中，可以執行常用的動作指令，例如:開啟與儲存檔案、輸出Prototype或Spec文件。 Sitemap 窗格: Sitemap窗格將您所設計的網頁以樹狀結構的方式呈現，您可以在這裡新增、移除、重新命名和組織設計的網頁。 Widgets窗格: 包含一系列常用的使用者介面物件，例如:按鈕、影像、Text Panel與矩形，您可以直接透過拖拉的方式來設計網頁。 Masters窗格:在這裡您可以新增、移除、重新命名和組織設計好的Master。Master是一種可以容納多項界面元素的集合樣板(Temlate)，您可以將常用的共用區塊設計成Master，未來在設計Wireframe時重複使用Master，來提高規劃的效率。 Wireframe窗格: 您可以在這個窗格中設計網頁資訊元素，編排內容，設計介面，設計互動特性等等。未來可以將這些設計好的頁面，輸出成Prototype或Spec文件。 互動設定 (Interaction) 窗格:互動的範圍很廣，從最基本的超連結、pop-ups，一直到動態顯示和隱藏widget。您可以在這個窗格中定義Widget的互動。 Axure RP教學 5 物件註解(Annotation) 窗格: 您可以為Widget加上註解來指定功能，您可以在這個窗格中增加和自訂Widget的註解。 網頁說明及互動(Pages Notes & Interactions)窗格:您可以在這個窗格中加入網頁層級的說明與互動效果到設計中。 示意圖及註解 1. 定義Sitemap 2. 以介面物件(Widgets)繪製示意圖(Wireframe) 3. 撰寫物件註解(Annotation ) 4. 撰寫網頁說明(Page Notes ) 5. 密技(Quick Tips) 1.定義Sitemap 企劃一個網站或Web AP，在動手開始繪製網站頁面的示意圖(Wireframe)或流程圖之前，您應該事先思考網站架構，並決定資訊內容與層級。當您心中已經有了明確的網站架構，接下來就可以利用Sitemap窗格來定義您所設計的網站頁面。 Sitemap窗格是用來管理設計中網頁的工具，您可以在Sitemap 窗格中可以新增、刪除和調整網頁層級。 Axure RP教學 6 新增/刪除網頁: 想要新增網頁的話，請點選Sitemap 工具列上的【Add Child Page】鈕。 在網頁上按滑鼠右鍵，然後選擇「Rename Page」或慢慢的在網頁上連續按滑鼠左鍵兩下可編輯網頁名稱。 想要刪除網頁的話，請點選想要刪除的網頁，然後按下Sitemap 工具列上的【Delete Page】鈕，或是在網頁上按下滑鼠右鍵，然後選擇「Delete Page」。 調整網頁層級: 您可以將網頁從Sitemap 中拖曳到目標母網頁中來移動網頁位置，您也可以使用Sitemap 工具列上的箭頭按鈕來上下移動網頁，或改變網頁的階層。 開啟網頁: 在 Sitemap中的任一網頁上連續按滑鼠左鍵兩下，網頁會在Wireframe 窗格中開啟。 2. 以介面物件(Widgets)繪製示意圖(Wireframe) Axure RP教學 7 介面物件(Widget)是用來設計Wireframe的使用者介面元素， 您可以在Widgets 窗格中找到一些常用的Wireframe Widget，例如:Button、Image和 Text Panel。 Axure RP 各種Widgets呈現效果，請參考Widgets效果總覽 在Wireframe中新增介面物件(Widget): 想在Wireframe中新增物件的話，只要從Widgets 窗格中將想要新增的物件 拖曳(drag&drop)到Wireframe窗格上就可以了。 您也可以在Wireframe中利用複製(Ctrl+C)與貼上(Ctrl+V)的方式來新增物件。 提醒: 熟悉PowerPoint操作方式的使用者剛開始可能不太習慣，因為Axure RP的操作方式類似Visio選擇圖形的作法，是利用拖放(Drag & Drop)的方式，跟PowerPoint是不一樣的。 移動物件(Widget) Axure RP教學 8 在Wireframe中新增物件之後，您可以拖放Widget來移動的位置，拖曳Widget四周的控制點來改變Widget的大小。您也可以一次選取多個物件，一次改變所有被選取的物件的位置和大小。 除此之外，您還可以在選取的Widget上按下滑鼠右鍵，使用快顯功能表(context menu)來設定Widgets的群組(Grouping)、順序(Order)、對齊(Align)、分散(Distribute)與鎖定(Lock);您也可以利用Object工具列來做這些設定，請先利用功能表 「View->Toolbars->Object」將Object工具列叫出。 編輯物件(Widget)的樣式與屬性 編輯Widget的樣式與屬性有下列3種方式: a. 連續按滑鼠左鍵兩下: 在Widget上連續按滑鼠左鍵兩下可以讓您變更一些基本的Widget屬性，例如:在Image Widget上連續按滑鼠左鍵兩下可以讓您匯入影像;在Droplist或List Box Widget 上連續按滑鼠左鍵兩下可以讓您編輯選單項目。 b. 工具列: 使用工具列可編輯Widget 的樣式，例如:外框色彩、填滿色彩、字型和字體大小。 c. 快顯功能表(Context Menu): 在Widget上按下滑鼠右鍵會出現快顯功能表，您可以透過功能表中的選項來設定Widget的特殊屬性，這些選項也會因Widget的類型而有所不同。 3. 撰寫物件註解(Annotation ) 您可以在Wireframe中為任何物件(Widget)加上註解。 Axure RP教學 9 新增註解 想要幫物件加上註解的話，請先選擇Wireframe中的物件，如圖箭頭1所示，被選取的物件呈現綠色框線狀態，然後在物件註解窗格(Annotations & Interactions Pane)的 Specification欄位(箭頭2)，輸入對這個物件的解釋內容，您也可以在窗格最上方的「Label」欄位(箭頭3)輸入名稱來幫物件命名。 自定欄位 您可以透過功能表「Wireframe -> Customize Annotation Fields and Views」，或是按一下Annotations & Interactions的標頭來自訂註解欄位。 註腳(Footnote) 一旦在Widget上加上後，Widget 右上方會多一個黃色小方塊，裡面有一個註腳編號(Footnote number)，您可以在Widget上按下滑鼠右鍵，使用Footnotes次功能表來增加或減少這個編號數字。 4. 網頁說明(Page Notes) 網頁說明可以用來收集網頁層級的描述或需求。 撰寫網頁說明(Page Notes) 網頁說明會被保留在Wireframe下方的窗格內。 Axure RP教學 10 管理網頁說明類別 Axure RP本身預設的網頁說明類別是default，您可以透過新增額外的說明類別，輕易的區分出您自己的說明與要輸出到Prototype與規格中的說明。 比如您可以新增Test Case，操作說明，SD等不同類別的網頁說明。而當您要輸出規格文件時，可以個別指定哪些種類的網頁說明要輸出到文件，如此一來，您就可以輸出專屬於Test Case, 操作說明或SD文件了。 想要新增/編輯網頁說明類別的話，請點選功能表「Wireframe->Manage Page Notes」，或按一下「Page Notes – Default」右方的向下箭頭並選擇「Manage Page Notes」，此時會出現Page Notes 對話方塊，利用這個對話方塊，您可以新增、移除、更名或重新排列說明欄位。 想要切換說明類別的話，請按一下「Page Notes – Default」右方的向下箭頭，來選擇說明類別。 5. 密技(Quick Tips) 密技一. 超快速挪動畫面: 當您設計的網頁畫面變大時，為了選取不同位置的物件，您必須經常使用垂直與水平的捲軸，這會使得選取物件的動作變慢。請試試這招，滑鼠游標focus在Wireframe，按住鍵盤的空白鍵，這麼一來就會切換成Hand tool，此時滑鼠游標會切換成手狀，您可以用來抓著畫面任意滑動，而且不會打亂任何物件的位置，輕鬆愉快。 密技二. 穿透物件(Widget)選取下層的物件: 以滑鼠右鍵慢慢的按一下物件，當您放開滑鼠右鍵時，可以穿透上層物件，選取到位於下層的物件 。 密技三. 引用Microsoft Office或其他軟體的物件: Axure RP教學 11 您可以利用複製/貼上(Coyp/Paste)的功能，將其他應用程式中，例如:PowerPoint, Excel, Visio, Photoshop 與Illustrator的物件，並貼到Axure RP中。一般來說，這些貼上的物件會變成Wireframe中的影像物件。反之亦然，您也可以複製Axure RP中的物件或畫面，貼到其他應用程式。 密技四. 單選群組(收音機按鈕群組 Radio Button Group): 您可以一次選取多個Radio Button，按下滑鼠右鍵，並選擇「Edit Radio Button->Assign Radio Group」來設定Radio Button的群組關係。如此一來，當這些Radio Button輸出到Prototype時，就會形成真正的單選使用者介面。 Axure RP教學 12 初級互動設計 1. 互動(Interaction) 2. 定義基本連結 3. 動作(Actions) 4. 多重條件(Multiple Cases ) 5. 網頁層級的互動: OnPageLoad 6. 密技(Quick Tips) 1. 互動(Interaction) Interactions窗格是用來定義Widget在Wireframe中的行為，包含範圍從基本連結到Rich Internet Application (RIA) 的複雜行為，而這些定義的互動都可以在產生的Prototype中執行。 互動是由觸發事件(Event)、條件(Case)與動作(Action)所組成。 當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一個事件(Evnt)。 目前Axure RP 5支援的人機介面觸發事件，及相對應的觸發事件(Event)名稱如下: 以滑鼠點擊 - OnClick 滑鼠的指標移動到物件之上 - OnMouseEnter 滑鼠的指標移動出物件之外 - OnMouseOut 滑鼠的指標進入文字輸入狀態 - OnFocus 滑鼠的指標離開文字輸入狀態 - OnLostFocus 敲鍵盤 - OnKeyUp 瀏覽器載入網頁 - OnPageLoad 大多數的物件，只具備最常見的三種觸發事件(Event) - OnClick、OnMouseEnter 與OnMouseOut。 某些特定的Widget的可觸發事件有些不同: Button物件只有OnClick。 Axure RP教學 13 Radio Button，CheckBox 這2種物件則具有OnFocus / OnLostFocus 觸發事件。 Text Field，Text Area這2種物件則具備 OnKeyUp / OnFocus / OnLostFocus 觸發事 件。 Droplist，List Box這2種物件則具備 OnChange / OnFocus / OnLostFocus 觸發事件。 網頁載入瀏覽器時，則有 OnPageLoad觸發事件。(請參考5. 網頁層級的互動: OnPageLoad) 您不需要硬背上述的物件及對應的Event，在Axure RP的操作介面上，您只要點選物件，就可以查看Interaction窗格所顯示的對應Event。 每一個觸發事件都可以有一或多個條件(Case)，例如，一個按鈕的OnClick 觸發事件可以有兩個條件:其中一個導引至某個網頁，另一個則導引至另一個網頁 。 而每一個條件(Case)又可以執行一或多個動作(Action)，舉例來說:「Open Link in Current Window」的動作就是一個基本連結。 2. 定義基本連結 下列步驟說明如何新增一個基本連結到Button Widget。 加入基本連結最快的方法就是按一下Interactions窗格中的「Quick Link」，彈出Sitemap窗格的網頁清單後，你可以為選定的物件(Widget)指定連結到哪一個網頁。 如果不是透過Quick Link的話，那麼請按照下列步驟進行互動的設定。 首先，再Wireframe中新增一個Button Widget並選取它 新增條件(Add Case):在 Interactions窗格中選擇OnClick ，並點選「Add Case」 (或在OnClick上連續按滑鼠左鍵兩下)以增加一個條件(Case)到按鈕的OnClick觸發事件，這時會出現「Interaction Case Properties」對話窗，您可以在此處選擇想要執行的動作。 指定動作(Add Action):在Interaction Case Properties對話窗的Step 2. Select Actions，勾選「Open Link in Current Window」動作。 編輯動作選項:按一下下方的”Link” 以選擇動作執行時要開啟的網頁。 3. 設定動作(Action) Axure RP教學 14 除了基本連結之外，Axure RP還提供了許多的動作，這些動作都可以在任何觸發事件的條件中被執行。 以下是 Axure RP所支援的動作清單: Open Link in Current Window:在目前的視窗中開啟一個網頁 Open Link in Popup Window: 在彈出的視窗中開啟一個網頁 Open Link in Parent Window:在彈出的視窗中開啟一個網頁到母視窗 Close Current Window:關閉目前的視窗 Open Link in Frame:在內嵌框架中開啟一個網頁 Set Panel state(s) to State(s):將某個Dynamic Panel的State設定為該Panel的顯示狀態 Show Panel(s):顯示(設為visible) 一或多個Dynamic Panel Hide Panel(s):隱藏一或多個Dynamic Panel Toggle Visibility for Panel(s):根據目前的顯示狀態來顯示或隱藏Dynamic Panel Move Panel(s):移動Dynamic Panel，可根據絕對座標或相對座標來移動 Set Variable and Widget value(s) equal to Value(s):設定一個或多個變數與Widget 的值 Axure RP教學 15 Open Link in Parent Frame:在上層內嵌框架中開啟一個網頁 Scroll to Image Map Region:捲動畫面到Image Map所在位置 Enable Widget(s):把物件狀態變成可用狀態 Disable Widget(s):把物件狀態變成不可用狀態 Wait Time(s):等待多少毫秒(ms)後再進行這個動作 Other:顯示動作的文字說明，例如:”Send email to user” 4. 多重條件(Multiple Cases) 一個觸發事件(Event)可以加入多個條件，以進行條件流程或互動。 舉例來說，您可以在一個按鈕的OnClick觸發事件中加入兩個條件，第一個條件可以加入一個說明(“If Yes”)和一個開啟第一頁的動作，第二個條件則可加入一個說明(”If No”)與一個開啟第二頁的動作。 當按紐在Prototype中被按下時，會顯示出這兩個條件的說明(”If Yes” 與”If No”)，此時點選其中一個條件的說明，就會執行該條件所關連的動作。 使用條件說明可以有效溝通條件流程，但是，如果需要建立一個高親合度的Prototype，則必需在條件中定義條件邏輯，根據在表單Widget中輸入的值或變數值來執行動作，這個主題將會在後面做深入的說明。 5. 網頁層級的互動: OnPageLoad Axure RP支援一個網頁層級的觸發事件(Event)-OnPageLoad，這個觸發事件發生在Prototype載入網頁時。 Axure RP教學 16 OnPageLoad 互動必須在Page Notes 窗格的Interactions 窗格中定義，加入條件的方式與在Widget中相同。 OnPageLoad 觸發事件(Event)會在OnPageLoad Event的介紹中做深入的說明。 6. 密技(Quick Tips) 密技一. 快速連結(Quick Link) 選擇 Widget ，然後按一下Interactions 窗格中的「Quick Link」並選擇目標網頁，可以快速地在Widget中加入一個基本連結。 密技二. 連結外部網頁 在「Link Properties」對話方塊中指定網頁連結的時候，取消勾選「Link to a page in this design」選項，然後在「Hyperlink」欄位指定一個外部網頁的url就可連結外部網頁的連結設定。 密技三. 重複設定類似的互動方式 如果你要進行一連串類似的互動設定，可以在Interaction窗格上，對著某個Case按滑鼠右鍵選擇”Copy”的動作，然後到你想加上互動設定的另一個Case，以滑鼠右鍵選”Paste”動作，然後再修改這個新的互動設定。如此一來，就可以更快速的完成物件的互動設定。 Axure RP教學 17 使用Master (共用區塊) 1. 什麼是Master (共用區塊)? 2. 套用 Master到網頁中 3. 應用實例 4. 密技 (Quick Tips) 1. 什麼是Master (共用區塊)? Master (共用區塊) 是一組在設計過程中可以重複使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導覽(Navigation)， Master 可以被放置在網頁或是其他的Master中，只要Master做了修改，其他使用到這個Master的地方也會跟著修改。 我們也可以從其他的軟體/程式技術經驗來認識Axure RP的Master。 如果您熟悉PowerPoint的母片功能，那麼Axure RP的Master功能，在”重複使用”的這一點特性上，有一點點類似PowerPoint的母片，但不完全是。如果您熟悉ASP或PHP程式語言的”Include”語法，或DreamWeaver的Template(DWT)，那麼Axure RP的Master就是同樣的概念，您只要使用Master，其他頁面把Master放進來，就可以產生共用的特性。 若想要提升企劃的速度跟效率，讓Axure RP在Web/AP規畫專案的效益展現出來，那麽Master肯定是您必須要學會並熟練運用的功能。 新增、組織與設計Master Master要在Masters 窗格中管理。想要新增Master的話，請按一下Masters窗格工具列上的【Add Master】鈕，或在窗格中按滑鼠右鍵並選擇「Add Master」。 Axure RP教學 18 Masters 窗格利用資料夾(Folder)來組織Master，然後透過工具列、快顯功能表或是拖拉的方式重新排列Master。 在Master上連續按滑鼠左鍵兩下可以開啟Master來進行設計，您可以像網頁一樣，將Widget拖拉到Wireframe中來設計Master。 2. 套用 Master到網頁中 想要在網頁或其他Master 的Wireframe 中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。 根據Master的特性， Master 物件會有淡紅或灰色的遮罩，想要移除遮罩的話，可以使用主選單中的「Wireframe->Mask Masters」功能。 Master預設的行為是Normal，您可以在Master上按滑鼠右鍵，然後利用「Behavior」子選單將它變更為「Place In Background」或「Custom Widget」。 Masters的行為說明如下: Normal: 可以被移動與放置在 Wireframe上的任何地方，對Master的變更會立即反映出來。 Place in Background: Master被鎖定在Wireframe的最底層，所包含的Widget 與Master 位在相同的位置，通常在製作樣板(Template)時會用到這個功能。 Custom Widget: 當Custom Widget放到Wireframe上時，Widget就會失去與Master的關聯，可以像一般Widget一樣被編輯，這個功能適合將經常使用到的Widget，連同預設定義好的屬性、註釋和互動建立一個樣式庫(UI Design Pattern Library)，例如:白色文字的藍色按鈕。 Axure RP教學 19 3. 應用實例 Axure RP能夠快速提高網站企劃的效率，除了個人在單一網站專案上應用Master的功能，來大量減低重複編輯的工作之外，還可以利用Master的Custom Widget自訂物件的功能，來建立網站介面元素的介面庫(UI Design Pattern Library)。這裡有一篇大陸Axure RP應用於網站介面庫的實際案例 - 利用Axure封裝視覺標準，非常值得學習。 4. 密技(Quick Tips) 密技一.在建立專案的初期就開始定義Master 專案一開始啟動，如果可以稍微掌握哪些介面區塊未來將是共用區塊，那麼就開始建立Master，比如網站的Header / Footer / 導覽選單(Navigation)，或者廣告版位等等。越早使用，越可以節省其他頁面設計的重複工作。 至於如何判斷什麼樣的介面區塊適合放在Master,您可以觀察自己會經常把哪些區塊Copy/Paste到其他頁面去使用，那些經常會被Copy/Paste的區塊，往往就是網站共用的區塊，就適合被設計到Master中。 密技二. 將所有頁面都套用Master(或移除Master) 在您想要套用(或移除)的Master名稱上按滑鼠右鍵，找到選單”Add to Pages..”及”Remove From Pages..”，就可以一次把想要套用Master的許多頁面，一次加完。反之，可以一口氣把不要的共用區塊，從許多頁面中快速移除。 密技三.使用資料夾(Folder) 資料夾(Folder)可以幫助您分門別類整理Master，尤其是如果您想要建立Master library 的話，這個功能絕對讓您事半功倍。您可以在Axure RP的Masters窗格第一個Icon (Add Folder)找到這個功能。 密技四.建立影像 Master 在Master 中建立常用的影像(例如:icon圖示)有助於重覆使用這些影像，您就不需要反覆的複製貼上，或不斷的匯入影像檔，而且，如果您想要更換掉這個影像的話，也只需要在一個地方變更就好了。 編註: Axure RP的”Master”功能想要以中文精準表達有些困難。在PowerPoint中，Master被翻譯成”母片”，但是Axure RP如果把Master翻譯成”母片”，會失去Axure RP的Master多種功能的涵義。 Axure RP教學 20 Axure RP的Master，可以是整頁的母片，這是一種型態。Axure RP的Master，也可以是Header區塊或Footer區塊，使用在很多頁面一起共用的時候，這是第二種型態。Axure RP的Master還可以當作獨立的Widget來使用，用來建立樣式庫Library。 因此，我們暫時選擇把Master翻譯成”共用區塊”，同時也直接將英文”Master”放在教學文章之中，如果您認為有更合適的中文翻譯方式，歡迎提供建議給我們。謝謝～ Axure RP教學 21 輸出網站/應用程式原型 1. 什麼是網站/應用程式原型 (HTML Prototype)? 2. 輸出網站原型/格式設定 3. 展示與操作網站原型 4. 分享原型檔案給其他人 5. 密技(Quick Tips) 1. 什麼是網站/應用程式原型 (HTML Prototype)? 在Axure中完成有註解的Wireframe和Interaction之後，您可以產生可互動且支援多種瀏覽器的Web/AP原型(HTML Prototype)。(注: AP是Application的縮寫，通常指的是應用程式) Axure RP網站原型是由HTML和Javascript組成，可以在IE 6(或以上的版本)、Mozilla或Firefox中瀏覽。換句話說，觀看網站原型的人僅需要一般瀏覽器，不需要安裝Axure RP。如下圖範例所示。 解除IE中的Active X 警告訊息:使用IE開啟在自己電腦裡頭的HTML Prototype檔案時，瀏覽器中可能會出現Active X 警告訊息，想要暫時解除IE中的警告訊息，請點選 Axure RP教學 22 IE瀏覽器出現的Active X警示訊息，接著選擇”允許被封鎖的內容”，這樣子就可以在IE瀏覽器上看到自己電腦裡頭的HTML Prototype了。 想要永久解除Active X警告訊息，請參考密技一。 2. 輸出網站原型/格式設定 想要輸出原型或設定(Configure HMTL Prototype)輸出格式的話，請按下Axure RP軟體上方主功能選單「Generate」功能表，選擇「Prototype(F5)」。 或是按下工具列中的「Prototype」鈕，系統會開啟「Configure HTML Prototype」對話方塊，並顯示預設的原型輸出格式設定，您可透過這個對話方塊來設定輸出原型的格式。 格式設定中的選項可分成下面幾區: General:在「Destination Folder」處輸入網站原型的HTML檔案的存放位置，因為Axure RP的網站原型包含許多檔案，最好指定一個windows檔案系統內的檔案夾來存放。 Notes(網頁說明):選擇和排序想要顯示在網站原型中的網頁層級說明。 Annotations(物件註解):選擇和排序想要顯示在網站原型中的註解欄位。 Interactions (互動):指定互動的行為，例如:指定是否需要預設顯示條件描述(case)，或是只在多個條件存在的情形才顯示。 Distribution:選擇是否產生CHM 檔。 Advanced:選擇是否將Text Panel轉成影像，這是一個舊版本的功能，現在很少有需要這樣處理。 Axure RP教學 23 初次輸出原型，您可以直接使用預設的設定值，除了指定輸出的檔案夾之外，不用費心去調整。或者當您完成網站原型輸出格式的設定，只要按一下【Generate】鈕就可將這個Prototype輸出了。 如果您越來越熟練，您可以兩個動作就完成網站原型的輸出了，第一個動作是按下【F5】，接著再按下【Generate】。 3.展示與操作網站原型 Axure RP輸出的網站原型(HTML Prototype) 總共可區分成三個框架。 左側: Sitemap 框架 您可以按Sitemap中的網頁列表，循序展示網站原型中的任何一個網頁。如果您不需要顯示左側的Sitemap，那麼就應該 底部: 網頁說明(Page Notes)框架 這個框架顯示該網頁的文字說明，這些文字說明來自於您寫在網頁註解(Page Notes)的文字。 中間: 主框架 主框架包含了Wireframe和流程圖，Wireframe是可以互動的，舉例來說，按一下設定有網頁連結的按鈕，那麼就會連結到所設定的網頁。 您也可以按一下加有附註的Widget旁邊的黃色便利貼小Icon圖示來檢視註解。 Axure RP教學 24 4. 分享原型檔案給其他人 因為Axure RP的Prototype是標準的HTML、Javascript和影像檔，所以您的同事和客戶不需要安裝Axure RP或任何播放器就可以直接檢視Prototype。 發佈Prototype的方式有很多種，以下是三種不同的分享方式的介紹。 a. 放到網站伺服器 第一種方式是發佈網站原型的HTML Prototype到Web Server上，您只要將網址給客戶或工作夥伴其他人，他們在他們的瀏覽器上瀏覽Prototype。 b. 壓縮成Zip檔 第二種方式是將包含Prototype檔案的檔案夾壓縮成Zip檔，然後將Zip檔寄給相關的人。收到檔案的人，將Zip檔解壓縮後，便可以直接在自己的電腦瀏覽HTML Prototype，通常是開啟 index.html或從 XXX_Start.html檔開始瀏覽 (XXX指的是該RP Project的名稱)。 c. CHM 檔 第三種方式是產生包含Prototype的CHM檔，就像zip檔一樣，這種方式讓您可以檔案的方式發佈Prototype，而且不需要安裝任何軟體來檢視。CHM是Microsoft HTML Help檔的格式，所以大多數的Windows電腦已經安裝了瀏覽器，使用者只要在檔案上連續按兩下滑鼠左鍵就可以檢視它。 想要將Prototype輸出成CHM檔的話，請在「Configure HTML Prototype」對話方塊中，進入「Distribute」區，勾選「Create HTML Help File(.chm)」選項。 如果您目前已經安裝的Microsoft系統中沒有HTML Help Workshop的話，就必須安裝它才能產生CHM檔，您可從這裡免費下載，一旦完成安裝以後，所安裝的資料夾中將會出現一個hhc.exe的檔案，按一下「Locate hhc.exe」來告訴Axure RP這個程式在電腦中的位置。 一旦Prototype和.chm檔產生之後，您將會在存放Prototype的資料夾中找到一個 .chm檔，您現在就可以將 .chm檔發佈出去，讓接收者在HTML Help檢視器中檢視。 密技(Quick Tips) 密技一. 只更新現在開啟的頁面到網站原型: 當您設計網站原型的技巧越純熟，網站專案會越來越大，導致輸出網站原型的時間會隨著專案而變大。萬一您只是調整其中的某一頁，卻得等待整個網站重新全部輸出，那就太浪費時間了。 Axure RP教學 25 想要重新產生某一頁網頁，只要在Axure RP打開該頁Wireframe，接著按下Axure RP主功能選單「Generate」功能表，選擇「Regenerate Current Page to Prototype(CTRL+F5)」(如下圖)。 當您選擇這個動作，或者直接按下熱鍵CTRL+F5，Axure RP不會產生任何對話視窗，您只會感覺到滑鼠指標閃了一下，此時，再回到網站原型(HTML Prototype)上去reload這一頁，或click這一頁網頁名稱，就會看到已經更新的頁面了。 密技二. 關閉IE中的Active X 警告訊息: 使用IE瀏覽器在自己的電腦上開啟存放於檔案夾中的HTML Prototype時，瀏覽器中可能會出現Active X 警告訊息，想要解除IE中的警告訊息，請點選「工具」功能表中的「網際網路選項」，切換到「進階」標籤頁中，找到「安全性」的設定中，勾選第二項「允許主動式內容在我的電腦上的檔案中執行*」選項即可 (如圖)。 密技三. 嵌入外部Flash檔案Inline Frame Inline Frame Widget可用來加入Axure RP 目前不支援的內容，例如:Flash物件;只要在Inline Frame Widget上連續滑鼠左鍵兩下就可以讓您指定想要載入到框架的網頁，如果您要建立一個包含Flash物件的HTML 檔，您可以將檔案嵌入到Inline Frame中，這樣他就可以在Prototype中呈現了。 密技四. 快速繪製網站架構圖: 以”Generate Flow Diagram”的功能，請看快速繪製網站架構圖 (Sitemap)教學影片。 Axure RP教學 26 輸出規格文件(Word) 1. 什麼是規格文件 (Specification)? 2. 輸出規格文件/格式設定 3. 密技(Quick Tips) 1. 什麼是規格文件 (Specification)? 在Axure RP 中設計完Wireframe之後，我們可以輸出Microsoft Word格式的需求書或功能性規格文件(Specification)。輸出Word格式規格文件之前，您的電腦必須事先安裝好Microsoft Word 2000或更新的版本。 如果您在設計Wireframe的同時，也把需求說明或規格敘述寫在網頁說明(Page Notes)或Widget的物件註解(Annotations)，輸出成規格文件時，Axure RP會自動幫您匯整文字資料以及畫面，並且按照網頁順序整理在Word檔案裡頭。(如下圖) Axure RP教學 27 2. 輸出規格文件/格式設定 想要輸出規格文件或設定(Configure Specification)輸出格式的話，請按下Axure RP軟體上方主功能選單「Generate」功能表，選擇「Specification(F6)」。 或是按下工具列中的「Specification」鈕，系統會開啟「Configure Word 2007 Specification」或「Configure Word 2000 Specification」對話方塊，並顯示預設的規格文件輸出格式，您可透過這個對話方塊來設定其他格式。 如同輸出網站原型(HTML Prototype)一樣，需求書或規格書也可依不同的用途進行設定，比如設定一種格式專門給客戶確認需求及規格，設定另一種格式專門產生測試計劃與測試步驟，再另外設定一種格式用來介紹操作步驟。 如果您不另外指定輸出格式，可以直接按下【Generate】來輸出規格書，您唯一須留意的是輸出文件名稱(Destination File)必須是一個檔案名稱，比如 Untitled.docx (Word 2007格式) 或 Untitled.doc (Word 2000格式)，不能只給目錄名稱。 可以被調整設定的項目包括，Pages(網頁)相關 / Masters(共用區塊)相關 / Notes(網頁說明)相關/ Screenshot (畫面)相關/ Annotations (物件註解)相關 / Widgets(物件)相關 / Word Template (Word文件樣板)相關。 Axure RP教學 28 套用Word文件樣板可以客製化您輸出的規格文件，讓文件的呈現更專業，您也可以事先設定好前言以及附錄文件，比如封面，附錄或簽名頁。您可以修改Word範本來配置規格中的文字樣式，變更文件的排版或加入頁首或頁尾。一但您設定好規格文件格式，請按一下【Generate】鈕來產生這份規格。 3. 密技(Quick Tips) 密技一. 只要把必要的項目輸出到規格文件中 規格文件輸出時如果選擇輸出的項目太細，很有可能會產出一份好幾百頁的Word檔案，而難以閱讀。因此，輸出之前，最好透過格式的設定將不需要的項目取消勾選，保留有意義的部份。 密技二. 預設規格文件標題改成中文 將Axure RP預設格式的文件標題改成中文，比如將Pages格式設定的 Section Header名稱 “Pages” 改成 “網站企劃說明” ，把 “Page Tree” 改成 “網頁列表”;或者把Screenshot格式設定的 Section Header名稱”User Interface” 改成 “網頁畫面”。如此一來輸出成規格文件時，會更方便閱讀這些段落標題。 Axure RP教學 29 四. 架構圖&流程圖 四. 架構圖&流程圖 1-click繪製架構圖sitemap 》教學影片 - 快速繪製網站架構圖 (Sitemap)2分28秒 流程圖&連接線 》教學影片 3分18秒 1-click繪製架構圖sitemap 1. 自動繪製架構圖 2. 觀看教學影片 1. 自動繪製架構圖 每一個網站的規劃，少不了要繪製樹狀的網站架構(sitemap diagram)，架構圖能夠以視覺化的方式呈現網頁階層。 您在Axure RP的sitemap窗格定義好的網站架構，只要one-click就可以轉成樹狀架構圖。 建議您先開啟一個空白頁面，命名為”Sitemap”或者其他您覺得有意義的名稱。 接下來，在sitemap窗格中的最上層頁面(root 或 home)，按滑鼠右鍵，選擇「Generate Flow Diagram」，此時會出現「Generate Flow Diagram」對話方塊，尋問您想要產生「Standard 」或是「 Right Hanging 」的選項。 Axure RP教學 30 接下來Axure RP就會把您所選擇的sitemap架構，繪製成樹狀架構在頁面上，而且樹狀架構圖中的網頁節點會自動連結到對應網頁。 Axure RP輸出的樹狀架構圖的字體/節點顏色等，可以透過上方的工具列自行調整字體顏色/區塊填色/線條粗細顏色等等。 如果樹狀架構圖過於龐大，您也可以從次單元首頁，按滑鼠右鍵，選擇「Generate Flow Diagram」， 選擇輸出選項「 Right Hanging 」，來逐步依次輸出每個樹枝的結構，再組合成完整的樹狀架構圖。 Axure RP教學 31 流程圖&連接線 1. 流程圖 2. Flow Widget 3. 建立流程圖 4. 關聯網頁 5. 輸出流程圖 6. 密技(Quick Tips) 1.流程圖 流程圖可以用來表達各式各樣的流程，包括:Use Case、商業流程與網頁流程，在Axure RP中，流程圖常被用來提供一個高階視角(high level view)來看網頁設計可以達成的工作。 在Sitemap窗格中的網頁標示圖案，預設為網頁形狀的ICON，您可以在Sitemap中的網頁上按滑鼠右鍵並選擇「Diagram Type->Flow」，將網頁標示圖案設定為流程圖ICON。不過，這不是建立流程圖所必要的動作。這個動作與繪製流程圖沒有關聯性，只是用來辨識這個頁面放置流程圖或線框圖。 2. Flow Widget 按下Widgets窗格工具列上的「Flow」可以找到各種流程Widget。 Axure RP教學 32 在Widgets 窗格中有各種形狀的Widget可以用來代表不同的流程步驟，如果您找不到適合的形狀，也可以使用Image Widget來代替。 依慣例，在流程圖中不同的形狀的圖形分別代表著特定的意義，但是Axure RP 並沒有限制這些圖形的使用，一般來說，只要您的客戶看的懂就是最好的規則。 3. 建立流程圖 就像 Wireframe Widget一樣，Flow Widget也可以直接從Widgets 窗格中拖拉到Wireframe 窗格，然後透過工具列或快顯功能表(Context Menu)來編輯樣式與屬性，如果要改變流程形狀的話，可以按滑鼠右鍵並選擇「Edit Flow Shape」子選單中的項目。 Axure RP教學 33 連接線 Flow Widget和Wireframe Widget最主要的不同就是Flow Widget具有可以附加連接線的連接點。 想要加上連接線的話，請先按下工具列上的【Connector Mode (F11)】鈕，將Wireframes 窗格改變為Connector Mode，若是要將Wireframe窗格切換回Pointer Mode的話，則請按下【Pointer Mode (F9)】鈕。 切換到Connector Mode後，在Wireframe 窗格中按一下滑鼠左鍵並拖曳，就可以畫出一條連接線。 若是要連接兩個Flow Widget的，請在其中一個Widget上的連接點按住滑鼠左鍵，拖拉連接線到另一個Widget上的連接點後放開滑鼠，就可以新增一條連接線;您也可以利用拖曳連接點的方式將已經建立好的連接線附加到另一個Flow Widget的連接點上。 連接線也可以套用線條末端(例如:箭頭)與線條樣式(例如:虛線)，只要先選好您要設定的連接線，再使用工具列上的Line Pattern 與Line Ends按鈕即可。 Axure RP教學 34 4. 關聯網頁 Flow Widget可以關聯到任意指定的一個參考網頁，一旦指定了關聯網頁，Flow Widget上會顯示這個網頁的名稱，而在Prototype中，這個Flow Widget與網頁間會自動建立Hyperlink連結。 從Sitemap窗格中，將任一網頁拖拉到Wireframe窗格中，也會建立一個以這個網頁當作關聯網頁的Flow Widget。 Flow Widget 上的關聯網頁可以透過在Widget上按滑鼠右鍵，並選擇「Edit Flow Shape->Edit Reference Page」來編輯或清除。 5. 輸出流程圖 在Auxre RP繪製的流程圖，可以輸出成圖檔或網頁。 輸出成圖檔: 選擇「File > Export to Image」，就可以把單獨這頁流程圖轉成圖檔。 如果您想把流程圖放到Powerpoint或Word文件，可以直接全選整個 Axure RP流程圖，以Coyp/Paste的操作方式貼到Powerpoint或Word文件中。 輸出成Prototype: 是的，流程圖可以直接在瀏覽器上觀看。輸出流程圖到Html Prototype方式跟輸出其他網頁到Prototype相同，請按下Axure RP軟體上方主功能選單「Generate」功能表，選擇「Prototype(F5)」即可。 Axure RP教學 35 6. 密技(Quick Tips) 密技一. 固定連接線，取消自動繞圖: 在預設的情況下，連接線會自動繞過中間阻礙的Widget來連接兩個連接點，為了避免連接線或Widget移動時連接線不斷的自動改變路徑，您可以按滑鼠右鍵並選擇「Edit Connector->Do Not Autoreflow Connector」來停止這個功能。 Axure RP教學 36 五. 中級互動設計 五. 中級互動設計 學習控制Dynamic Panel 》教學影片 - 開關Dynamic Panel互動設計 51秒 》教學影片 3分55秒 OnMouseEnter、OnMouseOut和Rollover效果 Menu 學習控制Dynamic Panel 1. Axure RP實現更豐富的互動設計 2. 認識Dynamic Panel Widget 3. 編輯Dynamic Panel 的狀態 4. 預設Dynamic Panel的顯示/隱藏 5. 示範-以Click來開關Dynamic Panel 6. 教學影片 》教學影片 - 開關Dynamic Panel互動設計 51秒 》教學影片 3分55秒 1. Axure RP實現更豐富的互動設計 網站開發技術越來越豐富了，這是我們正在經歷的過程，也是未來的趨勢。 不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術，能夠讓網站介面更豐富，展現更優質的人機互動。 同時，這個趨勢也挑戰了傳統的文書軟體或繪圖軟體，當這些軟體受限於僅能表現單一畫面與單一狀態的情況下，您很難把心目中最友善的互動方式表達清楚並設計出來。 Axure RP與其他的wireframe軟體，最大的差異在於能夠進行互動設計(Interaction Design)，且可以立即將結果呈現於prototype上，而不是只有文字敘述。更棒的一點是，學習Axure RP的互動設計，您並不需要學習HTML或Java Script語法，只要透過一些設定與操作，便可以完成多樣而創新的互動介面設計。 在Axure RP設計出來的Prototype中，最簡單的互動設計是網頁連結，透過滑鼠的click來串起使用者與網站的互動流程。然而，真正發揮Axure RP在互動設計上的驚人特 Axure RP教學 37 色，並不是只有連結這麼簡單的互動，您可以藉由學習Dynamic Panel (動態面板)物件的操作與控制，來做到更豐富更友善的互動介面設計。 2. 認識Dynamic Panel Widget Dynamic Panel (動態面板) 這種物件是專門用在設計Prototype動態功能的Widget，Dynamic Panel可以包含一或多個狀態(State)，每個狀態本身是一個小頁面，藉由控制狀態(State)的順序或隱藏/顯示Dynamic Panel來達成互動介面的整個表現。 就像其他Widget一樣，Dynamic Panel可以用拖放的方式從Wireframe窗格加入到畫布中。 學習Dynamic Panel的互動設計之前，有2個重要的概念必須先認識: (1) Dynamic Panel (動態面板): 一種透明的物件，本身可以包含很多個狀態(State)，而每個狀態都是一個小網頁。被放置在最上層的狀態就是該面板的長相。 (2) State (狀態): 每個狀態都是一個小網頁，而這個小網頁的邊界與大小，與所屬的Dynamic Panel大小相同。不同的State可以重疊在同一個Dynamic Panel裡頭，唯有被控制放在最上層的State，才會呈現於Prototype的畫面中。 以Axure RP所設計出來的多樣互動介面，大多藉由各種觸發事件(Event)來控制Dynamic Panel顯示或消失，或控制哪個State在最上層來模擬出實際的互動介面。 Axure RP教學 38 3. 編輯Dynamic Panel 的State(狀態) 已經擺放到畫布中的Dynamic Panel，直接在上頭快速點滑鼠左鍵兩下，會開啟「Dynamic Panel State Manager」對話方塊。在這個對話視窗中，您可以新增State、更改State名稱、調整State排序、移除State與編輯State。 在「Dynamic Panel State Manager」對話方塊中選擇一個Panel State，然後按下【Edit State】鈕，會開啟這個Panel State的Wireframe以供設計。或者您可以選擇【Edit All States】鈕，一口氣把所有的狀態頁面通通開啟。 開啟後，您就可以像設計其他Wireframe一樣的設計狀態頁面(State)， 每個狀態頁面的側邊藍色虛線外框就表示Dynamic Panel 的邊界。 4. 預設Dynamic Panel的顯示/隱藏 Axure RP教學 39 Dynamic Panel 可以預設為隱藏(Hidden)，作法是在Dynamic Panel 物件上按滑鼠右鍵，並選擇「Edit Dynamic Panel->Set Hidden」，這樣就可以隱藏Panel 的內容，而且Dynamic Panel的遮罩也會從藍色變成黃色。已經預設隱藏的Dynamic Panel，可以選擇「Edit Dynamic Panel->Set Visible」來顯示Dynamic Panel。 Dynamic Panel 可以藉由接下來所介紹的互動模式，動態控制在Prototype 中的顯示或隱藏。Axure RP提供互動設計的實現方式，都在 「Interaction Case Properties」對話方塊中設定 (請參考初級互動設計)。 其中有5種互動方式(Action)是專門用來控制Dynamic Panel的，分別是: Set Panel state(s) to State(s):將某個Dynamic Panel的State設定為該Panel的顯示狀 態 Show Panel(s):顯示(設為visible) 一或多個Dynamic Panel Hide Panel(s):隱藏一或多個Dynamic Panel Toggle Visibility for Panel(s):根據目前的顯示狀態來顯示或隱藏Dynamic Panel Move Panel(s):移動Dynamic Panel，可根據絕對座標或相對座標來移動 5. 示範-以Click來開關Dynamic Panel 》下載這個示範rp檔(MyFirstPanel.zip, 52k) 》教學影片 - 開關Dynamic Panel互動設計 51秒 要了解Dynamic Panel的互動控制，我們先來模擬一個Click的效果 - 當滑鼠Click頁面上的矩形時，會出現一個訊息視窗，再Click一次時，又把訊息視窗隱藏起來。換句話說，我們將藉由滑鼠Click來控制Dynamic Panel的顯示與隱藏。 首先我們先在畫布上放一個矩形物件。接下來放置一個Dynamic Panel，並且編輯這個Panel唯一的預設狀態(State1)。 Axure RP教學 40 在State1(狀態)的wireframe上，隨意加入一些文字，以供辨認。 Axure RP教學 41 再把Dynamic Panel的顯示狀態，設定為隱藏(Hidden)。 然後，在矩形物件上增加一個OnClick的Interaction Case。先選擇矩形物件，接著click兩下 “OnClick”，彈出「Interaction Case Properties」互動設計的對話方塊。 分別針對這個對話方塊中的Step 1- 3做互動設計的設定: step 1: Description - 預設為 Case 1，不用變更。 step 2: Select Actions - 勾選Toggle Visibility for Panel(s)，此時在step 3會出現 Toggle Visibility for Panel。如下圖: Axure RP教學 42 接下來… step 3: Edit the Action description (click an underlined value to edit) - 這句話的意思是，去點選有加底線的項目進一步編輯。於是我們接著click Panel這個單字，然後會看到彈出一個「Select Panels」對話方塊，裡頭只有一個叫做”My First Panel”的項目，把它勾選起來。此時在step 3會出現Toggle Visibility for My First Panel。(如下圖) Axure RP教學 43 如果您曾經給Dynamic Panel有意義的名稱，就可以在Select Panel時看到被您命名過的Panel。選擇Dynamic Panel時，Dynamic Panel 會以Annotations & Interactions 窗格中所給予的Label做為識別，如果沒有指定的話，Dynamic Panel 會預設標示為”Unlabeled”。 接下來，就可以輸出Prototype了，按下F5或選擇 「Generate > Prototype」，將剛剛設計過的簡易互動介面，輸出到瀏覽器上進一步檢視，當滑鼠click時，您所設計的那個Dynamic Panel是否會消失/出現 (如下圖)。