互联网＋职业技能系列AxureRP原型设计图解微课视频教程第10章支付宝App低保真原型设计Axure不仅可以用于网站原型的制作
，同时也可以制作移动App的软件原型。下面综合应用Axure的知识，利用Axure来进行支付宝App的低保真原型设计，如图10.
1所示。图10.1支付宝App低保真原型设计、最终效果10.1?需求描述10.2?设计思路10.3?准备工作10.4?设
计流程10.5?小结10.1?需求描述1利用Axure的母版功能绘制猫眼电影App的底部标签导航。2绘制“电影”模块的热
映内容界面布局。3绘制“电影”模块的待映内容界面布局。4绘制“电影”模块的榜单内容界面布局。5制作猫眼电影App海报轮
播效果。6制作猫眼电影App页签切换效果。7制作猫眼电影App的“电影”模块界面内容上下滑动效果。8制作猫眼电影App
的“预告片推荐”界面内容左右滑动效果。10.1?需求描述10.2?设计思路10.3?准备工作10.4?设计流程10.5?小
结10.2?设计思路在进行页面布局时，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等。1在设计底
部标签导航时，需要将它设计成母版，这样在页面里可以直接使用，避免重复制作和重复添加交互效果。23海报轮播效果制作需要借助于动态面板
的状态自动切换效果进行设置。4界面内容上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是外层控制显示区域，另一个是用来添
加拖动效果。510.1?需求描述10.2?设计思路10.3?准备工作10.4?设计流程10.5?小结10.3?准备工作进行
低保真原型设计，不要使用截图或者过多的彩色，最好使用黑白灰3种颜色。交互设计师或者产品经理在制作完低保真原型后，交给视觉设计师（U
I设计师或者美工）来进行界面的设计，他们会制作界面图片，并且切图。10.1?需求描述10.2?设计思路10.3?准备工作10
.4?设计流程10.5?小结10.4.1底部标签导航母版设计 App绝大部分都采用底部标签导航的方式。它一般会包含3~5个
标签导航菜单，每个菜单将软件模块划分得很清晰。用户看到菜单名称，大致可以知道这个界面所要表达的内容。支付宝App的导航菜单共有4个
标签：支付宝、口碑、朋友、我的。这4个标签在很多页面都会使用到，可将它们制作成母版。图10.2手机屏幕背景1. 在母版区域里新
建一个母版“标签导航”，打开这个母版；拖曳一个矩形1元件，宽度设置为320，高度设置为480，坐标位置设置为（0,0）颜色填充为灰
色（F2F2F2），去掉边框线，作为手机屏幕背景，如图10.2所示。2. 拖曳一个矩形1元件，宽度设置为320，高度设置为50，坐
标位置设置为（0,430）边框颜色设置为灰色（E4E4E4），作为底部标签导航背景；拖曳4个图片元件，宽度和高度设置为25，如图1
0.3所示。图10.3标签导航图标3. 拖曳4个标签元件，文本内容分别输入为“支付宝”“口碑”“朋友”和“我的”，字号设置为
11号字，标签也分别命名为“支付宝”“口碑”“朋友”和“我的”；在页面区域上建立4个页面“支付宝”“口碑”“朋友”和“我的”，
如图10.4所示。图10.4导航菜单名称及页面名称图10.6打开相应页面图10.5打开支付宝页面给“支付宝”标签导航上
面分别拖曳一个图像热区元件，给它添加鼠标单击时触发事件，在当前窗口打开相应页面，如图10.5所示。在“口碑”“朋友”和“我的”标签
导航上面分别拖曳一个图像热区元件，给它添加鼠标单击时触发事件，在当前窗口打开相应页面，如图10.6所示。图10.8标签导航选中
状态设置图10.7母版引用到页面将标签导航母版通过新增页面的方式引用到“支付宝”“口碑”“朋友”和“我的”4个页面了，如图10
.7所示。进入“支付宝”页面，添加页面载入时触发事件。通过富文本的方式设置“支付宝”文本内容字体加粗，该标签导航菜单呈现为选中状
态，运用同样的方式给其他3个标签导航设置为选中状态，如图10.8所示。8. 按F5键发布原型。单击不同的标签导航，相应的标签字体加
粗，呈现为选中状态，如图10.9所示。图10.9发布原型10.4.2“支付宝”九宫格导航布局设计“支付宝”界面主要由三部分
组成，界面状态栏、界面内容和标签导航菜单。标签导航菜单已采用母版的方式设计，界面内容则采用九宫格导航方式。九宫格导航方式是一种宫格
导航方式，它并非只有9个导航菜单。通过这样的导航方式，可以清晰地展现各个业务功能，便于用户的查找和使用。1. 进入“支付宝”页面，
拖曳一个矩形1元件，宽度设置为320，高度设置为120，颜色填充为灰色（3A3A3A）。再拖曳4个图片元件，宽度和高度都设置为20
，作为账单、用户、放大镜、加号图标。拖曳一个标签元件，文本内容命名为“账单”，字体颜色设置为白色（FFFFFF），如图10.10所
示。图10.10状态栏设计2. 拖曳4个图片元件，宽度和高度都设置为35，再拖曳4个标签元件，文本内容分别为“扫一扫”“付款”
“卡券”和“咻一咻”，字体颜色设置为白色（FFFFFF），字号设置为12号字，如图10.11所示。图10.11快捷功能按钮拖曳
一个动态面板元件，宽度设置为320，高度设置为358，坐标位置设置为（0,120），动态面板的名称为“支付宝屏幕显示区”，状态名称
为“支付宝屏幕”，如图10.12所示。进入“支付宝屏幕”这个状态，拖曳一个矩形1元件，宽度和高度都设置为80，边框线的颜色设置为浅
灰色（E4E4E4），复制出11个同样的矩形框，如图10.13所示。图10.12支付宝屏幕显示区图10.13九宫格导航框
5. 九宫格导航菜单由两部分组成，一个是导航菜单图标，可以使用图片元件来代替，拖曳一个图片元件，宽度和高度都设置为30；还有一个是
导航菜单名称，拖曳一个标签元件，字号设置为11号字，如图10.14所示。图10.14九宫格导航菜单图10.16海报内容图1
0.15海报轮播显示区拖曳一个动态面板元件，宽度设置为320，高度设置为70，坐标位置设置为（0,250），动态面板的名称为“海
报轮播显示区”，3个状态分别为“海报1”“海报2”和“海报3”，如图10.15所示。在“海报1”“海报2”两个状态里，分别放置两个
占位符元件，宽度设置为320，高度设置为70，文本内容分别为“海报1”“海报2”，如图10.16所示。8. 复制上面制作好的九宫
格导航，在它的基础修改一下，成为下面的九宫格导航，如图10.17所示。图10.17九宫格导航菜单设计10.4.3海报轮播效果
制作1. 进入“支付宝屏幕显示区”这个状态，选中“海报轮播显示区”动态面板，给它添加载入时触发事件。在“添加动作”下选择“设置面板
状态”，在“配置动作”下选择“Set海报轮播显示区”复选框，选择“状态”选择“Next”，单击选中复选框“向后循环”，“循环间隔”
时间为“3000”毫秒，“进入动画”框选“向左滑动”，“退出动画”框选“向左滑动”，时间为“1000”毫秒，如图10.18所示。图
10.18海报轮播设置2. 按F8键发布原型，可以看到海报进行自动循环轮播，如图10.19所示。图10.19发布原型10.
4.4“余额宝”界面布局设计 在支付宝界面，单击九宫格导航的“余额宝”导航菜单，会进入余额宝界面。这个界面是用来显示余额宝总金
额和收益情况，如图10.20所示。图10.20余额宝界面1. 拖曳一个动态面板元件，宽度设置为320，高度设置为530，动态
面板的名称为“余额宝”，状态为“余额宝内容”，背景色设置为灰色（F2F2F2），如图10.21所示。10.21余额宝动态面板2
. 进入“余额宝内容”状态，拖曳一个矩形元件，宽度设置为320，高度设置为50，坐标位置设置为（0,0），颜色填充为深灰色（3A3
A3A），作为状态栏背景；拖曳一个水平线元件，颜色设置为白色（FFFFFF），添加一个向左的箭头，作为返回按钮；拖曳一个垂直线元件
，颜色设置为白色（FFFFFF），高度设置为17，作为间隔线，如图10.22所示。图10.22状态栏背景3. 拖曳一个文本标签
元件，文本内容为“余额宝”，字号设置为15，颜色设置为白色（FFFFFF）；拖曳两个图片元件，宽度和高度都设置为25，作为查看转入
记录图标和设置的图标，如图10.23所示。图10.23快捷图标拖曳一个矩形1元件，宽度设置为3
20，高度设置为50，边框颜色设置为浅灰色（E4E4E4）；拖曳两个文本标签元件，文本内容
分别为“转出”和“转入”，字号设置为15，加粗，如图10.24所示。拖曳一个动态面板元件，宽度设置为320，高度设置为429，坐标
位置为（0,50），动态面板的名称为“余额宝收益显示区”，状态名称为“余额宝收益”；拖曳一个矩形3元件，宽度设置为320，高度设置
为40，文本内容为“五一假期期间余额宝转入收益和转出到账时间提醒”，如图10.25所示。图10.24转入转出导航图10.25
余额宝收益显示区6. 进入“余额宝收益”这个状态，拖曳一个动态面板元件，宽度设置为320，高度设置为600，坐标位置为（0,0
），动态面板的名称为“余额宝收益内容显示区”，状态名称为“余额宝收益内容”，如图10.26所示。7. 进入“余额宝收益内容”这个状
态，拖曳一个矩形元件，宽度设置为320，高度设置为280，颜色填充为灰色（666666）；拖曳4个文本标签元件，文本内容分别为“昨
日收益(元)”“1000.94”“总金额(元)”和“2.45”，字体颜色设置为白色（FFFFFF），将“昨日收益(元)”字号设置为
14号字，将“1000.94”字号设置为72号字，将“总金额(元)”字号设置为12号字，将“2.45”字号设置为24号字，如图10
.27所示。图10.27收益情况图10.26余额宝收益内容显示区拖曳两个标签元件，文本内容分别命名为“万份收益(元)”和
“累计收益(元)”；拖曳两个标签元件，文本内容分别命名为“0.7181”和“236.32”，字号设置为24号；拖曳垂直线元件，边框
颜色设置为灰色（E4E4E4），作为间隔线，如图10.28所示。拖曳一个文本标签元件，文本内容命名为“七日年化收益率(%)”；拖曳
一个矩形1元件，宽度设置为80，高度设置为25，文本内容命名为“提示收益”，字号设置为12号字；拖曳一个占位符元件，宽度设置为32
0，高度设置为180，文本内容命名为“收益率走势图”，如图10.29所示。图10.29收益率走势图10.28万份收益10
.4.5“余额宝”界面上下滑动设计图10.31垂直拖动图10.30添加拖动动态面板时触发事件选中“余额宝收益内容显示区”动
态面板，给它添加拖动动态面板时触发事件，如图10.30所示。单击“移动”这个动作，勾选“余额宝收益内容显示区（动态面板）垂直拖动”
复选框，让它垂直拖动，如图10.31所示。3. 再给“余额宝收益内容显示区”这个动态面板添加拖动结束时触发事件。向下滑动时，如果
滑动的值大于0，就让“余额宝收益内容显示区”这个动态面板回到原始位置，如图10.32、图10.33所示。图10.33动态面板回到
初始位置图10.32动态面板元件滑动y值大于04. 向上滑动时，最外层动态面板“余额宝收益显示区”的高度是429，里层动态面板“
余额宝收益内容显示区”的高度是600，可以向上滑动的空间是170。当大于170的时候，同样让“余额宝收益内容显示区”动态面板回到原
始位置，如图10.34、图10.35所示。图10.35动态面板回到初始位置图10.34动态面板向上滑动5. 按F8键发布看一下
效果。在余额宝界面上下拖动，可以实现上下滑动效果，如图8.36所示。图10.36发布原型10.4.6“支付宝”与“余额宝”切换显
示效果 在支付宝页面里，单击余额宝导航会进入余额宝界面。在余额宝界面里，单击返回按钮可以回到支付宝界面，这是支付宝界面和余额宝界面
相互切换的显示效果，如图10.37所示。图10.37支付宝与余额宝切换显示1. 将“余额宝”动态面板隐藏起来，并且置于底层；进入
“支付宝屏幕显示区”动态面板的“支付宝屏幕”状态，拖曳一个图像热区元件放置在余额宝导航上面，添加鼠标单击时触发事件，让它显示“余额
宝”动态面板，并且置于顶层，如图10.38所示。图10.38显示余额宝动态面板图10.39隐藏余额宝动态面板2. 进入“余额宝”动态面板的“余额宝内容”状态里，拖曳一个图像热区元件放置在余额宝返回按钮上面，添加鼠标单击时触发事件，让它隐藏“余额宝”动态面板，并且置于底层，如图10.39所示。10.1?需求描述10.2?设计思路10.3?准备工作10.4?设计流程10.5?小结10.5小结 本章通过支付宝App低保真原型，应当做到以下几点。（1）学会使用标签元件、矩形元件、占位符元件、水平线元件、垂直线元件、图片元件、动态面板元件等进行页面的布局设计。 （2）学会使用Axure母版功能来设计App软件的底部标签导航；将它制作成母版，在其他页面可以直接使用。（3）学会如何实现海报轮播效果制作。（4）学会如何实现界面内容上下滑动效果的制作。 |
|
