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

第10章 支付宝App低保真原型设计 课时内容 支付宝App低保真原型设计 课时 6 教学目标 通过支付宝App低保真原型设计，学习元件、母版的使用及海报轮播效果、上下滑动效果的制作 教学重点 元件的使用、母版的使用、海报轮播效果、上下滑动效果 教学难点 元件的使用、母版的使用、海报轮播效果、上下滑动效果 教学设计 1.教学思路：通过一个综合案例学习低保真原型设计方法。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 10.1 需求描述 利用Axure RP9原型工具绘制支付宝App低保真原型，主要设计几个方面。 利用Axure的母版功能绘制支付宝App的底部标签导航。 绘制“支付宝”界面的九宫格导航布局。 制作“支付宝”界面的海报轮播效果。 绘制“余额宝”界面的布局。 制作“余额宝”界面内容上下滑动效果。 实现“支付宝”界面与“余额宝”界面切换显示效果。 10.2 设计思路 如何进行支付宝App需的低保真原型制作呢？ 在进行页面布局，需要用到文本标签元件、矩形1元件、占位符元件、横线元件、图片元件、动态面板元件等元件。 在设计底部标签导航栏时，需要把底部标签导航栏设计成母版，这样设计一次，在页面里可以直接使用，避免重复制作和重复添加交互效果。 海报轮播效果的制作需要进行动态面板的状态自动切换效果设置，设置状态自动切换就可以实现海报轮播效果。 界面内容的上下滑动效果和左右滑动效果，需要使用两个动态面板元件，一个是用来外层控制显示区域，另一个是用来添加拖动效果，以实现界面内容上下滑动效果或者左右滑动效果。 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，作为账单、用户、放大镜、加号图标；