《AxureRP9網站與App原型設計》教學教案-02用頁面區域管理頁面

第2章用頁面區域管理頁面課時課時內容用頁面區域管理頁面教學目標掌握頁面區域、頁面區域功能，學會規劃軟件欄目結構教學內容課時教學重點頁面區域功能教學難點頁面區域功能1.教學思路：通過實例引出頁面區域的概念；通過多媒體演示和實機操作講解頁面區教學設計域功能；通過實戰介紹網頁欄目規劃的方法。.教學手段：多媒體+計算機.教學資料：教材\多媒體課件頁面區域位于軟件界面的左上方，是用來管理頁面、顯示頁面的區域。官理軟件頁面關系軟件的骨架，清晰展示軟件的結構原型設計-AxureRP9TeamEdition:已授權XIBO官理軟件頁面關系軟件的骨架，清晰展示軟件的結構原型設計-AxureRP9TeamEdition:已授權XIBO文件（…祝良（…助目（…布局（…發布（…0UA（-喙號（…華助（…XCut廿Copy0Paste西回年田，2.1頁面區域頁面區域的定義頁面區域由兩局部組成，一局部是對頁面的一些操作按鈕，頁面區域提供3個操作按鈕，頁面右鍵選項里提供更多操作按鈕，稱之為功能菜單；另一局部是頁面，呈現樹狀結構，其與Windows系統文件存放目錄結構相一致，通過父與子的頁面關系，兄弟和兄弟的頁面關系，把設計的產品頁面關系整合起來，形成產品的文檔關系。頁面Q0D卜國2~I功能菜單目pagel0page2SPage3SPage4頁面頁面區域的結構和功能頁面區域的意義頁面區域可以用來規劃軟件的功能單元或者軟件的結構。頁面區域可以讓使用者快速地了解軟件的結構。頁面區域方便使用者快速地找到想要的頁面。使用頁面區域考前須知制作軟件原型時要規劃軟件的功能菜單或者欄目結構。頁面的命名要有意義。2.2頁面區域的功能使用頁面區域的功能使用包括兩方面內容。(1)功能菜單的使用。(2)頁面管理。|Q國口▼目index0Pagel國page2國page30Page4頁面的功能菜單檢索頁面：可以按頁面名稱進行頁面區域檢索。當制作的原型比擬大，頁面比擬多的時候，想通過頁面區域找到某個頁面，這口寸可以使用搜索按鈕來搜索頁面。例如想找到“index”頁面，輸入“index”時，就可以把“index”頁面找出來。所以頁面的命名一定要有意義，便于快速地找到想要的頁面。新建頁面：為所選擇的節點頁面創立一個新的同級頁面。如果想給pagel頁面新建一個兄弟頁面，首先選中pagel頁面，然后單擊“新建頁面”按鈕，就可以創立一個同級頁面。新建文件夾：可以為所選擇的節點頁面創立一個新的同級文件夾，文件夾可以把頁面管理起來,如同Windows文件夾一樣，把相關文件放置在一起。除了使用功能菜單來管理頁面，也可以在頁面上使用右鍵菜單項選擇項來管理頁面。添加(A)?移動(M)?刪除(D)剪切⑹復制(O粘貼(P)重命名(R)重復⑹?圖表類型(T)?生成流程圖頁面右鍵菜單項選擇項添加：可以新增頁面之后同級頁面、新增文件夾、新增子頁面以及新增同級頁面；它的使用和功能與菜單上的新增頁面和新增文件夾是一樣的。移動：可以移動頁面，調整頁面的前后順序關系和層級關系，其功能與功能菜單上的移動操作一致。可以實現同等級頁面的順序調整。如果想把page2頁面放置在pagel前面，右鍵單擊page2頁面,在彈出菜單中選擇向上移動命令,就可以調整頁面的前后順序。如果想把pagel頁面放置在page2后面，右鍵單擊page2頁面，在彈出菜單中，選擇向下移動命令，就可以調整頁面的前后順序。可以實現頁面層級降級，如將所選頁面的層級降級排列在上方的原等級頁面的子頁面。如果想把page2頁面作為pagel頁面的子頁面，右鍵單擊page2頁面，在彈出菜單中，選擇降級命令，就可以把page2移到pagel頁面下，作為pagel頁面的子頁面。可以實現頁面層級升級，將所選頁面的層級升級，升級為原父頁面的同等級頁面。如果想把pagel頁面與index頁面同級，右鍵單擊pagel頁面，在彈出菜單中，選擇升級命令，就可以把pagel頁面和index頁面設置成同一個層級。刪除：將所選頁面刪除，同時刪除其子頁面，如果當前頁面下含有子頁面，Axure會自動提示當前頁面有子頁面，單擊提示對話框中的“確認”按鈕后會同時刪除所有子頁面。不想要的頁面或者文件夾可以通過刪除命令來進行刪除。剪切、復制、粘貼：可以對文件夾和頁面進行剪切、復制、粘貼操作。在制作軟件原型時，很多頁面布局或者交互效果會比擬相似，這時就可以通過復制菜單命令來復制頁面或者復制頁面及其分支，然后在該頁面的基礎上進行修改，就可以防止把一樣的東西制作屢次，從而可以減少工作量，提高制作原型的效率。重命名：頁面重新命名的方式有3種。(1)雙擊頁面，可以對頁面進行重新命名。(2)通過右鍵菜單里的重命名命令來重新命。(3)通過快捷鍵F2進行頁面的重新命名。重復：重復包括文件夾重復和分支重復，中選中文件夾或者頁面的時候，使用重復操作可以復制文件夾、頁面或者分支。

圖標類型：通過圖標類型菜單項選擇項可以修改頁面或者流程圖的圖標類型圖標的更改并不會影響頁面的內容，它僅僅是更改一個圖標，便于對頁面的管理。生成流程圖：通過生成流程圖菜單項選擇項，可以生成縱向或者橫向的流程圖，選中index頁面，右鍵在彈出菜單中選擇生成流程圖命令，生成縱向流程圖。縱向流程圖從流程圖可以了解軟件的功能結構以及附屬縱向流程圖從流程圖可以了解軟件的功能結構以及附屬關系，也可以生成橫向的流程圖，可以根據個人需從流程圖可以了解軟件的功能結構以及附屬關系，也可以生成橫向的流程圖，可以根據個人需求來選擇生成流程圖的類型。在頁面區域中，可以通過功能菜單來管理頁面，也可以通過右鍵菜單命令來管理頁面，它們的功能是一致的。2.3實戰從流程圖可以了解軟件的功能結構以及附屬關系，也可以生成橫向的流程圖，可以根據個人需求來選擇生成流程圖的類型。在頁面區域中，可以通過功能菜單來管理頁面，也可以通過右鍵菜單命令來管理頁面，它們的功能是一致的。2.3實戰一一“藍月亮”欄目規劃結合前兩節學習的內容，做一個“藍月亮”欄目的規劃，通過本節內容的練習學會規劃頁面結構，并且進一步加深對頁面區域使用的理解。翻開瀏覽器，搜索藍月亮官網。微課視頻藍月亮官網藍月亮官網“百度”藍月亮官網“百度”欄目規劃詳解解選擇藍月亮官網作為實例，因為它很有代表性。在制作軟件原型時，特別是門戶和應用系統軟件，通常可以將軟件的功能作為導航菜單劃分的依據，即在制作原型的時候可以按導航菜單來建立頁面區域的欄目結構。藍月亮官網可以看作企業門戶的典型代表，它有6個一級菜單，也就是被劃分為6個大的功能模塊。首頁：是很多網站都存在的模塊，展示網站的綜合信息；走進藍月亮：也就是企業介紹，也是必有的一個模塊；清潔之家：用來展示公司產品的，該模塊可以根據實際情況來選擇；如果有產品，可以劃分出產品模塊用來展示產品，如果沒有，可以去掉該模塊；科學洗滌：科普文章發布，可以看作網站的新聞發布，也可以根據實際情況來考慮；人力資源、聯系我們：是很多門戶網站都存在的兩個功能模塊。經過上面分析，在藍月亮官網的頁面區域上需要建立6個一級菜單，在一級菜單下面有二級菜單，并且一級菜單默認顯示的內容是二級菜單的第一個菜單內容。首頁一級菜單沒有二級菜單，就不需要建立子頁面。“走進藍月亮”一級菜單下面，有“關于我們”“企業文化”“社會責任”“藍月亮的世界”，“走進藍月亮”默認顯示的內容是“關于我們”的內容。“清潔之家”一級菜單下面沒有二級菜單，就不需要建立子頁面。“科學洗滌”一級菜單下面沒有二級菜單，就不需要建立子頁面。“人力資源”一級菜單下面有“用人理念”“社會招聘”“校園招聘”“培訓開展”“員工福利”5個二級菜單，“人力資源”默認顯示的內容是“用人理念”的內容。“聯系我們”一級菜單下面有“公司總部信息”“各地辦事處”“訂單物流查詢”“供應商注冊”4個二級菜單，“聯系我們”默認顯示的內容是“公司總部信息”的內容。可以依據二級菜單建立相應的子頁面，但是需要注意，可以使用父頁面來顯示二級菜單的第一個菜單內容，所以第一個菜單不需要建立子頁面，而其他二級菜單需要建立相應的子頁面進行原型設計。下面翻開Axure軟件，開始“藍月亮”欄目規劃設計。(1)將pagel頁面重新命名，命名為“藍月亮"在藍月亮下面建立6個頁面，分別命名為“首頁”“走進藍月亮”“清潔之家”“科學洗滌”“人力資源”“聯系我們”。SBQ0a▼H演完H首頁0走進朝殼S清潔之家E0人源0聯系我們藍月亮一級菜單(2)在“走進藍月亮”頁面新增3個子頁面，可以通過兩種方式新增頁面，一是通過功能菜單,另一種是通過右鍵菜單項選擇項新增頁面，分別命名新增子頁面為“企業文化”“社會責任”“藍月亮的世界”。Q國口▼S盤月亮國首頁▼a走迸魴完s企業文化0社會委任a藍月亮的世界目清潔之家aa人力資源s聯系我們“走進藍月亮”二級菜單(3)在“人力資源”頁面新增4個子頁面，分別將其命名為“社會招聘”“校園招聘”“培訓開展”“員工福利”，可以把暫時不需要展示的子頁面收縮起來。頁面Q出口▼0藍月亮S首頁?0走進盤月完0清潔之家0▼國人力資源0社篦聘0校園招聘E劇?位展0員工福利聯系我們“人力資源”二級菜單(4)在“聯系我們”頁面新增3個子頁面，分別將其命名為“各地辦事處”“訂單物流查詢”“供應商注冊”。頁面Q□□▼0期克0首頁0壬講嘉月亮一0清潔之家00目聯系我們S各地辦事處0訂單物流查詢S供應商注冊“聯系我們”二級菜單

這樣就把藍月亮官網的欄目結構建立完成，然后可以按照各個功能模塊進行原型設計，可以根據欄目結構生成流程圖，從而看出軟件的大致結構以及附屬關系。藍月亮藍月亮官網流程圖（1）了解什么是頁面區域。頁面區域是由功能菜單和頁面兩局部組成，可以通過頁面區域管理軟件的頁面關系。小結（2）通過功能菜單和右鍵菜單項選擇項來管理頁面，包括新增頁面、移動頁面、刪除頁面以及搜索頁面等操作等。小結（3）學會如何規劃軟件欄目結構。~~通過頁面區域規劃“清華大學門戶”網站欄目。練習導航菜單包