Axure网站与App原型设计课件 第10章 美团App低保真原型设计

第10章美团App低保真原型设计【目录】10.1需求描述10.2

设计思路10.3准备工作10.4设计流程10.4.1 底部标签导航母版设计10.4.2“美团”页面布局设计10.4.3轮播效果制作10.4.4 “美团机票”页面布局设计10.4.5“美团机票”页面上下滑动设计10.4.6 “美团”页面与“美团机票”页面切换显示的效果10.5小结目录【学习目标】知识目标了解原型设计的思路，以及准备工作。熟悉原型设计的流程，包括母版设计、布局设计、交互设计。能力目标可以设计移动App的导航母版。可以设计移动App的页面布局。可以设计页面的轮播交互效果。可以设计页面上下滑动、页面切换的交互效果。素质目标形成严谨踏实的工作作风。树立正确的职业观。学习目标【情景引入】AxureRP10不仅可以用于网站原型的制作，还可以用于移动App原型的制作。本章案例：美团App的低保真原型设计，最终效果如图10.1所示。情景引入图10.1 美团App低保真原型设计及最终效果10.1 需求描述利用AxureRP10的母版功能绘制美团App的底部标签导航01设计“美团”页面的布局02制作“美团”页面的海报轮播效果03设计“美团机票”页面的布局04制作“美团机票”页面内容的上下滑动效果05实现“美团”页面与“美团机票”页面切换显示的效果0610.2 设计思路进行动态面板的状态自动切换的设置，可以实现海报轮播效果进行页面布局设计，需要用到“文本标签”元件、“矩形1”元件、“占位符”元件、“图片”元件、“动态面板”元件等要实现界面内容的上下滑动效果和左右滑动效果需要使用两个“动态面板”元件，一个用来控制显示区域，另一个用来添加拖动效果03010402在设计底部标签导航时，需要把底部标签导航设计成母版，这样设计其他页面时可以直接使用，避免重复制作和重复添加交互效果10.3 准备工作低保真原型设计不要使用截图或者过多的颜色，最好使用黑、白、灰3种颜色。交互设计师或者产品经理在制作完低保真原型后，将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计。视觉设计师会制作界面图片，并且切图。原型里所采用的图片和色调应该交给视觉设计师来决定。10.4 设计流程10.4.1 底部标签导航母版设计美团App采用标签导航，包括5个标签，即“美团”“电商”“消息”“购物车”“我的”，这5个标签在很多页面都会用到，把它们制作成母版，可以实现“一次制作，多次重复使用”的效果。图9.7 制作表格的表头实战演练step01在母版区域里新建一个母版“标签导航”，打开该母版。拖曳一个“矩形1”元件到工作区域作为手机屏幕背景，将其宽度设置为320，高度设置为480，坐标设置为（0,0），填充颜色设置为灰色（#F2F2F2），去除边框线，如图10.2所示。图10.2 手机屏幕背景10.4 设计流程step02拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为50，坐标设置为（0,430），填充颜色设置为灰色（#E4E4E4），去除边框线，将其作为底部标签导航背景。拖曳5个“图片”元件到工作区域，将其宽度和高度均设置为25，如图10.3所示。图10.3 标签导航图标step03拖曳5个“文本标签”元件到工作区域，将其文本内容分别设置为“美团”“电商”“消息”“购物车”“我的”，将字号设置为11号，将元件也分别命名为“美团”“电商”“消息”“购物车”“我的”。在页面区域中建立5个页面“美团”“电商”“消息”“购物车”“我的”，如图10.4所示。图10.4 导航菜单名称及页面名称10.4 设计流程step04拖曳一个“热区”元件到“美团”标签导航上，为其添加单击时的触发事件，即在当前窗口打开“美团”页面，如图10.5所示。图10.5 打开“美团”页面10.4 设计流程step05然后分别拖曳“热区”元件到“电商”“消息”“购物车”“我的”标签导航上，为其添加单击时的触发事件，即在当前窗口打开相应页面，如图10.6所示。图10.6 打开相应页面10.4 设计流程step06将“标签导航”母版引用到“美团”“电商”“消息”“购物车”“我的”5个页面，如图10.7所示。图10.7 将母版引用到页面step07进入“美团”页面，添加页面载入时的触发事件，通过富文本的方式设置“美团”文本，加粗，该标签导航处于选中状态，如图10.8所示。运用同样的方式为其他4个标签导航设置选中状态。图10.8 标签导航选中状态设置10.4 设计流程step08按“F5”键发布原型，单击不同的标签导航，相应的标签导航的文字加粗，处于选中状态，如图10.9所示。图10.9 发布原型10.4 设计流程10.4.2“美团”页面布局设计图9.7 制作表格的表头实战演练step01进入“美团”页面，拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为200，填充颜色设置为灰色（#3A3A3A）。拖曳一个“下拉框”元件、一个“文本框”元件、两个“图片”元件到工作区域，将“下拉框”元件设置为高度50、宽度25，将“文本框”元件设置为高度173、宽度25，将“图片”元件的宽度和高度都设置为20，将它们分别作为省市下拉列表、搜索框、语音图标、加号图标，如图10.10所示。图10.10 状态栏设计10.4 设计流程step02拖曳4个“图片”元件到工作区域，将其宽度和高度都设置为35。拖曳4个“文本标签”元件到工作区域，将其文本内容分别设置为“扫一扫”“骑车”“打车”“火车票机票”，文字颜色设置为白色（#FFFFFF），字号设置为12号，如图10.11所示。图10.11 快捷功能按钮10.4 设计流程step03拖曳3个“图片”元件到工作区域，将其宽度和高度都设置为50。拖曳3个“按钮”元件到工作区域，将其文本内容分别设置为“领30元美食券”“抢叠叠红包”“0元住酒店”，字号设置为12号，如图10.12所示。图10.12 优惠券快捷导航10.4 设计流程step04拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为130，坐标设置为（0,200），名称设置为“轮播显示区”，如图10.13所示；新建3个状态，将3个状态命名为“轮播图1”“轮播图2”“轮播图3”。图10.13 轮播显示区10.4 设计流程step05在“轮播图1”“轮播图2”“轮播图3”3个状态里分别放置3个“占位符”元件，将其宽度设置为320，高度设置为140，文本内容分别设置为“轮播图1”“轮播图2”“轮播图3”，如图10.14所示。图10.14 轮播内容10.4 设计流程step06拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为100，坐标设置为（0,330），名称设置为“美团屏幕区”，将状态命名为“美团屏幕”，如图10.15所示。图10.15 美团屏幕区10.4 设计流程step07进入“美团屏幕”状态，导航菜单由两部分组成。一部分是导航菜单图标，可以使用“图片”元件来代替，拖曳一个“图片”元件到工作区域，将其宽度和高度分别设置为150、75；另一部分是导航菜单名称，拖曳一个“文本标签”元件到工作区域，将其字号设置为12号。复制出同样的图片和标签，并修改文本内容，如图10.16所示。图10.16 美团屏幕区内容10.4 设计流程10.4.3轮播效果制作图9.7 制作表格的表头实战演练step01进入“美团”页面，为其添加载入时的触发事件。在“添加动作”面板中选择“设置动态面板状态”选项，在“配置动作”面板的“目标”下拉列表中选择“轮播显示区”选项，在“状态”下拉列表中选择“下一个”选项，勾选“在第1个到最后1个状态之间循环”复选框，在“进入动画”下拉列表中选择“向左滑动”选项，在其右侧的数值框中输入“1000”，勾选“Repeatevery”复选框，在其右侧的数值框中输入“3000”，如图10.17所示。图10.17 轮播设置10.4 设计流程step02按“F5”键发布原型，可以看到自动进行循环轮播，如图10.18所示。图10.18 发布原型10.4 设计流程10.4.4“美团机票”页面布局设计图9.7 制作表格的表头实战演练step01在“美团”页面下新建一个“美团机票”页面作为子页面。在“美团机票”页面中，拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为530，名称设置为“美团机票”，状态命名为“美团机票”，如图10.20所示。图10.20 “美团机票”动态面板10.4 设计流程step02拖曳一个“动态面板”元件到工作区域，将其名称设置为“轮播显示区”，新建一个状态，将状态命名为“轮播1”“轮播2”。单击动态面板，添加一个向左的箭头，作为返回按钮。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“美团机票”。进入“轮播1”状态，拖曳一个“占位符”元件到工作区域作为状态栏背景，将其宽度设置为320，高度设置为120，坐标设置为（0,0），如图10.21所示。图10.21 轮播显示区10.4 设计流程step03拖曳一个“动态面板”元件到工作区域，将其宽度设置为320，高度设置为410，坐标设置为（0,120），名称设置为“机票火车票汽车票显示区”，新建两个状态，将状态命名为“机票”“火车票”“汽车票”。在每个状态中拖曳3个“矩形1”元件到工作区域，将其宽度和高度均设置为90、40，将文本内容分别设置为“机票”“火车票”“汽车票”；拖曳一个“占位符”元件到工作区域，将其宽度设置为320，高度设置为363，文本内容分别设置为“机票内容”“火车票内容”“汽车票内容”，当前显示为“机票内容”，如图10.22所示。图10.22 “机票火车票汽车票显示区”动态面板10.4 设计流程10.4.5“美团机票”页面上下滑动设计图9.7 制作表格的表头实战演练step01选择“机票火车票汽车票显示区”动态面板，为其添加拖动时的触发事件，如图10.23所示。图10.23 “机票火车票汽车票显示区”动态面板10.4 设计流程step02在“添加动作”面板中选择“移动”选项，在“配置动作”面板的“目标”下拉列表中选择“机票火车票汽车票显示区”选项，“移动”下拉列表中选择“沿Y轴拖动”选项，如图10.24所示。图10.24 垂直拖动10.4 设计流程step03为“机票火车票汽车票显示区”动态面板添加拖动后松开的触发事件。上下滑动有两种情况。向下滑动时，如果滑动距离大于0，就使“机票火车票汽车票显示区”动态面板回到原始位置，如图10.25和图10.26所示。图10.25 动态面板滑动距离大于0图10.26 动态面板回到初始位置（1）10.4 设计流程step04向上滑动时，当滑动距离大于47时，同样使“机票火车票汽车票显示区”动态面板回到原始位置，如图10.27和图10.28所示。图10.27 动态面板滑动距离大于47图10.28 动态面板回到初始位置（2）10.4 设计流程step05按“F5”键发布原型，上下拖动“美团机票”页面，可以实现上下滑动效果，如图10.29所示。图10.29 发布原型10.4 设计流程10.4.6“美团”页面与“美团机票”页面切换显示的效果在“美团”页面里，单击“火车票机票”导航菜单会进入“美团机票”页面；在“美团机票”页面里，单击“返回”按钮可以回到“美团”页面。这样可以实现“美团”页面和“美团机票”页面切换显示的效果，如图10.30所示。图10.30 “美团”页面与“美团机票”页面切换显示的效果10.4 设计流程图9.7 制作表格的表头step01进入“美团”页面，拖曳一个“热区”元件到“火车票机票”导航菜单上，为其添加单击时的触发事件，使其打开“美团机票”页面，如图10.31所示。图10.31 “美团”页面切换到“美团机票”页面10.4 设计流程图9.7 制作表格的表头step02进入“美团机票”页面，拖曳一个“热区”元件到“返回”按钮上，为其添加单击时的触发事件，使其打开“美团”页面，如图10.32所示。图10.32 “美团机票”页面切换到“美团”页面