軟件原型設計工具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人民幣不等。
軟件原型設計工具Axure