《AxureRP9网站与App原型设计》教学教案—06用Axure母版减少重复工作.docx
《《AxureRP9网站与App原型设计》教学教案—06用Axure母版减少重复工作.docx》由会员分享,可在线阅读,更多相关《《AxureRP9网站与App原型设计》教学教案—06用Axure母版减少重复工作.docx(23页珍藏版)》请在咨信网上搜索。
1、第6章用Axure母版减少重复工作课时内容用Axure母版减少重复工作课时教学目标掌握母版功能、3种拖放行为,学会蓝月亮导航菜单母版设计教学重点母版功能、3种拖放行为教学难点母版功能、3种拖放行为教学设计1 .教学思路:通过实例引入母版的概念;通过多媒体演示和实机操讲解母版功能;通 过实战熟悉利用母版设计导航菜单的方法。2 .教学手段:多媒体+计算机.教学资料:教材、多媒体课件教学内容Axure母版的使用是为了减少重复的工作,在原型设计过程中,往往会设计很多重复的页面内 容,包括页面的首部、版权信息、导航菜单。这就加大很多工作量,而通过母版,在母版里面只需 要进行一次设计,其他页面可以直接使用
2、母版的内容,并且在母版里修改内容,可以实现所有引用 母版的页面同时更新,也不需要到每个页面里单独修改内容。用母版设计页面重复出现的内容6.1母版功能介名Axure的母版能够重复制作原型某个类似的功能,实现母版制作一次,其他页面进行复用的效E百页E百页回公司介留版权信息西背曷图200修改背景色6.2.3拖放行为为从母版脱离从母版脱离:这种拖放行为会使页面引用的母版与原母版失去联系,页面引用的母版元件 可以像一般元件一样进行编辑,常用于创立具有自定义元件的组合。实战演练(1)在母版区域里新建一个“导航菜单”母版,进入到此母版里,拖曳5个“矩形1”元件到 工作区域作为5个菜单,将其宽度均设置为100
3、,高度均设置为40,分别重命名为“首页”“公司 介绍”“新闻中心”“招贤纳士”“联系我们”。巴 会 1Q 国口口回苜贝国公司介培国新闻中心回招贤纳士彳E联系我的I首页公司介绍新闻中心招贤纳士联系我们望I IIQH D 累叫 画版权信息 国 I导航菜单母版(2)将制作完的“导航菜单”母版,引用到“联系我们”页面里,需要在“导航菜单”母版上, 右键单击,在弹出的快捷菜单中,选择“新增页面”选项,在弹出的“添加母版到页面中”对话框 里设置将母版引用到“联系我们”页面里。X赤加母版到页面中添加。帆章华到以下页: 诩 不法 中子重中子R 回首B 回公耽M8 回新他00 口 回省士 | g 回 n |()
4、幢定为母版中的位置O海定新的位*苣于底层 Aia页面中不包含此卷版时才RM加.说明:此建作无法E.取消母版引用到页面里(3)进入到“联系我们”页面里,可以看到引用的导航菜单内容,默认引用的母版内容是锁定、 不能移动的。如果想修改此母版内容,需要将引用的母版内容变为一般元件,右键单击引用的母版 内容,在弹出的快捷菜单中勾选“脱离母版”选项。概要回首页目公司介蛤回新苗中心回招贤纳土国版权信息四背昌图国导航菜单7Ctt联系会X与39X0B 口设置从母版脱离拖放行为页面内容没有更新6.3实战蓝月亮导航菜单母版设计(4)导航菜单从母版脱离后,导航菜单变为普通元件,可以随意地移动和放置,与母版没有任 何关
5、系,即使修改“导航菜单”母版内容,“联系我们”页面内容也不跟着变化的。进入到“导航 菜单”母版,复制一个导航菜单,将文本内容命名为“留言本”,回到“联系我们”页面里可以看 到,页面内容并没有更新。页H我要QB C3回苜煲日公司介绍国新闻中心回招士国联泵的出版QB D同版权信息国首昱图国导航菜单元件一旦与母版脱离关系,就变为普通的元件,这种方式常用于页面局部区域与母版不同,但 绝大局部与母版一致的情况。这时就可以先引用母版,再脱离母版,最后自定义元件。母版的3种拖放行为,即任何位置的拖放行为、锁定到母版中位置的行为、从母版脱离的拖放 行为,前两种拖放行为会跟着母版的修改而发生变化,而最后一种从母
6、版脱离后就不会随着母版的 修改而发生变化。可以根据具体场合来选择3种拖放行为。在前面的章节中,学习了母版功能的使用、制作母版的2种方式以及母版的3种拖放行为,Axure 的母版区域是一个经常被用到的功能,它可以减少设计原型的工作量,提高工作效率,解决重复制 作原型某个类似功能耗时耗力的问题。下面通过设计蓝月亮导航菜单母版,来看看母版在实际工程 中是如何使用的。蓝月亮门户在页面区域的实例里,我们规划过它的栏目结构,它有6个一级导航菜单,包括首页、走进蓝 月亮、清洁之家、科学洗涤、人力资源、联系我们。首页、清洁之家、科学洗涤下没有二级菜单,走进蓝月亮下面有3个二级菜单:关于我们、企 业文化、社会责
7、任。鼠标悬浮在哪个菜单上面,那个菜单项就会变为选中状态。这是这个二级菜单 需要使用一个垂直菜单元件,并且需要为其添加交互样式:当鼠标悬浮在上面的时候,变为选中状 态。走进蓝月亮二级菜单人力资源一级导航菜单下面有5个二级菜单,包括用人理念、社会招聘、校园招聘、培训开展、 员工福利。人力资源二级菜单联系我们一级导航菜单下面有4个二级菜单,包括公司总部信息、各地办事处、订单物流查询、供应商注册。联系我们二级菜单6.3.1导航菜单母版布局设计(1)在母版区域新建一个母版,将其命名为“导航菜单母版”,翻开“导航菜单母版”,拖曳6 个文本标签元件到工作区域,将其文本内容分别命名为“首页” “走进蓝月亮”“
8、清洁之家”“科学洗 涤”“人力资源”“联系我们”,文本元件也分别命名为“首页” “走进蓝月亮”“清洁之家”“科学洗 涤”“人力资源”“联系我们”。字体颜色为黑灰色(#555555),字号为16号,字体加粗。坐标位置 分别为首页(286, 48)、走进蓝月亮(374, 48)、清洁之家(511, 48)、科学洗涤(631, 48)、人 力资源(752, 48)、联系我们(872, 48)。钱要300400首页走进越月亮清洁之彖人力资源联系我们导航菜单内容(2)制作选中菜单项背景,拖曳一个“矩形1”元件到工作区域,将其宽度设置为107,高度 设置为107,边框设置为无,填充颜色为蓝色(#03328
9、D),置于底层,元件命名为“背景”,作为 导航菜单被选中时的背景图。页BI国首页目走迸演先回清洁之家坦版量导航菜单母版概要B 口柠泡8单母豚x科学洗涤人力资源联系我们I图6.33菜单背景(4)设计走进蓝月亮二级菜单,拖曳一个“矩形1”元件到工作区域,将其坐标位置设为(0,111), 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色(#F3FAFE),去掉矩形边框线;再拖 曳3个文本元件,分别命名为“关于我们”“企业文化”“社会责任”,作为二级菜单;再拖曳两 个竖线,作为二级菜单的分隔符。 口关于我们I企业文化I社会责任47Cft走进蓝月亮二级菜单(5)把走进蓝月亮二级菜单全部选中,然
10、后右键单击,在弹出的快捷菜单中选择“组合”选项, 把走进蓝月亮二级菜单组合命名为“走进蓝月亮二级菜单”,这样方便对走进蓝月亮二级菜单的显 示与隐藏控制。(6)设计人力资源二级菜单,拖曳一个“矩形1”元件到工作区域,将其坐标位置设为(0,111), 宽度设置为1191,高度设置为137,背景颜色设置为浅蓝色(#F3FAFE),去掉矩形边框线;再拖 曳5个“文本标签”元件到工作区域,将其分别命名为“用人理念”“社会招聘”“校园招聘”“培 训开展”“员工福利”作为二级菜单;再拖曳4个“竖线”元件到工作区域,将其作为二级菜单的 分隔符。1300 I400500 I0007008009001000走进蓝
11、月亮滔洁之家科学洗涤人力资源联系我0用人理念I社会招聘I校园招聘I培训开展 I员工福利人力资源二级菜单(7)把人力资源二级菜单全部选中,然后右键单击,在弹出的快捷菜单中选择“组合”选项, 把人力资源二级菜单组合命名为“人力资源二级菜单”,这样方便对人力资源二级菜单的显示与隐 藏控制。(8)设计联系我们二级菜单,拖曳一个“矩形1”元件到工作区域,将其坐标位置(0,111), 宽度1191,高度137,背景颜色设置为浅蓝色(#F3FAFE),去掉矩形边框线;再拖曳3个“文本 标签”元件到工作区域,将其分别命名“关于我们”“企业文化”“社会责任”,作为二级菜单; 再拖曳两个“竖线”元件,作为二级菜单
12、的分隔符。领他单号B X I 页面概要2t100200300- -500600700800900 Q 回百页走进越月亮清洛之家科处条人力资源联系我们望 口导航菜单田需关于我们I企业文化I社会责任羽 联系我们二级菜单(8)把联系我们二级菜单全部选中,然后右键单击,在弹出的快捷菜单中选择“组合”选项, 把联系我们二级菜单组合命名为“联系我们二级菜单”,这样方便对联系我们二级菜单的显示与隐 藏控制。(9)分别右键单击走进蓝月亮二级菜单、人力资源二级菜单以及联系我们二级菜单,在弹出的快捷菜单中设置其为隐藏状态。二级菜单设为隐藏6.3.2网站LOGO和版权信息母版布局设计蓝月亮门户网站的LOGO、页尾信
13、息都可以设计成母版,每个页面都会用到这些内容,这样只 需要在母版设计一次,其他页面可以直接使用相关内容,这样就可以极大地减少工作量。(1)制作网站LOGO的母版,在导航菜单母版里拖曳一个“图片”元件到工作区域,用“log。” 图片替换图片元件,坐标位置为(108,37) o400400走进蓝月亮画导航菜单里版渣网站LOGO因为一个母版只能设置一种拖放行为像导航菜单母版,它的拖放行为设置为锁定到母版中的位 置的拖放行为,而页尾信息母版,它的拖放行为设置为任何位置的拖放行为,因为页面的内容不确 定,所以页尾信息的高度也是不确定的,它可以放置在任何位置。所以接下来需要单独设计页尾信 息母版。(3)在
14、母版区域新建一个“页尾信息母版”,翻开“页尾信息母版”,拖曳一个“图片”元件 到尾部信息母版工作区域,用网站“尾部信息”图片替换图片元件,尾部信息坐标位置为(0,250) oj&a QS 0目首页回走遐筮月亮13 0注,:t出版 E) D 国单今板 页尾信且咫版j&a QS 0目首页回走遐筮月亮13 0注,:t出版 E) D 国单今板 页尾信且咫版Q+ (3 :Default基本元杵页尾信息母版(4)把“导航菜单母版母版引用到页面上,在“导航菜单母版”上右键单击,在弹出的快捷菜单中,单击“新增页面”选项,弹出“添加母版到页面中”对话框,因为各个页面都需要导航菜 单,需要选中所有页面,这时全选按
15、钮就会非常实用,单击全选按钮选中所有页面。A上日 =ai R* ftn, 1 的 HfGnOn4- _ A s ira PP Q Taarr* CHilirvn 口X添加母版到页面中xX Cut Copy Paste口口口 !(=添加导航菜单母版到以下页面:渭全选 三不选 ,选中子项 三取消选中子项共享 目苜页 目苜页蹦:面同概要 目走进盛月亮400匕 门联数我们产|母版中的百O指定新的位置置于底层Q国导航菜单母版画雄信息母版说明:此操作无法撤销。页面中不包含此母版时才能添加.将导航菜单母版引用到页面(5)把页尾信息母版也引用到页面上,在页尾信息母版上右键单击,在弹出的快捷菜单中选择 “新增页
16、面”选项,弹出“添加母版到页面中”对话框,单击全选按钮,选中所有页面。文件(陶楫(祺X Cut。Copy0 Past图片a首页修)导航菜单母板页尾信身母版7tnDefault基本元件,共享+页尾信息母版引用到页面X m 、几、I0r- 口口口 :c L.J L.24d词客服邮这样就可以把导航菜单母版和页尾信息母版引用到页面里,就不需要在每一个页面重新设计内容,防止重复制作内容,大大提高工作效率。6.3.3导航菜单母版交互设计(1)首页、清洁之家、科学洗涤是没有二级菜单的,单击这3个菜单时其背景为选中状态,文 字颜色为白色;走进蓝月亮、人力资源、联系我们这3个菜单是有二级菜单的,单击这3个菜单口
17、寸 其背景为选中状态,文字颜色为白色,同时显示相应的二级菜单。(2)当翻开某个页面时,首页会呈现为选中状态,出现蓝色背景和白色文字,这时就需要添加 页面载入时触发事件,显示菜单被选中时的背景,在“添加动作”面板中选择“移动”,“组织动 作”面板中是指到达位置(249,4),勾选“首页”复选项,在设置动作面板的设置为下拉列表中选 择“富文本”,即文字通过富文本的方式设置为白色。;交互编辑器住报物E翻开蜷接 关闭窗口 隹架中翻开槌接 潦动到元件TtWSOft 显示传藏 设道回板状态设式图片 eae中 设吉列表话中项 启用噤用移动 财 iaa尺寸 置于丽底 设查不透明 获取隹点页面转入时 显示田 显
18、示有男移动昔M到达(249.4)设置文本 百页为首页页面转入时 显示田 显示有男移动昔M到达(249.4)设置文本 百页为首页页面载入时触发事件(3)给首页导航添加鼠标单击时触发事件,拖曳一个“热区”元件到工作区域,将其覆盖在首 页导航上面,为其添加鼠标单击时触发事件,菜单背景移动到达位置(249,4),显示菜单项选择中背景, 通过富文本来设置首页导航文字为白色,其他导航菜单文字为黑色(#555555),隐藏二级菜单。链接动作翻开共关闭窗口框架中翻开链接濠NJ到元件元件动作显示停箴单击时移动背鼠到达(249.4)昱示胸 显示背祟设置文本首更为首页-目标iSSlffl板状态设置图片设置列表选中项
19、启用原用设百文本走进强月壳为“走进5s月壳”粉。为之家“M费源为“人力费索除我们为“KM我们“移动55 迨置尺寸顶层/底层设置不透明获取筐点珍藏走进盒月光二级菜单卷奇人力资源二at菜单年藏联系我们二级菜单x交互编辑器取消首页导航单击事件(4)给走进蓝月亮导航添加鼠标单击时触发事件,拖曳一个“热区”元件到工作区域,将其覆 盖在走进蓝月亮导航上面,为其鼠标单击时触发事件,将菜单背景移动到达位置(361,4),显示菜 单项选择中背景,通过富文本的设置走进蓝月亮导航文字为白色,其他导航菜单文字为黑色(#555555), 显示走进蓝月亮二级菜单,隐藏其他二级菜单。;交互编辑器g添力丽。+添DEWT链接动
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AxureRP9网站与App原型设计 AxureRP9 网站 App 原型 设计 教学 教案 06 Axure 母版 减少 重复 工作
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【二***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【二***】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。