第2章

用頁面區(qū)域管理軟件頁面

AxureRP原型設(shè)計(jì)圖解微課視頻教程互聯(lián)網(wǎng)＋職業(yè)技能系列極客學(xué)院頁面區(qū)域位于軟件界面的左上方，是用來管理頁面和顯示頁面的區(qū)域，如圖2.1所示。

管理軟件頁面關(guān)系軟件的骨架，清晰展示軟件的結(jié)構(gòu)圖2.1管理頁面層級(jí)本章案例：“百度門戶”欄目規(guī)劃，效果如圖2.2所示。

圖2.2“百度門戶”欄目規(guī)劃效果2.1?頁面區(qū)域是什么

2.2?

頁面區(qū)域的功能使用2.3?

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

圖2.3頁面區(qū)域的結(jié)構(gòu)和功能

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

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

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

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

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

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

菜單選項(xiàng)管理頁面，如圖2.5所示。

圖2.5頁面右鍵菜單選項(xiàng)

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

移動(dòng)：菜單選項(xiàng)可以移動(dòng)頁面的前后順序關(guān)系，調(diào)整頁面的層級(jí)關(guān)系，和功能條上的移動(dòng)操作一致。

刪除：不想要的頁面或者文件夾可以通過刪除菜單選項(xiàng)來進(jìn)行刪除。如果當(dāng)前頁面下含有子頁面，Axure會(huì)自動(dòng)提示，單擊提示中的“確認(rèn)”后會(huì)同時(shí)刪除所有子頁面。

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

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

圖2.6縱向流程圖2.1?站點(diǎn)地圖是什么2.2

頁面區(qū)域的功能使用2.3?

實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.4?小結(jié)2.3實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃

結(jié)合前兩節(jié)學(xué)習(xí)的內(nèi)容，我們來做一個(gè)“百度”欄目規(guī)劃的案例，打開瀏覽器，輸入地址“”，打開百度門戶頁面，如圖2.7所示。

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

圖2.8百度一級(jí)菜單

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

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

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

圖2.9百度介紹二級(jí)菜單

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

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

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

如圖2.12所示。

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

圖2.12招賢納士二級(jí)菜單

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

圖2.13聯(lián)系我們二級(jí)菜單2.1?頁面區(qū)域是什么

2.2?

頁面區(qū)域的功能使用2.3?

實(shí)戰(zhàn)——“百度門戶”欄目規(guī)劃2.4

小結(jié)2.4小結(jié)

本章主要學(xué)習(xí)頁面區(qū)域的使用，通過頁面區(qū)域管理頁面，應(yīng)當(dāng)做到以下幾點(diǎn)。

（1）了解什么是頁面區(qū)域，頁面區(qū)域由兩部分組成：功能菜單和頁面。它可以管理軟件的頁面關(guān)系。

（2）通過功能菜單和右鍵菜單選項(xiàng)來管理頁面，包括新增頁面、移動(dòng)頁面、刪除頁面及搜索頁面等。

（3）學(xué)會(huì)如何規(guī)劃軟件欄目結(jié)構(gòu)。謝謝觀賞AxureRP原型設(shè)計(jì)圖解微課視頻教程互聯(lián)網(wǎng)＋職業(yè)技能系列極客學(xué)院海量圖書方便查詢免費(fèi)申請(qǐng)樣書下載配套資源優(yōu)惠購書成為作者更多樣書申請(qǐng)和資源下載需求，請(qǐng)登錄人郵教育社區(qū)（)囊括各大品類，