1、第6章 用Axure 母版减少重复工作Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列内 容导 读在原型设计过程中，往往会涉及很多重复的页面内容，包括页面的首部、版权信息、导航菜单等，如果不使用母版，这些页面内容需要重复制作，工作量很大，若使用母版，在母版里面只需要设计一次页面内容，这样其他页面可以直接使用这个母版，在母版里修改，还可以实现所有引用母版的页面同时更新，也不需要再到每个页面里修改内容。 本章案例：百度门户导航菜单母版设计，效果如右图所示。内 容导 航6.1 母版功能介绍6.2 母版3 种拖放行为的使用6.3 实战百度门户导航菜单母版设计6.4 小结4
2、6.1.1 母版的使用Axure 母版区域有一排是母版的功能条，可以新增母版、新增文件夹、调整母版之间的顺序及层级关系、删除母版和检索母版等，和站点地图功能条的使用方法一样，如图所示。5 6.1.2 制作母版的两种方式1、在母版区域里新建一个“导航菜单”母版，进入到这个母版里，拖曳5 个矩形部件，宽度设置为100，高度设置为40，制作首页、公司介绍、新闻中心、招贤纳士、联系我们这5 个菜单，如图所示。1. 通过母版区域新建母版6 6.1.2 制作母版的两种方式2、在站点地图上新建5 个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士”和“联系我们”，用来显示这5 个菜单的内容，如图所
3、示。7 6.1.2 制作母版的两种方式3、将制作完的母版，引用到5 个页面里，需要在母版区域右键单击“导航菜单”母版，选择“新增页面”选项，将母版引用到想引用的页面里，如图所示。8 6.1.2 制作母版的两种方式4、进入“首页”页面里，可以看到将母版的“导航菜单”引用到了首页里，其他页面也一样。假如不想把母版引用到页面里，在“导航菜单”母版上单击鼠标右键，选择从“页面删除”选项即可，也可以直接在首页里将该母版引用删除，如图 所示。9 6.1.2 制作母版的两种方式2. 通过部件转换为母版1、在站点地图上建立一个页面“首页”，进入到“首页”里，同样制作5 个菜单。同时选中这5 个菜单，单击鼠标右
4、键选择“转换为母版”，新母版命名为“导航菜单”即可，如图所示。2、部件转换完母版后，就可以在母版区域里看到转换后的母版“导航菜单” 。内 容导 航6.1 母版功能介绍6.2 母版3 种拖放行为的使用6.3 实战百度门户导航菜单母版设计6.4 小结11 6.2.1 拖放行为为任何位置1、在母版区域新增一个母版，命名为“版权信息”，进入到这个母版里，拖曳一个矩形部件，宽度设置为800，高度设置为100，文本内容为“这是版权信息”，如图所示。12 6.2.1 拖放行为为任何位置2、在站点地图上新建5 个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士”和“联系我们”，用来显示这5 个菜单的
5、内容，如图所示。13 6.2.1 拖放行为为任何位置3、将制作完的母版，引用到“公司介绍”“新闻中心”两个页面里，需要在版权信息母版上，单击鼠标右键，选择新增“页面”选项，将母版引用到想引用的页面，如图所示。14 6.2.1 拖放行为为任何位置4、进入“公司介绍”页面，可以看到“版权信息”的母版引用到了“公司介绍”里，移动引用的版权信息内容，发现无法移动，在母版上单击鼠标右键，将“锁定到母版中的位置”取消勾选，就可以随意移动母版内容了，这就是任何位置的拖放行为，如图所示。15 6.2.1 拖放行为为任何位置5、在“版权信息”母版里修改版权信息，再新增“2015 年”这几个字，回到“公司介绍”“
6、新闻中心”页面里，可以看到引用母版的页面内容也会发生修改，这样当有变更的时候，就不需要到页面里逐个进行修改，只需要在母版里进行修改，引用母版的页面可以自动更新，如图所示。16 6.2.2 拖放行为为锁定到母版中的位置锁定到母版中的位置：母版在引用的页面会处于最底层并被锁定，对母版所做的修改会在所有引用母版的页面同时更新，页面引用母版中的控件位置与母版中的位置相同，这种拖放行为常用于布局和底板。很多网站需要换不同的背景色或者背景图片，使用母版可以进行背景色或者背景图片的切换，这样所有的页面背景都会一起更改。17 6.2.3 拖放行为为从母版脱离1、在母版区域里新建一个“导航菜单”母版，进入这个母
7、版里，同样制作5 个菜单。2、将制作完的“导航菜单”母版，引用到“联系我们”页面里。3、进入“联系我们”页面里，可以看到引用的导航菜单内容，默认引用的母版内容是锁定的，不能移动。如果想修改引用的母版内容，需要将其变为一般部件，在母版内容上单击鼠标右键，勾选“从母版脱离”，如图所示。18 6.2.3 拖放行为为从母版脱离4、导航菜单从母版脱离后，变为普通部件，可以随意地移动和放置，就算“导航菜单”母版内容修改，“联系我们”页面内容也不会随之变化。进入“导航菜单”母版，复制一个导航菜单，文本内容为“留言本”，回到“联系我们”页面可以看到，内容并没有更新，如图所示。内 容导 航6.1 母版功能介绍6
8、.2 母版3 种拖放行为的使用6.3 实战百度门户导航菜单母版设计6.4 小结20 6.3 实战百度门户导航菜单母版设计Axure 的母版是一个经常被用到的功能，它可以减少设计原型的工作量，提高工作效率。下面通过设计百度门户导航菜单母版，来看看母版在实际项目中是如何使用的，如图 所示。21 6.3.1 导航菜单母版布局设计1、在母版区域新建一个母版，命名为“导航菜单母版”。打开“导航菜单母版”，拖曳7 个标签部件到工作区域，文本内容分别为“首页”“百度介绍”“新闻中心”“产品中”“商业中心”“招贤纳士”和“联系我们”。字体颜色为蓝色（0866AD），字号为16，加粗（注意：首页坐标位置（191
9、,110），联系我们坐标的位置（787,110），如图所示。22 6.3.1 导航菜单母版布局设计2、拖曳一个垂直线部件，高度设置为15，颜色设置成灰色（CCCCCC），再复制5 个作为菜单之间的间隔线，同时选中导航菜单和间隔线，让它们横向均匀分布。3、需要制作两个选中菜单背景。拖曳两个自定义形状部件，一个部件宽度为49，高度为25，另一个部件宽度为90，高度为25，边框都设置为无，填充颜色为蓝色（0066FF），不透明度置为20，如图所示。23 6.3.1 导航菜单母版布局设计4、设计“百度介绍”的二级菜单。拖曳一个垂直菜单部件，菜单选项设置为“百度简介”“百度文化”和“百度之路”，标签命名
10、为“百度介绍二级菜单”。5、设计“产品中心”的二级菜单。拖曳一个垂直菜单部件，菜单选项设置为“产品概览”“产品大全”“用户帮助”和“投诉中心”，标签命名为“产品中心二级菜单”，如图所示。24 6.3.1 导航菜单母版布局设计6、设计“商业中心”的二级菜单。拖曳一个垂直菜单部件，菜单选项设置为“商业概览”“百度推广”“营销中心”“互动营销”和“联盟合作”，标签命名为“商业中心二级菜单”。7、设计“招贤纳士”的二级菜单。拖曳一个垂直菜单部件，菜单选项设置为“人才理念”“社会招聘”“校园招聘”和“百度校园”，标签命名为“招贤纳士二级菜单”。8、设计“联系我们”的二级菜单。拖曳一个垂直菜单部件，菜单选
11、项设置为“联系方式”和“参观百度”，标签命名为“联系我们二级菜单”，如图所示。25 6.3.2 网站LOGO 和版权信息母版布局设计1、制作网站LOGO 的母版，拖曳一个图片部件，用LOGO 图片替换图片部件，坐标位置（203,44）。制作站内搜索框的母版。拖曳一个矩形部件到工作区域，坐标位置（915,105），宽度为144，高度为20；拖曳一个图片部件到工作区域，用放大镜图片替换图片部件；拖曳一个文本框（单行）部件到工作区域，坐标位置（1001,106），宽度为118，高度为18。标签命名为“搜索框”，拖曳一个HTML 按钮部件，文本内容为“百度一下”，如图所示。26 6.3.2 网站LOG
12、O 和版权信息母版布局设计2、在母版区域新建一个“页尾信息母版”并打开。拖曳一个图片部件到尾部信息母版工作区域，用网站尾部信息图片替换图片部件，尾部信息坐标位置（0,1000）。3、将“导航菜单母版”引用到页面上。在“导航菜单母版”上单击鼠标右键，选择“新增页面”选项，在弹出的对话框中单击“全选”按钮将所有页面选中，再单击“确定”按钮，如图所示。27 6.3.2 网站LOGO 和版权信息母版布局设计4、将“页尾信息母版”也引用到页面上。在“页尾信息母版”上单击鼠标右键，选择“新增页面”选项，在弹出的对话框中单击“全选”按钮选中所有页面，再单击“确定”按钮即可，如图所示。28 6.3.3 导航菜
13、单母版交互设计1、首先给“百度介绍”的二级菜单添加选中效果。当鼠标悬浮在某个菜单上面的时候，这个菜单项就会变为选中状态。先选中一个菜单项，右键单击打开“设置交互样式”对话框，勾选“填充颜色”，设置填充为灰色（CCCCCC），选择应用到“该菜单及所有子菜单”，如图所示。29 6.3.3 导航菜单母版交互设计2、用同样的方式，给其他二级菜单添加同样的效果，按F5 键发布，可以看到鼠标悬浮到二级菜单上面就会变为选中状态。3、单击一级菜单，比如首页，会进入“首页”页面。添加鼠标单击时触发事件，在当前窗口打开相应的页面，如图所示。30 6.3.3 导航菜单母版交互设计4、当鼠标移到一级菜单的时候，当前菜
14、单的二级菜单将会向下滑动显示出来，而其余的二级菜单将会隐藏起来。先把所有的二级菜单、首页选中背景、菜单选中背景隐藏起来，选中百度介绍的一级菜单，添加鼠标移入时触发事件，向下滑动显示相应的二级菜单，向上滑动隐藏其他的二级菜单。没有二级菜单的一级菜单也要添加这个触发事件，向上滑动隐藏所有的二级菜单，如图所示。31 6.3.4 导航菜单选中背景交互设计1、进入“首页”页面，给它添加页面载入时触发事件，当页面载入的时候，显示首页选中背景。2、进入“百度介绍”页面，给它添加页面载入时触发事件，当页面载入的时候，显示菜单选中背景，如图所示。32 6.3.4 导航菜单选中背景交互设计3、进入“新闻中心”页面
15、，给它添加页面载入时触发事件，当页面载入的时候，显示菜单选中背景，并且移动菜单选中背景到绝对位置（355,106）。4、进入“产品中心”“商业中心”“招贤纳士”和“联系我们”4 个页面，也同样添加页面载入时触发事件，当页面载入的时候，显示菜单选中背景，分别移动菜单选中背景到绝对位置（460,106）、（565,106）、（669,106）、（774,106）。按F5 键发布，就可以看到单击一级导航菜单，进入该页面，该菜单就会变为选中状态，如图所示。内 容导 航6.1 母版功能介绍6.2 母版3 种拖放行为的使用6.3 实战百度门户导航菜单母版设计6.4 小结小结Summary本章主要学习Axure 母版的使用，应当做到以下几点。1学会Axure 母版功能条的使用及母版的基本操作。2 学会制作母版的两种方式。3 学会母版的3 种拖放行为。谢 谢 观 赏Axure RP 原型设计图解微课视频教程互 联 网 职 业 技 能 系 列
