第2章  Axure站点地图
站点地图呈现树状结构，以主页为树的跟节点，站点地图采用树状结构的优点是可以让我们对我们的产品整体模块和不同栏目、功能单元有一个清晰的认识，采用这种结构也方便对页面进行增加、移动、删除等操作。站点地图是进行产品原型设计的第一步，通过站点地图可以规划产品的功能模块或者栏目信息，让开发者或者接受者能清晰的了解到产品的基本架构和有哪些功能模块。比如我们打开www.baidu百度网站，可以看到有新闻、hao123、地图、视频、贴吧等功能模块，在进行百度网站原型设计时，可以把这些功能模块在站点地图里设计，让我们能快速的知道百度网站有哪些功能模块。
本章主要涉及到的知识点有：
❑站点地图功能条：学会站点地图功能条的使用
❑页面管理：学会对站点地图页面的相关操作，包括增加页面、删除页面、移动页面以及对页面的重新命名
❑生成流程图：通过站点地图生成流程图
2.1 关于站点地图
本节首先介绍站点地图的基本概念，理解站点地图的基本功能以及重要性。站点地图是进行原型设计的基础，对站点地图的页面规划，这样才能对产品设计有一个清晰的思路。
2.1.1 什么是站点地图
首先打开安装好的Axure RP 7.0原型设计工具，在左侧有一块站点地图区域，图2.1红线圈内的区域就是站点地图，那么究竟什么是站点地图？站点地图又能干什么呢？在使用站点地图又应该注意哪些问题呢？带着这三个问题，走进站点地图区域。
站点地图区域是由两部分组成，一部分是功能条，是对页面操作的按钮，另一部分是树状结构的页面，采用的和Windows（用官方标准大小写）目录结构一致，通过父与子的页面关系，兄弟和兄弟的页面关系，就这样把要设计的产品页面关系整合起来，形成产品的文档关系。通过建立站点地图，形成产品文档关系，对产品的功能模块、不同栏目有一个清晰的认识，清楚文件关系与位置，这样让开发者和接受者能清晰的理解设计者的思路。
刚开始工作的时候，发现很多刚毕业的朋友在使用Axure进行原型设计时，对文档的命名与位置摆放都是随心所欲，想到哪就做到哪。我也不例外，没有好的文档结构规划，没有好的整理习惯。这样做的后果是每次寻以前的文档都需要花费很长时间，甚至误删了文档也不知道，也导致开发者不能理解设计者的思路。
图2.1 Axure RP 7.0操作界面
2.1.2 站点地图的功能条
上文提到站点地图由两部分组成，其中一部分就是功能条，如图2.2红线圈区域所示。页面设计用什么软件做
图2.2 站点地图功能条
：为所选择的节点页面创建一个新的同级页面。
：可以为所选择的节点页面创建一个新的同级文件夹，文件夹可以把页面管理起来，如同Windows文件夹一样，把相关文件放置在一起。
：可以实现同等级的页面中，将所选页面的上移一个位置，调整页面的排序。
：可以实现同等级的页面中，将所选页面的下移一个位置，调整页面的排序。
面上方之页面的子页面。
：可以实现页面层级升级，将所选页面的层级升级，升级为父页面的同等级页面。
：将所选页面删除，同时删除其子页面，如果当前页面下含有子页面，Axure会自动提示当前页面有子页面，单击提示中的“确认”后会同时删除所有子页面，同时也可以在所选页面进行单击右键，删除当前街道页面。
：
可以检索出站点地图的页面。
2.1.3 站点地图的页面管理
页面管理主要是对页面进行添加页面、删除页面、重命名页面、调整层级页面、调整顺序页面进行管理，添加页面、删除页面、调整层级页面、调整顺序页面操作可以通过功能条或者单击右键进行完成。重命名页面有三种方式：
❑一是双击当前节点页面进行页面重命名；
❑二是在当前页面上单击右键进行页面重命名；
❑三是通过F2进行页面重命名。
除了这些基本操作外，还有几个比较好用的功能菜单。在当前节点页面单击右键，可以看到有复制功能，这个复制功能可以复制页面，还可以复制分支，当有一些页面或者分支页面有很多类似之处，我们又不想重新做一遍，那这个复制页面或者复制分支就起很大作用。除了复制功能还有一个生成流程图功能，通过当前的文档结构，可以生成横向或者纵向的流程图结构。
2.2 实战：一起动手来做一个“百度”的原型UI
我们都比较熟悉百度搜索网站，下面我们一起动手做一个“百度”的站点地图的原型，这个实战是对百度搜索网站进行站点地图的设计、页面的规划，以及对页面的基本操作，通过这个实战演示，我们应该掌握，在进行站点地图使用时，先进行功能模块或者栏目的规划，规划完成后进行功能模块页面的添加、移动或者删除等相关操作。
2.2.1 “百度”产品的页面规划
在浏览器里，打开百度搜索网站www.baidu，可以看到如图2.3页面：
图2.3 百度搜索网站
在百度搜索网站页面右上角，图2.4红圈在里面的就是百度搜索网站的功能模块，可以分为新闻、hao123、地图、视频、贴吧、登录、设置、更多产品八个栏目，并且它们是同级栏目，需要建立这八个同级栏目页面。单击设置栏目，它下面又出现搜索设置、高级搜索、关闭预测、搜索历史、意见反馈五个子栏目，需要在设置这个页面下面建立五个子栏目页面。
图2.4 百度搜索网站-单击设置栏目
2.2.2 增加页面
通过页面规划，已经知道建立哪些栏目页面以及子页面，下面打开AxureRP 7.0原型设计软件进行实际操作。
（1）打开原型设计软件后，首先单击左上角文件，右键把文件另存为“百度一下”，之后对主根进行重命名，单击右键进行重命名，命名为百度一下，如图2.5所示。
图2.5 主根重命名为百度一下
（2）通过页面规划，需要建立八个栏目页面，以及设置栏目下面的五个栏目页面。通过功能条进行页面添加，首先在主根百度一下页面下面添加八个栏目页面，在页面Page1上单击功能条上新增页面按钮，新增页面如图2.6所示。
图2.6 添加八个栏目页面
（3）在主根下面添加完八个页面后，将这八个页面进行重新命名，重新命名的方式有三种，一是双击某个节点页面重新命名，二是在某个节点页面上单击右键重新命名，三是在某个节点页面F2重新命名，栏目页面分别命名为：新闻、hao123、地图、视频、贴吧、登
录、设置、更多产品，这三种方式我们都可以尝试一下，如图2.7所示。
图2.7 重新命名八个栏目页面
（4）通过同样的方式在设置栏目下面添加五个栏目页面，并重新命名为：搜索设置、
高级搜索、关闭预测、搜索历史、意见反馈，如图2.8所示。
图2.8 新增设置栏目下面的页面
2.2.3 移动页面
移动页面可以将页面进行升序和降序排列以及页面层级的升级和降级操作，下面对设置
栏目页面进行升序排列，排列到同层级页面的第一位置，如图2.9所示。
图2.9 设置栏目升序排列
设置栏目下面有高级搜索栏目，把高级搜索栏目的层级升高一位，让它与搜索栏目同层
级，如图2.10所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。