第11章携程旅游网站高保真原型设计
交互设计师拿到图片，替换低保真原型里的图片，最终制作出一版高保真原型设计。制作高保准原型需要做以下准备工作。
（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），字体加粗。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。