第11章 携程旅游网站高保真原型设计课时内容携程旅游网站高保真原型设计课时6教学目标通过携程旅游网站高保真原型设计，学习元件的使用及母版、倒计时交互效果、海报轮播效果、搜索区域导航悬浮效果、图片放大缩小效果的制作教学重点页面布局设计、注册表单校验、倒计时交互效果、海报轮播效果、搜索区域导航悬浮效果、图片放大缩小效果教学难点页面布局设计、注册表单校验、倒计时交互效果、海报轮播效果、搜索区域导航悬浮效果、图片放大缩小效果教学设计1.教学思路：通过一个综合案例学习高保真原型设计方法2.教学手段：多媒体+计算机3.教学资料：教材、多媒体课件教学内容11.1 需求描述利用Axure软件绘制携程旅游网站的高保真原型，主要设计几个方面1） 绘制携程旅游网站的注册页面并进行表单验证2） 制作验证码30s倒计时重新获取交互效果3） 绘制携程旅游网站的登录页面，不进行表单验证4） 制作携程旅游网站导航菜单母版5） 制作首页搜索区域导航悬浮效果6） 制作首页海报轮播效果7） 制作首页图片放大缩小效果11.2 设计思路如何实现携程旅游网站登录与注册页面、首页以及商品详情页的高保真原型设计呢？（1） 在进行页面布局时，需要用到标签元件、矩形元件、文本框元件、横线元件、图片元件、动态面板元件等元件。
2） 进行注册表单的验证时，需要用到动态面板和条件设置，当用户输入用户名和密码的时候，动态面板里根据不同的条件显示不同的提示信息3） 倒计时交互设计，需要使用页面加载时触发事件，并且使用两个同样的页面加载时触发事件4） 将网站的顶部信息、导航菜单以及版权信息制作成母版，这样一次制作，其他页面可以直接使用，不需要进行重复制作5） 海报轮播效果制作，需要借助于动态面板元件，其可以在多个状态中自动切换显示6） 图片放大缩小效果制作，需要动态地改变图片的尺寸，以实现图片放大缩小的效果11.3 准备工作进行高保真原型设计时，需要使用大量的图片，在真实项目中，交互设计师会绘制一版低保真原型，交给视觉设计师（UI设计师或者美工）来进行界面的设计，他们会制作界面图片，并且切图，交互设计师拿到图片，替换低保真原型里的图片，最终制作出一版高保真原型设计制作高保准原型需要做以下准备工作1） 需要准备携程旅游网站注册界面和登录界面相关图片图11.2 携程旅游网站注册界面携程旅游网站登录界面（2） 需要准备携程旅游网站首页界面的图片携程旅游网站首页界面11.4 设计流程11.4.1 网站注册表单布局设计携程旅游网站的注册表单是一个向导型表单，分为3个步骤：填写、验证、注册成功。
注册表单内容包含号、Email、密码、确认密码等表单项填写表单邮箱验证（1）进入到注册页面，拖曳一个“图片”元件到工作区域，用“1-状态栏”图片替换图片元件，设置X、Y坐标值为（0,0）；拖曳一个“图片”元件到工作区域，用“27-填写向导”图片替换图片元件，设置X、Y坐标值为（0,0）状态栏和表单向导（2）拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“会员注册 注册成功可获1000积分+返现特权”，将“会员注册”4个字设置为24号字，将“1000”字体颜色设置成绿色（#006600），字体加粗，将“返现”字体颜色设置成橙色（#FF9900），字体加粗会员注册说明（3）拖曳三个“文本标签”元件到工作区域，将其文本内容分别命名为“号”“Email”“密码”，字号设置为16号字；拖曳一个“矩形1”元件到工作区域，将其宽度设置为320，高度设置为32，边框颜色为灰色（#CCCCCC）；拖曳一个“文本框”元件到工作区域，将其宽度设置为210，高度设置为25表单标签和边框（4）设置文本框的提示文字为“可用作登录名”，去掉隐藏边框，然后复制该文本框两次，分别作为Email和密码的输入框，将它们的提示文字分别设置为“可用作登录名”“8-20位字母、数字和符号”。
设置提示文字（5）拖曳一个“动态面板”元件到工作区域，将其名称设置为“确认密码组合”，状态命名为“密码组合”，复制号标签和文本框到“密码组合”状态里，修改表单标签为“确认密码”，修改提示文字为“再次输入密码”确认密码（6）拖曳一个“复选框”元件到工作区域，将其文本内容重新命名为“同意<<携程旅行网服务协议>>”，拖曳一个图片元件到工作区域，用“20-验证按钮”图片替换图片元件；拖曳一个“文本标签”元件到工作区域，将其放置在Email文本输入框的后面，文本内容为“填写Email并通过验证，可额外获得200积分！”，将“200”文字设置为绿色（#006600），字体加粗注册协议（7）拖曳一个“动态面板”元件到工作区域，将其名称设置为“密码强度显示区”，建立4个状态“密码默认等级”“密码弱”“密码中”“密码强”，分别用“14-注册密码默认”“15-注册密码等级弱”“16-注册密码等级中”“14-注册密码等级强”图片作为状态内容密码强度11.4.2 网站注册表单校验携程网站注册表单是用来会员进行注册的表单，通过输入号、邮箱、密码和确认密码来创建会员账号1.密码校验内容当密码输入框获得焦点时，显示提示信息“请设置登录密码”，密码强度为默认等级。
当密码长度小于8位大于20位时，提示“密码需为8-20个字符，由字母、数字和符号组成密码强度为默认等级当密码长度等于8位时，提示“密码过于简单，有被盗风险”，密码强度为弱等级当密码长度大于8位小于等于10位时，隐藏密码提示信息，密码强度为中等级当密码长度大于10位小于等于20位时，隐藏密码提示信息，密码强度为强等级1）拖曳一个“动态面板”元件到工作区域，将其重命名为“密码验证显示区”，建立3个状态“密码默认提示”“密码过于简单”“8-20位字母或数字”，分别用“17-密码-请设置密码”“19-密码-过于简单”“18-密码-8到20个字符”图片作为状态内容密码验证显示区（2）将“密码验证显示区”动态面板隐藏起来，置于底层，选中密码输入框，为其添加获得焦点时触发事件，显示“密码验证显示区”动态面板，在更多选项里选择推拉元件，设置“密码验证显示区”动态面板的状态为“密码默认提示”密码输入框获得焦点（3）密码输入框失去焦点时，为其添加失去焦点时触发事件密码输入框失去焦点2.确认密码校验内容当确认密码输入框获得焦点时，显示提示信息“请再次输入密码”当确认密码输入框失去焦点时，如果两次密码输入不一致，提示“您两次输入的密码不一致”。
1）拖曳一个“动态面板”元件到工作区域，将其重命名为“确认密码显示区”，建立两个状态“请确认密码”“两次密码不一致”，分别用“20-确认密码-请再次输入密码”“21-确认密码-两次密码不一致”图片作为状态内容确认密码显示区（2）将“确认密码显示区”动态面板隐藏起来，置于底层，选中确认密码输入框，为其添加获得焦点时触发事件，显示“确认密码显示区”动态面板，在更多选项里选择推拉元件，设置“确认密码显示区”动态面板的状态为“请确认密码”确认密码输入框获得焦点（3）为密码输入框和确认密码输入框进行标签命名，分别命名其为“密码输入框”“确认密码输入框”，确认密码输入框失去焦点时，添加失去焦点时触发事件，来判断密码和确认密码两次输入是否一致确认密码输入框失去焦点11.4.3 倒计时交互设计在携程旅游网站，填写完注册表单后，网站会对填写的表单信息进行验证，通过两种方式进行验证，分别是号验证和邮箱验证如果没有填写号会进入到邮箱验证页面进行验证，邮箱验证时会有倒计时交互效果，如果在规定时间内没有输入验证码，可以重新获取验证码邮箱验证下面开始进行邮箱验证页面的布局设计以及倒计时交互设计1）在页面区域新建一个页面“验证”，进入到页面里，拖曳3个“图片”元件到工作区域，分别用“1-状态栏”“28-验证向导”“2-邮箱验证内容”图片替换图片元件。
邮箱验证布局（2）拖曳一个“矩形1”元件到工作区域，将其宽度设置为124，高度设置为24，圆角半径设置为5，文本内容设置为“30s后可重新获取”，标签命名为“获取验证码”倒计时布局设计（3）新增一个全局变量“totaltime”，默认值为“30”，为其添加页面载入时触发事件，添加条件，如果“totaltime”大于0，使变量值减1，然后为获取验证码重新设置文本内容，等待1s后，重新加载页面载入时触发事件页面载入时触发事件（4）如果变量值“totaltime”等于0，设置获取验证码文本内容为“30s后可重新获取”，设置变量值“totaltime”为30，等待1s后，重新加载页面载入时触发事件重新获取验证码发布原型检查效果，页面载入时可以看到时间不断减少，时间减少到0后，重置时间为30并继续减少，这样就实现倒计时的交互效果11.4.4 网站登录布局与交互设计携程旅游网站登录提供两种登录方式，分别是普通登录方式和动态密码登录方式，两种登录方式的切换通过单选按钮操作来完成，通过单击单选按钮，选择相应的登录方式进行登录 普通登录 动态密码登录（1）在页面区域新建一个页面“登录”，拖曳两个“图片”元件到工作区域，分别用“6-携程logo”“7-登录图片”替换图片元件。
网站logo及广告（2）拖曳一个“矩形1”元件到工作区域，将其宽度设置为390，高度设置为433，边框颜色设置为蓝色（#00CCCC），标签命名为“登录边框”；拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“会员登录”，字号为16号字；拖曳一个“文本标签”元件到工作区域，将其文本内容命名为“立即注册，享积分换礼返现等专属优惠”，字号设置为12号字，将“立即注册”文字的颜色设置为蓝色（#00CCCC）；拖曳一个“横线”元件到工作区域，将其作为间隔线登录边框（3）拖曳两个“单选按钮”元件到工作区域，将其文本内容分别命名为“普通登录”“动态密码登录”，同时选中这两个单选按钮元件，右键单击，在弹出的快捷菜单中选择“指定单选按钮的组”命令，在弹出的“选项组”对话框的组名称文本框中输入“登录按钮组”，这样每次只能选中一个单选按钮元件登录按钮组（4）拖曳一个“动态面板”元件到工作区域，将其命名为“登录显示区”，建立两种状态“普通登录”“动态密码登录”登录显示区（5）进入到“普通登录”状态里，拖曳3个“文本标签”元件到工作区域，将其文本内容分别命名为“登录名”“密码”“忘记密码？”，将“登录名”“密码”的字号设置为15号字，将“忘记密码？”设置为12号字，蓝色字体（0000FF）；拖曳两个“文本框”元件到工作区域，将其宽度均设置为195，高度均设置为30，在登录名后的文本框输入添加提示文字“用户名/卡号//邮箱”。
登录名及密码（6）拖曳一个“复选框”元件到工作区域，将其文本内容设置为“30天内自动登录”，拖曳一个“图片”元件到工作区域，用“12-登录按钮”图片替换图片元件，作为登录按钮登录按钮（7）进入到“动态密码登录”状态里，拖曳3个“文本标签”元件到工作区域，将其文本内容分别设置为“登录名”“验证码”“密码”，字号设置为15号字；拖曳3个“文本框”元件到工作区域，分别在输入框中添加提示文字 “请输入注册号”“不区分大小写。