《AxureRP9网站与App原型设计》教学教案10支付宝App低保真原型设计.docx

1、AxureRP9网站与App原型设计教学教案10支付宝App低保真原型设计第10章 支付宝App低保真原型设计课时内容支付宝App低保真原型设计课时6教学目标通过支付宝App低保真原型设计，学习元件、母版的使用及海报轮播效果、上下滑动效果的制作教学重点元件的使用、母版的使用、海报轮播效果、上下滑动效果教学难点元件的使用、母版的使用、海报轮播效果、上下滑动效果教学设计1.教学思路：通过一个综合案例学习低保真原型设计方法。2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容10.1 需求描述利用Axure RP9原型工具绘制支付宝App低保真原型，主要设计几个方面。（1）利用Axur

2、e的母版功能绘制支付宝App的底部标签导航。（2）绘制“支付宝”界面的九宫格导航布局。（3）制作“支付宝”界面的海报轮播效果。（4）绘制“余额宝”界面的布局。（5）制作“余额宝”界面内容上下滑动效果。（6）实现“支付宝”界面与“余额宝”界面切换显示效果。10.2 设计思路如何进行支付宝App需的低保真原型制作呢？ （1）在进行页面布局，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等元件。（2）在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页面里可以直接使用，避免重复制作和重复添加交互效果。 （3）海报轮播效果的制作需要进行动态面板的状

3、态自动切换效果设置，设置状态自动切换就可以实现海报轮播效果。 （4）界面内容的上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是用来外层控制显示区域，另一个是用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。 10.3 准备工作进行低保真原型设计，不要使用截图或者使用过多的彩色，最好使用黑白灰3种颜色。交互设计师或者产品经理在制作完低保真原型后，将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计。视觉设计师会制作界面图片，并且切图，原型里采用什么图片和色调应该交给视觉设计师或者UI设计师来决定。10.4 设计流程10.4.1 底部标签导航母版设计绝大部分移动App

4、软件喜欢采用底部标签导航方式，App一般会设计35个标签导航菜单，标签导航菜单将软件模块划分地很清晰，每个菜单承载自己的内容，用户看到菜单名称，大致可以知道该界面所要表达的内容。支付宝App采用标签导航这种导航方式，分为4个标签：支付宝、口碑、朋友、我的，这4个标签在很多页面都会使用到，把它制作成母版，可以实现一次制作，多次复用的效果。（1）在母版区域里新建一个母版“标签导航”，打开该母版；拖曳一个“矩形1”元件到工作区域作为手机屏幕背景，将其宽度设置为320，高度设置为480，坐标位置设置为（0,0），颜色填充为灰色（#F2F2F2），去除边框线。手机屏幕背景（2）拖曳一个“矩形1”元件到工

5、作区域，将其宽度设置为320，高度设置为50，坐标位置设置为（0,430），边框颜色设置为灰色（#E4E4E4），作为底部标签导航背景；拖曳4个“图片”元件到工作区域，将其宽度和高度设置为25。标签导航图标（3）拖曳4个“文本标签”元件到工作区域，将其文本内容分别命名为“支付宝”“口碑”“朋友”“我的”，字号设置为11号字，标签也分别命名为“支付宝”“口碑”“朋友”“我的”；在页面区域上建立4个页面“支付宝”“口碑”“朋友”“我的”。导航菜单名称及页面名称（4）拖曳一个“热区”元件到“支付宝”标签导航上，为其添加鼠标单击时触发事件：在当前窗口打开相应“支付宝”页面。打开支付宝页面（5）分别拖曳

6、一个“热区”元件到“口碑”“朋友”“我的”标签上，为其添加鼠标单击时触发事件：在当前窗口打开相应页面。打开相应页面（6）将标签导航母版通过新增页面的方式引用到“支付宝”“口碑”“朋友”“我的”4个页面。 母版引用到页面（7）进入到“支付宝”页面里，添加页面载入时触发事件，通过富文本的方式设置“支付宝”文本字体加粗，该标签导航菜单呈现为选中状态，运用同样的方式为其他3个标签导航设置选中状态。 标签导航选中状态设置（8）按F5键发布原型，单击不同的标签导航，相应的标签字体加粗，呈现为选中状态。发布原型10.4.2 “支付宝”九宫格导航布局设计“支付宝”界面主要由3部分组成，界面状态栏、界面内容以及

7、标签导航菜单。界面内容采用九宫格导航方式，九宫格导航方式是一种宫格导航方式，它并非只有9个导航菜单，通过这样的导航方式，可以清晰地展现各个业务功能导航，便于用户的查找和使用。 （1）进入到“支付宝”页面，拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为120，颜色填充为灰色（#3A3A3A）；再拖曳4个“图片”元件到工作区域，将其宽度和高度都设置为20，作为账单、用户、放大镜、加号图标；拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“账单”，字体颜色设置为白色（#FFFFFF），如图10.10所示。状态栏设计（2）拖曳4个“图片”元件到工作区域，将其宽度和高度都设置为

8、35，再拖曳四个“文本标签”元件到工作区域，将其文本内容分别设置为“扫一扫”“付款”“卡券”“咻一咻”，字体颜色设置为白色（#FFFFFF），字号设置为12号字。快捷功能按钮（3）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为358，坐标位置设置为（0,120），动态面板的名称设置为“支付宝屏幕显示区”，状态名称设置为“支付宝屏幕”。支付宝屏幕显示区（4）进入到“支付宝屏幕”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度和高度都设置为80，边框线的颜色设置为浅灰色（#E4E4E4），复制出11个同样的矩形框。九宫格导航框（5）九宫格导航菜单由两部分组成：一个是导航菜单

9、图标，可以使用图片元件来代替，拖曳一个图片元件，将其宽度和高度都设置为30；还有一个是导航菜单名称，拖曳一个“文本标签”元件到工作区域，将其字号设置为11号字。九宫格导航菜单（6）拽一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为70，坐标位置设置为（0,250），动态面板的名称设置为“海报轮播显示区”，3个状态分别命名为“海报1”“海报2”“海报3”。海报轮播显示区（7）在“海报1”“海报2”两个状态里，分别放置两个“占位符”元件，将其宽度均设置为320，高度均设置为70，文本内容分别设置为“海报1”“海报2”。海报内容（8）复制制作好的九宫格导航，在其基础修改，成为如图所示

10、的下方的九宫格导航。九宫格导航菜单设计10.4.3 海报轮播效果制作海报轮播效果是用来动态地显示商品的广告信息，如果需要在有限的区域展示多个商品广告信息，就可以使用海报轮播效果。（1）进入到“支付宝屏幕显示区”状态里，选中“海报轮播显示区”动态面板，为其添加载入时触发事件，在添加动作面板选择“设置面板状态”选项，勾选“海报轮播显示区”复选项，在设置动作面板的状态下拉列表中选择“下一项”，勾选“向后循环”复选框，在进入动画下拉列表中选择“向左滑动”，在其右侧的数值框中输入1000，勾选“循环间隔”复选框，在“循环间隔”后的数值框中输入3000。海报轮播设置（2）按F8键发布原型，可以看到海报进行

11、自动循环轮播。发布原型10.4.4 “余额宝”界面布局设计在支付宝界面，单击九宫格导航栏的余额宝导航菜单，会进入到余额宝界面，该界面是用来显示余额宝总金额以及收益情况，可以将钱转入到余额宝，也可以进行转出。余额宝界面（1）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为530，将动态面板的名称设置为“余额宝”，将其状态命名为“余额宝内容”，背景色设置为灰色（#F2F2F2）。余额宝动态面板（2）进入到“余额宝内容”状态里，拖曳一个“矩形1”元件到工作区域作为状态栏背景，将其宽度设置为320，高度设置为50，坐标位置设置为（0,0），颜色填充为深灰色（#3A3A3A），；拖曳

12、一个“水平线”元件到工作区域，将其颜色设置为白色（#FFFFFF），添加一个向左的箭头，作为返回按钮；拖曳一个“垂直线”元件作为间隔线到工作区域，将其颜色设置为白色（#FFFFFF），高度设置为17。状态栏背景（3）拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“余额宝”，字号设置为15号，颜色设置为白色（#FFFFFF）；拖曳两个“图片”元件到工作区域，将其宽度和高度都设置为25，作为查看转入记录图标和设置的图标。快捷图标（4）拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为50，边框颜色设置为浅灰色（#E4E4E4）；拖曳两个“文本标签”元件到工作区域，将其文本内

13、容分别设置为“转出”“转入”，字号设置为15号，加粗。转入转出导航（5）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为429，坐标位置为（0,50），动态面板的名称设置为“余额宝收益显示区”，状态名称设置为“余额宝收益”；拖曳一个“矩形3”元件到工作区域，将其宽度设置为320，高度设置为40，文本内容为“五一假期期间余额宝转入收益和转出到账时间提醒”。余额宝收益显示区（6）进入到“余额宝收益”状态里，拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为600，坐标位置为（0,0），动态面板的名称设置为“余额宝收益内容显示区”，状态名称设置为“余额宝收益内容

14、”。余额宝收益内容显示区（7）进入到“余额宝收益内容”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为280，颜色填充为灰色（#666666）；拖曳4个“文本标签”元件到工作区域，将其文本内容分别设置为“昨日收益(元)” “1000.99” “总金额(元)” “2.45”，字体颜色设置为白色（#FFFFFF），将“昨日收益(元)”字号设置为14号字，将“1000.99”字号设置为72号字，将“总金额(元)”字号设置为12号字，将“2.45”字号设置为24号字。收益情况（8）拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“万份收益(元)”“累计收益(元)”；

15、拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“0.7181”“236.32”，将其字号设置为24号；拖曳一个“垂直线”元件到工作区域作为间隔线，将其边框颜色设置为灰色（#E4E4E4）。万份收益（9）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“七日年化收益率(%)”；拖曳一个“矩形1”元件到工作区域，将其宽度设置为80，高度设置为25，文本内容命名为“提示收益”，字号设置为12号字；拖曳一个“占位符”元件到工作区域，将其宽度设置为320，高度设置为180，文本内容命名为“收益率走势图”。收益率走势10.4.5 “余额宝”界面上下滑动设计余额宝界面内容很长，一整屏无法显

16、示所有内容，如果想查看完整的界面内容，可以通过上下滑动余额宝界面，来查看完整的界面内容，下面开始制作余额宝界面上下滑动效果。（1）选中“余额宝收益内容显示区”动态面板，为其添加拖动动态面板时触发事件。添加拖动动态面板时触发事件（2）在添加动作面板选择“移动”选项，勾选“余额宝收益内容显示区”，在设置动作面板的移动下拉列表中选择“跟随垂直拖动”。垂直拖动（3）再为“余额宝收益内容显示区”动态面板添加拖动结束时触发事件。上下滑动有两种情况，向下滑动时，如果滑动的值大于0，就使“余额宝收益内容显示区”动态面板回到原始位置。动态面板元件滑动y值大于0动态面板回到初始位置（4）向上滑动时，最外层动态面板

17、“余额宝收益显示区”的高度是429，里层动态面板“余额宝收益内容显示区”的高度为600，向上滑动最大距离为170，当滑动距离大于170的时候，同样使“余额宝收益内容显示区”动态面板回到原始位置。动态面板向上滑动动态面板回到初始位置（5）按F8键发布原型，上下拖动余额宝界面，可以实现上下滑动效果。发布原型10.4.6 “支付宝”与“余额宝”切换显示效果在支付宝页面里，单击余额宝导航菜单会进入到余额宝界面，在余额宝界面里，单击返回按钮可以回到支付宝界面里，这样可以实现支付宝界面和余额宝界面切换显示效果。支付宝与余额宝切换显示（1）隐藏“余额宝”动态面板，并且将其置于底层；进入到“支付宝屏幕显示区”

18、动态面板的“支付宝屏幕”状态里，拖曳一个“热区”元件并放置其在余额宝导航上，为其添加鼠标单击时触发事件，使其显示“余额宝”动态面板，并且将“余额宝”动态面板置于顶层。显示余额宝动态面板（2）进入“余额宝”动态面板的“余额宝内容”状态里，拖曳一个“热区”元件到余额宝返回按钮上，为其添加鼠标单击时触发事件，使其隐藏“余额宝”动态面板，并且将“余额宝”动态面板置于底层。隐藏余额宝动态面板发布原型，单击余额宝导航菜单，会进入到余额宝界面里，单击返回按钮，余额宝界面隐藏起来，支付宝页面显示出来，从而可以实现支付宝界面和余额宝界面切换显示效果。小结（1）学会使用标签元件、矩形元件、占位符元件、水平线元件、垂直线元件、图片元件、动态面板元件等元件进行页面的布局设计。（2）学会使用Axure母版功能来设计App软件的底部标签导航；将底部标签导航制作成母版，这样一次制作，其他页面可以直接使用，不需要进行重复制作。（3）学会海报轮播效果的制作。（4）学会实现界面内容上下滑动效果。练习进行口碑界面内容的布局设计以及界面内容上下滑动效果制作。口碑界面