1.3 認識Axure軟件界面

Axure軟件界面大致可以分為8個區域，分別為菜單欄區域、工具欄區域、頁面區域、元件庫區域、母版區域、工作區域、檢視區域、頁面概要區域，如圖1.11所示。

視頻課程

認識Axure軟件界面

1.3.1 菜單欄區域

視頻課程

菜單欄區域詳解

菜單欄區域有文件、編輯、視圖、項目、布局、發布、團隊、賬戶、幫助9個菜單項，包含了軟件的一些常規操作和功能，如圖1.12所示。

“文件”菜單（見圖1.13）：

（1）可以新建工程、打開工程及保存工程，這些操作可以使用快捷鍵或者工具欄快速操作按鈕完成；

（2）可以導入RP文件，新建團隊項目、打開團隊項目；

（3）可以進行打印紙張尺寸設置，打印index頁面，導出index圖片；

（4）可以設置定時備份軟件原型，避免制作軟件原型丟失。

“編輯”菜單（見圖1.14）：

可以完成復制、剪切、粘貼、撤銷、重做等操作，也可以使用快捷鍵來完成這些操作，所以很少會使用這個菜單。

“視圖”菜單（見圖1.15）：

（1）可以進行原型預覽，對預覽方式進行設置，選擇打開瀏覽器方式和工具欄設置；

（2）可以將原型發布到AxShare上面進行托管；

（3）以生成HTML文件的方式進行原型發布；

（4）生成需求規格說明書的Word文檔；

（5）預覽和生成原型文件。

“團隊”菜單（見圖1.21）：

可以創建團隊項目和獲取團隊項目，進行多人協作。

“賬戶”菜單（見圖1.22）：

可以進行賬戶登錄和服務器代理設置。

“幫助”菜單（見圖1.23）：

（1）通過開始演示動畫選項，學習原型工具的使用，提供在線培訓教學功能及進入Axure論壇功能；

（2）通過管理授權完成注冊，獲得軟件使用的授權；

（3）提供軟件檢查更新及提交軟件意見和軟件錯誤功能。

1.3.2 工具欄區域

視頻課程

Axure 工具欄詳解和常用快捷鍵

工具欄區域包含有使用頻率最高的快捷工具。我們在設計原型的過程中經常會用到這些操作，理解工具欄的功能并掌握它的使用方法，可以提高制作原型的效率。工具欄區域分為基本工具欄和樣式工具欄，同時提供自定義工具欄功能。下面通過對兩個矩形元件的操作，熟悉一下工具欄的使用，如圖1.24所示。

注意

在制作原型的過程中，記得修改之后要立刻保存，以免由于斷電、計算機死機、軟件退出等原因，造成以前做的原型丟失。

◆ 實戰演練

1

在元件庫區域，拖曳兩個矩形元件到工作區域，并在矩形元件上分別雙擊，進行重新命名，一個矩形命名為“矩形一”，另一個矩形命名為“矩形二”，單擊保存快捷按鈕或者使用Ctrl+S快捷鍵保存上面的操作，如圖1.26所示。

2

選中“矩形一”元件，利用Ctrl+C快捷鍵復制出同樣的一個元件，再利用Ctrl+V快捷鍵粘貼，也可以利用工具欄上快捷按鈕操作，如圖1.27所示。

同樣可以試試快捷鍵Ctrl+Z（撤銷）、Ctrl+Y（重做）、Ctrl+X（剪切）等，練習對矩形元件的操作。

選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、邊界點、切割、裁剪、連接點、格式刷以及縮放操作的快捷工具按鈕如圖1.28和圖1.29所示。

選擇：用來選中工作區域中的元件，包括相交選中和包含選中，相交選中所選擇的區域只要和元件有接觸、有相交，這個元件就會呈現為選中狀態；而包含選中是把元件完全包含進來，才會呈現為選中狀態。

連接：用來連接兩個元件。這個操作多用于繪制流程圖。

鋼筆：可以繪制出自定義的形狀。

縮放：設置工作區域的縮放比例，可以根據頁面內容進行調整。

布局操作

布局操作用來設置頁面中元件的布局，包括設置元件頂層、底層、組合、取消組合、對齊、分布操作，其按鈕如圖1.30所示。

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。

：設置外部陰影，勾選陰影復選框，讓它生效，在這里可以設置陰影的偏移位置和模糊程度，并且可以設置陰影的顏色。

：設置元件邊框的顏色，單擊下三角，彈出框可用來選擇顏色。

：設置元件線寬，單擊下三角，彈出框可用來選擇邊框的寬度。

：設置元件的線條樣式，單擊下三角，彈出框可用來選擇線條樣式，實線或虛線。

：可以設置水平線元件和垂直線元件的箭頭樣式。

◆ 實戰演練

1

單擊矩形一元件，將其邊框編輯為紅色、粗線、打點式線條；將矩形二編輯成藍色背景，紅色外部陰影，如圖1.35所示。

在工具欄中還可以設置文本的水平位置和垂直位置，以及字體系列、字體類型、字號、粗體、斜體、下劃線、字體顏色等，這與很多軟件對字體編輯的功能一樣。

2

將矩形二的文本字體設置為華文琥珀，字體類型設置為Bold Oblique，字號設置為28，添加粗體、斜體、下劃線設置，字體顏色設置為黃色，水平位置靠左對齊，垂直位置頂部對齊，如圖1.36所示。

工具欄的快捷按鈕還可以編輯元件的大小和位置、隱藏元件，x、y代表元件的橫縱坐標位置，以左上角為原點；w、h分別代表元件的寬度和高度。

3

將矩形二元件的x值設置為360,y值設置為80；寬度w值設置為240,h值設置為100，如圖1.37所示。

注意

要熟記和理解各個按鈕的功能及使用，同時也可以使用相應的快捷鍵進行操作，快捷鍵的操作要比單擊操作更節省時間，提高制作原型的效率。

3.自定義工具欄

工具欄里有很多快捷按鈕，有一些按鈕是經常會用到的，有一些按鈕可能很久都不會用到一次，這時可以自定義工具欄，在自定義工具欄里選擇顯示什么快捷按鈕。單擊視圖菜單下工具欄選項，選擇自定義工具欄，如圖1.38所示。

自定義工具欄包括自定義文件、縮放、對齊、鎖定、發布、工具、布局、視圖選項、賬戶、組合、分布等快捷工具按鈕，可根據自己的需要來選擇。

1.3.3頁面區域

頁面區域是用來顯示軟件頁面的，從這里可以了解到軟件的大致結構，有哪些頁面，以及頁面之間的關系。頁面區域采用樹狀結構來顯示頁面，以index頁為樹的根節點，可以對頁面進行增加、移動、刪除等操作來管理軟件原型的頁面，如圖1.39所示。

1.3.4 元件庫區域

元件庫區域包含了制作原型需要的一些基礎元件，Axure RP8中原型設計工具默認包含線框圖元件庫和流程圖元件庫、圖標元件庫。

線框圖元件庫里提供了40種線框圖元件，常用的有圖片、文本標簽、矩形、占位符、水平線、垂直線、文本框、下拉列表框、復選框、單選按鈕、提交按鈕，如圖1.40所示。

流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文件、角色、數據庫等，如圖1.41所示。

圖標元件庫里提供了各種各樣的圖標，比如箭頭、電池、統計圖標等，如圖1.42所示。

1.3.5 母版區域

母版區域用來設計一些共用、復用的區域，如圖1.43所示，如網站尾部版權區域，可能每個頁面都會用到版權信息，也可以設計導航菜單，如移動App的底部標簽導航，在母版中設計一次，在其他頁面可直接引用，達到共用、復用的效果。

1.3.6 工作區域

工作區域是用來繪制原型的畫布。在這個區域里完成原型的設計，就像畫畫時在畫布上盡情繪制，如圖1.44所示。

1.3.7 檢視區域

檢視區域是用來設計頁面或者元件的樣式和交互效果的，可以設置屬性，如添加頁面交互效果，頁面載入時觸發事件、窗口尺寸改變時觸發事件、窗口滾動時觸發事件，以及在更多事件里還提供許多其他的事件，如圖1.45所示。

在檢視區域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46所示。

還可以設計頁面、元件的樣式，比如頁面在瀏覽器中顯示的對齊方式是居中對齊還是居左對齊，頁面的背景色或者背景圖片，還可以設置草圖的效果，針對元件設置禁用、選中等屬性，也可以給元件添加樣式，設置元件的位置和大小、選擇元件的樣式，以及字體、邊框線、圓角半徑、對齊方式等，如圖1.47所示。

1.3.8頁面概要區域

頁面概要區域用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件及管理這些元件，比如可以管理動態面板，增加動態面板、移動動態面板及刪除動態面板等操作，如圖1.48所示。