Axure网站与App原型设计（全彩慕课版）（AxureRP10） 课件 第10-12章 美团App低保真原型设计、去哪儿网站高保真原型设计、产品经理的职能

第10章美团App低保真原型设计Axure网站与App原型设计（全彩慕课版）（AxureRP10）【目录】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 “美团机票”页面切换到“美团”页面step03发布原型，单击“火车票机票”导航菜单，会进入“美团机票”页面，单击“返回”按钮，“美团”页面显示出来，实现了“美团”页面和“美团机票”页面切换显示的效果。10.5 小结本章主要介绍了页面区域的使用方法，通过页面区域管理页面，读者应当学会以下知识。使用“文本标签”元件、矩形元件、“占位符”元件、“图片”元件、“动态面板”元件等元件进行页面的布局设计。使用AxureRP10的母版功能来设计App的底部标签导航。将底部标签导航制作成母版，这样其他页面可以直接使用，不需要进行重复制作。海报轮播效果的制作方法。页面内容上下滑动效果的制作方法。THANKS第11章去哪儿网站高保真原型设计Axure网站与App原型设计（全彩慕课版）（AxureRP10）【目录】11.1需求描述11.2

设计思路11.3准备工作11.4设计流程11.4.1 网站注册表单的布局设计11.4.2网站注册表单校验11.4.3倒计时交互设计11.4.4 “登录”页面布局与交互设计11.4.5导航菜单母版设计11.4.6 首页搜索区域导航菜单悬浮效果设计11.5小结目录【学习目标】知识目标了解原型设计的思路，以及准备工作。熟悉原型设计的流程，包括母版设计、布局设计、交互设计。能力目标可以设计网站的导航菜单母版。可以设计网站的页面布局。可以设计表单校验。可以设计倒计时交互。素质目标培养快速定位问题的能力。提升灵活应变能力。学习目标【情景引入】AxureRP10不仅可以设计出低保真的软件原型，也可以设计出高保真原型。高保真原型无论是在软件界面上还是在软件交互上，与真实软件的体验效果几乎都一样。图11.1所示是去哪儿网站首页的原型，它的界面和操作效果与真实网站几乎一样。情景引入图11.1 去哪儿网站首页原型11.1 需求描述设计去哪儿网站的注册表单并进行表单验证制作验证码50s倒计时交互效果设计去哪儿网站的登录页面，不进行表单验证制作去哪儿网站导航菜单母版制作首页搜索区域导航菜单悬浮效果11.2 设计思路将网站的顶部信息、导航菜单制作成母版，这样其他页面可以直接使用，不需要进行重复制作进行注册表单的验证时，需要用到动态面板和设置条件，当用户输入用户名和密码时，动态面板根据不同的条件显示不同的提示信息在进行页面布局时，需要用到“文本标签”元件、矩形元件、“文本框”元件、“水平线”元件、“图片”元件、“动态面板”元件等11.3 准备工作进行高保真原型设计需要使用大量的图片。在真实项目中，交互设计师会绘制一版低保真原型，然后将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计，他们会制作界面图片，并且切图；交互设计师拿到图片后，替换低保真原型里的图片，最终制作出高保真原型。图11.2 去哪儿网站注册页面图11.3 去哪儿网站首页11.4 设计流程11.4.1网站注册表单的布局设计图9.7 制作表格的表头step01进入“Page1”页面，拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“手机号登录/注册”“密码登录”，字号均设置为16号，其中“手机号登录/注册”为粗体、“密码登录”的颜色为（#AAAAAA）。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“新用户验证成功即自动注册”，字号设置为13号，如图11.5所示。进入“Page1”页面，拖曳一个“图片”元件到工作区域，用去哪儿网站logo图片替换。拖曳一个“垂直线”元件到工作区域，设置其高度为20，颜色设置为（#05CDE9）。拖曳一个“文本标签”元件，将其文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“水平线”元件到工作区域，设置颜色为（#05CDE9），宽度设置为800，如图11.5所示。图11.5 “Page1”页面11.4 设计流程step02拖曳3个“文本框”元件到工作区域，将其中一个文本框的宽度和高度分别设置为100和40，文本内容设置为“86”；将另一个文本框的宽度和高度设置为230、40，并设置其提示文本为“请输入手机号”；将最后一个文本框的宽度和高度设置为260、40，并设置其提示文本为“验证码”。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“获取验证码”“获取语音验证码”，将“语音验证码”加粗。如图11.6所示。图11.6 注册表单界面11.4 设计流程step03拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），文本内容设置为“登录/注册”，字号为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.7所示。图11.7 “登录/注册”按钮及协议11.4 设计流程11.4.2网站注册表单校验图9.7 制作表格的表头step01拖曳一个“矩形2”元件到工作区域，设置填充颜色为（#333333），并设置其透明度为70%，如图11.8所示。图11.8 滑动校验弹窗底层页面11.4 设计流程图9.7 制作表格的表头step02拖曳一个“矩形1”元件到工作区域，将其宽度和高度分别设置为400和130，圆角半径设置为20。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“滑动校验”，字号设置为16号。拖曳一个“关闭”图标到工作区域，将其宽度和高度均设置为10。拖曳一个“矩形1”元件到工作区域，设置宽度和高度分别为380、50，将圆角半径设置为10，将其文本内容设置为“请按住滑块，拖到最后边”，字号设置为14号。拖曳一个“矩形1”元件到工作区域，设置宽度和高度为50、圆角半径为10，将边框颜色设置为（#03A613）。拖曳一个向右的双箭头图标到工作区域，设置宽度和高度为30，并设置填充颜色为（#7F7F7F），如图11.9所示。11.4 设计流程图11.9 滑动校验弹窗页面11.4 设计流程11.4.3倒计时交互设计图9.7 制作表格的表头step01新建一个全局变量“totaltime”，默认值为50，为其添加单击“短信验证码”时的触发事件，添加条件，如果“totaltime”变量值大于0，使变量值减1，然后为“获取验证码”重新设置文本内容，等待1s后，重新单击触发事件，如图11.10所示。图11.10 单击触发事件11.4 设计流程图9.7 制作表格的表头step02如果“totaltime”变量值等于0，设置“获取验证码”文本内容为“50s后可重新获取”，设置“totaltime”变量值为50，等待1s后，重新单击“短信验证码”触发事件，如图11.11所示。图11.11 重新获取验证码step03发布原型并检查效果，单击“获取验证码”时可以看到时间不断减少，时间减少到0后，重置时间为50s，这样就实现倒计时的交互效果了。11.4 设计流程11.4.4“登录”页面布局与交互设计去哪儿网站提供多种登录方式，分别是手机验证码登录、密码登录，以及扫码登录、微博登录、QQ登录、百度账号登录等，这里仅设计手机验证码登录及密码登录两种登录方式，通过单击文本标签，选择相应的登录方式进行登录，如图11.12和图11.13所示。图11.12 手机验证码登录图11.13 密码登录11.4 设计流程图9.7 制作表格的表头step01在页面区域新建一个页面“登录”，拖曳一个“图片”元件到工作区域，将其替换为“去哪儿logo”图片。拖曳一个“垂直线”元件到工作区域，设置其高度为20，将颜色设置为（#05CDE9）。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“水平线”元件到工作区域，设置颜色为（#05CDE9），将宽度设置为800，如图11.14所示。图11.14 登录状态栏11.4 设计流程图9.7 制作表格的表头step02拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“手机号登录/注册”“密码登录”，字号均设置为16号，其中“手机号登录/注册”为粗体、“密码登录”的颜色为（#AAAAAA），如图11.15所示。图11.15 两种登录方式11.4 设计流程图9.7 制作表格的表头step03拖曳一个“动态面板”元件到工作区域，将其命名为“登录显示区”，建立两种状态，分别为“手机号登录”“密码登录”，如图11.16所示。图11.16 “登录显示区”动态面板11.4 设计流程图9.7 制作表格的表头step04拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“新用户验证成功即自动注册”，字号设置为13号。拖曳3个“文本框”元件到工作区域，一个文本框的宽度和高度分别设置为100和40，文本内容设置为86；另一个文本框的宽度和高度分别设置为230和40，并设置其提示文本为“请输入手机号”；最后一个文本框的宽度和高度分别设置为260和40，并设置其提示文本为“验证码”。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“获取验证码”“获取语音验证码”，将“语音验证码”加粗，如图11.17所示。图11.17 “手机号登录”状态设计11.4 设计流程图9.7 制作表格的表头step05拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），将文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.18所示。图11.18 “登录/注册”按钮及相关协议政策11.4 设计流程图9.7 制作表格的表头step06进入“密码登录”状态，拖曳两个“文本框”元件到工作区域，将其宽度和高度分别设置为340和40，分别在文本框中添加提示文本“手机/邮箱/用户名”“密码”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“忘记密码？”，字号设置为13号。拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），将文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.19所示。图11.19 “密码登录”状态设计11.4 设计流程图9.7 制作表格的表头step07回到“登录”页面，选择“手机号登录/注册”，为其添加单击时的触发事件，设置“登录显示区”动态面板的状态为“手机号登录”，如图11.20所示。图11.20 为“手机号登录/注册”添加触发事件11.4 设计流程图9.7 制作表格的表头step08选择“密码登录”，为其添加单击时的触发事件，设置“登录显示区”动态面板的状态为“密码登录”，如图11.21所示。图11.21 为“密码登录”添加触发事件step09发布原型并检查效果，单击“手机号登录/注册”，显示的是手机号登录的内容；单击“密码登录”，显示的是密码登录的内容。11.4 设计流程11.4.5导航菜单母版设计去哪儿网站的导航菜单有很多内容，一级导航菜单有十几个，每个一级导航菜单下面有对应的二级导航菜单，如图11.22所示。在设计原型时，把导航菜单设计成母版，这样可以直接将其引用到其他页面中，不需要再重复制作，从而大大减少工作量，提高工作效率。图11.22 导航菜单11.4 设计流程导航菜单布局设计图9.7 制作表格的表头step01在母版区域新建一个母版，将其命名为“导航菜单”，双击进入“导航菜单”母版，拖曳一个“图片”元件到工作区域，用“1-状态栏”图片替换“图片”元件，将其坐标设置为（0,0）。拖曳一个“图片”元件到工作区域，用“0-背景”图片替换“图片”元件，将其宽度设置为1849，高度设置为50，坐标设置为（0,132），将其作为导航菜单背景，如图11.23所示。图11.23 状态栏及导航菜单背景11.4 设计流程图9.7 制作表格的表头step02拖曳12个“文本标签”元件到工作区域，将其文本内容分别设置为“首页”“机票”“酒店”“火车票”“度假”“团购”“门票”“当地人”“汽车票”“行程设计”“攻略”“旅游快讯”，将文字加粗，文字颜色设置为（#FFFFFF），字号设置为18号。将“首页”的坐标设置为（155,147），“旅游快讯”的坐标设置为（925,147），设定好第一个和最后一个“文本标签”元件的位置，使其他“文本标签”元件水平均匀分布，如图11.24所示。图11.24 一级菜单11.4 设计流程图9.7 制作表格的表头step03拖曳一个“矩形1”元件到工作区域，将其宽度设置为56，高度设置为50，坐标设置为（143,133），填充颜色设置为（#000000），不透明度设置为10%，将其命名为“首页菜单选中背景”。把“首页”置于顶层，使其位于“首页菜单选中背景”元件上面。复制“首页菜单选中背景”元件，将新元件命名为“菜单悬浮背景”，将其坐标设置为（83,133），并将其隐藏起来，如图11.25所示。图11.25 首页菜单选中背景11.4 设计流程图9.7 制作表格的表头step04拖曳一个“动态面板”元件到工作区域，将其名称修改为“二级导航菜单显示区”。建立两种状态，将它们分别命名为“机票二级导航菜单”“酒店二级导航菜单”，将它们的宽度设置为300，高度设置为50，坐标设置为（197,183），如图11.26所示。图11.26 二级导航菜单显示区11.4 设计流程图9.7 制作表格的表头step05进入“机票二级导航菜单”状态，拖曳一个“矩形1”元件到工作区域，将其宽度设置为200，高度设置为50，边框颜色设置为（#00CED1）。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“机票首页”“低价机票”，如图11.27所示。图11.27 机票二级导航菜单11.4 设计流程图9.7 制作表格的表头step06复制“机票二级导航菜单”的内容到“酒店二级导航菜单”状态，并修改导航菜单名称，如图11.28所示。图11.28 酒店二级导航菜单11.4 设计流程导航菜单交互设计图9.7 制作表格的表头step01将“二级导航菜单显示区”动态面板隐藏起来，在页面区域建立3个页面分别为“首页”“机票”“酒店”。在“导航菜单”母版中，选择“首页”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“首页”页面，如图11.29所示。图11.29 打开首页11.4 设计流程图9.7 制作表格的表头step02选择“机票”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“机票”页面。添加鼠标指针移入时的触发事件，鼠标指针移入时显示“二级导航菜单显示区”动态面板，设置动态面板状态为“机票二级导航菜单”。添加鼠标指针移出时的触发事件，隐藏“二级导航菜单显示区”动态面板，如图11.30所示。图11.30 “机票”导航菜单交互设计11.4 设计流程图9.7 制作表格的表头step03选择“酒店”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“酒店”页面。添加鼠标指针移入时的触发事件，显示“二级导航菜单显示区”动态面板，设置动态面板状态为“酒店二级导航菜单”。添加鼠标指针移出时的触发事件，隐藏“二级导航菜单显示区”动态面板，如图11.31所示。图11.31 “酒店导航”菜单交互设计11.4 设计流程图9.7 制作表格的表头step04在母版区域的“导航菜单”母版上单击鼠标右键，在弹出的快捷菜单中选择“添加到页面”命令，在弹出的“添加母版到页面”对话框里将“导航菜单”母版引用到“首页”“机票”“酒店”页面，如图11.32所示。图11.32 将母版引用到页面step05进入“首页”页面可以看到引入的“导航菜单”母版，按“F5”键发布原型并检查效果。将鼠标指针移到“机票”或者“酒店”导航菜单上面时会出现二级菜单，将鼠标指针移出时二级菜单会隐藏起来，如图11.33所示。图11.33 发布原型11.4 设计流程11.4.6首页搜索区域导航菜单悬浮效果设计去哪儿网站首页里包含一个搜索区域，可以针对机票、酒店、火车票、度假、门票、团购、自由行进行检索，如图11.34所示。图11.34 搜索区域11.4 设计流程图9.7 制作表格的表头step01进入“首页”页面，拖曳一个“图片”元件到工作区域，用“2-搜索区域”图片替换“图片”元件，将其坐标设置为（143,233）。拖曳一个“动态面板”元件到工作区域，将其名称设置为“搜索导航显示区”，宽度设置为90，高度设置为53，坐标设置为（155,246），将状态命名为“导航悬浮内容”，如图11.35所示。图11.35 搜索导航显示区11.4 设计流程图9.7 制作表格的表头step02进入“导航悬浮内容”状态，拖曳一个“矩形1”元件到工作区域，将其宽度设置为90，高度设置为53，去除边框线。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“机票”，文字颜色设置为（#00D0D4），字号设置为18号，将其命名为“导航内容”，如图11.36所示。图11.36 导航悬浮内容11.4 设计流程图9.7 制作表格的表头step03回到“首页”页面，将“搜索导航显示区”动态面板隐藏起来，置于底层。拖曳一个“热区”元件到工作区域，将其放置在“机票”的上面，并添加鼠标指针移入时的触发事件，鼠标指针移入时显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,246），设置“导航内容”为“机票”，如图11.37所示。图11.37 “机票”悬浮交互11.4 设计流程图9.7 制作表格的表头step04拖曳一个“热区”元件到工作区域，将其放置在“酒店”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,299），设置“导航内容”为“酒店”，如图11.38所示。图11.38 “酒店”悬浮交互11.4 设计流程图9.7 制作表格的表头step05拖曳一个“热区”元件到工作区域，将其放置在“火车票”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,352），设置“导航内容”为“火车票”，如图11.39所示。图11.39 “火车票”悬浮交互11.4 设计流程图9.7 制作表格的表头step06拖曳一个“热区”元件到工作区域，将其放置在“度假”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,405），设置“导航内容”为“度假”，如图11.40所示。图11.40 “度假”悬浮交互11.4 设计流程图9.7 制作表格的表头step07拖曳一个“热区”元件到工作区域，将其放置在“门票”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,458），设置“导航内容”为“门票”，如图11.41所示。图11.41 “门票”悬浮交互11.4 设计流程图9.7 制作表格的表头step08拖曳一个“热区”元件到工作区域，将其放置在“团购”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,511），设置“导航内容”为“团购