《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昨日收益（元）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星标件/*旗2O旗3SK区图片占位符支付宝X样式 交互 说明余额宝位重1尺寸0X 0Y320 w4530 h从不濠动自适应内容 100%宽度（仅浏览器中有效）固定到浏览器余额宝内容NSR0 i44空可外部余额宝动态面板（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支隹 xI转入转出导航（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-100100200300400500收益情况(8)拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“万份收益(元)”“累 计收益(元)”；拖曳两个“文本标签”元件到工作区域，将其文本内容分别命名为“0.7181” “236.32”， 将其字号设置为24号；拖曳一个“垂直线”元件到工作区域作为间隔线，将其边框颜色设置为灰色 (#E4E4E4) o支付宝X8I-万份收益(9)拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“七日年化收益率()” ； 拖曳一个“矩形1”元件到工作区域，将其宽度设置为80,高度设置为25,文本内容命名为“提示 收益”，字号设置为12号字；拖曳一个“占位符”元件到工作区域，将其宽度设置为320,高度设 置为180,文本内容命名为“收益率走势图”。“余额宝”界面上下滑动设计余额宝界面内容很长，一整屏无法显示所有内容，如果想查看完整的界面内容，可以通过上下 滑动余额宝界面，来查看完整的界面内容，下面开始制作余额宝界面上下滑动效果。(1)选中“余额宝收益内容显示区”动态面板，为其添加拖动动态面板时触发事件。支隹5 X 守 ;wo209 , , 一， 3Pq点击常用交互 单壬时.设置为下一个状态) 向左拖加束时，设置为上弓向右拖相束时,设置为下二)E3添加拖动动态面板时触发事件样式 交互 说明余额宝收益显示区 惘(2)在添加动作面板选择“移动”选项，勾选“余额宝收益内容显示区”，在设置动作面板的 移动下拉列表中选择“跟随垂直拖动”。X交互编辑器链接功作 翻开摄按关闭窗口 框架中翻开糙接 滚动到元件元件功作设置面板状态设置图片 设置选中 设置列表选中项 启用摩用|移动 螃 设置尺寸设置不透明 荻取焦点拖动时移的余额宝收益内容显示区鬣随垂直指前目际 余额宝收益内容显示区移动 跟随垂直抱三X跖None0更参法项，靛边界+添加界限确定取消垂直拖动(3)再为“余额宝收益内容显示区”动态面板添加拖动结束时触发事件。上下滑动有两种情况, 向下滑动时，如果滑动的值大于0,就使“余额宝收益内容显示区”动态面板回到原始位置。x情形编辑-余额宝收益内容显示区:拖动结束时x00 This.y) f. : 0 0如果(This.yn 0动态面板元件滑动y值大于0;交存编辑nq添加事件。+ 题9催Q链搂动作打刑蜘关闭窗口框架中打刑缆滚动到元件元件动作显示隔窗设置圆板状态isas：设置图片设首选中设置列表选中项启用煤甲|移动甘丽拖动时 移动丽目妹余额宝收益内容显示区余18宝收益内容显示区副质垂直拖动拖动结束时移动雌 0 X / 0_y f.a)s统性C 500Case 1如果fThis y 0移动克笏选项，we余脸收益内容显示区到达(0.0)送性5002秒边评+激。界限际没查尺寸BTI5IS/ES设置不透明获取隹点动态面板回到初始位置(4)向上滑动时，最外层动态面板“余额宝收益显示区”的高度是429,里层动态面板“余额宝收益内容显示区”的高度为600,向上滑动最大距离为170,当滑动距离大于170的时候，同样使 “余额宝收益内容显示区”动态面板回到原始位置。宝收益内容显示区”的高度为600,向上滑动最大距离为170,当滑动距离大于170的时候，同样使 “余额宝收益内容显示区”动态面板回到原始位置。x情形编辑-余额宝收益内容显示区拖动结束时跪名称匹配以下全部条件lThiS.yJ-170如果This.y ;交互编辑器鱼 漆mw*g 漆203）作Q 链接动作翻开曲 关闭窗口 框架中打 流动到元件元件动作 显示隔寂 设置面板状态设道图片 设置选中 设好院选中项 启用/禁用移动 的 设置尺寸 置于工程底层 设置不透明 荻取焦点动态面板向上滑动拖动时移动余额宝收益内容显示区丝殖垂直拖动拖动结束时ICase 1如果,（This y 0移动余薮宝收益内容显示区到达（0。）线住500室秒ICase 2否划如果irhis yD 53%BD 21:43北京/Q渝入商家、品类美食外卖黑快餐0丽人O面包甜点电影 6 吃货探店 2T一,一最近在it圈流行一家餐馆，上地it人不吃不 够格，毛毛汗雷菜e这家只有几道菜的正、 宗成都冒菜馆，经常是门庭假设市，4f/6 月 13 日支忖宝口碑朋友我的口碑界面底部标签导航母版设计绝大局部移动App软件喜欢采用底部标签导航方式，App一般会设计35个标签导航菜单，标 签导航菜单将软件模块划分地很清晰，每个菜单承载自己的内容，用户看到菜单名称，大致可以知 道该界面所要表达的内容。支付宝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 C3S支付宝s E朋友母版Q0 C3交付宝x |$ 一 . ， 1200300国标筌导航快捷功能按钮0 口支付宝 X（3）拖曳一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为358,坐标位 置设置为（0,120）,动态面板的名称设置为“支付宝屏幕显示区状态名称设置为“支付宝屏幕”。T回支忖宝目回朋友日眦元件母版Qa d、标筌导航决 支付宝支付宝屏幕显示区（4）进入到“支付宝屏幕”状态里，拖曳一个“矩形1”元件到工作区域，将其宽度和高度都 设置为80,边框线的颜色设置为浅灰色（#E4E4E4）,复制出11个同样的矩形框。九宫格导航框（5）九宫格导航菜单由两局部组成：一个是导航菜单图标，可以使用图片元件来代替，拖曳一个图片元件，将其宽度和高度都设置为30；还有一个是导航菜单名称，拖曳一个“文本标签”元件 到工作区域，将其字号设置为11号字。页面概要QB DS支付宝S 口理EJ朋友叵雌元件母版Q0 D画标签导航支付宝XO10020030088九宫格导航菜单（6）拽一个“动态面板”元件到工作区域，将其宽度设置为320,高度设置为70,坐标位置设 置为（0,250）,动态面板的名称设置为“海报轮播显示区”，3个状态分别命名为“海报1” “海 报2” “海报3” o页自S支付宝E 口碑目朋友目触概要国元件母版+8Default*本元件.支付宝X 我的口碑X标签导航X84&海报轮播显示区Oipq . ,，|秋，I , , ： , I309 , , , 49t（7）在“海报1” 320,高度均设置为70,“海报2”两个状态里，分别放置两个“占位符”元件，将其宽度均设置为 文本内容分别设置为“海报1” “海报2”。S支付宝S 口碑s朋友母版Default基本元件，10088CM旗21 口中，,支付宝x 的x 用及x 口群x4(X标签导航X200 1 ,300海报内容（8）复制制作好的九宫格导航，在其基础修改，成为如下图的下方的九宫格导航。s0 整Q国门S支付宝回口碑回朋友S我的元件母版Q+ S ：Default基本元件.口31初2O就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不透明我取焦点i5目修 海报轮播显示区* T-Z向后循环进入g向左涓动 C 1000 wNone 0 vnnasi向左涓动 0 1QQ0 0None更Z选软，循环间隔300口它首个状杳延时3000室秒后切换n如果隐藏那么显示推须0构动元件海报轮播设置(2)按F8键发布原型，可以看到海报进行自动循环轮播。bQ支(隹x +发布原型10.4.4 “余额宝”界面布局设计在支付宝界面，单击九宫格导航栏的余额宝导航菜单，会进入到余额宝界面，该界面是用来显 示余额宝总金额以及收益情况，可以将钱转入到余额宝，也可以进行转出。