axure原型設(shè)計工具教程作者日期2008年7月23日

Axure快速原型設(shè)AxureRapid作者：更新日期：2008年7月23 入門 第一 介 第1 認(rèn)識Axure 第2 第3 第4 第5 HTML原 第6 第二 流程圖（Flow 第1 第2 第三 第1 第2 第3 菜 第四 高級功能（Rich 第1 第2 OnChange事 第3 第4 第5 變量 第6 第五 第1 第2 第六 第1 案例 案例 案例描 實現(xiàn)步 案例 Tab頁簽控 秘笈 1、解決中文輸入法問 2、超快速移動工作 3、控件選取下層的控 4 5、單選群組（RadioButton 6、解除IE中的ActiveX警告訊 7、只要輸出必要的項目到規(guī)格書 8、默認(rèn)規(guī)格書標(biāo)題改成中 入門篇第一章介紹第1Axure什么AxureAxure的發(fā)音是“Ack-sure，RP則是“RapidPrototy”的縮寫。AxureRPPro是AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個快速的原型工具，主要是針對負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計功能、設(shè)計界面的，包括用戶體驗設(shè)計師（UX、交互設(shè)用戶進(jìn)行演示、溝通交流以確認(rèn)用戶需求，并能自動生成規(guī)格說明文檔。另外，Axure原型的作用和好處“沒有比制作prototype——M.和迪安A.根據(jù)報告顯示，大約66%的軟件開發(fā)不是失敗，就是超、延期或交付縮水的功1、缺乏使用者的參與；2、需求或規(guī)格不完整；3、Axure型、規(guī)格說明Word文檔。以下是對AxureRP工作環(huán)境的簡要說明：116253748主菜單和 &頁面交互和注釋面板（PagesNotes&PageInteractionsPane）第2頁面導(dǎo)航面板按鈕可以刪除一個頁面。右鍵單擊選擇“RenamePage”菜單項可對頁面進(jìn)行重命名?？丶⑨尶驁D中選擇控件，然后在控件注釋和交互（AnnotationsandInteractions）面板自定義字段通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點擊面板上 腳注 上的進(jìn)行修改。頁面?zhèn)渥ⅲ≒age要在備注字段間進(jìn)行切換，可以點擊“PageNotesDefault”旁邊的箭頭按鈕，然第3控件的交互（Events動作動作場景動作動作場景動作目前AxureRP5支持的事件如下：大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnterOnMouseOut，一些定義在“Step2”中，勾選“OpenLinkinCurrentWindow彈出的LinkProperties框中選擇要的頁面。設(shè)置動OpenLinkinCurrentWindowOpenLinkinPopupWindow：OpenLinkinParentWindowOpenLinkinFrame：SetPanelstate(s)toState(s SetVariableandWidgetvalue(s)equaltoValue(s)OpenLinkinParentFrame：多個場景（條件條件說明(“IfYes”)并執(zhí)行第一個動作；第二個場景則可加入另一個條件說明(“IfNo”)當(dāng)在原型中按下按鈕時，會顯示出這兩個條件說明(“IfYes”和“IfNo”)，點選其頁面上的事件:事件添加場景的方式與控件事件相同。（6）第4節(jié)使用模塊什么是模塊模塊的添加、設(shè)計和組織右鍵，選擇“AddMaster頁面中使用模塊WidgetPlaceinBackground:模塊應(yīng)用框圖中時，會處于線框圖的最底層并被鎖定，所CustomWidget:模塊應(yīng)用框圖中時，模塊中的控件與模塊失去關(guān)聯(lián)，模塊中的控第5節(jié)HTMLHTML于瀏覽器的原型了。Axure原型是一些HTML和JavaScript文件，可以在IE6+、Mozilla、Firefox瀏覽器中執(zhí)行。配置和生成原型點擊主菜單“Generate->Prototype(F5)”或上的Prototype按鈕，可以配置和生成原型，在打開的ConfigureHTMLPrototype框中，可以對原型進(jìn)行配置。HTML 重新生成頁面瀏覽和操作HTML底部:顯示當(dāng)前頁面的備注說明，即頁面?zhèn)渥?。分發(fā)原Prototype的方式有很多種：1web3、發(fā)布為文 HTMLHelp格式文檔，想要將原型輸出為文檔，請在ConfigureHTMLPrototype框中的Distribute中，勾選“CreateHTMLHelpFile(.)”選項。如果你未安裝HTMLHelpWorkshop的話，就必須先安裝它才能產(chǎn)生檔。安裝完成HTMLHelpWorkshop后，所安裝的文件夾中將會出現(xiàn)一個hhc.exe的文件，單擊“Locatehhc.exe”到hhc.exe文件的位置。最終產(chǎn)生的原型文檔存放原型所在的文件夾中。第6什么是規(guī)格說明書默認(rèn)的規(guī)格書是Word2007(.docx文件)，需要安裝Word2007以生成和閱讀.docx文件。另外，你也可以設(shè)置Word2000作為規(guī)格書。如果沒有安裝Word2007，可以安裝OfficeCompatibilityPack兼容包，裝2007或兼容包，它會和Axure一起安裝。文件時，AxureWord文檔中。AxureRPPrototype范例-旅游企劃書(Word2000格式)1.7MAxureRPPrototype范例-旅游企劃書(Word2007格式)700k（以上文件來自 ，是一個的Axure，繁體中文設(shè)置規(guī)格說明書的格式中的“Specification”按鈕，在ConfigureWord2007Specification框中，ScreenshotWidget（第二章流程圖（Flow第1什么是流程圖“DiagramType->Flow，這時在頁面前圖標(biāo)會變?yōu)橐粋€圖標(biāo)。流程控（process2roundedrectangle3beveledrectangle4diamond作用：表示決策或判斷（例如heEe在程序流程圖中，用作判5file6bracket、8triangle9trapezoid10、ellipse：橢圓形或圓流程的結(jié)束。如果是在usecase用例圖中，橢圓就是一個用例了。11、hexagon：六邊12、parallelogram：平行四邊（Input13、actor14、database：數(shù)15、image：流程連接線要添加連接線，可以點擊主上的“ConnectorModebutton(F11)”按鈕，這時選擇流程連接線，然后點擊中的“LinePattern”和“LineEnds”按鈕可以創(chuàng)建流程圖“EditFlowShape”的子菜單進(jìn)行流程圖形的轉(zhuǎn)變。流程圖中頁件。流程圖控件上所的頁面可以通過在控件上的右鍵菜單“EditFlowShape->EditReferencePage”進(jìn)行編輯和清除。第2生成流程圖 第三章高級交互設(shè)計（Rich第1（Dynamic動態(tài)面板控件（states編輯動態(tài)面板的狀態(tài)框圖中，雙擊動態(tài)面板可以打開一個“DynamicPanelStateManager”框， 隱藏動態(tài)面板可以設(shè)置動態(tài)面板在默認(rèn)時隱藏，只要選擇動態(tài)面板，右鍵菜單選擇“Edit交互動作和動態(tài)面板交互動作可以動態(tài)面板的交互。在“InteractionCaseProperties”框中包SetPanelstate(s)toShoHideToggleVisibilityforMove“Unlabeled動態(tài)面板使用案例Tab頁簽動態(tài)面板可用于創(chuàng)建一個Tab頁簽控件。如Tab頁簽控件有3個tab，則該tab控件被包含在擁有3個狀態(tài)的動態(tài)面板中，每個狀態(tài)代表一個tabtab都有一個交互動作，當(dāng)點擊某個tab時，就會切換到動態(tài)面板的對應(yīng)狀態(tài)。這可以結(jié)合OnMouseEnter事件和動作來實現(xiàn)。第2OnMouseEnterOnMouseOut在文本類控件、按鈕類控件、超級控件中有OnMouseEnter和OnMouseOut事件。OnMouseEnterOnMouseOut翻轉(zhuǎn)和按鈕樣式翻轉(zhuǎn)拖入Rectangle控件到線框圖中，右鍵菜單選擇“EditButtonShape->EditRollover第3節(jié)菜單菜單控菜單控件分為垂直菜單（Vertical）和水平菜單（Horizontal 控件面板中拖拉菜單控件到線框圖面板中創(chuàng)建菜單，默認(rèn)情況下菜單帶有3個菜單項。編輯菜單控件單擊選擇Edit PaddingEditor框中可設(shè)置邊距。要增加或刪除菜單項，右鍵單擊選擇“AddItem”和“DeleteItem 菜單樣式翻轉(zhuǎn)右鍵單擊菜單或菜單項，選擇“EditRolloverStyle在彈出的“SetRolloverStyle”Preview第四章高級功能（Rich第1（Conditional什么是邏輯條件創(chuàng)建邏輯條件（caseCaseProperties 框中的Step1中點擊“AddCondition?。“IftextonwidgetUsernameFieldequals'axure'andtextonwidgetPasswordFieldequals'12345在ConditionBuilder框中，可以添加多行條件。點擊“+”按鈕可以增加一行條默認(rèn)帶有“ElseIfElseIfTrue”第2節(jié)OnChange什么是OnChangeOnChange（Droplist）和列表框（ListBox）控件。OnChange在OnChange事件上使用Condtion?OnChangeselectedoptionof”條件語句，進(jìn)行下拉框listbox第3節(jié)OnKeyUpOnKeyUpOnKeyUp實時表單驗用戶名是否已經(jīng)存在、是否正確等，并在界面上進(jìn)行動態(tài)信息提示。第4OnFocusOnLostFocusOnFocusOnLostFocusTextField,TextArea,DropList,ListBox,Checkbox和RadioButton件上。OnFocus事件是當(dāng)是當(dāng)鼠標(biāo)點擊控件或用鍵盤tab鍵讓控件獲得焦點時發(fā)生；而OnLostFocus事件正好相反，是當(dāng)控件失去焦點時發(fā)生。使用場OnFocus和OnLostFocus常用于顯示、隱藏與表單中控件相關(guān)的動態(tài)信息。第5節(jié)變量什么是變量管理變數(shù)字，不能大于25個字符長度，且不能含有空格。設(shè)置變量的值在添加場景時彈出的“InteractionsCaseProperties”框中，只要在step2中選擇“SetVariableandWidgetValue(s)equaltoValue(s)”這個動作，然后在step3中點擊“VariableandWidgetvalueequaltoValue”這個，就可以在彈出的SetVariableandWidgetValue框中設(shè)置變量的值了。在以上框中，可以設(shè)置動作如：“SetvalueofvariableOnLoadVariableequal在條件中使用變量在ConditionBuilder框中，可以在設(shè)定的條件中使用變量，例如ifvalueofvariableOnLoadVariableequals‘loggedin在設(shè)置文本時使用變量 當(dāng)在文本類控件中編輯文本時，在SetVariableandWidgetValues框中你可以用符號[[和]]包住一個變量名，就可以在原型中變量值。 第6OnPageLoad什么OnPageLoadOnPageLoad事件和變OnPageLoadOnPageLoad事件中常有基于變量值條件的場景。例如，你可能會根據(jù)變量的值去設(shè)定設(shè)置textpanel控件中的文本，如：“ e,[[UsernameVariable]]”，設(shè)置頁面載入時第五章模塊的最大化第1模塊的重用模塊中的動態(tài)面板設(shè)置模塊中的控件值例如，在頁面OnPageLoadSetVariableandWidgetvalueequaltoValue中，你可以對所包含的模塊中的textpanel控件設(shè)置文本。當(dāng)你選擇textonwidget設(shè)置條第2（Raised什么是自定義事件管理自定義事件RaisedEvents（MastersOnly?在打開的ManageRaiseEvent框中可以管理自定可以包含一個觸發(fā)RaisedEventInteractonCase框中選擇RaiseEvent第六章多人協(xié)助和版本第1Axure共享工程（Shared什么是共享工程一個共享工程是被在一個普通的文件中，該可以被那些允許共享工程的創(chuàng)建共享工程File->NewSharedProject，就可以創(chuàng)建一個新共享工程。這時會彈出一個創(chuàng)建共享工程的框，根據(jù)指示去輸入工程名、共享工程的地址、本地共享本地共享工程中，有一個.rpprjDO_NOT_EDIT含了工程數(shù)據(jù)和版本控制信息，不能在Axure以行編輯。如果你要移動.rpprj文件，同時你也要一起移動DO_NOT_EDIT這個文件夾。 從已有RP文件創(chuàng)建共享工程已有的.rp文件可以被轉(zhuǎn)化為共享工程。打開.rp文件，然后選擇主菜單Share->CreateSharedProjectfromCurrentFile。這時也會打開創(chuàng)建共享工程的框，進(jìn)行工程的設(shè)在共享工程創(chuàng)建之后，在你的本地中會有一個[ProjectName].rpprj個文件就可以操作共享工程。原來的.rp文件和共享工程沒有產(chǎn)生關(guān)聯(lián)。獲取共享工程Share->GetandOpenSharedProject，這時會彈出獲取共享工程的框Share->GetandOpenSharedProject獲取和開打共享工程。編輯共享工程AxureAxureSitemapChanges取修改（GetChanges。notesfields,variables,styles,andgenerators）也需要檢出（checkedout）以進(jìn)行修改。而sitemap和master面板中的列表是個例外，它們可以不用檢出就可以修改，這樣檢出（Check 提交修改（Send檢入（Check獲取修改（GetChanges）“Share->GetAllChangesfromSharedDirectory”或上的“GetAllChanges”按要提交對頁面和模塊列表的修改,選擇主菜單“Share->SendAllChangestoSharedDirectory”或“ShareCheckInEverything”將頁面、模塊、屬性的所有修改發(fā)送到共Project一個頁面，所以這時不能檢出修改頁面1； 中以導(dǎo)出一個共享工程到一個RP文件。導(dǎo)出后，這個RP文件就可以像普通的RP文件一樣被要將RP文件做的修改合并到一個共享工程中，可以打開共享工程后然后使用查看共享工程的歷史每次檢入都會在一個共享中創(chuàng)建一個新的修訂記錄。對于每次檢入，你可以添加備你也可以導(dǎo)出一個修訂到RP文件中進(jìn)行查看。使用共享工程管理器移動共享工程如果一個共享工程被移動或共享工程的路徑被改變，那么已有的共享工程的本地副要重新指向一個已有的本地共享工程到新的共享工程上，可打開已存在的副本，然后使用主菜單“Share->RepointtoMovedSharedDirectory”。案例篇（未完案例一案例描述實現(xiàn)步驟 ：equaltoValue”，并點擊Step3中的；6、確定和關(guān)閉所有框，這時控件交互和注釋面板如下間是“Ifelse”關(guān)系。最終控件面板上的場景、條件、動作如下：案例二Tab案例三案例描效果展示詳細(xì)步驟ScrollbarsonTablesandOtherWidgetsUsingtheDynamicThereareacouplewaystorepresentscrollbarsontablesorothersectionsinwireframesinAxureRP.Thefirstistosimplyuseanimageofascrollbaronthewireframe,butwiththismethodthescrollbarsarestaticintheprototype.Thesecondwayistousethedynamicpanel.Thistutorialwillgothroughthestepstoputascrollbaronatablewidget,butitcanbeusedingeneralforanywidgetorcollectionofwidgetsonawireframe.DragadynamicpanelfromtheWidgetspaneontotheRight-clickonthedynamicpanelandselectEditDynamicPanel->ShowScrollbarsAsNeeded.Thiswillshowscrollbarsonthedynamicpanelinthedesigner.Double-clickthedynamicpaneltoopentheDynamicPanelStateDouble-clickonState1inthePanelStaisttodesignthewireframeforthepanelDragatablefromtheWidgetspaneontotheSpecifythenumberofrowsandcolumns.Thewidthand/orheightneedtobewiderortallerthanthed