軟體原型設計工具Axure

軟體工程實踐——軟體原型設計工具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人民币不等。

    

轉載于:https://www.cnblogs.com/wenjieding/p/10783459.html