admin 管理员组文章数量: 1087139
2024年5月11日发(作者：python平均工资)
第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） 需要准备携程旅游网站首页界面的图片。
版权声明：本文标题：《AxureRP9网站与App原型设计》教学教案—11携程旅游网站高保真原型设计 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1715372064a687617.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论