【正文】 get Library Pane)所取代。像創(chuàng)建頁面一樣，你可以利用現(xiàn)有的控件來繪制新創(chuàng)建的控件。另外，你也可以手動選擇你所指定的 .rplib 文件進(jìn)行 控件庫加載。Drop)的方式將控件放到畫布上 進(jìn)行畫面的繪制。添加注釋 在線框圖中選擇控件，然后在控件注釋面板中為各個(gè)注釋項(xiàng)（如Specification、Status等）輸入文本， 即可為控 件添加注釋。自定義注釋項(xiàng) 通過主菜單‖WireframeCustomize Annotation Fields and Views―或點(diǎn)擊注釋面板頭部的 ―Custommize Fields and Views‖ 或， 然后在彈出的自定義字段和視圖（Custommize Fields and Views）對話框中可以添加、刪除、 修改、排序控件的注釋項(xiàng)。你可在對話框底部的Add new view后的輸入框中輸 入新視圖的名稱，點(diǎn)擊Add按鈕即可添加新的注釋視圖。腳注（Footnotes） 腳注用于對于線框圖和規(guī)格書中的控件進(jìn)行編號標(biāo)識。腳注號碼可以增大和減小， 可通過控件右鍵菜單的―Footnotes‖菜單項(xiàng)或工具 欄上的 和 按鈕進(jìn)行修改。添加頁面注釋 在線框圖區(qū)域下的頁面注釋面板中可以添加頁面注釋內(nèi)容。比 如可以新增 ―設(shè)計(jì)師‖、―老板‖等不同類別的頁面注釋項(xiàng)。要添加頁面注釋項(xiàng)，點(diǎn)擊主菜單―WireframeManage Page Notes‖或點(diǎn)擊頁面注釋面板上的―Page Notes Default‖旁邊的箭頭按鈕，然后選擇―Manage Page Notes‖，將出現(xiàn)頁面注釋對話框，然后就可以添加、刪除、重 命名、排序頁面注釋項(xiàng)。第3節(jié) 固定圖片的邊角固定圖片邊角的功能，允許你放大縮小圖片時(shí)，只對中間的某個(gè)區(qū)域進(jìn)行縮放，保持圖片的邊角不變形。 要調(diào)整圖片的邊角固定范圍，在圖片以鼠標(biāo)右鍵選擇―Edit ImagePreserve Corners‖。指定好圖片的邊角固定范圍后，即使將該窗口圖片控件放大或縮小，我們還是可以看到一個(gè)很合理的窗口，邊角 的呈現(xiàn)不致于因圖片本身放大縮小而失真。現(xiàn)在增加了一個(gè)新的選取模式―全選模式‖，使得只有那些完全被鼠標(biāo)指標(biāo)所畫出的矩形區(qū)域 包圍者才會被選取。想要改變選取模式，點(diǎn)選工具列的―Select Contained Mode‖按鍵(如圖)，或直接按 CTRLF9。要選擇群組中的控件是很簡單的，只要以鼠標(biāo)左鍵去點(diǎn) 選你要的控件即可。 要開啟這個(gè)窗格，以鼠標(biāo)右鍵在控件上選擇―ViewLocation and Size‖即可。這個(gè) 新功能可以針對單一控件或多個(gè)控件一次性的調(diào)整，當(dāng)你想要對齊一群相同特性的控件時(shí)，這個(gè)功能讓你更快設(shè) 定控件等寬或等高 ，更容易對齊控件位置?？丶慕换タ丶换ッ姘逵糜诙x線框圖中控件的行為，包括定義簡單的鏈接和復(fù)雜的RIA 行為，所定義的控件交互可以在 將來生成的HTML原型中進(jìn)行操作。 用戶操作界面時(shí)就會觸發(fā)事件， 如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut； 每個(gè)場景中可執(zhí)行多個(gè)行為，例如：打開鏈接、顯示面板、隱藏面板、移動面板。 OnClick：鼠標(biāo)點(diǎn)擊 OnMouseOut：鼠標(biāo)的指針移動出對象外 OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài) （失去焦點(diǎn)） OnPageLoad：頁面或模塊載入 某些控件可觸發(fā)的事件有些 不同： 文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus事件； 頁面加載或模塊被載入時(shí)則發(fā)生OnPageLoad ；定義一個(gè)鏈接下列步驟說明如何在按鈕控件上定義一個(gè)鏈接： 1. 2. 首先，拖拉一個(gè)按鈕控件到線框圖中，并選擇這個(gè)按鈕； 然后，控件交互面板中鼠標(biāo)雙擊―OnClick‖這個(gè)事件，這時(shí)會出現(xiàn)―Interaction Case Properties‖對話窗，在這個(gè)對話框中可以選擇要執(zhí)行的動作； 3. 4. 在―Step 2‖中，勾選―Open Link in Current Window‖動作； 在―Step 3‖中，點(diǎn)擊―Link‖，在彈出的Link Properties 對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址 。定義行為除了定義簡單的鏈接之外，Axure還提供了許多豐富的行為，可以在任何所觸發(fā)事件的場景中執(zhí)行這些行為。例如，可以在一個(gè)按鈕的 OnClick事件中加入兩 個(gè)場景，第一個(gè)場景為―如果成功‖并執(zhí)行第一個(gè)動作；第二個(gè)場景為―如果失敗‖并執(zhí)行第二個(gè)動作。使用場景說明雖然也可以表達(dá)出交互流程，但如果需要建立一個(gè)高保真的原型，則必需在場景中定義邏輯條件： 根據(jù)控件中的值或變量值執(zhí)行行為。 頁面OnPageLoad 事 件在頁面交互面板中定義，為頁面OnPageLoad 事件添加場景的方式與在控件事件中相同。一些常用模塊如頁首(Header)、頁尾(Footer)與導(dǎo)航(Navigation)。只要修改模塊，在所有引用這個(gè)模塊的頁面中的模塊也會相應(yīng)跟著同步更新。添加、設(shè)計(jì)和組織模塊在模塊面板中可進(jìn)行模塊的管理。 可以使用文件夾(Folder)來組織模塊，然后通過工 具欄、右鍵菜單或是拖放的方式重 新排列組織模塊。頁面中添加模塊拖動模塊面板中的模塊到線框圖中，就可以在頁面或其它模塊中添加模塊。 選擇菜單 ―WireframeMask Masters‖，取消該菜單的勾選，就可以移除顏色遮罩。模塊有以下3種行為： 模塊實(shí)例中 所包含控件的位置與在模塊中的位置相同，常用于作為模板、布局、底板。 自定義控件行為（Custom Widget）： 模塊應(yīng)用在線框圖中時(shí)，模塊實(shí)例中的控件與原模塊失去關(guān)聯(lián)，模塊 實(shí)例中的控件可以像一般控件一樣可以進(jìn)行編輯，就好像只是進(jìn)行了復(fù)制和粘帖操作。第7節(jié) HTML原型什么 HTML原型在 Axure中設(shè)計(jì)了帶注釋的線框圖并定義了交互之后，就可以產(chǎn)生一個(gè)可以基于瀏覽器的、可互動的原型了。配置和生成原型點(diǎn)擊主菜單―GeneratePrototype (F5)‖或工具欄上的Prototype按鈕，在打開的 Configure HTML Prototype對話 框中，可以對原型進(jìn)行配置和生成。 常規(guī)（General）：在―Destination Folder‖位置輸入 HTML原型的存放位置。 配置完畢后，就可以點(diǎn)擊Generate按鈕生成原型。如果只是調(diào)整其中一個(gè) 頁面，卻要等待整個(gè)原型重新全部輸出，那就太浪費(fèi)時(shí)間了。要對一個(gè)頁面重新生成，只打開這個(gè)頁面，然后選擇主菜單―GenerateRegenerate Current Page to Prototype(CTRL+F5)‖ ，回到 HTML原型中刷新就可以看到更新的頁面了。 左側(cè)（站點(diǎn)地圖）: 是一個(gè)頁面導(dǎo)航列表，以層級形式展示原型中的頁面。 底部（頁面注釋）: 顯示當(dāng)前頁面的注釋。 中間（線框圖）: 顯示線框圖和流程圖，線框圖可以按照所設(shè)計(jì)的交互進(jìn)行鼠標(biāo)和鍵盤的互動。發(fā)布原型Axure原型是一些 HTML、Javascript和圖像文件，可以在主流的瀏覽如IE6+、Firefox中進(jìn)行瀏覽。 發(fā)布Prototype的方式有很多種： 發(fā)布到web服務(wù)器 第一種方式是發(fā)布 HTML原型到Web服務(wù)器上，只要將網(wǎng)址告訴客戶、工作伙伴或其他人，他們就可以在瀏 覽器上瀏覽原型。其它人通過ZIP壓縮包便可以 直接在自己的計(jì)算機(jī)上瀏覽 HTML原型。CHM 是 Microsoft HTML Help 格式文檔，因?yàn)榇蠖鄶?shù)的Windows計(jì)算機(jī)已經(jīng)安裝了 瀏覽器， 所以使用者只要打開CHM文檔就可以瀏覽原型。如果你未安裝HTML Help Workshop的話，就必須先安裝它才能產(chǎn)生CHM檔。最終產(chǎn)生的CHM原型文檔存 放在原型所在的文件夾中。默認(rèn)的規(guī)格說明書生成器是 Word 2007 (.docx文件)，你不需要安裝Word 。如果你未安裝2007或兼容包，它會和 Axure一起安裝。 在設(shè)計(jì)線框圖 時(shí)，如果把需求說明或規(guī)格描述寫在了頁面注釋或控件注釋中，生成規(guī)格說明書時(shí)Axure會自動匯 總這些文字和插圖，按照順序出現(xiàn)在 Word文檔中。 Axure RP Prototype 范例旅游網(wǎng)站企劃書(Word 2007 格式) 700 k Bytes配置和生成規(guī)格說明書要配置生成的規(guī)格說明書，選擇主菜單―GenerateSpecification(F6)‖或點(diǎn)擊工具欄中的―Specification‖按鈕，在 Configure Word 2007 Specification 對話框中，可以設(shè)置輸出的內(nèi)容和格式： 頁面（Pages）： 選擇要包含哪些頁面； 可以設(shè)置是否將模塊顯示在頁面部分； 界面插圖（Screenshot）：選擇是否顯示線框圖插圖； 點(diǎn)擊Add New Table 按鈕，可以將控件 注釋項(xiàng)分成多個(gè)表格，在表格中設(shè)置要顯示哪些注釋項(xiàng)和顯示的順序。 控件（Widgets）： 可以設(shè)置特定控件的配置。 點(diǎn)擊― Import Axure Template‖可以導(dǎo)入預(yù)置的 axure中的模板，或點(diǎn)擊― import‖導(dǎo)入自己的模板。 另外， 還可以設(shè)置是兩欄布局， 還是單欄布局。還可以修改 Word模板來配置規(guī)格中的文字樣式，改變文件的排版或加入頁首、頁尾。如果 你發(fā)布文檔到?jīng)]有安裝Word 2007或微軟Office兼容包的客戶或同事那里，你可以發(fā)布為較早版本的Word文檔。一個(gè)流 程圖可用于展示各種各樣 的處理流程，包括用例流程、商業(yè)流程、頁面流程等。一張簡明的流程圖，能促進(jìn)和其它設(shè)計(jì)師、開發(fā)工程師的交流， 節(jié)約口頭溝通的成本，并且能點(diǎn)出一些關(guān)鍵性問題。在Axure中，流程圖其實(shí)也是頁面（也就是說Axure中頁面分為兩種類型：流程圖和線框圖），只要修改頁面類型 為流程圖即可：在頁面上點(diǎn)擊右鍵，選擇―Diagram TypeFlow‖，這時(shí)的頁面前的圖標(biāo)會變?yōu)橐粋€(gè) 圖標(biāo)。流程控件在控件面板中的頂部工具欄上點(diǎn)擊下拉菜單，選擇―Flow‖菜單項(xiàng)，就可以找到流程控件，這些不同的流程控件用 于表達(dá)流程圖中的步驟。流程控件的使用有一些約定習(xí)慣，但是Axure并沒有對如何使用這些形狀進(jìn)行強(qiáng)制約束。你也可以自定義一套符號標(biāo)準(zhǔn)，在團(tuán)隊(duì)中進(jìn)行統(tǒng)一使用。以下僅對默認(rèn)的流程控件作簡要說明（歡迎大家對如何使用這些流程圖控件，或如何建 立更多的流程圖控件和標(biāo)準(zhǔn)用法進(jìn)行討論，）： rectangle：矩形 作用：表示一個(gè)頁面。這樣做的目的是將整張流程圖分隔為幾個(gè)部分，并為每個(gè)部分單獨(dú)命名， 從視覺上使復(fù)雜的流程圖變得更為清晰，在溝通時(shí)也方便。比如一個(gè)用戶登錄的流程。file：文件 作用：表示一個(gè)獨(dú)立的文件，如聲音、圖片、PDF文件等。semicircle：半圓形 作用 ：表示同時(shí)并發(fā)執(zhí)行多個(gè)結(jié)果。triangle：三角形 作用：表示單項(xiàng)選擇的條件分支，參見Jesse James Garrett 的描述信息結(jié)構(gòu)和交互設(shè)計(jì)的圖示詞匯表 。ellipse：橢圓形或圓形 作用：如果畫圓形，可表示多個(gè)路徑流程的群組（集合），群組可以作為條件分支或條件選擇器的下游元素。hexagon：六邊形 作用：暫無。actor：角色 作用：來自于use case 用例，模擬流程中執(zhí)行操作的角色是誰。database：數(shù)據(jù) 作用：就是指保存我們網(wǎng)站數(shù)據(jù)的數(shù)據(jù)庫。流程連接線流程圖控件和線框圖控件的不同點(diǎn)在于流程控件可以通過連接線進(jìn)行連接。在連接狀態(tài)時(shí)，在流程圖中點(diǎn)擊和拖動就可以繪制和添加連接線。點(diǎn)擊和 拖動連接線的尾部端點(diǎn)可進(jìn)行重新連接。什么時(shí)候使用虛線？ 當(dāng)一個(gè)路徑在某些條件成立的情況下再呈現(xiàn)給用戶時(shí)，我們可以采用表達(dá)為虛線表示。創(chuàng)建流程圖與線框圖控件相似，你可以拖曳流程圖控件到線框圖中，可以通過工具欄和右鍵菜單來修改流程圖形狀的風(fēng)格和 屬性。流程圖中引用頁面可以在流程圖控件上分配一個(gè)引用頁面，如果流程圖控件引用了一個(gè)頁面，控件上的文本會變成頁面的名稱。在站點(diǎn)地圖面板中拖曳頁面到線框圖或流程圖中，將會創(chuàng)建一個(gè) 引用了頁面的流程圖控件。引用頁面后，控件左上角會有一個(gè)圖標(biāo)進(jìn)行標(biāo)識：第2節(jié) 自動生成流程圖可以根據(jù)站點(diǎn)地圖面板中的頁面層級關(guān)系自動產(chǎn)生流程圖： 首先，創(chuàng)建一個(gè)流程圖頁面，并雙擊打開；然后，在站點(diǎn)地圖面板中你想要生成流程圖的分支根節(jié)點(diǎn)上點(diǎn)擊右鍵，然后選擇―Generate Flow Diagram‖， 你將看到兩個(gè)選項(xiàng)：―標(biāo)準(zhǔn)流程圖（Standard digram）‖或右朝向流程圖（Right Hanging）。所生成的流程圖是根據(jù)你所選擇的頁面和子頁面的層級關(guān)系，并且會自動引用對應(yīng)的頁面。第三章 高級交互設(shè)計(jì)本章中介紹了用于設(shè)計(jì)高保真原型所需要的一些復(fù)雜的交互行為第1節(jié) 動態(tài)面板動態(tài)面板控件動態(tài)面板控件（Dynamic Panel）可以讓你實(shí)現(xiàn)高級的交互功能，實(shí)現(xiàn)原型的高保真度。 任何時(shí)候都只有一個(gè)狀態(tài)（頁面）是可見的，或整個(gè)動態(tài)面板可以被隱藏。像添加其它控件一樣，可以在控件面板中拖放動態(tài)面板控件到線框圖中。第一個(gè)狀態(tài)是動態(tài)面板的默認(rèn)狀態(tài)。進(jìn)行狀態(tài)設(shè)計(jì)和設(shè)計(jì)線框圖是一樣的。隱藏動態(tài)面板可以設(shè)置動態(tài)面板在默認(rèn)時(shí)隱藏。這 將會隱藏面板內(nèi)容，動態(tài)面板的遮罩會由藍(lán)色變?yōu)辄S色。動態(tài)面板管理器動態(tài)面板的狀態(tài)可以通過動態(tài)面板管理器進(jìn)行新增、移除、編輯。在狀態(tài)名稱上雙擊鼠標(biāo)左鍵，就可以打開狀態(tài)頁面進(jìn)行 編輯。用鼠標(biāo)點(diǎn)擊動態(tài) 面板名稱右側(cè)的淡藍(lán)色小方塊 ，可以在隱藏或顯示之間切換。動態(tài)面板的交互行為可以在動態(tài)面板上使用一些交互行為。在控件交互面板上Label輸入框中，可以對線框圖中選擇的動態(tài)面板進(jìn)行命名，然后就可以使用這個(gè)名稱去引用 動態(tài)面板。動態(tài)面板的應(yīng)用舉例Tab頁簽 動態(tài)面板可用于創(chuàng)建一個(gè)Tab頁簽控件。然后在每個(gè)頁簽上設(shè)置一個(gè)交互動作（OnClick），當(dāng) 點(diǎn)擊某個(gè)頁簽時(shí)，切換到動態(tài)面板的對應(yīng)的某一個(gè)狀態(tài)。下載樣例文件： 查看演示Demo：Mouse