Axure軟件介紹與頁面認識技術型文科人才系列課程主講人：文學與傳媒學院交互設計Axure軟件界面大致可以分為8個區(qū)域，分別為菜單欄區(qū)域、工具欄區(qū)域、頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、工作區(qū)域、檢視區(qū)域、頁面概要區(qū)域，如圖2.11所示。

軟件界面頁面區(qū)域位于軟件界面的左上方，是用來管理頁面和顯示頁面的區(qū)域，如圖2.1所示。

管理軟件頁面關系軟件的骨架，清晰展示軟件的結構

管理頁面層級本章案例：“百度門戶”欄目規(guī)劃。

“百度門戶”欄目規(guī)劃效果2.1?認識軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動端與PC端的原型制作規(guī)范2.4?小結2.1.1菜單欄區(qū)域

菜單欄區(qū)域有文件、編輯、視圖、項目、布局、發(fā)布、團隊、賬戶、幫助9個菜單項，包含了軟件的一些常規(guī)操作和功能。

“文件”菜單：

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

菜單欄區(qū)域文件菜單選項

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

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

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

“編輯”菜單：

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

“視圖”菜單：

編輯菜單選項視圖菜單選項

（１）“工具欄”選項。將工具欄區(qū)域劃分為基本工具欄和樣式工具欄兩類，可以通過勾選的方式控制工具欄區(qū)域內容的顯示，同時提供自定義工具欄功能，工具欄內容可以自行定義；

（２）“功能區(qū)”選項，分為5個區(qū)域，即頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、檢視區(qū)域、概要區(qū)域，可通過勾選的方式控制這些區(qū)域的顯示與隱藏效果，還提供開關左側功能欄和開關右側功能欄的功能；

工具欄選項功能區(qū)選項

（３）“遮罩”選項，通過勾選的方式來控制隱藏對象、母版、動態(tài)面板、中繼器、文本鏈接、熱區(qū)是否添加遮罩效果。

“項目”菜單：

（1）可對元件、頁面的樣式進行編輯；

（2）具有自定義元件字段說明和頁面字段說明功能；

（3）具有添加全局變量功能。

遮罩選項項目菜單選項“發(fā)布”菜單：（1）可以進行原型預覽，對預覽方式進行設置，選擇打開瀏覽器方式和工具欄設置；（2）可以將原型發(fā)布到AxShare上面進行托管；（3）以生成HTML文件的方式進行原型發(fā)布；（4）生成需求規(guī)格說明書的Word文檔；（5）預覽和生成原型文件。

發(fā)布菜單選項“團隊”菜單：

可以創(chuàng)建團隊項目和獲取團隊項目，進行多人協(xié)作。“賬戶”菜單：

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

團隊菜單選項賬戶菜單選項“幫助”菜單：（1）通過開始演示動畫選項，學習原型工具的使用，提供在線培訓教學功能及進入Axure論壇

功能；（2）通過管理授權完成注冊，獲得軟件使用的授權；（3）提供軟件檢查更新及提交軟件意見和軟件錯誤功能。

幫助菜單選項2.1.2工具欄區(qū)域

工具欄區(qū)域包含有使用頻率最高的快捷工具。

我們在設計原型的過程中經(jīng)常會用到這些操作，理解工具欄的功能并掌握它的使用方法，可以提高制作原型的效率。

工具欄區(qū)域分為基本工具欄和樣式工具欄，同時提供自定義工具欄功能。

下面通過對兩個矩形元件的操作，熟悉一下工具欄的使用，如圖1.24所示。

工具欄區(qū)域1.基本工具欄

新建、打開、保存操作

文件：新建一個工程項目，快捷鍵是Ctrl+N。

打開：打開一個已有的工程項目（只能打開rp類型的工程），快捷鍵是Ctrl+O。

保存：保存一個工程項目，快捷鍵是Ctrl+S。

復制：單擊這個快捷按鈕，可以復制選中的元件，它的快捷鍵是Ctrl+C。

剪貼板：可以粘貼復制的元件。單擊這個快捷按鈕，可以把復制的元件粘貼到工作區(qū)域，它的快捷鍵是Ctrl+V。

撤銷：單擊這個快捷按鈕可以撤銷上一步的操作，快捷鍵是Ctrl+Z。

重做：單擊這個快捷按鈕可以重做上一步的操作，快捷鍵是Ctrl+Y。

剪切：單擊這個快捷按鈕可以剪切選中的元件，快捷鍵是Ctrl+X。

新建、打開、保存操作實戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個矩形元件到工作區(qū)域，并在矩形元件上分別雙擊，進行重新命名，一個矩形命名為“矩形一”，另一個矩形命名為“矩形二”，單擊保存快捷按鈕或者使用Ctrl+S快捷鍵保存上面的操作，如圖1.26所示。

拖曳矩形元件2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復制出同樣的一個元件，再利用Ctrl+V快捷鍵粘

貼，也可以利用工具欄上快捷按鈕操作。

復制矩形元件

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

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

選擇、連接、鋼筆更多

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

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

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

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

布局操作

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

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。

組合、取消組合：可以將不同元件設置為一個組合，這樣可以把組合的元件一起移動或者進行其他操作；同時也可以將一個組合拆散為單獨的元件。

對齊：提供左對齊、左右居中、右對齊、頂部對齊、上下居中、底部對齊方式。

分布：包括水平分布和垂直分布兩種分布方式。

水平分布：單擊這個按鈕，可以讓選中的按鈕呈現(xiàn)為橫向均勻分布。

垂直分布：單擊這個按鈕，可以讓選中的按鈕呈現(xiàn)為縱向均勻分布。

對齊方式分布方式

鎖定、開關功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、開關左側功能欄、開關右側功能欄、預覽、共享、發(fā)布、登錄操作按鈕。

鎖定、發(fā)布操作

鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿?，也可以取消鎖定，進行移動。

開關功能欄：包括開關工作區(qū)域左側的功能欄和工作區(qū)域右側的功能欄。

預覽：以原型預覽的方式在瀏覽器中顯示，不生成本地原型文件。

共享：通過共享的方式創(chuàng)建團隊項目，發(fā)布到AxShare上面。

發(fā)布：可以通過預覽的方式發(fā)布，也可以通過生成本地文件的形式發(fā)布。

登錄：提供登錄的快捷按鈕。2.樣式工具欄

樣式工具欄可用來給文本內容或者元件邊框設置樣式，可以設置文本內容顏色、字號、字體，也可以給元件邊框設置樣式。

樣式工具欄

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

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

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

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

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

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

實戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點式線條；將矩形二編輯成藍色背景，紅色外部陰影。

編輯矩形一和矩形二

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

矩形二字體設置3. 將矩形二元件的x值設置為360，y值設置為80；寬度w值設置為240，h值設置為100。

編輯元件的位置和大小3.自定義工具欄

工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常會用到的，有一些按鈕可能很久都不會用到一次，這時可以自定義工具欄，在自定義工具欄里選擇顯示什么快捷按鈕。

單擊視圖菜單下工具欄選項，選擇自定義工具欄。

自定義工具欄2.1.3頁面區(qū)域

頁面區(qū)域是用來顯示軟件頁面的，從這里可以了解到軟件的大致結構，有哪些頁面，以及頁面之間的關系。

頁面區(qū)域采用樹狀結構來顯示頁面，以index頁為樹的根節(jié)點，可以對頁面進行增加、移動、刪除等操作來管理軟件原型的頁面。

頁面區(qū)域2.1.4元件庫區(qū)域

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

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

線框圖元件

流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文件、角色、數(shù)據(jù)庫等。

圖標元件庫里提供了各種各樣的圖標，比如箭頭、電池、統(tǒng)計圖標等。

流程圖元件圖標元件2.1.5母版區(qū)域

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

母版區(qū)域2.1.6工作區(qū)域

工作區(qū)域是用來繪制原型的畫布。在這個區(qū)域里完成原型的設計，就像畫畫時在畫布上盡情繪制。

工作區(qū)域1.1.7檢視區(qū)域

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

屬性設置

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

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

說明樣式2.1.8頁面概要區(qū)域

頁面概要區(qū)域用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件及管理這些元件，比如可以管理動態(tài)面板，增加動態(tài)面板、移動動態(tài)面板及刪除動態(tài)面板等操作。

頁面概要區(qū)域2.1?認識軟件界面2.2?用頁面區(qū)域管理軟件頁面2.3?移動端與PC端的原型制作規(guī)范2.4?小結2.2.1?頁面區(qū)域是什么

2.2.2?頁面區(qū)域的功能使用2.2.3實戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結2.2.1頁面區(qū)域是什么什么是頁面區(qū)域頁面區(qū)域由兩部分組成。一部分是功能菜單，就是一些操作頁面的按鈕，在頁面右鍵選項里提供更多操作按鈕，另一部分是頁面，呈現(xiàn)樹狀結構，與Windows文件存放目錄結構一致。通過父與子的頁面關系、兄弟和兄弟的頁面關系，將設計的產(chǎn)品頁面整合起來，形成產(chǎn)品的文檔，如圖2.3所示。

圖2.3頁面區(qū)域的結構和功能

頁面區(qū)域能干什么1.頁面區(qū)域可以用來規(guī)劃軟件的功能單元或者軟件的結構

2.頁面區(qū)域可以讓使用者快速地了解軟件的結構

3.頁面區(qū)域方便使用者快速地找到想要的頁面

使用頁面區(qū)域注意事項1.制作軟件原型時要規(guī)劃軟件的功能菜單或者欄目結構2.頁面的命名要有意義制作原型時要事先規(guī)劃好軟件的功能菜單或者欄目結構，不要隨意地在站點地圖上新建頁面，導致頁面結構混亂，根本看不出軟件的功能結構。頁面的命名要讓使用者一看，就能知道這個頁面所要表達的含義。要做到顧名思義，不光是頁面要命名得有意義，部件也要命名得有意義。2.2.1?站點地圖是什么2.2.2?頁面區(qū)域的功能使用2.2.3?實戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結2.2.2頁面區(qū)域的功能使用頁面區(qū)域的功能使用包括兩方面內容：

功能菜單的使用01OPTION02OPTION頁面管理圖2.4頁面的功能菜單

除了使用功能菜單來管理頁面，也可以在頁面上右鍵單擊，通過彈出的

菜單選項管理頁面，如圖2.5所示。

圖2.5頁面右鍵菜單選項

添加：菜單選項，可以所選頁面之前或之后新增同級頁面，新增文件夾或新增子頁面。它的效果和功能條上的新增頁面和新增文件夾是一樣的。

移動：菜單選項可以移動頁面的前后順序關系，調整頁面的層級關系，和功能條上的移動操作一致。

刪除：不想要的頁面或者文件夾可以通過刪除菜單選項來進行刪除。如果當前頁面下含有子頁面，Axure會自動提示，單擊提示中的“確認”后會同時刪除所有子頁面。

重命名：頁面的重新命名的方式有3種。

頁面重新命名的方式有3種：通過快捷鍵F2進行頁面的重新命名。通過右鍵菜單選項里的重命名選項來重新命名；選中頁面后再單擊頁面名稱；312通過圖表（標）類型菜單選項來更改頁面的圖標類型，可以改為頁面或者流程圖的圖標。圖標的更改并不會影響頁面的內容，只是便于對頁面的管理。通過生成流程圖菜單選項，可以生成縱向或者橫向的流程圖。選中index頁面，然后單擊鼠標右鍵，選擇生成流程圖選項，生成縱向流程圖，如圖2.6所示。

圖2.6縱向流程圖2.2.1?站點地圖是什么2.2.2?頁面區(qū)域的功能使用2.2.3?實戰(zhàn)——“百度門戶”欄目規(guī)劃2.2.4?小結2.2.3實戰(zhàn)——“百度門戶”欄目規(guī)劃

結合前兩節(jié)學習的內容，我們來做一個“百度”欄目規(guī)劃的案例，如圖2.7所示。

圖2.7百度門戶百度門戶，它有7個一級菜單，也就是被劃分為7個大的功能模塊。123456（一）首頁：這個是很多網(wǎng)站都存在的模塊，展示網(wǎng)站的綜合信息。（二）百度介紹：也就是企業(yè)介紹，也是必有的一個模塊。（三）新聞中心：用來介紹公司的一些新聞事件。（四）產(chǎn)品中心：這個模塊可以根據(jù)實際情況來選擇是否有。（五）商業(yè)中心：是百度的營銷推廣模塊，可以根據(jù)實際情況來選擇（六）招賢納士：是很多門戶網(wǎng)站都存在的功能模塊。7（七）聯(lián)系我們：是很多門戶網(wǎng)站都存在的功能模塊。1.將index頁面重新命名為“百度門戶”，在百度門戶下面建立7個頁面，分別命名為“首頁”“百度介紹”“新聞中心”“產(chǎn)品中心”“商業(yè)中心”“招賢納士”和“聯(lián)系我們”，如圖2.8所示。

圖2.8百度一級菜單

在百度介紹頁面新增兩個子頁面，有兩種方式：一種是通過功能條，另一種是通過右鍵單擊

菜單選項。將兩個子頁面分別命名為“百度文化”和“百度之路”，如圖2.9所示。在產(chǎn)品中心頁面新增3個子頁面，分別命名為“產(chǎn)品大全”“用戶幫助”和“投訴中心”，

可以把暫時不需要展示的子頁面收縮起來，如圖2.10所示。

圖2.9百度介紹二級菜單

圖2.10產(chǎn)品中心二級菜單

在商業(yè)中心頁面新增4個子頁面，分別命名為“百度推廣”“營銷中心”“互動營銷”和

聯(lián)盟合作”，如圖2.11所示。在招賢納士頁面新增3個子頁面，分別命名為“社會招聘”“校園招聘”和“百度校園”，

如圖2.12所示。

圖2.11商業(yè)中心二級菜單

圖2.12招賢納士二級菜單

6. 在聯(lián)系我們頁面新增一個子頁面，命名為“參觀百度”，如圖2.13所示。

圖2.