原型设计简明图解案例教程-PPT第10章.pptx

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,第,10,章 用,Axure,变量,制作丰富,交互效果,Axure,RP,原型,设计图解微课视频教程,互联网 职业技能系列,极客学院,Axure,不仅可以用于网站原型的制作，同时也可以制作移动,App,的软件原型。下面综合,应用,Axure,的知识，利用,Axure,来进行猫眼电影,App,的低保真原型,设计,如下,图所示。,10.1,需求,描述,10.2,设计,思路,10.3,准备,工作,10.4,设计流程,10.5,小结,10.1,需求描述,1,利用,Axure,的母版功能绘制猫眼电影,App,的底部标签导航。,2,绘制,“电影”模块的热映内容界面布局。,3,绘制,“电影”模块的待映内容界面布局。,4,绘制,“电影”模块的榜单内容界面布局。,5,制作,猫眼电影,App,海报轮播效果。,6,制作,猫眼电影,App,页签切换效果。,7,制作猫眼电影,App,的“电影”模块界面内容上下滑动效果。,8,制作,猫眼电影,App,的“预告片推荐”界面内容左右滑动效果。,10.1,需求描述,10.2,设计,思路,10.3,准备,工作,10.4,设计流程,10.5,小结,10.2,设计思路,1,2,3,4,5,在进行页面布局时，需要用到标签部件、矩形部件、文本框（单行）部件、横线部件、,图片,部件、动态面板部件等。,在设计底部标签导航时，需要将它设计成母版，这样在页面里可以直接使用，避免重复,制作,和重复添加交互效果。,海报轮播效果制作需要借助于动态面板的状态自动切换效果进行,设置,。,页签切换效果需要使用图像热区部件作为页签触发的锚点，使用动态面板显示多种状态,内容,；通过添加鼠标单击时触发事件，进行面板状态的设置。,界面内容上下滑动效果和左右滑动效果，需要使用两个动态面板部件，一个用来外层,控制显示,区域，另一个用来添加拖动效果。,10.1,需求描述,10.2,设计思路,10.3,准备,工作,10.4,设计流程,10.5,小结,10.3,准备工作,进行低保真原型设计，不要使用截图或者过多的彩色，最好使用黑白灰,3,种颜色。交互,设计师或者,产品经理在制作完低保真原型后，交给视觉设计师（,UI,设计师或者美工）来进行界面的设计,，他们,会制作界面图片，并且切图。,由于要以,iPhone 6,手机背景作为原型的背景图，所以需要绘制,iPhone 6,手机背景或者载入,iPhone6,手机背景部件库，这样绘制出的原型，可以模拟出用户在手机上最真实的软件操作效果。,10.1,需求描述,10.2,设计思路,10.3,准备工作,10.4,设计流程,10.5,小结,10.4.1,底部标签导航母版设计,1,、在母版区域里新建一个母版“标签导航”,，打开,这个母版；在,mylib,部件库拖曳一个,iPhone 6,手机背景,部件，作为,App,软件的背景。,2,、拖曳一个矩形部件，,宽为,373,，,高为,63,，,颜色为,灰色（,E4E4E4,），作为标签,导航背景,；拖曳,4,个图片部件，,宽、高设置,为,30,，作为,菜单图标；再拖曳,4,个标签部件，文本内容,命名为,“电影”“影院”,“发现”“我的”,，,字号为,11,号，,标签命名,为“电影”“影院”“发现”,和“我的”,，如,图所,示。,10.4.1,底部标签导航母版设计,3,、在站点地图上建立,4,个页面“电影”“影院”“发现”和“我的”，拖曳一个图像热区,部件放置,在“电影”标签,上，宽为,60,，,高为,58,，给它添加鼠标单击时触发事件，在,当前窗口,打开“电影”页面。,4,、给“电影”“发现”和“我的”标签上面分别拖曳一个图像热区部件，给它们添加鼠标,单击,时触发事件，在当前窗口打开相应页面，如,图所,示。,10.4.1,底部标签导航母版设计,5,、将标签导航母版通过新增页面的方式引用到“电影”“影院”“发现”和“我的”,4,个,页面,。,6,、进入“电影”页面，添加页面载入时触发事件，通过富文本的方式设置“电影”文本,内容,，字体颜色为红色（,FF0000,），该标签导航菜单呈现为选中状态，运用同样的方式给其他,3,个,标签导航,设置为选中状态，如,图所,示。,10.4.2“,电影”界面布局设计,1,、进入“电影”界面，拖曳一个动态面板部件，宽度设置为,373,，,高度设置,为,45,，动态面板名称为“电影模块状态栏”，建立,3,个状态“热映”,“待映”,和“榜单”，如,图所,示。,1.,界面状态栏设计,10.4.2“,电影”界面布局设计,2,、进入“热映”状态，拖曳一个矩形部件，宽度设置为,373,，高度设置为,45,，颜色填充为,灰色（,999999,），作为状态栏背景；拖曳一个标签部件，文本内容命名为“北京”，字体颜色设置为,白色,（,FFFFFF,），拖曳两个横线部件，颜色设置成白色（,FFFFFF,），通过调整横线部件角度来制作,一个,向下的箭头，如,图所,示。,10.4.2“,电影”界面布局设计,3,、拖曳一个矩形部件，,宽为,162,，,高为,25,，,颜色为,灰色（,666666,），,作为页,签背景；拖曳,3,个标签部件，文本内容分别命名为“热映”“待映”和“榜单”，字体为,白色（,FFFFFF,），,11,号字，作为页签名称；拖曳一个矩形部件，,宽为,60,，,高为,25,，,颜色为,灰色（,333333,），放置在“热映”页签下面，作为选中背景，如,图所,示。,10.4.2“,电影”界面布局设计,4,、拖曳一个矩形部件，调整形状为椭圆形，宽度和高度为,25,，边框颜色设置为,白色（,FFFFFF,），再拖曳一个横线部件，边框颜色设置为白色（,FFFFFF,），作为放大镜手柄。,5,、全选所有内容，将这些内容复制到“待映”状态里，修改“待映”,页签为,选中,状态。,6,、全选所有内容，将这些内容复制到“榜单”状态里，修改“榜单”页签为选中状态，如图所示。,2.,热映内容界面布局设计,1,、拖曳一个动态面板部件，宽度设置为,373,，高度设置为,531,，动态面板的名称为“电影屏幕,显示,区”，状态为“电影内容”。进入“电影内容”状态，拖曳一个动态面板部件，宽度设置为,373,，高度,设置为,920,，动态面板的名称为“电影内容显示区”，建立,3,个状态为“热映内容”,“待映内容”,和“榜单内容”，如,图所,示。,2.,热映内容界面布局设计,2,、,进入“热映内容”状态，拖曳一个动态面板部件，宽度设置为,373,，高度设置为,80,，,动态面,板的名称为“海报轮播显示区”，建立,3,个状态为“状态,1”“,状态,2”,和“状态,3”,。在这,3,个状态,里，分别拖曳一个占位符部件，宽度设置为,373,，高度设置为,80,，文本内容分别命名为,“海报,1,”“,海报,2”,和“海报,3”,，,如,图所,示。,2.,热映内容界面布局设计,3,、接下来设计“电影列表”。用图片部件代替电影海报，,宽为,60,，,高为,75,；,“电影名称”,“评分”和“想看”字体加粗，突出显示；拖曳一个矩形部件，,宽为,50,，,高为,25,，,颜色为灰色（,666666,），字体,颜色为,白色（,FFFFFF,），设置两种文本内容,“预售”和,“购票”；将电影简介内容字体设置为,12,号，不突出显示，如,图所,示。,3.,待映内容界面布局设计,1,、,进入,“待映内容”状态，拖曳两个标签部件,，分别,命名为“预告片推荐”和,“最受期待”,，,字号为,12,号，,字体,颜色为,灰色（,333333,）；拖曳两个动态面板部件，,宽为,690,，,高为,65,，动态面板分别命名为“预告片推荐显示区”和“最受期待推荐显示区”,，状态,命名为“预告片内容”，拖曳图片部件设计显示内容，如,图所,示。,4.,榜单内容界面布局设计,1,、,进入“榜单内容”状态里，拖曳,4,个图片部件，,宽、高为,15,，拖曳,4,个标签部件，,文本内容名,为“每日热映口碑榜”“每日热映票房榜”“猫眼想看月度榜”和“每周北美,票房榜,”，作为榜单的标题，如,图所,示,。,2,、,拖曳一个动态面板部件，,宽为,440,，,高为,161,，动态面,板名为,“每日热映,口碑,榜显示区”，,状态名,为“内容”，进入到状态里，拖曳图片部件和标签部件，设计榜单，,如图所示。,4.,榜单内容界面布局设计,3,、,将“每日热映口碑榜显示区”动态面板复制出,3,个，动态面板名称分别修改为“每日热映,口碑,榜显示区”“猫眼想看月度榜显示区”和“每周北美票房榜显示区”，再来设计榜单，如,图所,示,。,10.4.3,海报轮播效果制作,1,、进入“热映内容”这个状态里，选中“海报轮播显示区”动态面板，给它添加页面载入,时触发事件。,2,、设置面板状态，勾选“海报轮播显示区”复选框，选择状态为“,Next”,，让它从最后一,个到,第一个自动循环，间隔,3000,毫秒，进入时动画向左滑动，时间为,500,毫秒，如图所示。,3,、按,F5,键发布原型，可以看到“热映”内容里电影广告自动轮播效果。,10.4.4,页签切换效果制作,1,、进入“电影”页面里，拖曳一个图像热区部件，放置在热映页签,上面,，给它添加鼠标单击时触发事件，设置“电影模块状态栏”动态面板的,状态,为热映，设置“电影内容状态栏”动态面板的状态为热映内容，实现页,签和,页签内容联动效果,。,2,、拖曳一个图像热区部件，放置在“待映”页签上面，给它添加鼠标单击时触发事件，,设置“电影模块状态栏”,动态面板的状态为待映，设置“电影内容状态栏”动态面板的状态为待映,内容,，实现页签和页签内容联动效果，如图所示。,10.4.5“,电影”界面上下滑动效果制作,1,、选中“电影内容显示区”动态面板，给它添加拖曳动态面板时触发,事件。,2,、单击“移动”这个动作，勾选“电影内容显示区”复选框，让它沿,y,轴,拖动。,3,、再给“电影内容显示区”动态面板添加结束拖放动态面板时触发事件。向下滑动时，,如果滑动,的值大于,0,时，就让“电影内容显示区”动态面板回到原始位置，如图所示。,10.4.5“,电影”界面上下滑动效果制作,4,、向上滑动时，最外层动态面板“电影屏幕显示区”的高度是,531,，里层动态面板“电影,内容显示,区”的高度是,920,，可以向上滑动的空间是,390,。当大于,390,的时候，同样让“电影内容显示区,”动态,面板回到原始,位置,，如图所示。,5,、按,F5,键发布，电影模块内容界面上下拖动，可以实现上下滑动,效果。,10.4.6“,预告片推荐”左右滑动效果制作,1,、选中“预告片推荐显示区”动态面板，给它添加拖动动态面板时,触发事件。,2,、单击“移动”，勾选“预告片推荐显示区”复选框，让它沿,x,轴拖动,。,3,、再给“预告片推荐显示区”动态面板添加结束拖放动态面板时触发事件，有左右滑动,两种情况,。向右滑动时，如果滑动的值大于,10,时，就让“预告片推荐显示区”这个动态面板回到原始,位置,，如图所示,。,10.4.6“,预告片推荐”左右滑动效果制作,4,、向左滑动时，最外层动态面板“电影屏幕显示区”的宽度是,373,，里层动态面板“预告片,推荐,显示区”的高度是,690,，可以向左滑动的空间有,320,，当值大于,320,的时候，同样让“预告片推荐,显示,区”动态面板回到原始位置，如图所示,。,10.1,需求描述,10.2,设计思路,10.3,准备工作,10.4,设计流程,10.5,小结,本章通过制作猫眼电影,App,低保真原型，应当做到以下几点。,01,OPTION,02,OPTION,03,OPTION,04,OPTION,1,学会使用标签部件、矩形部件、文本框（单行）部件、横线部件、图片部件、动态面板,部件,等进行页面的布局设计。,2,学会使用,Axure,母版功能来设计,App,软件的底部标签导航；将它制作成母版，在其他页面,直接,使用。,3,学会制作海报轮播效果。,4,学会制作页签切换效果。,05,OPTION,5,学会制作界面内容上下滑动效果和左右滑动效果,谢谢观赏,Axure,RP,原型,设计图解微课视频教程,互联网,职业,技能系列,极客学院,海量图书方便查询,免费申请样书,下载配套资源,优惠购书,成为作者,更多,样书申请和资源下载,需求，请登录人邮教育社区（,),囊括各大品类，您想要的,应有尽有,教师免费申请样书,，,我们,将安排快递迅速送达,教学视频、,PPT,课件,、教学,案例,、,习题,答案,、模拟,试卷等丰富资源,免费下载,教师可以申请最低折扣,学生直接优惠购买图书,欢迎写文章投稿，,我们,强大的编辑团队将,为您,提供专业和高效的,编辑,出版服务,