《AxureRP9网站与App原型设计》教学教案—02用页面区域管理页面.docx

第2章用页面区域管理页面
课时
课时内容用页面区域管理页面 教学目标 掌握页面区域、页面区域功能，学会规划软件栏目结构教学内容
教学重点
页面区域功能
教学难点
页面区域功能
1.教学思路：通过实例引出页面区域的概念；通过多媒体演示和实机操作讲解页面区
教学设计
域功能；通过实战介绍网页栏目规划的方法。
2 .教学手段：多媒体+计算机
3 .教学资料：教材\多媒体课件

页面区域位于软件界面的左上方，是用来管理页面、显示页面的区域。
官理软件页面关系
软件的骨架，清晰展示软件的结构
原型设计-Axure RP 9 Team Edition :已授权
X I B O
文件（…祝良（…助目（…布局（…发布（… 0UA （- 喙号（…华助（…
X Cut 廿 Copy 0 Paste
西回年 田，
管理页面层级
2.1页面区域页面区域的定义
页面区域由两局部组成，一局部是对页面的一些操作按钮，页面区域提供3个操作按钮，页面 右键选项里提供更多操作按钮，称之为功能菜单；另一局部是页面，呈现树状结构，其与Windows 系统文件存放目录结构相一致，通过父与子的页面关系，兄弟和兄弟的页面关系，把设计的产品页 面关系整合起来，形成产品的文档关系。
页面Q0 D
卜国2~I功能菜单目 pagel
0 page2S Page3
S Page4页面
页面区域的结构和功能页面区域的意义
(1) 页面区域可以用来规划软件的功能单元或者软件的结构。
(2) 页面区域可以让使用者快速地了解软件的结构。
(3) 页面区域方便使用者快速地找到想要的页面。
2.1.2 使用页面区域考前须知制作软件原型时要规划软件的功能菜单或者栏目结构。
(1) 页面的命名要有意义。
2.2页面区域的功能使用
页面区域的功能使用包括两方面内容。
(1)功能菜单的使用。
(2)页面管理。
| Q国 口
▼目 index0 Pagel
国 page2国 page3
0 Page4页面的功能菜单
检索页面：可以按页面名称进行页面区域检索。
当制作的原型比拟大，页面比拟多的时候，想通过页面区域找到某个页面，这口寸可以使用搜索 按钮来搜索页面。例如想找到“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实战一一“蓝月亮”栏目规划
结合前两节学习的内容，做一个“蓝月亮”栏目的规划，通过本节内容的练习学会规划 页面结构，并且进一步加深对页面区域使用的理解。
翻开浏览器，搜索蓝月亮官网。
微课视频
蓝月亮官网

蓝月亮官网
“百度”栏目
规划详解解

选择蓝月亮官网作为实例，因为它很有代表性。在制作软件原型时，特别是门户和应用系统软 件，通常可以将软件的功能作为导航菜单划分的依据，即在制作原型的时候可以按导航菜单来建立 页面区域的栏目结构。
蓝月亮官网可以看作企业门户的典型代表，它有6个一级菜单，也就是被划分为6个大的功能 模块。
• 首页：是很多网站都存在的模块，展示网站的综合信息；
• 走进蓝月亮：也就是企业介绍，也是必有的一个模块；
• 清洁之家：用来展示公司产品的，该模块可以根据实际情况来选择；如果有产品，可以划 分出产品模块用来展示产品，如果没有，可以去掉该模块；
• 科学洗涤：科普文章发布，可以看作网站的新闻发布，也可以根据实际情况来考虑；
• 人力资源、联系我们：是很多门户网站都存在的两个功能模块。
经过上面分析，在蓝月亮官网的页面区域上需要建立6个一级菜单，在一级菜单下面有二级菜 单，并且一级菜单默认显示的内容是二级菜单的第一个菜单内容。
• 首页一级菜单没有二级菜单，就不需要建立子页面。
• “走进蓝月亮”一级菜单下面，有“关于我们”“企业文化”“社会责任”“蓝月亮的世 界”，“走进蓝月亮”默认显示的内容是“关于我们”的内容。
• “清洁之家” 一级菜单下面没有二级菜单，就不需要建立子页面。
• “科学洗涤” 一级菜单下面没有二级菜单，就不需要建立子页面。
• “人力资源” 一级菜单下面有“用人理念”“社会招聘”“校园招聘”“培训开展”“员 工福利” 5个二级菜单，“人力资源”默认显示的内容是“用人理念”的内容。
• “联系我们” 一级菜单下面有“公司总部信息” “各地办事处”“订单物流查询” “供应 商注册” 4个二级菜单，“联系我们”默认显示的内容是“公司总部信息”的内容。
可以依据二级菜单建立相应的子页面，但是需要注意，可以使用父页面来显示二级菜单的第一 个菜单内容，所以第一个菜单不需要建立子页面，而其他二级菜单需要建立相应的子页面进行原型 设计。
下面翻开Axure软件，开始“蓝月亮”栏目规划设计。
(1)将pagel页面重新命名，命名为“蓝月亮"在蓝月亮下面建立6个页面，分别命名为“首 页” “走进蓝月亮”“清洁之家”“科学洗涤”“人力资源”“联系我们”。
SBQ0 a
▼ 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）学会如何规划软件栏目结构。
~~通过页面区域规划“清华大学门户”网站栏目。
练习
导航菜单包括首页、清华新闻、学校概况（校长致辞、学校沿革、历任领导、现 任领导、组织机构、统计资料）、院系设置、师资队伍、教育教学（本科生教育、研究 生教育、留学生教育、继续教育）、科学研究（科研工程、科研机构、科研合作、科研 成果与知识产权、学术交流）、招生就业（本科生招生、研究生招生、留学生招生、学 生职业开展）、人才招聘（招聘计划、招聘信息、我要应聘）、图书馆、走进清华（校 园生活、校园风光、实用信息）。
注意：括号里的是当前菜单的二级菜单。