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

第10章支付宝App低保真原型设计

课时内容

支付宝App低保真原型设计课时6

教学目标

通过支付宝App低保真原型设计，学习元件、母版的使用及海报轮播效果、上下滑动效果的制作

教学重点

元件的使用、母版的使用、海报轮播效果、上下滑动效果

教学难点

元件的使用、母版的使用、海报轮播效果、上下滑动效果

教学设计

.教学思路：通过一个综合案例学习低保真原型设计方法。

.教学手段：多媒体+计算机

.教学资料：教材、多媒体课件

教学内容

需求描述

利用AxureRP9原型工具绘制支付宝App低保真原型，主要设计几个方面。

利用Axure的母版功能绘制支付宝App的底部标签导航。

绘制“支付宝”界面的九宫格导航布局。

制作“支付宝”界面的海报轮播效果。

绘制“余额宝”界面的布局。

制作“余额宝”界面内容上下滑动效果。

实现“支付宝”界面与“余额宝”界面切换显示效果。

设计思路

如何进行支付宝App需的低保真原型制作呢？

在进行页面布局，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等元件。

在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页

面里可以直接使用，防止重复制作和重复添加交互效果。

海报轮播效果的制作需要进行动态面板的状态自动切换效果设置，设置状态自动切换

就可以实现海报轮播效果。

界面内容的上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是用来外层控制显示区域，另一个是用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。10.3准备工作

进行低保真原型设计，不要使用截图或者使用过多的彩色，最好使用黑白灰3种颜色。交互设计师或者产品经理在制作完低保真原型后，将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计。视觉设计师会制作界面图片，并且切图，原型里采用什么图片和色调应该交给视觉设计师或者UI设计师来决定。

10.4设计流程

中国移动

中国移动4G0

-余额宝

中国移动4G

中国移动4G0

-余额宝

34G名49%S322:02

：=。

端午节银期期间余额宝转入收益和转出到账时间提fi?昨日收益（元）O

暂无收益

2.45

万份收益（元）累计收益（元）一

一密升收益

一密升收益转入0.7181236.31

一密升收益

转入

转出余额宝界面

（1）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为530,将动态面板的名称设置为“余额宝”，将其状态命名为“余额宝内容”，背景色设置为灰色（#F2F2F2）oT

T一

H支付宝

a口碑

E朋友

E我的

T一H支付宝a口碑E

T一

H支付宝

a口碑

E朋友

E我的

概要

BD

元件母板

Q+0:

Default

星标件/

□■

*旗2

■O

旗3SK

△区

图片占位符

支付宝X

样式交互说明

余额宝

位重《1尺寸

0X0Y

320w4530h

从不濠动

□自适应内容

□100%宽度（仅浏览器中有效）

固定到浏览器

余额宝内容

N

SR

0i

44空可

外部

（2）进入到“余额宝内容”状态里，拖曳一个“矩形1”元件到工作区域作为状态栏背景，将其宽度设置为320,高度设置为50,坐标位置设置为（0,0）,颜色填充为深灰色（#3A3A3A）,；拖曳一个“水平线”元件到工作区域，将其颜色设置为白色（#FFFFFF）,添加一个向左的箭头，作为返回按钮；拖曳一个“垂直线”元件作为间隔线到工作区域，将其颜色设置为白色（#FFFFFF）,高度设置为17。

支隹￡xI,|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

支隹￡x▼

I

§

§

转入转出导航

（5）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为429,坐标位置为（0,50）,动态面板的名称