原型设计大师——Axure站点地图
- 格式：pdf
- 大小：664.48 KB
- 文档页数：9
第2章 Axure站点地图
站点地图呈现树状结构，以主页为树的跟节点，站点地图采用树状结构的优点是可以让我们对我们的产品整体模块和不同栏目、功能单元有一个清晰的认识，采用这种结构也方便对页面进行增加、移动、删除等操作。
站点地图是进行产品原型设计的第一步，通过站点地图可以规划产品的功能模块或者栏目信息，让开发者或者接受者能清晰的了解到产品的基本架构和有哪些功能模块。
比如我们打开百度网站，可以看到有新闻、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 “百度”产品的页面规划
在浏览器里，打开百度搜索网站，可以看到如图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所示。
图2.10 高级搜索栏目升级
2.2.4 删除页面
在进行站点地图页面添加时，有的时候添加页面多或者没有用处的页面，进行页面删除，页面删除的方式有两种，一种是通过功能条进行删除，另一种方式是通过在要删除的节点页面单击右键选择删除进行删除页面，下面对高级搜索栏目页面进行删除以及对设置栏目进行
删除操作，如图2.11所示。
图2.11 高级搜索页面删除
在删除页面过程中，如果当前页面下面有子栏目，在删除的过程中，Axure RP 7.0会给
予删除提示。
2.2.5 生成流程图
站点地图除了新增页面、移动页面、删除页面等页面管理外，站点地图同时提供了生成
流程图功能，流程图对产品的结构有一个清晰的层级关系。
（1）在主根百度一下页面进行单击右键可以看到生成流程图功能，如图2.12所示。
图2.12 生成流程图操作
（2）选择生成流程图功能，可以生成如下栏目结构关系，如图2.13所示。
图2.13 百度搜索网站流程图
通过生成的流程图，可以清晰的看到百度一下网站有哪些栏目以及它们的层级关系。
2.3 小结
本章主要讲述了Axure站点地图的功能按钮的使用，包括新增页面、新增文件夹、升序排列页面、降序排列页面、页面层级升级、页面层级降级以及删除页面等功能按钮的使用，通过在节点页面单击右键也可以完成上述基本功能外，同时可以完成页面、分支的复制以及生成流程图等基本操作。
除了掌握站点地图基本功能使用外，要理解页面规划的重要性，页面规划清晰，产品设计才能有一个清晰思路，让开发者和接受者更能理解设计人员的产品每一个环节设计的目的，通过生成流程图，可以清晰看到产品的功能模块或者栏目之间的关系。
