Axure-RP8原型设计图解第11章课件.pptx

1、 Axure原型设计工具不仅可以设计出低保真的软件原型，同时也可以设计出高保真原型。高保真原型的效果，不管在软件界面还是在软件交互上，几乎和真实软件的体验效果一样。图11.1所示为携程旅游网站首页的原型设计。图图11.1携程旅游网站首页携程旅游网站首页11.1 需求描述11.2 设计思路11.3 准备工作11.4 设计流程11.5 小结11.1 需求描述1 绘制蜜淘全球购网站的登录页面并进行表单验证。2 绘制蜜淘全球购网站的注册页面，不进行表单验证。3 绘制蜜淘全球购网站的首页，进行页面布局设计。4 将蜜淘全球购网站首页的顶部信息制作成母版使用。5 将蜜淘全球购网站首页的导航菜单制作成母版使用

2、。6 将蜜淘全球购网站首页的版权信息制作成母版使用。7 将蜜淘全球购网站首页的导航菜单固定到浏览器顶部，不会随着滚动条的滚动而滚动。8 进行蜜淘全球购网站商品详情页的布局设计，并将顶部信息母版、导航菜单母版、版权信 息母版引入到商品详情页进行使用。 11.1 需求描述11.2 设计思路11.3 准备工作11.4 设计流程11.5 小结11.2 设计思路02PRAT03PRAT04PRAT01PRAT在进行页面布局，需要用到标签元件、矩形元件、文本框（单行）在进行页面布局，需要用到标签元件、矩形元件、文本框（单行）元件、横线元件、图片元件、动态面板元件等。元件、横线元件、图片元件、动态面板元件等

3、。进行注册表单的验证，需要用到动态面板和条件设置。当用户输进行注册表单的验证，需要用到动态面板和条件设置。当用户输入用户名和密码的时候，错误的提示信息放在动态面板里，根据入用户名和密码的时候，错误的提示信息放在动态面板里，根据不同的条件显示不同的提示信息。不同的条件显示不同的提示信息。倒计时交互设计，需要使用页面加载时触发事件，并且使用两个倒计时交互设计，需要使用页面加载时触发事件，并且使用两个同样的页面加载时触发事件。同样的页面加载时触发事件。将网站的顶部信息、导航菜单和版权信息制作成母版，其他页面将网站的顶部信息、导航菜单和版权信息制作成母版，其他页面直接使用。直接使用。05PRAT06P

4、RAT海报轮播效果制作，需要借助于动态面板元件，在多个状态中自海报轮播效果制作，需要借助于动态面板元件，在多个状态中自动切换显示。动切换显示。图片放大缩小效果制作，需要动态地改变图片的尺寸，以实现图图片放大缩小效果制作，需要动态地改变图片的尺寸，以实现图片放大缩小的效果。片放大缩小的效果。11.1 需求描述11.2 设计思路11.3 准备工作11.4 设计流程11.5 小结11.3 准备工作进行高保真原型设计，需要使用大量的图片。在真实项目中，交互设计师会绘制一版低保真原型，交给视觉设计师（UI设计师或者美工）来进行界面的设计。他们会制作界面图片，并且切图。交互设计师拿到这些图片，在低保真原型

5、里进行替换，最终才能制作出一版高保真设计原型。（1）需要准备携程旅游网站登录界面和注册界面相关图片（见图11.2和图11.3）。图图11.2携程旅游网站注册界面携程旅游网站注册界面图图11.3携程旅游网站登录界面携程旅游网站登录界面（2）需要准备携程旅游网站首页界面的图片（见图11.4）。图图11.4携程旅游网站首页界面携程旅游网站首页界面11.1 需求描述11.2 设计思路11.3 准备工作11.4 设计流程11.5 小结11.4 设计流程11.4.1 网站注册表单布局设计携程旅游网站的注册表单是一个向导型表单。注册分为三个步骤：填写、验证、注册成功。注册表单内容包含手机号、Email、密码

6、、确认密码等表单项，如图11.5、图11.6所示。图图11.5填写表单填写表单图图11.6邮箱验证邮箱验证1.进入注册页面，拖曳一个图片元件，用“1-状态栏”图片替换图片元件，x、y坐标值为（0,0）；拖曳一个图片元件，用“27-填写向导”图片替换图片元件，x、y坐标值为（0,0），如图11.7所示。图图11.7状态栏和表单向导状态栏和表单向导2.拖曳一个文本标签元件，文本内容命名为“会员注册 注册成功可获1000积分+返现特权”，将“会员注册”4个字设置为24号字，将“1000”字体颜色设置成绿色（006600），字体加粗，将“返现”字体颜色设置成橙色（FF9900），字体加粗，如图11.8

7、所示。图图11.8会员注册说明会员注册说明3.拖曳3个文本标签元件，文本内容分别输入为“手机号”“Email”和“密码”，字号设置为16号字；拖曳一个矩形1元件，宽度设置为320，高度设置为32，边框颜色为灰色（CCCCCC）；拖曳个文本框元件，宽度设置为210，高度设置为25，如图11.9所示。4.设置文本框的提示文字为“可用作登录名”，去掉隐藏边框，然后再复制出两个，作为Email和密码的输入框，它们的提示文字分别为“可用作登录名”和“8-20位字母、数字和符号”，如图11.10所示。图图11.10设置提示文字设置提示文字图图11.9表单标签和边框表单标签和边框5.拖曳一个动态面板元件，动

8、态面板的名称“确认密码组合”，状态命名为“密码组合”，复制手机号标签和文本框到“密码组合”状态里，修改表单标签为“确认密码”，提示文字为“再次输入密码”，如图11.11所示。图图11.11确认密码确认密码6.拖曳一个复选框元件，文本内容重新命名为“同意”，拖曳一个图片元件，用“20-验证按钮”图片替换图片元件；拖曳一个文本标签元件，放置在Email文本输入框的后面，文本内容为“填写Email并通过验证，可额外获得200积分！”，将“200”字体设置为绿色（006600），字体加粗，如图11.12所示。图图11.12注册协议注册协议7.拖曳一个动态面板元件，动态面板名称为“密码强度显示区”，建立

9、4个状态“密码默认等级”“密码弱”“密码中”和“密码强”，分别用“14-注册密码默认”“15-注册密码等级弱”“16-注册密码等级中”和“14-注册密码等级强”图片作为状态内容，如图11.13所示。图图11.13密码强度密码强度11.4.2 网站注册表单校验1密码校验内容当密码输入框获得焦点时，显示提示信息“请设置登录密码”，密码强度为默认等级。当密码长度小于8位、大于20位时，提示“密码需为8-20个字符,由字母、数字和符号组成。”，密码强度为默认等级。p当密码长度等于8位时，提示“密码过于简单，有被盗风险”，密码强度为弱等级。p当密码长度大于8位、小于等于10位时，隐藏密码提示信息，密码强

10、度为中等级。p当密码长度大于10位、小于等于20位时，隐藏密码提示信息，密码强度为强等级。（1）拖曳一个动态面板元件，动态面板的名称为“密码验证显示区”，建立3个状态“密码默认提示”“密码过于简单”和“8-20位字母或数字”，分别用“17-密码-请设置密码”“19-密码-过于简单”和“18-密码-8到20个字符”图片作为状态内容，如图11.14所示。图图11.14密码验证显示区密码验证显示区（2）将“密码验证显示区”动态面板隐藏起来，置于底层，选中密码输入框，添加获得焦点时触发事件，显示“密码验证显示区”动态面板，在更多选项里选择推拉元件，设置“密码验证显示区”动态面板的状态为“密码默认提示”

11、，如图11.15所示。（3）密码输入框失去焦点时，添加失去焦点时触发事件，如图11.16所示。图图11.15密码输入框获得焦点密码输入框获得焦点图图11.16密码输入框失去焦点密码输入框失去焦点2确认密码校验内容当确认密码输入框获得焦点时，显示提示信息“请再次输入密码”。当确认密码输入框失去焦点时，如果两次密码输入不一致，提示“您两次输入的密码不一致”。（1）拖曳一个动态面板元件，动态面板的名称为“确认密码显示区”，建立两个状态“请确认密码”和“两次密码不一致”，分别用“20-确认密码-请再次输入密码”和“21-确认密码-两次密码不一致”图片作为状态内容，如图11.17所示。 图图11.17确

12、认密码显示区确认密码显示区（2）将“确认密码显示区”动态面板隐藏起来，置于底层。选中确认密码输入框，添加获得焦点时触发事件，显示“确认密码显示区”动态面板，在更多选项里选择推拉元件，设置“确认密码显示区”动态面板的状态为“请确认密码”，如图11.18所示。图图11.18确认密码输入框获得焦点确认密码输入框获得焦点（3）给密码输入框和确认密码输入框进行标签命名，分别命名为“密码输入框”和“确认密码输入框”，确认密码输入框失去焦点时，添加失去焦点时触发事件，判断密码和确认密码两次输入是否一致，如图11.19所示。图图11.19确认密码输入框失去焦点确认密码输入框失去焦点11.4.3 倒计时交互设计

13、在填写完注册表单后，会进行验证。有两种方式进行验证，一种是手机号验证，另一种是邮箱验证。如果没有填写手机号会进入邮箱验证页面，邮箱验证页面有倒计时交互效果，如果在规定时间内没有输入验证码，可以重新获取验证码，如图11.20所示。图图11.20邮箱验证邮箱验证1.在页面区域新建一个页面“验证”，进入页面，拖曳3个图片元件，用“1-状态栏”“28-验证向导”和“2-邮箱验证内容”图片替换图片元件，如图11.21所示。2.拖曳一个矩形1元件，宽度设置为124，高度设置为24，圆角半径为5，文本内容为“30s后可重新获取”，标签命名为“获取验证码”，如图11.22所示。图图11.21邮箱验证布局邮箱验

14、证布局图图11.22倒计时布局设计倒计时布局设计3.新增一个全局变量“totaltime”，默认值为“30”，添加页面载入时触发事件。添加条件，如果totaltime大于0，让变量值减1，然后给获取验证码重新设置文本内容，等待1秒钟后，重新加载页面载入时触发事件，如图11.23所示。4.如果变量值“totaltime”等于0，设置获取验证码文本内容为“30s后可重新获取”，设置变量值totaltime等于30，等待1秒钟后，重新加载页面载入时触发事件，如图11.24所示。图图11.23页面载入时触发事件页面载入时触发事件图图11.24重新获取验证码重新获取验证码11.4.4 网站登录布局与交互

15、设计携程旅游网站登录提供两种登录方式，一种是普通登录方式，另一种是手机动态密码登录方式。两种登录方式的切换采用单选按钮操作来完成，如图11.25、图11.26所示。图图11.25普通登录普通登录图图11.26手机动态密码登录手机动态密码登录1.在页面区域新建一个页面“登录”，拖曳两个图片元件，用“6-携程LOGO”和“7-登录图片”替换图片元件，如图11.27所示。图图11.27网站网站LOGO及广告及广告2.拖 曳 一 个 矩 形 1 元 件 ， 宽 度 设 置 为 3 9 0 ， 高 度 设 置 为 4 3 3 ， 边 框 颜 色 设 置 为 蓝 色（00CCCC），标签命名为“登录边框”

16、；拖曳一个文本标签元件，文本内容命名为“会员登录”，字号为16号字；拖曳一个文本标签元件，文本内容命名为“立即注册，享积分换礼返现等专属优惠”，字号设置为12号字，“立即注册”字体颜色为蓝色（00CCCC）；拖曳一个横线元件，作为间隔线，如图11.28所示。图图11.28 登录边框登录边框3.拖曳两个单选按钮元件，文本内容分别命名为“普通登录”和“手机动态密码登录”，同时选中这两个单选按钮元件，右键指定单选按钮组为“登录按钮组”，这样每次只能选中一个单选按钮元件，如图11.29所示。图图11.29登录按钮组登录按钮组4.拖曳一个动态面板元件，动态面板命名为“登录显示区”，建立两种状态“普通登录

17、”和“手机动态密码登录”，如图11.30所示。5.进入“普通登录”状态，拖曳3个文本标签元件，文本内容分别为“登录名”“密码”和“忘记密码？”，“登录名”和“密码”字号设置为15号字，“忘记密码？”设置为12号字，蓝色字体（0000FF）；拖曳两个文本框元件，宽度设置为195，高度设置为30，登录名输入添加提示文字“用户名/卡号/手机/邮箱”，如图11.31所示。图图11.30登录显示区登录显示区图图11.31 登录名及密码登录名及密码6.拖曳一个复选框元件，文本内容为“30天内自动登录”；拖曳一个图片元件，用“12-登录按钮”图片替换图片元件，作为登录按钮，如图11.32所示。图图11.32

18、登录按钮登录按钮7.进入“手机动态密码登录”状态，拖曳3个文本标签元件，文本内容分别为“登录名”“验证码”和“密码”，字号设置为15号字；拖曳3个文本框元件，输入框添加提示文字分别为“请输入注册手机号”“不区分大小写”和“动态密码”，如图11.33所示。图图11.33手机号及密码手机号及密码8.拖曳两个图片元件，用“11-登录验证码”和“25-发送动态密码默认”图片替换图片元件，作为验证码和获取动态密码；拖曳一个复选框元件，文本内容为“30天内自动登录”；拖曳一个图片元件，用“12-登录按钮”图片替换图片元件，作为登录按钮，如图11.34所示。9.回到登录页面，选中“登录显示区”动态面板，单击

19、鼠标左键选择“自动调整为内容尺寸”选项，让动态面板跟随内容的变化而变化；拖曳一个图片元件，用“10-合作登录”图片替换图片元件，如图11.35所示。图图11.34登录按钮及验证码登录按钮及验证码图图11.35合作登录方式合作登录方式10.选中普通登录单选按钮，给它添加选中时触发事件。设置“登录显示区”动态面板的状态为“普通登录”，并且勾选“推动/拉动”元件；设置“登录边框”的尺寸，宽度设置为390，高度设置为433，动态地改变登录边框的高度和宽度，如图11.36所示。图图11.36普通登录交互普通登录交互11.选中手机动态密码登录单选按钮，给它添加选中时触发事件。设置“登录显示区”动态面板的状

20、态为“手机动态密码登录”，并且勾选“推动/拉动”元件；设置“登录边框”的尺寸，宽度设置为390，高度设置为484，动态地改变登录边框的高度和宽度，如图11.37所示。图图11.37手机动态密码登录交互手机动态密码登录交互11.4.5 导航菜单母版设计携程旅游网站导航菜单有很多内容，一级导航菜单有十几个，每个一级导航菜单下面有对应的二级导航菜单，如图11.38所示。这样在原型设计的时候，将导航菜单设计成母版，就可以直接引用到页面中使用。图图11.38导航菜单导航菜单1. 导航菜单布局设计（1）在母版区域新建一个母版，名称为“导航菜单”。双击进入“导航菜单”母版里，拖曳一个图片元件，用“1-状态栏

21、”图片替换图片元件，坐标位置为（134,0）；拖曳一个图片元件，用“0-背景”图片替换图片元件，宽度设置为1366，坐标位置为（40,60），作为导航菜单背景，如图11.39所示。（2）拖曳16个文本标签元件，文本内容分别输入为“首页”“酒店”“旅游”“机票”“火车”“汽车票”“用车”“门票”“团购”“攻略”“全球购”“礼品卡”“商旅”“游轮”“天海游轮”和“更多”，字体颜色设置白色（FFFFFF），字号为15号字，“首页”的x、y坐标位置设置为（158,72），“更多”的x、y坐标位置设置为（1049,72），设定好第一个和最后一个菜单位置，这时可以让它们水平均匀分布，如图11.40所示。图

22、图11.39状态栏及导航菜单背景状态栏及导航菜单背景图图11.40一级导航菜单放置一级导航菜单放置（3）拖曳一个矩形1元件，宽度设置为56，高度设置为40，坐标位置（146,61），填充为黑色（000000），不透明度设置为38，标签命名为“菜单选中背景”，将“首页”置于顶层，让它在“菜单选中背景”上面；选中“菜单选中背景”，复制出一个，标签命名为“菜单悬浮背景”，坐标位置（83,61），如图11.41所示。图图11.41菜单选中及悬浮背景菜单选中及悬浮背景（4）拖曳一个图片元件，用“17-我的登录”图片替换图片元件，坐标位置（146,61），作为登录和注册的区域，如图11.42所示。（5）拖

23、曳一个动态面板元件，动态面板的名称为“二级导航菜单显示区”，建立两种状态“酒店二级导航菜单”和“旅游二级导航菜单”，宽度设置为1168，高度设置为40，坐标位置（145,101），如图11.43所示。图图11.42我的携程我的携程图图11.43二级导航菜单显示区二级导航菜单显示区（6）进入“酒店二级导航菜单”状态，拖曳一个矩形1元件，宽度设置为1168，高度设置为40，边框颜色设置蓝色（0000FF），拖曳坐标位置（145,101）；拖曳9个文本标签元件，文本内容分别为“国内酒店”“海外酒店”和“海外民宿+短租”“团购”“特价酒店” “途家公寓”“酒店+景点”“客栈民宿”和“会场+团队发”，它

24、们之间加一个间隔线，“国内酒店”坐标位置（26,12），“会场+团队发”坐标位置（623,12），设定好第一个和最后一个菜单位置，这时可以让它们水平均匀分布，如图11.44所示。图图11.44 酒店二级导航菜单酒店二级导航菜单（7）拖曳一个文本标签元件，文本内容输入为“酒店订单”，坐标位置为（1092,12），如图11.45所示。（8）复制“酒店二级导航菜单”的内容到“旅游二级导航菜单”状态里，修改导航菜单名称，如图11.46所示。图图11.45酒店订单入口酒店订单入口图图11.46旅游二级导航菜单旅游二级导航菜单（9）回到导航菜单母版里，拖曳一个矩形1元件，调整形状为向上三角形，宽度设置为2

25、1，高度为12，标签命名为“向上三角形”，去掉边框线，坐标位置（217,93），如图11.47所示。图图11.47向上三角形向上三角形2. 导航菜单交互设计（1）将“向上三角形”和“二级导航菜单显示区”隐藏起来，在页面区域建立3个页面“首页”“酒店”和“旅游”；选中“首页”一级导航菜单，给它添加鼠标单击时触发事件，让它在新窗口打开“首页”页面，如图11.48所示。图图11.48打开首页打开首页（2）选中“酒店”一级导航菜单，给它添加鼠标单击时触发事件，让它在新窗口打开“酒店”页面；添加鼠标移入时触发事件，显示“向上三角形”，移动绝对位置（217,93），显示“二级导航菜单显示区”，设置面板状态

26、为“酒店二级导航菜单”，显示“菜单悬浮背景”，移动绝对位置（199,61）；添加鼠标移出时触发事件，隐藏“向上三角形”“二级导航菜单显示区”和“菜单悬浮背景”，如图11.49所示。图图11.49酒店导航菜单交互酒店导航菜单交互（3）选中“旅游”一级导航菜单，给它添加鼠标单击时触发事件，让它在新窗口打开“旅游”页面；添加鼠标移入时触发事件，显示“向上三角形”，移动绝对位置（272,93），显示“二级导航菜单显示区”，设置面板状态为“旅游二级导航菜单”，显示“菜单悬浮背景”，移动绝对位置（256,61）；添加鼠标移出时触发事件，隐藏“向上三角形”“二级导航菜单显示区”和“菜单悬浮背景”，如图11.

27、50所示。图图11.50 旅游导航菜单交互旅游导航菜单交互（4）在母版区域，选中“导航菜单”母版，单击鼠标右键选择“新增页面到首页里”，这样就将“导航菜单”母版引入到“首页”“酒店”和“旅游”页面里使用，如图11.51所示。（5）进入“首页”，可以看到引入的“导航菜单”，按F5键发布原型看一下效果。当鼠标移入酒店或者旅游导航菜单上的时候，会出现二级菜单；移出的时候，二级菜单隐藏，如图11.52所示。图图11.51导航菜单引入到页面里导航菜单引入到页面里图图11.52发布原型发布原型（6）在“首页”里添加页面载入时触发事件，选择“移动菜单选中背景绝对位置（145,61）”，如图11.53所示。

28、（7）在 “ 酒 店 ” 页 面 ， 添 加 页 面 载 入 时 触 发 事 件 ， 选 择 “ 移 动 菜 单 选 中 背 景 绝 对 位 置（199,61）”，如图11.54所示。图图11.53首页菜单选中背景首页菜单选中背景图图11.54酒店菜单选中背景酒店菜单选中背景（8）在 “ 旅 游 ” 页 面 ， 添 加 页 面 载 入 时 触 发 事 件 ， 选 择 “ 移 动 菜 单 选 中 背 景 绝 对 位 置（253,61）”，如图11.55所示。图图11.55酒店菜单选中背景酒店菜单选中背景11.4.6 首页海报轮播效果制作携程网站首页也采用了海报轮播效果发布广告信息，如图11.56

29、所示。海报轮播区域主要由两部分组成：海报图片和海报轮播序号。要实现海报轮播的效果，需要借助于动态面板元件。图图11.56海报轮播区域海报轮播区域1.进入“首页”，拖曳一个图片元件，用“3-国际直通车”图片替换图片元件，坐标位置（146,112）；拖曳一个动态面板元件，动态面板的名称为“海报轮播显示区”，宽度设置为1366，高度设置为341，坐标位置（40,150），建立8个状态，分别命名为“海报1”“海报2”“海报3”“海报4”“海报5”“海报6”“海报7”和“海报8”，如图11.57所示。2.“5-海报1”“6-海报2”“7-海报3”“8-海报4”“9-海报5”“10-海报6”“11-海报7

30、”和“12-海报8”图片分别作为8个状态的内容，坐标位置（0,0），如图11.58所示。图图11.57海报轮播显示区海报轮播显示区图图11.58海报轮播内容海报轮播内容3.拖曳一个动态面板元件，动态面板的名称为“序号轮播显示区”，宽度设置为190，高度设置为15，坐标位置（906,422），建立8个状态，分别命名为“序号1”“序号2”“序号3”“序号4”“序号5”“序号6”“序号7”和“序号8”，如图11.59所示。4.进入“序号1”状态，拖曳一个椭圆形元件，宽度和高度都设置为15，去掉边框线，作为选中序号；拖曳一个椭圆形元件，宽度和高度都设置为15，颜色填充为灰色（999999），再复制6个

31、，作为未选中序号；第一个序号坐标位置（0,0），最后一个序号位置（175，0），让它们在水平方向上均匀分布，如图11.60所示。图图11.59序号轮播显示区序号轮播显示区图图11.60序号序号1内容内容5.将“序号1”状态内容复制到“序号2”状态里，调整第一个序号和第二个序号的位置，运用同样的方法设计其他序号状态的内容，如图11.61所示。6.回到“首页”页面，选中“海报轮播显示区”动态面板，添加载入时触发事件。设置“海报轮播显示区”动态面板的状态为“Next”，向后循环，循环间隔3000毫秒，设置“序号轮播显示区”动态面板的状态为“Next”，向后循环，循环间隔3000毫秒，如图11.62所

32、示。图图11.61序号序号2内容内容图图11.62海报轮播效果设置海报轮播效果设置11.4.7 首页搜索区域导航悬浮效果设计携程网站首页里，有一个搜索区域，专门针对酒店、机票、自由行、旅游、火车、租车、门票等进行检索。当鼠标悬浮在这些菜单上面的时候，会出现选中效果，如图11.63所示。图图11.63搜索区域搜索区域1.进入“首页”页面，拖曳一个图片元件，用“4-搜索区域”图片替换图片元件，坐标位置（144,171）；拖曳一个动态面板元件，动态面板的名称为“搜索导航显示区”，宽度设置为92，高度设置为42，坐标位置（145,213），状态命名为“导航悬浮内容”，如图11.64所示。图图11.64

33、搜索导航显示区搜索导航显示区2.进入“导航悬浮内容”状态，拖曳一个矩形1元件，宽度设置为92，高度设置为42，去掉边框线；拖曳一个矩形1元件，宽度设置为4，高度设置为40，颜色填充为黄色（FF9900），去掉边框线；拖曳一个文本标签元件，文本内容为“机票”，字体颜色为蓝色（FF9900），字号为17号字，标签命名为“导航内容”，如图11.65所示。图图11.65导航悬浮内容导航悬浮内容3.回到“首页”，将“搜索导航显示区”动态面板隐藏起来，置于底层；拖曳一个图像热区元件，放置在机票导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”动态面板并且置于顶层，移动“搜索导航显示区”绝对位置

34、（145，214），设置“导航内容”为“机票”，如图11.66所示。图图11.66 机票悬浮交互机票悬浮交互4.拖曳一个图像热区元件，放置在自由行导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”动态面板并且置于顶层，移动“搜索导航显示区”绝对位置（145，256），设置“导航内容”为“自由行”，如图11.67所示。图图11.67自由行悬浮交互自由行悬浮交互5.拖曳一个图像热区元件，放置在旅游导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”动态面板并且置于顶层，移动“搜索导航显示区”绝对位置（145，298），设置“导航内容”为“旅游”，如图11.68所示。6.拖曳一

35、个图像热区元件，放置在火车导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”动态面板并且置于顶层，移动“搜索导航显示区”绝对位置（145，340），设置“导航内容”为“火车”，如图11.69所示。图图11.68旅游悬浮交互旅游悬浮交互图图11.69火车悬浮交互火车悬浮交互7.拖曳一个图像热区元件，放置在租车导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”动态面板并且置于顶层，移动“搜索导航显示区”绝对位置（145，382），设置“导航内容”为“租车”，如图11.70所示。8.拖曳一个图像热区元件，放置在门票导航的上面，给它添加鼠标移入时触发事件，显示“搜索导航显示区”

36、动态面板并且置于顶层，移动“搜索导航显示区”绝对位置（145，425），设置“导航内容”为“门票”，如图11.71所示。图图11.70租车悬浮交互租车悬浮交互图图11.71门票悬浮交互门票悬浮交互9.选中“搜索导航显示区”动态面板，给它添加鼠标移出时触发事件，隐藏“搜索导航显示区”动态面板并且置于底层，如图11.72所示。图图11.72隐藏搜索导航显示区隐藏搜索导航显示区11.4.8 首页图片放大缩小效果制作携程网站首页里有很多的旅游广告图片或者酒店广告图片。当鼠标移入这些图片的时候，这些图片会放大，移出的时候图片又会缩小。现在很多的电商网站也是采用这样的方式来给商品图片添加交互效果通过这种动

37、作使图片动起来，如图11.73所示。图图11.73特卖汇图片特卖汇图片1.拖曳一个图片元件，用“20-特卖汇导航”图片替换图片元件，坐标位置（145,529）；拖曳一个矩形1元件，宽度设置为1180，高度设置为390，坐标位置（147,559）；拖曳两个图片元件，用“21-精选导航”和“16-特卖汇-图片3”图片替换图片元件，坐标位置分别为（164,564）和（401,604），如图11.74所示。图图11.74特卖汇内容特卖汇内容2.拖曳一个动态面板元件，动态面板命名为“特卖1显示区”，状态命名为“图片”，宽度设置为220，高度设置为110，坐标位置（174,619）；进入“图片”状态，拖曳

38、一个图片元件，用“14-特卖汇-图片1”图片替换图片元件，宽度设置为218，高度为112，如图11.75所示。3.选中“特卖1显示区”动态面板，给它添加鼠标移入时触发事件，设置特卖1显示区的图片尺寸为256*149，固定左上角；添加鼠标移出时触发事件，设置特卖1显示区的图片尺寸为218*122，如图11.76所示。图图11.75特卖特卖1显示区显示区图图11.76特卖特卖1显示区交互显示区交互4.复制“特卖1显示区”动态面板，动态面板的名称改为“特卖2显示区”，坐标位置（174,799），用“15-特卖汇-图片2”作为状态内容，宽度设置为218，高度为112；拖曳两个图片元件，用“23-特卖1价格”和“24-特卖2价格”图片替换图片元件，作为价格内容，如图11.77所示。图图11.77特卖特卖1显示区及价格显示区及价格5.选中“特卖2显示区”动态面板，给它添加鼠标移入时触发事件，设置特卖2显示区的图片尺寸为276*154，固定中心；添加鼠标移出时触发事件，设置特卖2显示区的图片尺寸为218*122，如图11.78所示。图图11.78特卖特卖2显示区交互显示区交互11.1 需求描述11.2 设计思路11.3 准备工作11.4 设计流程11.5 小结