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

第10章 支付宝App低保真原型设计
课时内容
支付宝App低保真原型设计课时6
教学目标
通过支付宝App低保真原型设计，学习元件、母版的使用及海报轮播效果、上下滑动 效果的制作
教学重点
元件的使用、母版的使用、海报轮播效果、上下滑动效果
教学难点
元件的使用、母版的使用、海报轮播效果、上下滑动效果
教学设计
1 .教学思路：通过一个综合案例学习低保真原型设计方法。
2 .教学手段：多媒体+计算机
3 .教学资料：教材、多媒体课件
教学内容
10.1 需求描述
利用Axure RP9原型工具绘制支付宝App低保真原型，主要设计几个方面。
（1） 利用Axure的母版功能绘制支付宝App的底部标签导航。
（2） 绘制“支付宝”界面的九宫格导航布局。
（3） 制作“支付宝”界面的海报轮播效果。
（4） 绘制“余额宝”界面的布局。
（5） 制作“余额宝”界面内容上下滑动效果。
（6） 实现“支付宝”界面与“余额宝”界面切换显示效果。
10.2 设计思路
如何进行支付宝App需的低保真原型制作呢？
（1） 在进行页面布局，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图 片元件、动态面板元件等元件。
（2） 在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页
面里可以直接使用，防止重复制作和重复添加交互效果。
（3） 海报轮播效果的制作需要进行动态面板的状态自动切换效果设置，设置状态自动切换
就可以实现海报轮播效果。
（4） 界面内容的上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是用来 外层控制显示区域，另一个是用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。 10.3准备工作
进行低保真原型设计，不要使用截图或者使用过多的彩色，最好使用黑白灰3种颜色。交互设 计师或者产品经理在制作完低保真原型后，将原型交给视觉设计师（UI设计师或者美工）来进行界 面的设计。视觉设计师会制作界面图片，并且切图，原型里采用什么图片和色调应该交给视觉设计 师或者UI设计师来决定。
10.4设计流程
中国移动4G 0
<- 余额宝

中国移动4G 0
<- 余额宝
34G 名 49% S3 22:02
：=。

端午节银期期间余额宝转入收益和转出到账时间提fi? >昨日收益（元）O
暂无收益
2.45
万份收益（元）累计收益（元）一密升收益

一密升收益
转入
0.7181236.31七日年化收益率伴）
转出余额宝界面
（1）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为530,将动态 面板的名称设置为“余额宝”，将其状态命名为“余额宝内容”，背景色设置为灰色（#F2F2F2） oT 一
H支付宝
a 口碑
E朋友
E我的

T 一
H支付宝
a 口碑
E朋友
E我的
概要
B D
元件母板
Q+ 0 :
Default
星标件/
□■
*旗2
■O
旗3SK
△区
图片占位符
支付宝X
样式 交互 说明
余额宝
位重《1尺寸
0X 0Y
320 w4530 h
从不濠动
□自适应内容
□ 100%宽度（仅浏览器中有效）
固定到浏览器
余额宝内容
N
SR
0 i
44空可
外部
余额宝动态面板
（2）进入到“余额宝内容”状态里，拖曳一个“矩形1”元件到工作区域作为状态栏背景，将 其宽度设置为320,高度设置为50,坐标位置设置为（0,0）,颜色填充为深灰色（#3A3A3A）,； 拖曳一个“水平线”元件到工作区域，将其颜色设置为白色（#FFFFFF）,添加一个向左的箭头， 作为返回按钮；拖曳一个“垂直线”元件作为间隔线到工作区域，将其颜色设置为白色（#FFFFFF）, 高度设置为17。
支隹£ x I, |o, , , , ।, |ioo , , ।, |2pq , , ।, |300

状态栏背景

（3）拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“余额宝”，字号设置为 15号，颜色设置为白色（#FFFFFF）；拖曳两个“图片”元件到工作区域，将其宽度和高度都设置 为25,作为查看转入记录图标和设置的图标。
支隹£ x
句 ，|o,, , ,「100 , | | 「2pq —"3；00,

支隹£ x
句 ，|o,, , ,「100 , | | 「2pq —"3；00,
余馥宝：余嵌宝内容▼ 隔离回 | 蜗 X
快捷图标
（4）拖曳一个“矩形1”元件到工作区域，将其宽度设置为320,高度设置为50,边框颜色设 置为浅灰色（#E4E4E4）；拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“转 出”“转入，，，字号设置为15号，加粗。
支隹£ x▼

支隹£ x▼
I
§
§

转入转出导航
（5）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为429,坐标位 置为（0,50）,动态面板的名称设置为“余额宝收益显示区”，状态名称设置为“余额宝收益”； 拖曳一个“矩形3”元件到工作区域，将其宽度设置为320,高度设置为40,文本内容为“五一假 期期间余额宝转入收益和转出到账时间提醒”。
支脑上^中「..」11叩 .，…"200 ..［」一 .300 .

转出转入
余额宝收益显示区

（6）进入到“余额宝收益”状态里，拖曳一个“动态面板”元件到工作区域，将其宽度设置为 320,高度设置为600,坐标位置为（0,0）,动态面板的名称设置为“余额宝收益内容显示区”，状 态名称设置为“余额宝收益内容”。

余额宝收益内容显示区

（7）进入到“余额宝收益内容”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度设置 为320,高度设置为280,颜色填充为灰色（#666666）；拖曳4个“文本标签”元件到工作区域， 将其文本内容分别设置为“昨日收益（元）” “1000.99” “总金额（元）”“2.45” ,字体颜色设置为白色（#FFFFFF）,将“昨日收益（元）”字号设置为14号字，将为000.99”字号设置为72号字, 将“总金额（元）”字号设置为12号字,将“2.45”字号设置为24号字。
支付宝X

支付宝X
-100
100
200
300
400
500
收益情况

(8)拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“万份收益(元)”“累 计收益(元)”；拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“0.7181” “236.32”， 将其字号设置为24号；拖曳一个“垂直线”元件到工作区域作为间隔线，将其边框颜色设置为灰色 (#E4E4E4) o
支付宝X
8
I-
§
§
万份收益

(9)拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“七日年化收益率(％)” ； 拖曳一个“矩形1”元件到工作区域，将其宽度设置为80,高度设置为25,文本内容命名为“提示 收益”，字号设置为12号字；拖曳一个“占位符”元件到工作区域，将其宽度设置为320,高度设 置为180,文本内容命名为“收益率走势图”。
“余额宝”界面上下滑动设计
余额宝界面内容很长，一整屏无法显示所有内容，如果想查看完整的界面内容，可以通过上下 滑动余额宝界面，来查看完整的界面内容，下面开始制作余额宝界面上下滑动效果。
(1)选中“余额宝收益内容显示区”动态面板，为其添加拖动动态面板时触发事件。
支隹5 X ]
守 ;wo209 , , । 一，" 3Pq
点击
常用交互 单壬时.设置为下一个状态) 向左拖加束时，设置为上弓
向右拖相束时,设置为下二)
E3
添加拖动动态面板时触发事件
样式 交互・ 说明
余额宝收益显示区 惘

(2)在添加动作面板选择“移动”选项，勾选“余额宝收益内容显示区”，在设置动作面板的 移动下拉列表中选择“跟随垂直拖动”。
X交互编辑器
链接功作 翻开摄按
关闭窗口 框架中翻开糙接 滚动到元件
元件功作
设置面板状态
设置图片 设置选中 设置列表选中项 启用摩用
|移动 螃 设置尺寸
设置不透明 荻取焦点
▼拖动时
移的
余额宝收益内容显示区鬣随垂直指前
目际 余额宝收益内容显示区
移动 跟随垂直抱三X
跖
None0
更参法项，
靛
边界
+添加界限
确定
取消垂直拖动
(3)再为“余额宝收益内容显示区”动态面板添加拖动结束时触发事件。上下滑动有两种情况, 向下滑动时，如果滑动的值大于0,就使“余额宝收益内容显示区”动态面板回到原始位置。
x情形编辑-余额宝收益内容显示区:拖动结束时x
00 [[This.y]) f. >: ®0 0
如果"([This.yn" > "0"动态面板元件滑动y值大于0
>;交存编辑n
q添加事件。+ 题9催
Q
链搂动作
打刑蜘
关闭窗口
框架中打刑缆
滚动到元件
元件动作
显示隔窗
设置圆板状态
isas^：
设置图片
设首选中
设置列表选中项
启用煤甲
|移动
甘丽
▼拖动时 移动

丽
目妹
余额宝收益内容显示区

余18宝收益内容显示区副质垂直拖动
▼拖动结束时

移动
雌 0 X / 0_y f.
a)s
统性C 500

Case 1
如果"[fThis y]]" > "0"
移动

克笏选项，
we
余脸收益内容显示区到达(0.0)送性5002秒

边评
+激。界限
际
没查尺寸
BTI5IS//ES
设置不透明
获取隹点

动态面板回到初始位置
(4)向上滑动时，最外层动态面板“余额宝收益显示区”的高度是429,里层动态面板“余额宝收益内容显示区”的高度为600,向上滑动最大距离为170,当滑动距离大于170的时候，同样使 “余额宝收益内容显示区”动态面板回到原始位置。

宝收益内容显示区”的高度为600,向上滑动最大距离为170,当滑动距离大于170的时候，同样使 “余额宝收益内容显示区”动态面板回到原始位置。
x情形编辑-余额宝收益内容显示区拖动结束时
跪名称
匹配以下全部条件
l[ThiS.y]J
-170
如果"[[This.y]]" < "-170"
确定
取消
>;交互编辑器
鱼 漆mw*g' 漆203）作
Q 链接动作
翻开曲 关闭窗口 框架中打 流动到元件
元件动作 显示隔寂 设置面板状态
设道图片 设置选中 设好院选中项 启用/禁用
移动 的 设置尺寸 置于工程底层 设置不透明 荻取焦点
动态面板向上滑动
▼拖动时
移动
余额宝收益内容显示区丝殖垂直拖动
▼拖动结束时
ICase 1
如果,'（（This y]]" > "0"
移动
余薮宝收益内容显示区到达（0。）线住500室秒
ICase 2
否划如果"irhis yD" <--170-
移动
余酸宝收益内容显示区到达（0Q）线性500童区
设置动作
目标
内容
移动
到达 -0_x五0_y
折
雌500；.
更多项选择项，
VUS
+添加界限
脱肖
动态面板回到初始位置
（5）按F8键发布原型，上下拖动余额宝界面，可以实现上下滑动效果。
发布原型
“支付宝”与“余额宝”切换显示效果
在支付宝页面里，单击余额宝导航菜单会进入到余额宝界面，在余额宝界面里，单击返回按钮 可以回到支付宝界面里，这样可以实现支付宝界面和余额宝界面切换显示效果。
万份收益（元）
0.7181
累计收缠（元）
236.31
吃货探店j选
七日年化收益率（⑹
转出
转入
支付宝与余额宝切换显示
（1）隐藏“余额宝”动态面板，并且将其置于底层；进入到“支付宝屏幕显示区”动态面板的 “支付宝屏幕”状态里，拖曳一个“热区”元件并放置其在余额宝导航上，为其添加鼠标单击时触 发事件，使其显示“余额宝”动态面板，并且将“余额宝”动态面板置于顶层。
觎X
❖I , , |o,
说明
单击时
显示假德
显示余额宝
置于顶层/底层
余额宝到顶层
显示余额宝动态面板
新建交互
tit

（2）进入“余额宝”动态面板的“余额宝内容”状态里，拖曳一个“热区”元件到余额宝返回 按钮上，为其添加鼠标单击时触发事件，使其隐藏“余额宝”动态面板，并且将“余额宝”动态面 板置于底层。
样式 交互・ 说明
tit
单击时
显示/隐藏
所®余额宝
置于顶层/底层
余脸到底层
新建交互

隐藏余额宝动态面板
发布原型，单击余额宝导航菜单，会进入到余额宝界面里，单击返回按钮，余额宝界面隐藏起 来，支付宝页面显示出来，从而可以实现支付宝界面和余额宝界面切换显示效果。
（1）学会使用标签元件、矩形元件、占位符元件、水平线元件、垂直线元件、图 片元件、动态面板元件等元件进行页面的布局设计。
小件（2）学会使用Axure母版功能来设计App软件的底部标签导航；将底部标签导航小一口 制作成母版，这样一次制作，其他页面可以直接使用，不需要进行重复制作。
（3）学会海报轮播效果的制作。
练习
（4）学会实现界面内容上下滑动效果。
进行口碑界面内容的布局设计以及界面内容上下滑动效果制作。
中国移动4G区
值 4G%>53%BD 21:43
北京/
Q渝入商家、品类
美食
外卖
黑
快餐
0
丽人
O
面包甜点
电影
6© 吃货探店 2T一,一
最近在it圈流行一家餐馆，上地it人不吃不 够格，毛毛汗雷菜e这家只有几道菜的正、 宗成都冒菜馆，经常是门庭假设市，4f
/6 月 13 日
支忖宝口碑朋友我的
口碑界面
底部标签导航母版设计
绝大局部移动App软件喜欢采用底部标签导航方式，App一般会设计3〜5个标签导航菜单，标 签导航菜单将软件模块划分地很清晰，每个菜单承载自己的内容，用户看到菜单名称，大致可以知 道该界面所要表达的内容。
支付宝App采用标签导航这种导航方式，分为4个标签：支付宝、口碑、朋友、我的，这4个 标签在很多页面都会使用到，把它制作成母版，可以实现一次制作，屡次复用的效果。
（I）在母版区域里新建一个母版“标签导航”，翻开该母版；拖曳一个“矩形1”元件到工作 区域作为手机屏幕背景，将其宽度设置为320,高度设置为480,坐标位置设置为（0,0）,颜色填 充为灰色（#F2F2F2）,去除边框线。
页面概要
Q0
国 Page 1

页面概要
Q0
国 Page 1
元件坦版
QH
标签导航
手机屏幕背景

（2）拖曳一个“矩形1”元件到工作区域，将其宽度设置为320,高度设置为50,坐标位置设 置为（0,430）,边框颜色设置为灰色（#E4E4E4）,作为底部标签导航背景；拖曳4个“图片”元 件到工作区域，将其宽度和高度设置为25。
振签导航xj中,|o , , , I , . . . 1100 I , ,200 I . . . . |300 ,
标签导航图标
(3)拖曳4个“文本标签”元件到工作区域，将其文本内容分别命名为“支付宝” “口碑”“朋 友”“我的”，字号设置为11号字，标签也分别命名为“支付宝”“口碑” “朋友”“我的”；在 页面区域上建立4个页面“支付宝”“口碑” “朋友”“我的”。
导航菜单名称及页面名称

概要
0 口
母版
0 口
翻开支付宝页面
§
n1
翻开相应页面

(4)拖曳一个“热区”元件到“支付宝”标签导航上，为其添加鼠标单击时触发事件：在当前 窗口翻开相应“支付宝”页面。
回支付宝@ 口碑
.
Q国标签导航
(5)分别拖曳一个“热区”元件到“口碑”“朋友” “我的”标签上，为其添加鼠标单击时触 发事件：在当前窗口翻开相应页面。

(6)将标签导航母版通过新增页面的方式引用到“支付宝” “口碑”“朋友” “我的”4个页面。
>:添加母版到页面中添加[标签导航]至IJT列页面：
营全选 三不选.正选中子项 三检幽中子项国支付宝
□ 目口碑H 回朋友
□ 回我的般
@锁定为母版中的位置O指定新KHiS
□置于底层□页面中不包含此母版时才能添加.
说明：此操作无法撤销.
母版引用到页面
(7)进入到“支付宝”页面里，添加页面载入时触发事件，通过富文本的方式设置“支付宝” 文本字体加粗，该标签导航菜单呈现为选中状态，运用同样的方式为其他3个标签导航设置选中状
OX输入文本x
在下方蛹入文本并设置样式.变量名称或表达式要写在"[[]]"中.例如：
•插入变量[[MyVarD ,获取变量'MyVar*'的当前值；•插入表达式[[VarA + VarB]],获取“VarA + VarB”的和；
■插入系统变量[[PageName]],荻取当前页面名称.
支的ArialNegreta 011
局郃变,在下方创立用于插入元件值的局部变量，局部变量名称必须是字母数字.不允许包含空格.
标签导航选中状态设置
(8)按F5键发布原型，单击不同的标签导航，相应的标签字体加粗，呈现为选中状态。
D □瞥6今。①
发布原型
10.4.2 “支付宝”九宫格导航布局设计
“支付宝”界面主要由3局部组成，界面状态栏、界面内容以及标签导航菜单。界面内容采用 九宫格导航方式，九宫格导航方式是一种宫格导航方式，它并非只有9个导航菜单，通过这样的导 航方式，可以清晰地展现各个业务功能导航，便于用户的查找和使用。
(1)进入到“支付宝”页面，拖曳一个“矩形1”元件到工作区域，将其宽度设置为320,高 度设置为120,颜色填充为灰色(#3A3A3A)；再拖曳4个“图片”元件到工作区域，将其宽度和 高度都设置为20,作为账单、用户、放大镜、加号图标；拖曳一个“文本标签”元件到工作区域， 将其文本内容命名为“账单”，字体颜色设置为白色(#FFFFFF),如图10.10所示。
0 口碑国朋友
元件母版Q国口
国侨签导航状态栏设计
(2)拖曳4个“图片”元件到工作区域，将其宽度和高度都设置为35,再拖曳四个“文本标 签”元件到工作区域，将其文本内容分别设置为“扫 扫”“付款” “卡券”“咻♦咻”，字体颜 色设置为白色(#FFFFFF),字号设置为12号字。
页面概要
Q0 C3
S支付宝
s □»
E朋友
母版
Q0 C3
[交付宝x |
$ °一 [ . ， 1°°
200300
国标筌导航
快捷功能按钮
0 口
支付宝 X
（3）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为358,坐标位 置设置为（0,120）,动态面板的名称设置为“支付宝屏幕显示区"状态名称设置为“支付宝屏幕”。
T回支忖宝
目□»回朋友
日眦元件母版
Qa d「、标筌导航
决 支付宝

支付宝屏幕显示区
（4）进入到“支付宝屏幕”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度和高度都 设置为80,边框线的颜色设置为浅灰色（#E4E4E4）,复制出11个同样的矩形框。
九宫格导航框

（5）九宫格导航菜单由两局部组成：一个是导航菜单图标，可以使用图片元件来代替，拖曳一
个图片元件，将其宽度和高度都设置为30；还有一个是导航菜单名称，拖曳一个“文本标签”元件 到工作区域，将其字号设置为11号字。
页面概要
QB D
S支付宝
S 口理
EJ朋友
叵雌
元件母版
Q0 D
画标签导航
支付宝X
O
100
200
300
8
8
九宫格导航菜单
（6）拽一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为70,坐标位置设 置为（0,250）,动态面板的名称设置为“海报轮播显示区”，3个状态分别命名为“海报1” “海 报2” “海报3” o
页自
S支付宝
E 口碑
目朋友
目触
概要
国
元件母版
+8
Default
*本元件.
□
支付宝X 我的
口碑X标签导航X
□
8
4
&
海报轮播显示区
O
ipq . ,，，，，|秋，，I , , ： , I309 , , ।, 49t
（7）在“海报1” 320,高度均设置为70,
“海报2”两个状态里，分别放置两个“占位符”元件，将其宽度均设置为 文本内容分别设置为“海报1” “海报2”。

S支付宝
S 口碑
s朋友
母版
Default
基本元件，
100
8
8
CM
§
旗2
1
□ 口
中，°,
支付宝x 的x 用及x 口群x
▼
4(X
标签导航X
200। 1 ,300
海报内容
（8）复制制作好的九宫格导航，在其基础修改，成为如下图的下方的九宫格导航。
s0 整
Q国门
S支付宝
回口碑
回朋友
S我的
元件母版
Q+ S ：
Default
基本元件.
口■
31初2
■O
就3疑
H区|
支付宝X 我的X 盟友X 口碑X 导航X▼
金 9.W0, "2叫f 300"叩（
九宫格导航菜单设计

10.4.3 海报轮播效果制作
海报轮播效果是用来动态地显示商品的广告信息，如果需要在有限的区域展示多个商品广告信 息，就可以使用海报轮播效果。
（1）进入到“支付宝屏幕显示区”状态里，选中“海报轮播显示区”动态面板，为其添加载入 时触发事件，在添加动作面板选择“设置面板状态”选项，勾选“海报轮播显示区”复选项，在设 置动作面板的状态下拉列表中选择“下一项”，勾选“向后循环”复选框，在进入动画下拉列表中 选择“向左滑动”，在其右侧的数值框中输入1000,勾选“循环间隔”复选框，在“循环间隔”后 的数值框中输入3000oX交互编辑器

X交互编辑器
、 囿》事杵融B动作
翻开链接
关闭窗口
框架中翻开窗8
潼然阮件
元件动M
显^g |设置西5状4|
设置图片
设司a中
设置列表达中啖
启用座用
移动
捷抬
设置尺寸
S3不透明
我取焦点
i£5^目修 海报轮播显示区
«* T-Z□向后循环
进入g向左涓动 C 1000 w
None 0 vnnasi向左涓动 0 1QQ0 0
None更Z选软，
□循环间隔300口它
□首个状杳延时3000室秒后切换n如果隐藏那么显示
］推须0构动元件海报轮播设置
(2)按F8键发布原型，可以看到海报进行自动循环轮播。
bQ支•(隹x +
发布原型
10.4.4 “余额宝”界面布局设计
在支付宝界面，单击九宫格导航栏的余额宝导航菜单，会进入到余额宝界面，该界面是用来显 示余额宝总金额以及收益情况，可以将钱转入到余额宝，也可以进行转出。