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

《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）学会实现界面内容上下滑动效果。

练习

进行口碑界面内容的布局设计以及界面内容上下滑动效果制作。

口碑界面