《AxureRP9网站与App原型设计》教学教案10支付宝App低保真原型设计.docx
《《AxureRP9网站与App原型设计》教学教案10支付宝App低保真原型设计.docx》由会员分享,可在线阅读,更多相关《《AxureRP9网站与App原型设计》教学教案10支付宝App低保真原型设计.docx(22页珍藏版)》请在冰豆网上搜索。
《AxureRP9网站与App原型设计》教学教案10支付宝App低保真原型设计
第10章支付宝App低保真原型设计
课时内容
支付宝App低保真原型设计
课时
6
教学目标
通过支付宝App低保真原型设计,学习元件、母版的使用及海报轮播效果、上下滑动效果的制作
教学重点
元件的使用、母版的使用、海报轮播效果、上下滑动效果
教学难点
元件的使用、母版的使用、海报轮播效果、上下滑动效果
教学设计
1.教学思路:
通过一个综合案例学习低保真原型设计方法。
2.教学手段:
多媒体+计算机
3.教学资料:
教材、多媒体课件
教学内容
10.1需求描述
利用AxureRP9原型工具绘制支付宝App低保真原型,主要设计几个方面。
(1)利用Axure的母版功能绘制支付宝App的底部标签导航。
(2)绘制“支付宝”界面的九宫格导航布局。
(3)制作“支付宝”界面的海报轮播效果。
(4)绘制“余额宝”界面的布局。
(5)制作“余额宝”界面内容上下滑动效果。
(6)实现“支付宝”界面与“余额宝”界面切换显示效果。
10.2设计思路
如何进行支付宝App需的低保真原型制作呢?
(1)在进行页面布局,需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等元件。
(2)在设计底部标签导航栏时,需要把底部标签导航栏设计成母版,这样设计一次,在页面里可以直接使用,避免重复制作和重复添加交互效果。
(3)海报轮播效果的制作需要进行动态面板的状态自动切换效果设置,设置状态自动切换就可以实现海报轮播效果。
(4)界面内容的上下滑动效果和左右滑动效果,需要使用两个动态面板元件,一个是用来外层控制显示区域,另一个是用来添加拖动效果,以实现界面内容上下滑动效果或者左右滑动效果。
10.3准备工作
进行低保真原型设计,不要使用截图或者使用过多的彩色,最好使用黑白灰3种颜色。
交互设计师或者产品经理在制作完低保真原型后,将原型交给视觉设计师(UI设计师或者美工)来进行界面的设计。
视觉设计师会制作界面图片,并且切图,原型里采用什么图片和色调应该交给视觉设计师或者UI设计师来决定。
10.4设计流程
10.4.1底部标签导航母版设计
绝大部分移动App软件喜欢采用底部标签导航方式,App一般会设计3~5个标签导航菜单,标签导航菜单将软件模块划分地很清晰,每个菜单承载自己的内容,用户看到菜单名称,大致可以知道该界面所要表达的内容。
支付宝App采用标签导航这种导航方式,分为4个标签:
支付宝、口碑、朋友、我的,这4个标签在很多页面都会使用到,把它制作成母版,可以实现一次制作,多次复用的效果。
(1)在母版区域里新建一个母版“标签导航”,打开该母版;拖曳一个“矩形1”元件到工作区域作为手机屏幕背景,将其宽度设置为320,高度设置为480,坐标位置设置为(0,0),颜色填充为灰色(#F2F2F2),去除边框线。
手机屏幕背景
(2)拖曳一个“矩形1”元件到工作区域,将其宽度设置为320,高度设置为50,坐标位置设置为(0,430),边框颜色设置为灰色(#E4E4E4),作为底部标签导航背景;拖曳4个“图片”元件到工作区域,将其宽度和高度设置为25。
标签导航图标
(3)拖曳4个“文本标签”元件到工作区域,将其文本内容分别命名为“支付宝”“口碑”“朋友”“我的”,字号设置为11号字,标签也分别命名为“支付宝”“口碑”“朋友”“我的”;在页面区域上建立4个页面“支付宝”“口碑”“朋友”“我的”。
导航菜单名称及页面名称
(4)拖曳一个“热区”元件到“支付宝”标签导航上,为其添加鼠标单击时触发事件:
在当前窗口打开相应“支付宝”页面。
打开支付宝页面
(5)分别拖曳一个“热区”元件到“口碑”“朋友”“我的”标签上,为其添加鼠标单击时触发事件:
在当前窗口打开相应页面。
打开相应页面
(6)将标签导航母版通过新增页面的方式引用到“支付宝”“口碑”“朋友”“我的”4个页面。
母版引用到页面
(7)进入到“支付宝”页面里,添加页面载入时触发事件,通过富文本的方式设置“支付宝”文本字体加粗,该标签导航菜单呈现为选中状态,运用同样的方式为其他3个标签导航设置选中状态。
标签导航选中状态设置
(8)按F5键发布原型,单击不同的标签导航,相应的标签字体加粗,呈现为选中状态。
发布原型
10.4.2“支付宝”九宫格导航布局设计
“支付宝”界面主要由3部分组成,界面状态栏、界面内容以及标签导航菜单。
界面内容采用九宫格导航方式,九宫格导航方式是一种宫格导航方式,它并非只有9个导航菜单,通过这样的导航方式,可以清晰地展现各个业务功能导航,便于用户的查找和使用。
(1)进入到“支付宝”页面,拖曳一个“矩形1”元件到工作区域,将其宽度设置为320,高度设置为120,颜色填充为灰色(#3A3A3A);再拖曳4个“图片”元件到工作区域,将其宽度和高度都设置为20,作为账单、用户、放大镜、加号图标;拖曳一个“文本标签”元件到工作区域,将其文本内容命名为“账单”,字体颜色设置为白色(#FFFFFF),如图10.10所示。
状态栏设计
(2)拖曳4个“图片”元件到工作区域,将其宽度和高度都设置为35,再拖曳四个“文本标签”元件到工作区域,将其文本内容分别设置为“扫一扫”“付款”“卡券”“咻一咻”,字体颜色设置为白色(#FFFFFF),字号设置为12号字。
快捷功能按钮
(3)拖曳一个“动态面板”元件到工作区域,将其宽度设置为320,高度设置为358,坐标位置设置为(0,120),动态面板的名称设置为“支付宝屏幕显示区”,状态名称设置为“支付宝屏幕”。
支付宝屏幕显示区
(4)进入到“支付宝屏幕”状态里,拖曳一个“矩形1”元件到工作区域,将其宽度和高度都设置为80,边框线的颜色设置为浅灰色(#E4E4E4),复制出11个同样的矩形框。
九宫格导航框
(5)九宫格导航菜单由两部分组成:
一个是导航菜单图标,可以使用图片元件来代替,拖曳一个图片元件,将其宽度和高度都设置为30;还有一个是导航菜单名称,拖曳一个“文本标签”元件到工作区域,将其字号设置为11号字。
九宫格导航菜单
(6)拽一个“动态面板”元件到工作区域,将其宽度设置为320,高度设置为70,坐标位置设置为(0,250),动态面板的名称设置为“海报轮播显示区”,3个状态分别命名为“海报1”“海报2”“海报3”。
海报轮播显示区
(7)在“海报1”“海报2”两个状态里,分别放置两个“占位符”元件,将其宽度均设置为320,高度均设置为70,文本内容分别设置为“海报1”“海报2”。
海报内容
(8)复制制作好的九宫格导航,在其基础修改,成为如图所示的下方的九宫格导航。
九宫格导航菜单设计
10.4.3海报轮播效果制作
海报轮播效果是用来动态地显示商品的广告信息,如果需要在有限的区域展示多个商品广告信息,就可以使用海报轮播效果。
(1)进入到“支付宝屏幕显示区”状态里,选中“海报轮播显示区”动态面板,为其添加载入时触发事件,在添加动作面板选择“设置面板状态”选项,勾选“海报轮播显示区”复选项,在设置动作面板的状态下拉列表中选择“下一项”,勾选“向后循环”复选框,在进入动画下拉列表中选择“向左滑动”,在其右侧的数值框中输入1000,勾选“循环间隔”复选框,在“循环间隔”后的数值框中输入3000。
海报轮播设置
(2)按F8键发布原型,可以看到海报进行自动循环轮播。
发布原型
10.4.4“余额宝”界面布局设计
在支付宝界面,单击九宫格导航栏的余额宝导航菜单,会进入到余额宝界面,该界面是用来显示余额宝总金额以及收益情况,可以将钱转入到余额宝,也可以进行转出。
余额宝界面
(1)拖曳一个“动态面板”元件到工作区域,将其宽度设置为320,高度设置为530,将动态面板的名称设置为“余额宝”,将其状态命名为“余额宝内容”,背景色设置为灰色(#F2F2F2)。
余额宝动态面板
(2)进入到“余额宝内容”状态里,拖曳一个“矩形1”元件到工作区域作为状态栏背景,将其宽度设置为320,高度设置为50,坐标位置设置为(0,0),颜色填充为深灰色(#3A3A3A),;拖曳一个“水平线”元件到工作区域,将其颜色设置为白色(#FFFFFF),添加一个向左的箭头,作为返回按钮;拖曳一个“垂直线”元件作为间隔线到工作区域,将其颜色设置为白色(#FFFFFF),高度设置为17。
状态栏背景
(3)拖曳一个“文本标签”元件到工作区域,将其文本内容设置为“余额宝”,字号设置为15号,颜色设置为白色(#FFFFFF);拖曳两个“图片”元件到工作区域,将其宽度和高度都设置为25,作为查看转入记录图标和设置的图标。
快捷图标
(4)拖曳一个“矩形1”元件到工作区域,将其宽度设置为320,高度设置为50,边框颜色设置为浅灰色(#E4E4E4);拖曳两个“文本标签”元件到工作区域,将其文本内容分别设置为“转出”“转入”,字号设置为15号,加粗。
转入转出导航
(5)拖曳一个“动态面板”元件到工作区域,将其宽度设置为320,高度设置为429,坐标位置为(0,50),动态面板的名称设置为“余额宝收益显示区”,状态名称设置为“余额宝收益”;拖曳一个“矩形3”元件到工作区域,将其宽度设置为320,高度设置为40,文本内容为“五一假期期间余额宝转入收益和转出到账时间提醒”。
余额宝收益显示区
(6)进入到“余额宝收益”状态里,拖曳一个“动态面板”元件到工作区域,将其宽度设置为320,高度设置为600,坐标位置为(0,0),动态面板的名称设置为“余额宝收益内容显示区”,状态名称设置为“余额宝收益内容”。
余额宝收益内容显示区
(7)进入到“余额宝收益内容”状态里,拖曳一个“矩形1”元件到工作区域,将其宽度设置为320,高度设置为280,颜色填充为灰色(#666666);拖曳4个“文本标签”元件到工作区域,将其文本内容分别设置为“昨日收益(元)”“1000.99”“总金额(元)”“2.45”,字体颜色设置为白色(#FFFFFF),将“昨日收益(元)”字号设置为14号字,将“1000.99”字号设置为72号字,将“总金额(元)”字号设置为12号字,将“2.45”字号设置为24号字。
收益情况
(8)拖曳两个“文本标签”元件到工作区域,将其文本内容分别命名为“万份收益(元)”“累计收益(元)”;拖曳两个“文本标签”元件到工作区域,将其文本内容分别命名为“0.7181”“236.32”,将其字号设置为24号;拖曳一个“垂直线”元件到工作区域作为间隔线,将其边框颜色设置为灰色(#E4E4E4)。
万份收益
(9)拖曳一个“文本标签”元件到工作区域,将其文本内容命名为“七日年化收益率(%)”;拖曳一个“矩形1”元件到工作区域,将其宽度设置为80,高度设置为25,文本内容命名为“提示收益”,字号设置为12号字;拖曳一个“占位符”元件到工作区域,将其宽度设置为320,高度设置为180,文本内容命名为“收益率走势图”。
收益率走势
10.4.5“余额宝”界面上下滑动设计
余额宝界面内容很长,一整屏无法显示所有内容,如果想查看完整的界面内容,可以通过上下滑动余额宝界面,来查看完整的界面内容,下面开始制作余额宝界面上下滑动效果。
(1)选中“余额宝收益内容显示区”动态面板,为其添加拖动动态面板时触发事件。
添加拖动动态面板时触发事件
(2)在添加动作面板选择“移动”选项,勾选“余额宝收益内容显示区”,在设置动作面板的移动下拉列表中选择“跟随垂直拖动”。
垂直拖动
(3)再为“余额宝收益内容显示区”动态面板添加拖动结束时触发事件。
上下滑动有两种情况,向下滑动时,如果滑动的值大于0,就使“余额宝收益内容显示区”动态面板回到原始位置。
动态面板元件滑动y值大于0
动态面板回到初始位置
(4)向上滑动时,最外层动态面板“余额宝收益显示区”的高度是429,里层动态面板“余额宝收益内容显示区”的高度为600,向上滑动最大距离为170,当滑动距离大于170的时候,同样使“余额宝收益内容显示区”动态面板回到原始位置。
动态面板向上滑动
动态面板回到初始位置
(5)按F8键发布原型,上下拖动余额宝界面,可以实现上下滑动效果。
发布原型
10.4.6“支付宝”与“余额宝”切换显示效果
在支付宝页面里,单击余额宝导航菜单会进入到余额宝界面,在余额宝界面里,单击返回按钮可以回到支付宝界面里,这样可以实现支付宝界面和余额宝界面切换显示效果。
支付宝与余额宝切换显示
(1)隐藏“余额宝”动态面板,并且将其置于底层;进入到“支付宝屏幕显示区”动态面板的“支付宝屏幕”状态里,拖曳一个“热区”元件并放置其在余额宝导航上,为其添加鼠标单击时触发事件,使其显示“余额宝”动态面板,并且将“余额宝”动态面板置于顶层。
显示余额宝动态面板
(2)进入“余额宝”动态面板的“余额宝内容”状态里,拖曳一个“热区”元件到余额宝返回按钮上,为其添加鼠标单击时触发事件,使其隐藏“余额宝”动态面板,并且将“余额宝”动态面板置于底层。
隐藏余额宝动态面板
发布原型,单击余额宝导航菜单,会进入到余额宝界面里,单击返回按钮,余额宝界面隐藏起来,支付宝页面显示出来,从而可以实现支付宝界面和余额宝界面切换显示效果。
小结
(1)学会使用标签元件、矩形元件、占位符元件、水平线元件、垂直线元件、图片元件、动态面板元件等元件进行页面的布局设计。
(2)学会使用Axure母版功能来设计App软件的底部标签导航;将底部标签导航制作成母版,这样一次制作,其他页面可以直接使用,不需要进行重复制作。
(3)学会海报轮播效果的制作。
(4)学会实现界面内容上下滑动效果。
练习
进行口碑界面内容的布局设计以及界面内容上下滑动效果制作。
口碑界面