《AxureRP9網(wǎng)站與App原型設(shè)計(jì)》教學(xué)教案-02用頁面區(qū)域管理頁面

1、第2章用頁面區(qū)域管理頁面課時(shí)內(nèi)容用頁面區(qū)域管理頁面課時(shí)4教學(xué)目標(biāo)掌握頁面區(qū)域、頁面區(qū)域功能，學(xué)會(huì)規(guī)劃軟件欄目結(jié)構(gòu)教學(xué)重點(diǎn)頁面區(qū)域功能教學(xué)難點(diǎn)頁面區(qū)域功能教學(xué)設(shè)計(jì).教學(xué)思路：通過實(shí)例引出頁面區(qū)域的概念；通過多媒體演示和實(shí)機(jī)操作講解頁面區(qū)域功能；通過實(shí)戰(zhàn)介紹網(wǎng)頁欄目規(guī)劃的方法。.教學(xué)手段：多媒體+計(jì)算機(jī).教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容頁面區(qū)域位于軟件界面的左上方，是用來管理頁面、顯示頁面的區(qū)域。苒i。k常型蒯“工已授核-Xf1iRnraftalnqH意iafc6-蜂畤E“Wh.i.1-:椅回+%一但pjafrMU；U.h.EBA*竺,例-m:傲.巨22I團(tuán)E1:III，I;二kM由二M管理軟件

2、頁面關(guān)系|且軟件的骨架，清晰展示軟件的結(jié)構(gòu)Jffl_管理頁面層級(jí)頁面區(qū)域頁面區(qū)域的定義頁面區(qū)域由兩部分組成，一部分是對(duì)頁面的一些操作按鈕，頁面區(qū)域提供3個(gè)操作按鈕，頁面右鍵選項(xiàng)里提供更多操作按鈕，稱之為功能菜單；另一部分是頁面，呈現(xiàn)樹狀結(jié)構(gòu)，其與Windows系統(tǒng)文件存放目錄結(jié)構(gòu)相一致，通過父與子的頁面關(guān)系，兄弟和兄弟的頁面關(guān)系，把設(shè)計(jì)的產(chǎn)品頁面關(guān)系整合起來，形成產(chǎn)品的文檔關(guān)系。頁面區(qū)域的結(jié)構(gòu)和功能頁面區(qū)域的意義頁面區(qū)域可以用來規(guī)劃軟件的功能單元或者軟件的結(jié)構(gòu)。頁面區(qū)域可以讓使用者快速地了解軟件的結(jié)構(gòu)。頁面區(qū)域方便使用者快速地找到想要的頁面。使用頁面區(qū)域注意事項(xiàng)制作軟件原型時(shí)要規(guī)劃軟件的功能菜

3、單或者欄目結(jié)構(gòu)。頁面的命名要有意義。2.2頁面區(qū)域的功能使用頁面區(qū)域的功能使用包括兩方面內(nèi)容。（1）功能菜單的使用。（2）頁面管理。頁面的功能菜單檢索頁面：可以按頁面名稱進(jìn)行頁面區(qū)域檢索。當(dāng)制作的原型比較大，頁面比較多的時(shí)候，想通過頁面區(qū)域找到某個(gè)頁面，這時(shí)可以使用搜索按鈕來搜索頁面。例如想找到“index”頁面，輸入“近40乂”時(shí)，就可以把“index”頁面找出來。所以頁面的命名一定要有意義，便于快速地找到想要的頁面。新建頁面：為所選擇的節(jié)點(diǎn)頁面創(chuàng)建一個(gè)新的同級(jí)頁面。如果想給pagel頁面新建一個(gè)兄弟頁面，首先選中pagel頁面，然后單擊“新建頁面”按鈕，就可以創(chuàng)建一個(gè)同級(jí)頁面。新建文件夾：

4、可以為所選擇的節(jié)點(diǎn)頁面創(chuàng)建一個(gè)新的同級(jí)文件夾，文件夾可以把頁面管理起來，如同Windows文件夾一樣，把相關(guān)文件放置在一起。除了使用功能菜單來管理頁面，也可以在頁面上使用右鍵菜單選項(xiàng)來管理頁面。添加移動(dòng)M）刪除他剪切口復(fù)制粘貼重命名】重復(fù)圖表姆（T）生成流程圖頁面右鍵菜單選項(xiàng)添加：可以新增頁面之后同級(jí)頁面、新增文件夾、新增子頁面以及新增同級(jí)頁面；它的使用和功能與菜單上的新增頁面和新增文件夾是一樣的。移動(dòng)：可以移動(dòng)頁面，調(diào)整頁面的前后順序關(guān)系和層級(jí)關(guān)系，其功能與功能菜單上的移動(dòng)操作一致?？梢詫?shí)現(xiàn)同等級(jí)頁面的順序調(diào)整。如果想把page2頁面放置在pagel前面，右鍵單擊page2頁面，在彈出菜單中

5、選擇向上移動(dòng)命令，就可以調(diào)整頁面的前后順序。如果想把pagel頁面放置在page2后面，右鍵單擊page2頁面，在彈出菜單中，選擇向下移動(dòng)命令，就可以調(diào)整頁面的前后順序?？梢詫?shí)現(xiàn)頁面層級(jí)降級(jí)，如將所選頁面的層級(jí)降級(jí)排列在上方的原等級(jí)頁面的子頁面。如果想把page2頁面作為pagel頁面的子頁面，右鍵單擊page2頁面，在彈出菜單中，選擇降級(jí)命令，就可以把page2移到pagel頁面下，作為pagel頁面的子頁面?？梢詫?shí)現(xiàn)頁面層級(jí)升級(jí)，將所選頁面的層級(jí)升級(jí)，升級(jí)為原父頁面的同等級(jí)頁面。如果想把pagel頁面與index頁面同級(jí)，右鍵單擊pagel頁面，在彈出菜單中，選擇升級(jí)命令，就可以把page

6、l頁面和index頁面設(shè)置成同一個(gè)層級(jí)。刪除：將所選頁面刪除，同時(shí)刪除其子頁面，如果當(dāng)前頁面下含有子頁面，Axure會(huì)自動(dòng)提示當(dāng)前頁面有子頁面，單擊提示對(duì)話框中的確認(rèn)按鈕后會(huì)同時(shí)刪除所有子頁面。不想要的頁面或者文件夾可以通過刪除命令來進(jìn)行刪除。剪切、復(fù)制、粘貼：可以對(duì)文件夾和頁面進(jìn)行剪切、復(fù)制、粘貼操作。在制作軟件原型時(shí)，很多頁面布局或者交互效果會(huì)比較相似，這時(shí)就可以通過復(fù)制菜單命令來復(fù)制頁面或者復(fù)制頁面及其分支，然后在該頁面的基礎(chǔ)上進(jìn)行修改，就可以避免把一樣的東西制作多次，從而可以減少工作量，提高制作原型的效率。重命名：頁面重新命名的方式有3種。（1）雙擊頁面，可以對(duì)頁面進(jìn)行重新命名。（2）

7、通過右鍵菜單里的重命名命令來重新命。（3）通過快捷鍵F2進(jìn)行頁面的重新命名。重復(fù)：重復(fù)包括文件夾重復(fù)和分支重復(fù)，當(dāng)選中文件夾或者頁面的時(shí)候，使用重復(fù)操作可以復(fù)制文件夾、頁面或者分支。圖標(biāo)類型：通過圖標(biāo)類型菜單選項(xiàng)可以修改頁面或者流程圖的圖標(biāo)類型圖標(biāo)的更改并不會(huì)影響頁面的內(nèi)容，它僅僅是更改一個(gè)圖標(biāo)，便于對(duì)頁面的管理。生成流程圖：通過生成流程圖菜單選項(xiàng)，可以生成縱向或者橫向的流程圖，選中index頁面，右鍵在彈出菜單中選擇生成流程圖命令，生成縱向流程圖?？v向流程圖從流程圖可以了解軟件的功能結(jié)構(gòu)以及從屬關(guān)系，也可以生成橫向的流程圖，可以根據(jù)個(gè)人需求來選擇生成流程圖的類型。在頁面區(qū)域中，可以通過功能菜

8、單來管理頁面，也可以通過右鍵菜單命令來管理頁面，它們的功能是一致的。2.3實(shí)戰(zhàn)“藍(lán)月亮”欄目規(guī)劃；微課視頻結(jié)合前兩節(jié)學(xué)習(xí)的內(nèi)容，做一個(gè)“藍(lán)月亮”欄目的規(guī)劃，通過本節(jié)內(nèi)容的練習(xí)學(xué)會(huì)規(guī)劃軟頁面結(jié)構(gòu)，并且進(jìn)一步加深對(duì)頁面區(qū)域使用的理解。打開瀏覽器，搜索藍(lán)月亮官網(wǎng)。i縱向流程圖從流程圖可以了解軟件的功能結(jié)構(gòu)以及從屬關(guān)系，也可以生成橫向的流程圖，可以根據(jù)個(gè)人需求來選擇生成流程圖的類型。在頁面區(qū)域中，可以通過功能菜單來管理頁面，也可以通過右鍵菜單命令來管理頁面，它們的功能是一致的。2.3實(shí)戰(zhàn)“藍(lán)月亮”欄目規(guī)劃；微課視頻結(jié)合前兩節(jié)學(xué)習(xí)的內(nèi)容，做一個(gè)“藍(lán)月亮”欄目的規(guī)劃，通過本節(jié)內(nèi)容的練習(xí)學(xué)會(huì)規(guī)劃軟頁面結(jié)構(gòu)，

9、并且進(jìn)一步加深對(duì)頁面區(qū)域使用的理解。打開瀏覽器，搜索藍(lán)月亮官網(wǎng)。i“百度”欄目；規(guī)劃詳解解藍(lán)月亮官網(wǎng)選擇藍(lán)月亮官網(wǎng)作為實(shí)例，因?yàn)樗苡写硇浴Ｔ谥谱鬈浖蜁r(shí)，特別是門戶和應(yīng)用系統(tǒng)軟件，通?？梢詫④浖墓δ茏鳛閷?dǎo)航菜單劃分的依據(jù)，即在制作原型的時(shí)候可以按導(dǎo)航菜單來建立頁面區(qū)域的欄目結(jié)構(gòu)。藍(lán)月亮官網(wǎng)可以看作企業(yè)門戶的典型代表，它有6個(gè)一級(jí)菜單，也就是被劃分為6個(gè)大的功能模塊。首頁：是很多網(wǎng)站都存在的模塊，展示網(wǎng)站的綜合信息；走進(jìn)藍(lán)月亮：也就是企業(yè)介紹，也是必有的一個(gè)模塊；清潔之家：用來展示公司產(chǎn)品的，該模塊可以根據(jù)實(shí)際情況來選擇；如果有產(chǎn)品，可以劃分出產(chǎn)品模塊用來展示產(chǎn)品，如果沒有，可以去掉該模

10、塊；科學(xué)洗滌：科普文章發(fā)布，可以看作網(wǎng)站的新聞發(fā)布，也可以根據(jù)實(shí)際情況來考慮；人力資源、聯(lián)系我們：是很多門戶網(wǎng)站都存在的兩個(gè)功能模塊。經(jīng)過上面分析，在藍(lán)月亮官網(wǎng)的頁面區(qū)域上需要建立6個(gè)一級(jí)菜單，在一級(jí)菜單下面有二級(jí)菜單，并且一級(jí)菜單默認(rèn)顯示的內(nèi)容是二級(jí)菜單的第一個(gè)菜單內(nèi)容。首頁一級(jí)菜單沒有二級(jí)菜單，就不需要建立子頁面?！白哌M(jìn)藍(lán)月亮”一級(jí)菜單下面，有“關(guān)于我們”“企業(yè)文化”“社會(huì)責(zé)任”“藍(lán)月亮的世界”，“走進(jìn)藍(lán)月亮”默認(rèn)顯示的內(nèi)容是“關(guān)于我們”的內(nèi)容。“清潔之家”一級(jí)菜單下面沒有二級(jí)菜單，就不需要建立子頁面?！翱茖W(xué)洗滌”一級(jí)菜單下面沒有二級(jí)菜單，就不需要建立子頁面?！叭肆Y源”一級(jí)菜單下面有“用

11、人理念”“社會(huì)招聘”“校園招聘”“培訓(xùn)發(fā)展”“員工福利”5個(gè)二級(jí)菜單，“人力資源”默認(rèn)顯示的內(nèi)容是“用人理念”的內(nèi)容?！奥?lián)系我們”一級(jí)菜單下面有“公司總部信息”“各地辦事處”“訂單物流查詢”“供應(yīng)商注冊(cè)”4個(gè)二級(jí)菜單，“聯(lián)系我們”默認(rèn)顯示的內(nèi)容是“公司總部信息”的內(nèi)容?？梢砸罁?jù)二級(jí)菜單建立相應(yīng)的子頁面，但是需要注意，可以使用父頁面來顯示二級(jí)菜單的第一個(gè)菜單內(nèi)容，所以第一個(gè)菜單不需要建立子頁面，而其他二級(jí)菜單需要建立相應(yīng)的子頁面進(jìn)行原型設(shè)計(jì)。下面打開Axure軟件，開始“藍(lán)月亮”欄目規(guī)劃設(shè)計(jì)。（1）將pagel頁面重新命名，命名為“藍(lán)月亮”，在藍(lán)月亮下面建立6個(gè)頁面，分別命名為“首頁”“走進(jìn)藍(lán)月

12、亮”“清潔之家”“科學(xué)洗滌”“人力資源”“聯(lián)系我們”。述QF口”-宜克g巨口目隹盛目光回清消之袤住MA話回AJCg鞋骨曲藍(lán)月亮一級(jí)菜單（2）在“走進(jìn)藍(lán)月亮”頁面新增3個(gè)子頁面，可以通過兩種方式新增頁面，一是通過功能菜單，另一種是通過右鍵菜單選項(xiàng)新增頁面，分別命名新增子頁面為“企業(yè)文化”“社會(huì)責(zé)任”“藍(lán)月亮的世界”。ali_iT-Hm空亞月是E企業(yè)文化E本士住同月物0滿泊之事回$特靠35HAiffi6H京系藥盯“走進(jìn)藍(lán)月亮”二級(jí)菜單(3)在“人力資源”頁面新增4個(gè)子頁面，分別將其命名為“社會(huì)招聘”“校園招聘”“培訓(xùn)發(fā)展”“員工福利”，可以把暫時(shí)不需要展示的子頁面收縮起來。“人力資源”二級(jí)菜單(4

13、)在“聯(lián)系我們”頁面新增3個(gè)子頁面，分別將其命名為“各地辦事處”“訂單物流查詢”“供應(yīng)商注冊(cè)”?！奥?lián)系我們”二級(jí)菜單這樣責(zé)甘巴藍(lán)月亮官網(wǎng)的欄目結(jié)構(gòu)建立完成，然后可以按照各個(gè)功能模塊進(jìn)行原型設(shè)計(jì)，可以根據(jù)欄目結(jié)構(gòu)生成流程圖，從而看出軟件的大致結(jié)構(gòu)以及從屬關(guān)系。11FFF111H國(guó)SHZ均=RJFIUH.卜_力艮.叫M1111it1%正但此吐好a切融片界寸疵而raew卻加9nzn陽門面與藍(lán)月亮官網(wǎng)流程圖小結(jié)（1）了解什么是頁面區(qū)域。頁面區(qū)域是由功能菜單和頁面兩部分組成，可以通過頁面區(qū)域管理軟件的頁面關(guān)系。（2）通過功能菜單和右鍵菜單選項(xiàng)來管理頁面，包括新增頁面、移動(dòng)頁面、刪除頁面以及搜索頁面等操作等。（3）學(xué)會(huì)如何規(guī)劃軟件欄目結(jié)構(gòu)。練習(xí)通過頁面區(qū)域規(guī)劃“清華大學(xué)門戶”網(wǎng)站欄目。導(dǎo)航菜單包括首頁、清華新