前言

      最近負責一個電子雜志模板系統的工作 ，在對整個項目的前期策劃中，需要先畫好產品的框架圖，因此接觸了Axure這款軟件；在粗略的學習之后也把自己所需要的一個流程圖搭建完成了，而這款軟件相對于目前編輯普遍試用的WORD，手繪等方式有著明顯的優勢；因此把我從網上找到的一個中文教程轉過來了，希望公司的同事可以相互學習。

介紹

        互聯網行業產品經理的一項重要工作，就是進行產品原型設計(PrototypeDesign)。而產品原型設計最基礎的工作，就是結合批注、大量的說明以及流程圖畫框架圖wireframe，將自己的產品原型完整而準確的表述給UI、UE、程序工程師，市場人員，并通過溝通會議，反復修改prototype 直至最終確認，開始投入執行。

        進行產品原型設計的軟件工具也有很多種，我寫的這個教程所介紹的AxureRP，是taobao、dangdang等國內大型網絡公司的團隊在推廣使用的原型設計軟件。同時，此軟件也在產品經理圈子中廣為流傳。之所以AxureRP得到了大家的認同和推廣，正是因為其簡便的操作和使用，符合了產品經理、交互設計師們的需求。

在正式談Axure RP之前，我們先來看看做產品原型設計，現在大致有哪些工具可以使用，而他們的利弊何在。

• 紙筆：
  簡單易得，上手難度為零。有力于瞬間創意的產生與記錄，有力于對文檔即時的討論與修改。但是保真度不高，難以表述頁面流程，更難以表述交互信息與程序需求細節。
• Word：
  上手難度普通。可以畫wireframe，能夠畫頁面流程，能夠使用批注與文字說明。但是對交互表達不好，也不利于演示。
• PPT：
  上手難度普通。易于畫框架圖，易于做批注，也可以表達交互流程，也擅長演示。但是不利于大篇幅的文檔表達。
• Visio：
  功能相對比較復雜。善于畫流程圖，框架圖。不利于批注與大篇幅的文字說明。同樣不利于交互的表達與演示。
• Photshop/fireworks：
  操作難度相對較大，易于畫框架圖、流程圖。不利于表達交互設計，不擅長文字說明與批注。
• Dreamweave：
  操作難度大，需要基礎的html知識。易于畫框架圖、流程圖、表達交互設計。不擅長文字說明與批注。

以上這些工具，都是產品經理經常會使用到的，但是從根本上來說，這些工具都不是做prototype design的專門利器，需要根據產品開發不同的目的，不同的開發階段，選擇不同的工具搭配使用，才能達到表達、溝通的目的。

       比如使用紙筆，更適合在產品創意階段使用，可以快速記錄閃電般的思路和靈感；也可以在即時討論溝通時使用，通過圖形快速表達自己的產品思路，及時的畫出來，是再好不過的方法。而word則適合在用文字詳細表達產品，對產品進行細節說明時使用，圖片結合文字的排版，是word最擅長的工作。而ppt自然是演示時更好。visio則可以適用于各種流程圖、關系圖的表達，更可通過畫use case獲取用戶需求。PS/FW是圖片處理的工具，DW則是所見即所得的網頁開發軟件，這些是設計師的看家本領，對于普通的產品經理來說，需要耗費太多的精力去掌握。

      其實每件工具，每個軟件，在創造它的初期，軟件設計師們都給它賦予了性格、氣質。因為每個工具的產生，都是為了滿足人類的某一方面需求。比如鋤頭是鋤土的，起子是起螺絲的，電熨斗是燙衣服的。但是不同的工具都有自己的工作領域，在其他領域它并不擅長。而以上的軟件在創造的初期，并非為了幫助產品經理、ue完成產品原型設計，因此他們都不能在prototype design 這件工作上得心應手。而AxureRP正是在互聯網產品大張其道的前提下，為滿足prototype design創建的需求，應運而生。

Axure RP 能幫助網站需求設計者，快捷而簡便的創建 基于目錄組織的原型文檔、功能說明、交互界面以及帶注釋的wireframe網頁，并可自動生成用于演示的網頁文件和word文檔，以提供演示與開發。

沒錯！Axure RP 的特點是：

• 快速創建帶注釋的wireframe文件，并可根據所設置的時間周期，軟件自動保存文檔，確保文件安全。
• 在不寫任何一條html與javascript語句的情況下，通過創建的文檔以及相關條件和注釋，一鍵生成html prototype演示。
• 根據設計稿，一鍵生成一致而專業的word版本的原型設計文檔。

說到這里相信很多人已經激起了興趣，但是在開始學習之前，我認為我們還是有必要先了解一下軟件短短的歷史，創造這一軟件的公司—Axure Software Solutions, Inc.該公司創建于2002年五月，AxureRP是這一軟件公司的旗艦產品，2003年一月AxureRP第一版本上線發表，至今已經正式發行到了第四個版本，而我提筆寫到這里的時候，Axure5.0版本beta版本已經正式提供下載試用，雖然我已經下載使用，但是我想，寫教程還是應該先從穩定的4.6版說起，至于5.0版，我們可以伴隨著軟件一起成長。

接下來我會結合圖片，分幾個步驟分享我對Axure的認識，

　　一、 界面與功能
　　二、 工具欄
　　三、 站點地圖
　　四、 組件與使用方法
　　五、 復用模板與使用
　　六、 交互功能與注釋
　　七、 實例

當然，在書寫的過程中我會根據具體的情況再進行調整，盡量做到圖文并茂，易于理解。寫這個教程的目的，一方面為自己熟悉與更加理解Axure，另一方面也鞭策自己完善自己的blog網站www.2tan.net，同時也希望以自己的綿薄之力，為希望學習Axure的朋友分享一點經驗。由于這是我第一次嘗試寫教程，難免會出現偏頗，也希望朋友們能夠不吝賜教，共同進步。

為e文好的朋友附上自學Axure RP的幾個途徑：

1. 打開軟件，按F1調取幫助文檔，對照文檔學習。
2. 登錄http://www.axure.com/au-home.aspx 查看flash視頻學習。
3. 登錄 Axure 博客 http://axure.com/cs/blogs/Default.aspx，了解軟件最新信息。
4. 登錄討論組http://axure.com/cs/forums/Default.aspx，參與討論。

界面與功能

      不論學習什么，打基礎是很重要的。關于基礎練習，我印象最深的故事是王羲之練習書法的故事，將一池水染黑，需要怎樣的毅力？再有就是達芬奇與雞蛋的故事，一個簡單的雞蛋，達芬奇畫了無數次。我相信正是他們的一步一個腳印，才讓他們有了后來偉大的成就。故事老套，道理淺顯，可是我認為很重要。

       學習軟件，應該先熟悉每個面板，每個基礎功能，才能夠真正談到運用。所以我的學習方法是了解軟件的基礎功能開始。

一、歡迎界面與功能

運行Axure RP后，首先彈出的是歡迎界面，它擁有的功能和其他軟件的歡迎界面沒有什么特別的不同。

功能區1：文檔區，這個區域顯示用戶最近打開的Axure RP文件，用戶可以快捷的打開之前編輯的文件。同時也提供快捷按鈕，可以創建新文檔與打開Axure RP默認文件夾。

功能區2：認證區，這個區域顯示注冊信息。
已經注冊的用戶，顯示注冊者名稱，與已經獲得認證的圖標。
未注冊用戶，顯示注冊鏈接，引導用戶完成注冊注冊。

功能區3：Axure RP學習中心。主要包括在線學習、幫助文檔、問題反饋三個環節。
a、在線學習提供了三個鏈接：
video tutorial：點擊后進入視頻學習中心，可以通過觀看相關的flash教程學習Axure RP，不過都是e文解說。
online community：進入Axure RP的官方討論組，在線討論學習。
Axure blog：進入Axure的官方論壇，了解最新資訊。

b、幫助文檔也提供了兩個鏈接，但是其實起到的是一樣的效果，都是打開幫助文檔，只是跳往不同的章節罷了。

c、問題反饋，通過點擊鏈接可以發郵件到support[at]axure.com，以尋求獲得幫助。

在歡迎界面中，Axure還提醒用戶，用4.6高版本的軟件創建保存的Axure文件，無法用以前的低版本查看。

同時，如果我們不希望下次打開軟件再看到這個面板，我們可以通過選擇“Don’t show this at startup”實現。

二、軟件主界面與功能

關閉歡迎界面后，我們進入軟件的主界面，淡藍色調的ui，并不是很張揚。

功能區1：命令區，和我們操作的所有office軟件一樣，包含文件、編輯、查看和幫助，這些功能大抵是差不多的。table也很容易理解，就是對表格編輯的命令。而Axure特有的幾個特殊的命令欄目是：
a、wireframe：線框，包含所有畫原型線框圖的相關命令。
b、object：包含所有對工作區物體的操作命令，操作放入工作區的所有widgets，包括組合、排序、鎖定以及腳注命令等。
c、generate：自動生成html演示文件、word說明文檔，以及對生成規則進行自行編輯、定義。

功能區2：工具欄，基本和office風格一模一樣，功能也很容易上手。

功能區3：工作區，這就是我們平常操作工具，創建prototype的舞臺，將自己的構思在這里釋放，將自己的想法在這里展現。

工作區的上部顯示打開的文件名，可同時打開多文檔，進行操作。

功能區4：站點地圖，Axsure RP創建的文件是模擬真實網站頁面關系的，sitemap就是通過樹形目錄關系，管理所有的站點頁面文件與流程圖文件。科學的文件關系結構，對有效的演示文檔與生成易讀的說明文檔相當重要。

我的操作習慣是先畫流程圖，然后根據流程圖構建頁面文件框架，最后才開始頁面的具體設置。期間可以將文件分為LOFI（低保真）與HIFI（高保真）兩個部分進行分別展示，有利于不同的需求者使用。

功能區5：器具箱，囤積了所有用來畫wireframe與流程圖的對象。我們可以通過拖拽的方式將小圖形放入工作區，進行操作。對于這里面的對象，我們有必要一一詳細了解。

功能區6：復用模塊區，這里創建的頁面文件和sitemap的頁面相似，唯一不同的是，master的每個文件，可以當作一個整體，被sitemap反復調用。這個功能就相當于程序開發中的程序復用，用好這個功能，可以減少我們很大一部的工作量。也更容易理解網頁文件的關系，了解網頁設計師、程序員是怎么構建網站的頁面的。

功能區7：頁面筆記，用來對當前創作頁面進行注釋與說明。同時可以在這里對頁面里的關鍵字段和特殊問題進行詳細的描述。

功能區8：頁面載入時的交互功能。通過在這里設置，不同條件下，頁面初次打開時的狀況。

功能區9：注釋與交互區。這個注釋和交互和7、8不同，7、8針對的是頁面，而9針對的是頁面中的元素，也就是一個個widgets。

      功能區的上面部分設置交互條件。通過鼠標點擊、滑入、滑出，設置觸發的事件，與對應widgets相應的變化。這一部分對沒有程序基礎的人可能會有一點難度，我稍后會做詳細解釋。

      功能區的下面部分是注釋部分，用戶可以對選定的對象進行詳細的注釋。Axure已經設置了幾個默認的注釋字段，但是其實這些默認的注釋字段，大家完全可以不使用，因為它可能和你要說明的東西風馬牛不相及。

     那么該怎么辦呢？Axure提供了自主設置字段，只要你自己設置好自己常用的字段，然后按照自己的習慣編寫就可以了。比如說你要說明對象的功能、優先級、參數，那么你在設置中加入這三個字段就好了。Axure最大的優勢就是你設置的這些注釋，在生成說明文檔時，Axure自動幫你生成PRD規格的表格文檔，你可以省去相當大的編號工作，與文檔工作。這些我在之后也會做說明。

     這些就是Axure的主要功能區，但是其實還有兩個小的角落大家可能會忽略，那就是6、7、8區下面的一行系統信息，這里顯示的信息很重要，但是一般人卻經常會忽視。我只所以說重要，因為我們在給ui設計師wireframe的時候他們總會問，這里多少像素，那里多少像素，可是我們在畫wireframe的時候卻無法度量。Axure創建的wireframe，完全可以生成html，因此我們可以在畫的時候就度量好每個像素距離。但是我們要怎么做呢？這就需要利用到下面這行小信息欄了。

     信息欄左邊顯示的是文檔保存情況。而右邊呢，當你將一個widgets放入工作區，并選擇這個widget時，這里就有用了，它顯示的是你所選擇widget的高寬，以及距離頁面頂部和左邊的px距離。通過使用上下左右鍵，結合這個信息欄，你可以一步一步將它移動到你想去的地方。有意思吧？