軟件工程實踐——軟件原型設計工具Axure

一、Axure簡介

• Axure簡介：

Axure RP是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。

• Axure下載：

我們可以在Axure官網（ https://www.axure.com/ ）下載到Axure的windows或Mac的最新版本，但是由於這是一個收費工具，初次下載時輸入郵箱可以獲得一個30天的試用時間

• 使用版本：

現在Axure已經更新至Version 9.0.0.3646 (PC & Mac)，但是本篇文章中使用的是團隊版Team Edition 8.1.0.33

• 註冊賬號：

為了進行團隊作業，團隊的每一個成員都需要註冊一個賬號。首次登錄時，我們需要在程序的右上角點擊login，接著點擊CREAT ACCOUNT，輸入用戶名和密碼，創建賬戶。

*特別註意：註冊的時候一定不能使用QQ郵箱，會收不到邀請碼！！！

二、菜單欄

• FILE

這個容易懂，就是新建項目、打開項目、保存項目之類的。不僅是個人項目，團隊項目也可以在這裏

• Edit

復制、粘貼、全選、替換、撤銷等。用掉的地方不是很多，畢竟大家都對復制粘貼的快捷鍵非常熟悉。

• View

主要是對整個程序界面的設置，比如可以設置工具欄有哪些工具等。

• Project

可以在這裏設置項目相關的東西，比如字體風格、頁面風格等。

• Arrange

可以設置原件圖層的前後、對齊方式等等。在工具欄的中間也有同樣的功能，直接點那裏會方便很多。

（點這裏也可以設置圖層前後、對其方式等）

• Publish

可以你做好的頁面的預覽、把做好的頁面上傳到團隊共享上等。

預覽界面不同的瀏覽器可能會造成效果的不同，推進Chrome、Firefox等。

• Team

團隊項目相關的都在這裏了~可以把現有的項目變成團隊項目，也可以把團隊共享中的項目下載到本地，可以把本地項目更新成團隊共享中的項目等等。

• Account & HELP

Account可以註銷當前賬號的登錄狀態，Help可以檢查更新等等。

這倆都是平時用不太到的~~就放一起了

三、原件

• 添加元件到畫布

在左側元件庫中選擇要使用的元件，按住鼠標左鍵不放，拖動到畫布適合的位置上松開。

• 添加元件名稱

點擊元件，在右上角文本框中輸入元件的自定義名稱，建議采用英文命名。隨著項目的進行，後期會有多個元件，如果不命名的話會很難分清楚，所以建議一定要給每一個元件命名。

（我把一個box命名為Background）

• 設置元件位置與大小

元件的位置與大小可以通過鼠標拖拽調整，但通常情況下很難調整到具體大小，因此也可以在右上角、或者Style中調整具體數值。x代表橫坐標，y代表縱坐標，w代表元件的寬，h代表元件的高。

（兩處都可以調整，我把元件Background的大小改為640*960，並放在（0,0）處）

• 設置元件的顏色

如果想要改變元件的顏色，可以點擊工具欄中的小方塊，也可以在右上角元件的Style中修改

• 設置元件隱藏

點擊元件後，選中右上角的Hidden，元件就會被隱藏。

通常情況下，元件隱藏後會變成淡黃色~

（兩處都可以~）

四、交互

• Add Case

先點擊元件，再點擊右上角的Add Case，可以添加交互。

雙擊OnClick、OnMouseEnter、OnMouseOut 也可以達到相同的效果，這三個按鈕分別表明“當鼠標點擊時”、“當光標移動到當前元件上時”、“當光標不在當前元件上時”

（這裏是當鼠標點擊該元件時，頁面跳轉到Page3）

• 顯示隱藏的元件

當我隱藏了某一個元件後，可以通過Add Case達到“點擊某一按鈕就讓該元件顯示”的功能。

（我隱藏了一個元件name，並添加了一個SHOW的按鈕 ButtonShow）

（設置點擊按鈕後顯示被隱藏的元件name）

（點擊SHOW之前）

（點擊SHOW之後，被隱藏的name出現了！）

五、其他實用功能

• 中繼器

中繼器是一個非常有用的功能，學習它有助於我們快速設計一些復雜的交互界面。

*下面是一個使用中繼器的例子。

a).新建一個頁面，把模板拖入頁面

b).在上方拖入一個BOX，一個箭頭，一個hotspot，一個中繼器組件，命名為“讀書列表”

c). 打開中繼器，編輯列名和內容，

d).插入圖片

e). 將原來的矩形框刪除，添加1個Box2作為底色，添加1個Heading1、4個label，一個image分別命名為：標題、內容、日期、評分、封面，並調整其位置、文字大小、顏色等，最後在底端添加一條水平線分割數據行。

f). 此時，返回“讀書”頁面，效果如圖所示。

g). 在“讀書”頁面設置觸發事件，OnPageLoad中添加Case1，選擇Set Text ，設置“標題”的值(value)為 “[[item.title]]”。用同樣的方法設置其他字段。圖片選擇Set Image，設置“封面”Default的Value為“[[item.pic]]”。

h). 預覽

• Hot Spot

由於很多情況下，由於ICON太小，手指太大，不太好點中按鈕，所以可以使用Hot Spot擴大選區。

（Hot Spot）

（可以直接在Hot Spot 上設置交互，以擴大可以點擊的區域）

• SnapShot（Storyboard）

我們可以用Snapshot查看設計頁面的縮略圖，點擊後還可以進入相應頁面。如果頁面有所改變，那Snapshot也會跟著改變。

（拖入後雙擊）

（拖入了三個）

（點擊這裏的Connect可以連線~）

（連完就是這樣的）

（可以插入這裏的貼紙，表明頁面之間是如何交互的~）

• 團隊項目

很多情況下我們的項目都是團隊合作的，因此可以使用團隊項目。

A） 首先登陸https://share.axure.com/

B） 點擊項目後的小齒輪，點擊FILE+SETTINGS

C） 然後我們就可以看到項目的詳情了，可以設置項目名稱和密碼。

D） 將URL復制到其中，就可以get到團隊項目了~

E） 為了避免多人同時操作一個頁面，對頁面操作前首先需要對頁面Check out，否則無法修改

F） 同樣，修改完後需要Check in

六、總結

在上學期的移動應用開發基礎中，我們曾學過Axure的一些基本知識，看到這次作業後，我又在網上找了一些Axure的學習資料，學習了一些新的知識。

① 優點：

• • 總的來說，我覺得Axure還是一個比較不錯的原型設計軟件，功能強大，可以比較完整地展示頁面，制作storyboard也非常的方便，“自由度”非常高，可以從無到有的設計頁面。更有比較完整的團隊管理功能，支持團隊合作，共同作業。
  • 對於高保真原型，大多數PM的首選都是AXURE，因為在墨刀中能帶來的效果並不是很多。 另外因為高保真原型因為涉及條件判斷等情況比較多，因此AXURE在這裏可以做到，但是墨刀是沒有條件判斷，只有他通過狀態來進行切換。

② 缺點：

• • 但是他也有缺點，就是使用共享的時候會非常的卡！尤其是Check out和Check in 的時候，有時候（常見於晚上）速度非常之慢，原因未知，網上搜索後也不知道原因，這對於團隊項目來說是非常麻煩的，當有團隊的其他隊員想要修改你正在修改的頁面時，你卻不能check in，導致隊員無法對其進行操作。
  • 另外，Axure能畫出的圖形太少了，只能勉強畫出基本圖形，很多圖形最後我都是通過Photoshop畫出來之後以圖片的形式導入到Axure中使用。在查閱資料後，得知大部分PM都會在AXURE原型庫、素材庫去尋找相應的第三方素材庫，進行載入，這個工作還是會比較費時間的。
  • 最後就是Axure是一款付費軟件，並且它的價格也是比較昂貴的。按月訂閱的話，Axure RP PRO 專業版的售價是人民幣290元/每月/每套。也可以購買終身使用權限，根據版本的區別，價格也在5000-10000人民幣不等。

軟件原型設計工具Axure