Axure RP 9原型设计实战案例教程（App与Web）教案 第九章 携程旅游网高保真原型设计

《AxureRP9原型设计实战案例教程（APP与Web）》课程教案课题：携程旅游网高保真原型设计教学目的：会使用文本标签元件、矩形元件、文本框元件、横线元件、图片元件、动态面板元件等元件进行页面的布局设计。学会使用动态面板进行登录表单的验证，当用户输入用户名和密码的时候，将错误的提示信息放在动态面板里，根据不同的条件显示不同的提示信息。学会母版制作的2种方式以及3种拖放行为，可以把网站的导航菜单这样其他的页面都会使用的布局制作成母版，这样一次制作，其他页面可以直接使用，不需要进行重复制作。学会进行倒计时交互效果设计以及海报轮播效果设计。学会进行搜索区域导航悬浮效果以及图片放大缩小效果制作。学会利用Axure软件制作网站的高保真原型设计。课型：新授课课时：本章安排1个课时。教学重点：重点：学会使用动态面板进行登录表单的验证，当用户输入用户名和密码的时候，将错误的提示信息放在动态面板里，根据不同的条件显示不同的提示信息。教学难点：难点：会进行搜索区域导航悬浮效果以及图片放大缩小效果制作。教学过程：教学形式：讲授课，教学组织采用课堂整体讲授和分组演示。教学媒体：采用启发式教学、案例教学等教学方法。教学手段采用多媒体课件、视频等媒体技术。板书设计：本课标题携程旅游网高保真原型设计课次1授课方式理论课□讨论课□习题课□其他□课时安排2学分共2分授课对象普通高等院校学生任课教师教材及参考资料1.《AxureRP9原型设计实战案例教程（APP与Web）》；电子工业出版社。2.本教材配套视频教程及学习检查等资源。3.与本课程相关的其他资源。教学基本内容教学方法及教学手段课程引入携程旅游网站的高保真原型设计是一个综合性的原型制作项目，涵盖了从注册登录到首页展示的完整功能模块，通过AxureRP9工具实现各种交互效果。参考以下形式：1.衔接导入2.悬念导入3.情景导入4.激疑导入5.演示导入6.实例导入7.其他形式一、需求描述通过携程旅游网站高保真原型设计，学习元件的使用及母版、倒计时交互效果、海报轮播效果、搜索区域导航悬浮效果、图片放大缩小效果的制作利用Axure软件绘制携程旅游网站的高保真原型，主要设计几个方面。（1）绘制携程旅游网站的注册页面并进行表单验证；（2）制作验证码30s倒计时重新获取交互效果；（3）绘制携程旅游网站的登录页面，不进行表单验证；（4）制作携程旅游网站导航菜单母版；（5）制作首页搜索区域导航悬浮效果；（6）制作首页海报轮播效果；（7）制作首页图片放大缩小效果；二、设计思路如何实现携程旅游网站登录与注册页面、首页以及商品详情页的高保真原型设计呢？（1）在进行页面布局时，需要用到标签元件、矩形元件、文本框元件、横线元件、图片元件、动态面板元件等元件。（2）进行注册表单的验证时，需要用到动态面板和条件设置，当用户输入用户名和密码的时候，动态面板里根据不同的条件显示不同的提示信息。（3）倒计时交互设计，需要使用页面加载时触发事件，并且使用两个同样的页面加载时触发事件。（4）将网站的顶部信息、导航菜单以及版权信息制作成母版，这样一次制作，其他页面可以直接使用，不需要进行重复制作。（5）海报轮播效果制作，需要借助于动态面板元件，其可以在多个状态中自动切换显示。（6）图片放大缩小效果制作，需要动态地改变图片的尺寸，以实现图片放大缩小的效果。三、准备工作进行高保真原型设计时，需要使用大量的图片，在真实项目中，交互设计师会绘制一版低保真原型，交给视觉设计师（UI设计师或者美工）来进行界面的设计，他们会制作界面图片，并且切图，交互设计师拿到图片，替换低保真原型里的图片，最终制作出一版高保真原型设计。制作高保准原型需要做以下准备工作。需要准备携程旅游网站注册界面和登录界面相关图片。要准备携程旅游网站首页界面的图片。四、设计流程4.1网站注册表单布局设计携程旅游网站的注册表单是一个向导型表单，分为3个步骤：填写、验证、注册成功。注册表单内容包含手机号、Email、密码、确认密码等表单项。4.2网站注册表单校验携程网站注册表单是用来会员进行注册的表单，通过输入手机号、邮箱、密码和确认密码来创建会员账号。（1）密码校验内容当密码输入框获得焦点时，显示提示信息“请设置登录密码”，密码强度为默认等级。当密码长度小于8位大于20位时，提示“密码需为8-20个字符，由字母、数字和符号组成。”，密码强度为默认等级。当密码长度等于8位时，提示“密码过于简单，有被盗风险”，密码强度为弱等级。当密码长度大于8位小于等于10位时，隐藏密码提示信息，密码强度为中等级。当密码长度大于10位小于等于20位时，隐藏密码提示信息，密码强度为强等级。（2）确认密码校验内容当确认密码输入框获得焦点时，显示提示信息“请再次输入密码”。当确认密码输入框失去焦点时，如果两次密码输入不一致，提示“您两次输入的密码不一致”。4.3倒计时交互设计在携程旅游网站，填写完注册表单后，网站会对填写的表单信息进行验证，通过两种方式进行验证，分别是手机号验证和邮箱验证。如果没有填写手机号会进入到邮箱验证页面进行验证，邮箱验证时会有倒计时交互效果，如果在规定时间内没有输入验证码，可以重新获取验证码。4.4网站登录布局与交互设计携程旅游网站登录提供两种登录方式，分别是普通登录方式和手机动态密码登录方式，两种登录方式的切换通过单选按钮操作来完成，通过单击单选按钮，选择相应的登录方式进行登录。4.5导航菜单母版设计携程旅游网站导航菜单有很多的内容，一级导航菜单有十几个，每个一级导航菜单下面有对应的二级导航菜单，如图11.38所示。在原型设计的时候，把导航菜单设计成母版，这样可以直接其引用到页面中使用，就不需要重复的制作导航菜单，从而大大减少工作量，提高工作效率。导航菜单布局设计导航菜单交互设计4.6首页海报轮播效果制作携程网站首页里，为展示广告信息，会采用海报轮播效果展现广告信息，在有限的区域内展现不同的广告的信息，这也是海报轮播的特色。海报轮播区域主要有两部分组成：海报图片和海报轮播序号。要实现海报轮播的效果，需要借助于动态面板元件，使其自动切换动态面板状态展示。4.7首页搜索区域导航悬浮效果设计携程网站首页里包含一个搜索区域，其可以针对酒店、机票、自由行、旅游、火车、租车、门票进行检索，当鼠标悬浮在这些菜单上时，会出现选中效果。4.8首页图片放大缩小效果制作在携程网站首页里，有很多的旅游广告图片或者酒店广告图片，当鼠标移入图片的时候，该图片会放大，移出的时候图片又会缩小，现在很多的电商网站也是采用这样的方式来给商品图片添加交互效果，通过放大缩小交互动作将图片动起来。1．教学以学生学习教材的基本内容为主，系统全面地学习税收制度的构成要素的基本内容。2．整个教学过程中，各教学点可根据实际情况，进行拓展知识的讲解。本章小结：高保真原型设计