Axure网站与App原型设计课件 第2章 用页面区域管理页面

第2章用页面区域管理页面【目录】2.1页面区域2.1.1 页面区域的结构2.1.2页面区域的意义2.1.3使用页面区域的注意事项2.2页面区域的使用方法2.3实战——蓝月亮官网栏目规划2.4小结目录【学习目标】知识目标●了解页面区域的结构、意义及使用注意事项。●掌握页面区域的使用方法。能力目标●掌握新建、删除、移动页面等操作。●可以进行页面层级管理。素质目标●培养自主学习的能力。●培养创造性思维。学习目标【情景引入】页面区域位于AxureRP10的工作界面的左上方，用于管理页面、显示页面，如图2.1所示。本章案例：蓝月亮官网栏目规划效果，如图2.2所示。情景引入图2.1 页面区域图2.2 蓝月亮官网栏目规划效果2.1页面区域2.1.1页面区域的结构页面区域由两部分组成，一部分是按钮，页面区域提供3个按钮；另一部分是页面，呈现树状结构，其与Windows系统中文件存放目录的结构一致。通过页面的父子关系、兄弟关系，把设计的产品页面整合起来，形成产品的文档关系。通过建立页面关系，形成产品文档关系，从而对产品的功能模块、不同栏目进行清晰的展示，这样就可以让开发者和使用者清晰地理解设计者的思路。图2.3 页面区域的结构2.1页面区域2.1.2页面区域的意义页面区域方便使用者快速地找到想要的页面页面区域可以让使用者快速地了解产品的结构页面区域可以用来规划产品的功能单元或者产品的结构2.1页面区域2.1.3使用页面区域的注意事项Part01制作产品原型时要规划产品的功能菜单或者栏目结构制作原型时要规划产品的功能菜单或者栏目结构，不要随意地在页面区域中新建页面，否则容易导致页面结构混乱，看不出产品的结构Part02页面的命名要有意义页面的命名要有意义，这样使用者能够马上知道某个页面的用途。不仅页面命名要有意义，元件命名也要有意义。2.2页面区域的使用方法页面区域的使用方法包括两方面：01按钮的使用方法02页面的管理方法图2.4 页面区域的按钮检索页面：可以按页面名称进行检索。当制作的原型比较大、页面比较多时，想通过页面区域找到某个页面，可以使用“检索页面”按钮来搜索。新建页面：可以为所选择的页面创建一个新的同级页面。如果想给Page1页面新建一个同级页面，则先选择Page1页面，然后单击“新建页面”按钮即可。新建文件夹：可以为所选择的页面创建一个新的同级文件夹。文件夹可以把页面集中起来，和Windows系统的文件夹一样，把相关文件放置在一起。2.3 实战——蓝月亮官网栏目规划打开浏览器，访问蓝月亮官网，如图2.7所示。图2.7 蓝月亮官网首页：很多网站都存在的模块，用于展示网站的综合信息。走进蓝月亮：用于介绍企业，也是必有的一个模块。洁净之家：用于展示企业的产品，该模块可以根据实际情况来设计。如果有产品，可以划分出产品模块；如果没有产品，可以去掉该模块。科学洗涤：发布科普文章，可以将其看作网站的新闻发布模块，也可以根据实际情况来设计。加入我们：发布社会招聘、校园招聘的信息。投资者关系：发布公告、投资者等信息。联系我们：很多门户网站都存在的功能模块。2.3 实战——蓝月亮官网栏目规划经过上面的分析，需在蓝月亮官网的页面区域中建立7个一级菜单。一级菜单下面有二级菜单，并且一级菜单默认显示的内容是第一个二级菜单的内容。“首页”一级菜单没有二级菜单，不需要建立子页面。“走进蓝月亮”一级菜单下面有“关于我们”“企业文化”“企业责任”“新闻动态”4个二级菜单。“洁净之家”一级菜单下面没有二级菜单，不需要建立子页面。“科学洗涤”一级菜单下面没有二级菜单，不需要建立子页面。“加入我们”一级菜单下面没有二级菜单，不需要建立子页面。“投资者关系”一级菜单下面有“信息公告”“企业治理”“投资者联络”“分析师名单”4个二级菜单。“联系我们”一级菜单下面有“总部信息”“供应商注册”两个二级菜单。可以依据二级菜单建立相应的子页面，但是需要注意，可以使用父页面来显示第一个二级菜单的内容，所以第一个二级菜单不需要建立子页面，而其他二级菜单需要建立相应的子页面并进行原型设计。2.3 实战——蓝月亮官网栏目规划下面打开AxureRP10，开始蓝月亮官网栏目的规划。图2.8 “蓝月亮”页面图2.9 “走进蓝月亮”页面图2.10 “投资者关系”页面图图2.11 “联系我们”页面2.3 实战——蓝月亮官网栏目规划图2.12 蓝月亮官网流程图2.4 小结本章主要介绍了页面区域的使用方法，通过页面区域管理页面，读者应当学会以下知识