《AxureRP9网站与App原型设计》教学教案—04用Axure动态面板制作动态效果.docx
《《AxureRP9网站与App原型设计》教学教案—04用Axure动态面板制作动态效果.docx》由会员分享,可在线阅读,更多相关《《AxureRP9网站与App原型设计》教学教案—04用Axure动态面板制作动态效果.docx(37页珍藏版)》请在咨信网上搜索。
1、第4章用Axure动态面板制作动态效果课时内容课时内容用Axure动态面板制作动态效果课时 6教学目标掌握动态面板、动态面板常用功能,学会制作淘宝登录页签的切换效果教学重点动态面板常用功能教学难点动态面板常用功能】.教学思路:通过实例引入动态面板的概念;通过多媒体演示和实机操讲解动态面版教学设计的常用功能;通过实战实现登录页面切换效果。2 .教学手段:多媒体+计算机3 .教学资料:教材、多媒体课件动态面板模拟海报轮播效果教学内容-动态面板元件是一个动态的、由面板组成的元件。它可以让原型呈现动态的效果,而不是沉闷 的静态页面,并且它能实现软件的高级交互效果。动态面板元件是Axure模拟很多动态效
2、果的主要工具,如要模拟淘宝的广告轮播,可以将几张 图摞在一起,轮流移动到最上面来显示,单击一个圈,就把对应的图,移动到最上面。4.1动态面板的使用动态面板元件里包含多种状态,可以把动态面板理解为装载这些状态的容器。我们在上学的时候,经常把作业本摞成一摞,只能看到最上面一本的封面。这一摞作也本就是 动态面板,每本作业就是动态面板中的一个状态,只有最上面的一个状态是可见的,其他状态都是 隐藏的。动态面板的图标形象地表达动态面板元件的功能。动态面板的显示内容也会发生变化,除了这种方式外,也可以在要移动的状态上鼠标右键单击,在 弹出的快捷菜单里选择向上移动或向下移动命令,把“小刚的作业本”状态移动到第
3、一个位置。调整状态顺序(7)鼠标右键单击要删除的动态面板状态,在弹出的快捷菜单中单击“删除”命令可以删除状 态。510微签Q回 Pagel T作业本匚;小虎的作业本4g8分匚业本小t际汾匚;小红的作业本 adH!90匚:,网的作业本小虎98分删除状态(8)漏斗一样的按钮图标,被称为元件过滤器。单击元件过滤器按钮,会弹出很多项选择项,它是 用来设置元件管理区域的显示情况,默认勾选了 3个选项。P“ 1 X4。.110Q .一 I , 一岬 至部元件加面板母版动态面板或母板具有名褥 具有脚注 显示或总藏砺 百顶层至底层排序 底层至I页诩序元件过滤器(9)勾选“母版”选项,会发现刚才显示的动态面板被
4、隐藏起来;单击勾选“动态面板”选项,元件管理区域就会把动态面板的内容显示需来。该元件过源器可以根据自己的需求,来设置显示什 么、不显示什么。1 小。小虎98分只显示母版(10)放大镜按钮可以进行检索操作。100小虎98分3004004001002003008收缩、隐藏动态面板回隐竭态面板目 P9l题TR作业本收缩动态面板元件检索(II)可以把动态面板的状态收缩起来,也可以展现出来。还可以把动态面板从视图中隐藏起 来,在设计的时候,也经常会用到此功能,如图4.32所示。51H4.2动态面板的常用功能动态面板有8个常用的功能:动态面板的显示与隐藏效果、动态面板的调整大小以适合内容、 动态面板的滚动
5、栏设置、动态面板的固定到浏览器、100%宽度、从动态面板脱离、转换为母版、转 换为动态面板,这些常用功能是制作原型过程中不可缺少的8个功能。4.2.1 动态面板的显示与隐藏效果动态面板的显示与隐藏效果:通过动态面板的显示与隐藏效果的切换,完成动态的交互效果。实战演练(1)先保存当前工程,将Pagel页面重新命名为“动态面板的常用功能”,添加子页面并将其 命名为“显示与隐藏效果”。x丽Q0,S初恋面板的常用功能0显示与隐藏效果页面命名(2)进入到“显示与隐藏效果”子页面,拖曳两个“按钮”元件到工作区域,将其分别命名为 “显示”和“隐藏”,拖曳一个动态面板元件,其名称为“显示与隐藏,把Slaiel
6、重新命名为“内 容”。拖曳提交按钮和动态面板元件(3)编辑“内容”状态,拖曳一个“矩形1”元件,编辑其文本内容为“我是显示与隐藏效果 页面内容”,回到“显示与隐藏效果”页面。日丽面方的堂用功总 E旦示与aca果王Q+ (5 IDefault0律,:r-图4.35编辑动态面板状态内容(4)选中“显示”按钮之后,在检视区域的交互面板里,为“显示”按钮设置“单击时,设置 可见性”触发事件。(5)单击交互面板右下角的交互按钮,会弹出交互编辑器对话框,其中包括添加事件、添加动 作、组织动作、设置动作4个操作面板,对话框中每个面板的区域都划分得很清楚,4个操作面板 共同完成交互效果的设置交互按钮交互按钮x
7、交互编辑器 60”,电皿箱献词在EQ页画就入町选舞交互始触r交互.尺寸改知T口源加.口向上凄动的口向下读动时员面&区右击町 至ate就加页*掖下町日遇应视出交互编辑器对话框(6)在添加动作面板中,单击显示/隐藏选项,在组织动作面板里可以看到新增的动作。在添 加动作面板里可以新增多个动作,当有多个动作时,它是按顺序执行的,从上向下依次执行,鼠标 右键单击动作可以调整动作的顺序以及删除动作,下面选择动态面板的显示与隐藏元件。电娱动作X交互编陵器x设剧B片设H送中设羞列裳选手项 启用篌用徐幼百 设尺寸 置于陪防我取焦三单击显示与隐藏动作(7)在设置动作面板里可以配置动作,单击“显示”单项选择按钮,制
8、作过PPT演示文档的都知 道,PPT演示文档里某个文字或者某个图片可以设置淡入淡出或者其他各种效果,在这里也可以设 置动画效果,在动画下拉列表选择“逐渐”效果,时间选择500亳秒。Q显示与隐荻效果今 C 127.0.0.1:32767/s- ft :Local Preview我是显示与题载改果页面内容发布原型4.2.2 动态面板的调整大小以适合内容Axure会根据内容的大小而进行自动调整动态面板的大小,从而让内容完全显示出来。实战演练(1)新建页面并重命名为“调整大小以适合内容”,翻开该页面,拖曳一个“动态面板”元件 到工作区域。Default33新增页面与动态面板页面回艇面忸的常用功能臼显示
9、与幽累目整大小以适合内容(2)双击动态面板,将动态面板的名称命名为“调整大小以适合内容”。动态面板和状态命名(3)双击动态面板进入动态面板编辑区域,把Statel面板状态重新命名为“内容”,拖曳一个 “矩形1”到工作区域元件,文本内容为“我是动态面板的内容,超出动态面板的显示区域”,调 整矩形元件大小,使其超出显示区域。编辑面板状态内容(4)回到动态面板的页面,动态面板里的内容没有被完全显示出来,在动态面板上右键单击, 在弹出的快捷菜单中选择“自适应内容”命令,会发现超出动态面板的显示区域将会被显示起来, 动态面板的大小与状态里的内容大小一致。没有完全显示出来完全显示出来动态面板的自适应内容的
10、功能会根据状态里的内容调整动态面板的大小,不用担忧超出动态面板的显示区域会被隐藏起来。4.2.3 动态面板的滚动栏设置动态面板的滚动栏设置是可以让动态面板出现横向滚动栏或者纵向滚动栏,这样可以让内容完 全展现出来。在安装软件的时候,软件经常要求用户同意软件许可协议,由于在安装页面无法完全 展示出协议的内容,通常会在窗口右侧或者下面设置滚动栏,可以在动态面板通过滚动栏设置可以 实现这样的效果。制 。 I . 3 IVMWARE最t?用户许可协议器巍藉爵器皤超犒履.出现咻条布的本软件的使怎一B下就、安装或使用本软件,S (自僧人或法 人)知网包接受本最终用户许可协议 -stbft- 条款的旧家如果
11、等不 向意本办或的条款谓勿下效、安装或使用本软件.且您必笈*除本软花, 或在三+ (30)天内将来使用的本软件遇还始岱向买本收件的他(南井目 要求退还念己为本软件支付的许可费(如果*)安装协议实战演练(1)新建页面并将其命名为“滚动栏设置”,翻开此页面,拖曳一个“动态面板”元件到工作 区域,将其名称修改为“滚动栏设置”,状态命名为“内容”。页HQ日口国显示与侬般课 回调!g大小以适合内容 S谖动栏iSB元件母板Q+ & :DefaultC文,5文礴水平线页面和动态面板命名(2)进入到“内容”状态里,拖曳一个“文本段落”元件到工作区域,调整文本段落元件的大 小。图010020038港动栏设置 内
12、容 用曲e |关闭xLorem ipsum dolor sit amet, consectetuir adiptscing elrt. Aenean euismod bibendum laoreet: Proin gravida dolor sit amet lac us accumsan et vivena justo commodo Proin sodales pulvinar sic tempor Socns natoque penabbus et magnis dis partunent monies, nascetur ridiculus mus Nam fecmentum, nul
13、la luctus pharetra vdputate. fdis tdlus mollis orci, sed rboncus pronin sapten nunc accuan eget.编辑状态内容(3)回到动态面板的页面里,右键单击动态面板,在弹出的快捷菜单中选择“滚动条”命令, 在子菜单里选择滚动条的显示方式,这里提供4种显示方式,从不滚动、按需滚动、垂直滚动以及 水平滚动,在这里选择按需滚动。自动显示滚动条(4)发布设计可以看到通过滚动条,文本内容能够显示完整。lol叵)|区ID凝珑ISEx + C 127.0.0. l:32767/s- 甑x 三Local Preview 国 (
14、T :Lorem ipsum dolor srt amet. consech eht Aenean euismod bibendum laore gravida dolor sit amet lac us accums justo commodo Pran sod ales pulvin Sociis natoque penatibus el magnis( 发布原型动态面板的固定到浏览器小明的作业本 小刚的作业本 小虎的作业本小明的作业本 小刚的作业本 小虎的作业本状态(State) 1二2A状态(State) 2海面-状态(state) 3作业本和动态面板图标下面就以学生作业本为例,来学习
15、动态面板的使用。4.1.1 创立动态面板并命名实战演练页面40cg P*giDefault100200300翻开Axurc RP 9软件,将工程保存并命名为“动态面板演示操作”,拖戋一个“动态面 板”到工作区域。拖曳动态面板(2)在检视区域的说明面板输入动态面板的名称“一摞作业本”,这样方便完成对动态面板元 件的查找。叵PF1Default1003008WB一摞作业本tit动态面板名称4.1.2 编辑动态面板状态实战演练动态面板的固定到浏览器功能效果很常见。大家都有过这样的经历,在访问某个网站的时候, 网站内容很多,页面很长,但是某个区域一直在页面中显示,就像悬浮在页面。有的时候是右侧放 一个
16、QQ头像,可以随时单击聊天,或者某个通知的消息一直悬浮,或者是一个向上的箭头或者向 下的箭头,通过单击箭头可以直接到达页面的顶部或者尾部。实战演练(1)新建页面并将其重命名为“固定到浏览器”,拖曳一个“矩形3”元件到工作区域,将其 文本内容命名为“我是顶部信息”,将矩形的X、丫坐标值设置为(0,0),宽度设置为700。X I EI 。c动态面板演示操作AxureRP 9 Team Edition :已授权一 口又停( 胭指( Wffi (工程” 布面 左福呼人 愚号( 然助(SBTQ100%0 -M 共享sift:级:D:二包回q 0 n j厚/Q-E动态面板的常用功能0显示与鞫庙说课:调生大
17、小以造台内后回滋丽以|回国定押M刑as母题Default顶部信息(2)再拖曳一个“矩形3”元件到工作区域,将其文本内容命名为“我是尾部信息”,它的X、 Y坐标值设置为(0,1000),宽度设置为700。尾部信息(3)拖曳一个“动态面板”元件到工作区域,将其名称修改为“固定到浏览器”,修改状态名 称为“qq”,拖曳一个图片元件,插入一个企鹅qq的图片。100皿刽MBS编辑状态内容(4)回到动态面板的页面,在动态面板上右健单击,在弹出的快捷菜单中选择“固定到浏览器” 命令,弹出“固定到浏览器”对话框,勾选“固定到浏览器窗口 ”复选框,分别单击“右侧”和“中 部”单项选择项设置横向固定的位置和纵向固
18、定的位置,也可以设置边距,固定的位置可以根据实际需 求来选择。设置固定到浏览器(5)发布设计会发现页面随滚动条上下滚动,而企鹅的图标始终固定,此功能应用地也比拟多。区 IDx + C 127.0.0.1:32767 start. htaiaid=2aMdp=S!K3Ac=l ioomM x B0MBS x编辑状态内容发布原型4.2.5 100% 宽度100%宽度,当设置的状态内容超出动态面板显示的区域,超出的内容将不会被显示出来,但是 当设置100%宽度时,超出的内容也会被显示出来。实战演练(1)新增一个页面,将其命名“100%宽度”,拖曳一个“动态面板”元件到工作区域,将其 输入面板的名称为
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AxureRP9网站与App原型设计 AxureRP9 网站 App 原型 设计 教学 教案 04 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。
链接地址:https://www.zixin.com.cn/doc/4571643.html