首页 > 正在进行安全检测...

正在进行安全检测...

发布时间：1714408611 来源：文档文库

小中大

字号：

手机查看

第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 设计流程

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。

标签导航图标

本文来源：https://www.2haoxitong.net/k/doc/ff1e67c474c66137ee06eff9aef8941ea66e4be9.html

《正在进行安全检测....doc》

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

文档为doc格式

相

关

案

例

正在进行安全检测...

相关推荐

推荐内容