Axu 原型基础教程 3

携程旅游网高保真原型设计“《AxureRP9原型设计实战案例教程（APP与Web）》第九章01网站注册表单布局设计一、网站注册表单布局设计携程旅游网站的注册表单TheregistrationformontheCtriptravelwebsite是一个向导型表单，分为3个步骤：填写、验证、注册成功。注册表单内容包含手机号、Email、密码、确认密码等表单项。填写表单邮箱验证02网站注册表单校验二、网站注册表单校验携程网站注册表单是用来会员进行注册的表单，通过输入手机号、邮箱、密码和确认密码来创建会员账号。2.1密码校验内容当密码输入框获得焦点时，显示提示信息“请设置登录密码”，密码强度为默认等级。当密码长度小于8位大于20位时，提示“密码需为8-20个字符，由字母、数字和符号组成。”，密码强度为默认等级。当密码长度等于8位时，提示“密码过于简单，有被盗风险”，密码强度为弱等级。二、网站注册表单校验携程网站注册表单是用来会员进行注册的表单，通过输入手机号、邮箱、密码和确认密码来创建会员账号。2.1密码校验内容当密码输入框获得焦点时，显示提示信息“请设置登录密码”，密码强度为默认等级。当密码长度大于8位小于等于10位时，隐藏密码提示信息，密码强度为中等级。当密码长度大于10位小于等于20位时，隐藏密码提示信息，密码强度为强等级。二、网站注册表单校验2.2确认密码校验内容当确认密码输入框获得焦点时，显示提示信息“请再次输入密码”。当确认密码输入框失去焦点时，如果两次密码输入不一致，提示“您两次输入的密码不一致”。03倒计时交互设计三、倒计时交互设计在携程旅游网站，填写完注册表单后，网站会对填写的表单信息进行验证，通过两种方式进行验证，分别是手机号验证和邮箱验证。如果没有填写手机号会进入到邮箱验证页面进行验证，邮箱验证时会有倒计时交互效果，如果在规定时间内没有输入验证码，可以重新获取验证码。邮箱验证04网站登录布局与交互设计四、网站登录布局与交互设计携程旅游网站登录提供两种登录方式，分别是普通登录方式和手机动态密码登录方式，两种登录方式的切换通过单选按钮操作来完成，通过单击单选按钮，选择相应的登录方式进行登录。普通登录手机动态密码登录05导航菜单母版设计五、导航菜单母版设计携程旅游网站导航菜单有很多的内容，一级导航菜单有十几个，每个一级导航菜单下面有对应的二级导航菜单。在原型设计的时候，把导航菜单设计成母版，这样可以直接其引用到页面中使用，就不需要重复的制作导航菜单，从而大大减少工作量，提高工作效率。06首页海报轮播效果制作六、首页海报轮播效果制作携程网站首页里，为展示广告信息，会采用海报轮播效果展现广告信息，在有限的区域内展现不同的广告的信息，这也是海报轮播的特色。海报轮播区域主要有两部分组成：海报图片和海报轮播序号。要实现海报轮播的效果，需要借助于动态面板元件，使其自动切换动态面板状态展示。六、首页海报轮播效果制作海报轮播区域07首页搜索区域导航悬浮效果设计七、首页搜索区域导航悬浮效果设计携程网站首页里包含一个搜索区域，其可以针对酒店、机票、自由行、旅游、火车、租车、门票进行检索，当鼠标悬浮在这些菜单上时，会出现选中效果。搜索区域08首页图片放大缩小效果制作八、首页图片放大缩小效果制作在携程网站首页里，有很多的旅游广告图片或者酒店广告图片，当鼠标移入图片的时候，该图片会放大，移出的时候图片又会缩小，现在很多的电商网站也是采用这样的