【正文】 互聯(lián)網(wǎng)產(chǎn)品經(jīng)理必備 Axure快速原型設(shè)計(jì) Axure RP 可以讓桌面應(yīng)用軟件和Web網(wǎng)站的設(shè)計(jì)師創(chuàng)建線框圖、流程圖、原型和規(guī)格說明文檔，它比任何當(dāng)前 其它創(chuàng)建靜態(tài)原型的工具如Visio, Omnigraffle、Illustrator、 Photoshop、Dreamweaver, Visual Studio、 FireWorks、GUI Studio等都要快速、高效，因?yàn)樗攀钦嬲膶ｉT原型設(shè)計(jì)工具，并且支持多人協(xié)作設(shè)計(jì)和版 本控制管理。設(shè)計(jì)師們渴望有一個(gè)專門的原型設(shè)計(jì)利器，而Axure正是為此目的而精心打造。Axure RP已經(jīng)被一些財(cái)富1000大 公司采用，成為創(chuàng)造成功產(chǎn)品的必備工具。國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。為什么要進(jìn)行原型設(shè)計(jì)原型的作用和好處―沒有比制作prototype更易取得使用者界面與特殊功能可用性上的一致性了。Prototype不只可確認(rèn)需求，它更可 贏得顧客的心?！?—— 和 迪安A. 萊芬韋爾 《用需求管理快速交付高質(zhì)量的軟件》的作者（Rational軟件公司/IBM）根據(jù)調(diào)查報(bào)告顯示，大約66%的軟件開發(fā)不是失敗，就是超預(yù)算、延期或交付縮水的功能。軟件失敗或虧損的前 三大原因?yàn)椋?缺乏使用者的參與； 需求或規(guī)格不完整； 需求或規(guī)格變更；傳統(tǒng)的需求管理工具或工作表中所儲(chǔ)存的數(shù)千個(gè)需求與上百頁的文件早已不合時(shí)宜。現(xiàn)在，這些需求更是不適用 于目前快速發(fā)展的環(huán)境。而制作Prototype是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外 在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面，如此更能抓住利益相關(guān)者 與使用者的注意，讓用戶在軟件開始投入編程前就確認(rèn)需求?？焖僭头ǎ≧apid Prototyping）是一種有效且高效的以用戶為中心（UserCentered Design）的技術(shù)，可以幫 助用戶體驗(yàn)專家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財(cái)富1000大的公司和重要機(jī)構(gòu)在使用Axure RP，國(guó)內(nèi)的淘寶 、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理 也都在使用?；A(chǔ)篇在基礎(chǔ)篇中，你將完整的學(xué)習(xí)到關(guān)于Axure的基本和高級(jí)功能。第一章 介紹讓你初步認(rèn)識(shí)Axure。第1節(jié) 認(rèn)識(shí) Axure RP什么是Axure？Axure的完整英文名是Axure RP Pro。Axure的英文發(fā)音是―Acksure‖ ，RP 是―Rapid Prototyping‖的縮寫，意思 為快速原型設(shè)計(jì)；Pro是―Professional‖的縮寫，意思是專業(yè)版。Axure RP Pro是美國(guó)Axure Software Solution 公 司的旗艦產(chǎn)品，是一個(gè)讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站線框圖、原 型、規(guī)格說明書的專業(yè)快速原型設(shè)計(jì)工具。Axure所針對(duì)的專家包括用戶體驗(yàn)設(shè)計(jì)師（UX）、交互設(shè)計(jì)師（UI）、 業(yè)務(wù)分析師（BA）、信息架構(gòu)師（IA）、可用性專家（UE）和產(chǎn)品經(jīng)理（PM）。在Axure中設(shè)計(jì)線框圖和原型會(huì)使你更加高效；可以讓團(tuán)隊(duì)成員一起體驗(yàn)?zāi)愕脑O(shè)計(jì)；向用戶演示和交流以確認(rèn)用 戶需求；自動(dòng)產(chǎn)生規(guī)格說明書；讓團(tuán)隊(duì)進(jìn)行多人協(xié)同設(shè)計(jì)和對(duì)版本進(jìn)行管理控制；等等。 總之，Axure會(huì)使你以往的工作方式發(fā)生變革： v 行更加高效的設(shè)計(jì)； 進(jìn) v 驗(yàn)到動(dòng)態(tài)的原型； 體 v 晰有效的交流想法； 清Axure工作環(huán)境介紹Axure的可視化工作環(huán)境可以讓你輕松快速的以鼠標(biāo)拖曳的方式創(chuàng)建帶有注釋的線框圖。不用進(jìn)行編程，就可以 在線框圖上定義簡(jiǎn)單鏈接和高級(jí)交互。在線框圖的基礎(chǔ)上，可以自動(dòng)生成HTML原型和Word格式的規(guī)格說明書。以下是Axure RP工作環(huán)境的簡(jiǎn)要說明：1.主菜單和工具欄 執(zhí)行常用操作，如文件打開、保存文件，格式化控件，自動(dòng)生成原型和規(guī)格說明書等操作。2.站點(diǎn)地圖面板 對(duì)所設(shè)計(jì)的頁面（包括線框圖和流程圖）進(jìn)行添加、刪除、重命名和組織頁面層次。3.控件面板 該面板中包含了線框圖控件和流程圖控件，如按鈕、圖片、文本面板、矩形框等，可用這些控件進(jìn)行線框圖 和流程圖的設(shè)計(jì)。 另外，你還可以載入已有的部件庫（*.rplib文件）和創(chuàng)建自己的部件庫。4.模塊面板 模塊是一種可以復(fù)用的特殊頁面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織模塊分類層次。5.線框圖工作區(qū)（或叫頁面工作區(qū)） 線框圖工作區(qū)是你進(jìn)行原型設(shè)計(jì)的主要區(qū)域，在該區(qū)域中你可以設(shè)計(jì)線框圖、流程圖、自定義部件、模塊。6.頁面注釋和交互區(qū) 添加和管理頁面級(jí)的注釋和交互。7.控件交互面板 定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。8.控件注釋面板 對(duì)控件的功能進(jìn)行注釋說明。第2節(jié) 線框圖及注釋現(xiàn)在我們來認(rèn)識(shí)Axure中與設(shè)計(jì)線框圖有關(guān)的各個(gè)區(qū)域和面板，說明如何設(shè)計(jì)線框圖 和為線框圖添加注釋。1.站點(diǎn)地圖面板在開始設(shè)計(jì)線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先考慮頁面框架，決定信息內(nèi)容與層次。明確頁面框 架后，就可以利用站點(diǎn)地圖面板來建立和管理所要設(shè)計(jì)的頁面，添加、刪除頁面及對(duì)頁面層次進(jìn)行組織。添加和刪除頁面 在站點(diǎn)地圖面板中， 點(diǎn)擊面板工具欄上的―Add Child Page‖按鈕可以添加一個(gè)頁面； 點(diǎn)擊面板工具欄上的 ―Delete Page‖按鈕或在頁面上點(diǎn)選右鍵菜單中的 ―Delete Page‖選項(xiàng)可以刪除一個(gè)頁面；在頁面上點(diǎn)選右鍵菜單中的 ―Rename Page‖菜單項(xiàng)或鼠標(biāo)緩慢雙擊頁面可對(duì)頁面進(jìn)行重命名。組織頁面層次 在站點(diǎn)地圖面板中，用鼠標(biāo)拖曳一個(gè)頁面到另一個(gè)頁面上或點(diǎn)擊面板工具欄上的―Move Up‖、―Move Down‖、 ―Indent‖、 ―Outdent‖按鈕，就可以組織頁面的層次和順序。打開頁面進(jìn)行設(shè)計(jì) 在站點(diǎn)地圖面板中， 用鼠標(biāo)在頁面上進(jìn)行雙擊或點(diǎn)擊面板工具欄上的―Design Page‖按鈕， 打開該頁面在線框圖區(qū) 域中進(jìn)行線框圖設(shè)計(jì)。部件面板（控件面板）控件是用于設(shè)計(jì)線框圖的用戶界面元素。在控件面板中包含有常用的控件庫，如按鈕、圖片、文本框等。添加控件 從控件面板中拖動(dòng)一個(gè)控件到線框圖區(qū)域中，就可以添加一個(gè)控件?？丶梢詮囊粋€(gè)線框圖中被拷貝(Ctrl+C)， 然后粘貼(Ctrl+V)到另外一個(gè)線框圖中。操作控件 添加控件后，可在線框圖中選擇該控件進(jìn)行鼠標(biāo)拖曳移動(dòng)該控件和改變控件大小，還可以一次選擇多個(gè)控件進(jìn)行 移動(dòng)和改變大小。另外，還可以組合、排序、對(duì)齊、平均間距（Distribute）和鎖定控件。以上這些操作可通過在 控件上點(diǎn)擊右鍵菜單進(jìn)行，也可以通過選擇菜單―ViewToolbarsObject ‖調(diào)出的對(duì)象工具欄上的按鈕進(jìn)行。編輯控件風(fēng)格和屬性 有多種方法可以編輯控件的風(fēng)格和屬性： 鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對(duì)控件的最常用的屬性進(jìn)行編輯。例如，雙擊一個(gè)圖片控件可以導(dǎo)入一張 圖片；雙擊一個(gè)下拉列表或列表框控件可以編輯列表項(xiàng)。 工具欄：點(diǎn)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。 右鍵菜單： 通過在控件上點(diǎn)擊右鍵菜單，編輯控件的一些特定屬性，不同的控件這些屬性也各不相同。查看和搜索控件 控件面板工具欄中，點(diǎn)擊―Wireframe‖會(huì)彈出一個(gè)下拉菜單，你可以查看所有控件庫，或只看默認(rèn)線框圖或流程圖 控件庫，或只看已經(jīng)被加載的控件庫。另外，你還可以加載已有控件庫、創(chuàng)建新控件庫、編輯當(dāng)前控件庫、或更 新控件庫。點(diǎn)擊―Search‖這個(gè)搜索按鈕，輸入想要查找的控件名稱，會(huì)在面板內(nèi)列 出所有符合條件的控件。創(chuàng)建自定義控件庫 默認(rèn)的兩套控件庫(Wireframe和Flow)可能還不能滿足你的要求， 那么現(xiàn)在你可以開始創(chuàng)建你自己的控件庫了。 在 控件面板中點(diǎn)擊下拉菜單的―Create library‖選項(xiàng)， ， Axure會(huì)立刻啟動(dòng)另一個(gè)執(zhí)行程序并打開這個(gè)剛建好的 .rplib文件。在新的Axure程序界面中，原本站點(diǎn)地圖面板 的位置會(huì)被控件庫面板(Widget Library Pane)所取代。你可以像頁面一樣對(duì)控件進(jìn)行新增、刪除、排序。像創(chuàng)建頁面一樣，你可以利用現(xiàn)有的控件來繪制新創(chuàng)建的控件。Axure啟動(dòng)時(shí)，如果已經(jīng)把創(chuàng)建好的自定義控件庫(.rplib文件)放在Windows文件夾的―我的文件 My Axure RP Libraries‖目錄中，則該控件庫會(huì)被自動(dòng)加載到控件面板中。另外，你也可以手動(dòng)選擇你所指定的 .rplib 文件進(jìn)行 控件庫加載。使用自定義控件庫 新建立的自定義控件庫的操作方式就如同其它的默認(rèn)控件庫一樣，以拖放(Dragamp。Drop)的方式將控件放到畫布上 進(jìn)行畫面的繪制。3.控件注釋可以為控件添加注釋，以說明控件的功能。添加注釋 在線框圖中選擇控件，然后在控件注釋面板中為各個(gè)注釋項(xiàng)（如Specification、Status等）輸入文本， 即可為控 件添加注釋。面板頂部的Label輸入框是為控件添加一個(gè)標(biāo)識(shí)符（即控件在線框圖中的命名）。自定義注釋項(xiàng) 通過主菜單‖WireframeCustomize Annotation Fields and Views―或點(diǎn)擊注釋面板頭部的 ―Custommize Fields and Views‖ 或， 然后在彈出的自定義字段和視圖（Custommize Fields and Views）對(duì)話框中可以添加、刪除、 修改、排序控件的注釋項(xiàng)。建立新注釋視圖 在自定義字段和視圖對(duì)話框中，你還可以建立新的注釋視圖。你可在對(duì)話框底部的Add new view后的輸入框中輸 入新視圖的名稱，點(diǎn)擊Add按鈕即可添加新的注釋視圖。你可以點(diǎn)擊Edit按鈕，為新的注釋視圖建立注釋項(xiàng)：然后在Axure主界面的注釋面板中，可以看到新建立的注釋視圖和注釋項(xiàng)。腳注（Footnotes） 腳注用于對(duì)于線框圖和規(guī)格書中的控件進(jìn)行編號(hào)標(biāo)識(shí)。在控件上添加注釋或動(dòng)作后，會(huì)在控件的右上角會(huì)顯示一 個(gè)帶數(shù)字的黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小， 可通過控件右鍵菜單的―Footnotes‖菜單項(xiàng)或工具 欄上的 和 按鈕進(jìn)行修改。4.頁面注釋（Page Notes）頁面注釋是對(duì)頁面進(jìn)行詳細(xì)描述和說明。添加頁面注釋 在線框圖區(qū)域下的頁面注釋面板中可以添加頁面注釋內(nèi)容。管理頁面注釋 另外，可以自定義頁面注釋項(xiàng)，為不同的利益相關(guān)者和團(tuán)隊(duì)成員提供不同的頁面描述說明，以滿足不同需要。比 如可以新增 ―設(shè)計(jì)師‖、―老板‖等不同類別的頁面注釋項(xiàng)。當(dāng)輸出規(guī)格文件時(shí)，可以指定哪些頁面注釋項(xiàng)要輸出。要添加頁面注釋項(xiàng)，點(diǎn)擊主菜單―WireframeManage Page Notes‖或點(diǎn)擊頁面注釋面板上的―Page Notes Default‖旁邊的箭頭按鈕，然后選擇―Manage Page Notes‖，將出現(xiàn)頁面注釋對(duì)話框，然后就可以添加、刪除、重 命名、排序頁面注釋項(xiàng)。要在各個(gè)注釋項(xiàng)間進(jìn)行切換，可以點(diǎn)擊―Page Notes – Default‖旁邊的箭頭按鈕，然后選擇想要的注釋項(xiàng)進(jìn)行頁面 注釋。第3節(jié) 固定圖片的邊角固定圖片邊角的功能，允許你放大縮小圖片時(shí)，只對(duì)中間的某個(gè)區(qū)域進(jìn)行縮放，保持圖片的邊角不變形。 對(duì)于圖形控件界面， 這種效果會(huì)使得圖片放大縮小后，仍有效保持視覺上的合理性。 要調(diào)整圖片的邊角固定范圍，在圖片以鼠標(biāo)右鍵選擇―Edit ImagePreserve Corners‖。進(jìn)入調(diào)整邊角固定范圍的編輯模式之后，在控件的上方及左方個(gè)出現(xiàn)兩個(gè)小箭頭，調(diào)整這兩個(gè)箭頭位置（上下或 左右），就可以決定這個(gè)圖片控件被放大縮小時(shí)的邊角固定范圍。指定好圖片的邊角固定范圍后，即使將該窗口圖片控件放大或縮小，我們還是可以看到一個(gè)很合理的窗口，邊角 的呈現(xiàn)不致于因圖片本身放大縮小而失真。第4節(jié) 以圈選模式選取控件(類似Visio/PowerPoint模式) Axure RP默認(rèn)選取控件的模式是―交叉選區(qū)模式‖，也就是鼠標(biāo)指標(biāo)點(diǎn)選拖曳所到之處，只要被這個(gè)范圍碰觸到的 控件，就會(huì)被選取?，F(xiàn)在增加了一個(gè)新的選取模式―全選模式‖，使得只有那些完全被鼠標(biāo)指標(biāo)所畫出的矩形區(qū)域 包圍者才會(huì)被選取。這種軟件操作模式就跟操作Visio或PowerPoint一樣。想要改變選取模式，點(diǎn)選工具列的―Select Contained Mode‖按鍵(如圖)，或直接按 CTRLF9。選取群組內(nèi)的控件 (Deep Selection in Groups) 當(dāng)控件被群組(Group)起來以后，新版Axure RP ，增加批注，或設(shè)計(jì)交 互表現(xiàn)，甚至可以移動(dòng)或縮放群組中的控件尺寸與位置。要選擇群組中的控件是很簡(jiǎn)單的，只要以鼠標(biāo)左鍵去點(diǎn) 選你要的控件即可。位置與尺寸設(shè)定面板(Location and Size Pane) 位置與尺寸設(shè)定面板(Location and Size Pane)取代了先前版本的位置與尺寸對(duì)話窗(Location and Size dialog)。 要開啟這個(gè)窗格，以鼠標(biāo)右鍵在控件上選擇―ViewLocation and Size‖即可。 當(dāng)你在繪制畫面時(shí)，這個(gè)面板現(xiàn)在可以維持出現(xiàn)在畫面上不會(huì)消失，方便隨時(shí)調(diào)整位置與尺寸大小的數(shù)值。這個(gè) 新功能可以針對(duì)單一控件或多個(gè)控件一次性的調(diào)整，當(dāng)你想要對(duì)齊一群相同特性的控件時(shí)，這個(gè)功能讓你更快設(shè) 定控件等寬或等高 ，更容易對(duì)齊控件位置。第5節(jié) 基本交互設(shè)計(jì)本節(jié)介紹了設(shè)計(jì)低保真原型所需要的簡(jiǎn)單的交互行為，解釋了Axure中進(jìn)行交互設(shè)計(jì)的基本方法?？丶慕换タ丶换ッ姘逵糜诙x線框圖中控件的行為，包括定義簡(jiǎn)單的鏈接和復(fù)雜的RIA 行為，所定義的控件交互可以在 將來生成的HTML原型中進(jìn)行操作。在控件交互面板中可以定義的控件交互由事件（Events）、場(chǎng)景（ Cases）和行為（Actions）組成： 用戶操作界面時(shí)就會(huì)觸發(fā)事件， 如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut； 每個(gè)事件可以包含一個(gè)或多個(gè)場(chǎng)景，場(chǎng)景就是事件觸發(fā)后出現(xiàn)的一種情況，如點(diǎn)擊一個(gè)按鈕后可以出現(xiàn)兩種場(chǎng)