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

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