Axure网站与App原型设计课件 第11章 去哪儿网站高保真原型设计

第11章去哪儿网站高保真原型设计【目录】11.1需求描述11.2

设计思路11.3准备工作11.4设计流程11.4.1 网站注册表单的布局设计11.4.2网站注册表单校验11.4.3倒计时交互设计11.4.4 “登录”页面布局与交互设计11.4.5导航菜单母版设计11.4.6 首页搜索区域导航菜单悬浮效果设计11.5小结目录【学习目标】知识目标了解原型设计的思路，以及准备工作。熟悉原型设计的流程，包括母版设计、布局设计、交互设计。能力目标可以设计网站的导航菜单母版。可以设计网站的页面布局。可以设计表单校验。可以设计倒计时交互。素质目标培养快速定位问题的能力。提升灵活应变能力。学习目标【情景引入】AxureRP10不仅可以设计出低保真的软件原型，也可以设计出高保真原型。高保真原型无论是在软件界面上还是在软件交互上，与真实软件的体验效果几乎都一样。图11.1所示是去哪儿网站首页的原型，它的界面和操作效果与真实网站几乎一样。情景引入图11.1 去哪儿网站首页原型11.1 需求描述设计去哪儿网站的注册表单并进行表单验证制作验证码50s倒计时交互效果设计去哪儿网站的登录页面，不进行表单验证制作去哪儿网站导航菜单母版制作首页搜索区域导航菜单悬浮效果11.2 设计思路将网站的顶部信息、导航菜单制作成母版，这样其他页面可以直接使用，不需要进行重复制作进行注册表单的验证时，需要用到动态面板和设置条件，当用户输入用户名和密码时，动态面板根据不同的条件显示不同的提示信息在进行页面布局时，需要用到“文本标签”元件、矩形元件、“文本框”元件、“水平线”元件、“图片”元件、“动态面板”元件等11.3 准备工作进行高保真原型设计需要使用大量的图片。在真实项目中，交互设计师会绘制一版低保真原型，然后将原型交给视觉设计师（UI设计师或者美工）来进行界面的设计，他们会制作界面图片，并且切图；交互设计师拿到图片后，替换低保真原型里的图片，最终制作出高保真原型。图11.2 去哪儿网站注册页面图11.3 去哪儿网站首页11.4 设计流程11.4.1网站注册表单的布局设计图9.7 制作表格的表头step01进入“Page1”页面，拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“手机号登录/注册”“密码登录”，字号均设置为16号，其中“手机号登录/注册”为粗体、“密码登录”的颜色为（#AAAAAA）。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“新用户验证成功即自动注册”，字号设置为13号，如图11.5所示。进入“Page1”页面，拖曳一个“图片”元件到工作区域，用去哪儿网站logo图片替换。拖曳一个“垂直线”元件到工作区域，设置其高度为20，颜色设置为（#05CDE9）。拖曳一个“文本标签”元件，将其文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“水平线”元件到工作区域，设置颜色为（#05CDE9），宽度设置为800，如图11.5所示。图11.5 “Page1”页面11.4 设计流程step02拖曳3个“文本框”元件到工作区域，将其中一个文本框的宽度和高度分别设置为100和40，文本内容设置为“86”；将另一个文本框的宽度和高度设置为230、40，并设置其提示文本为“请输入手机号”；将最后一个文本框的宽度和高度设置为260、40，并设置其提示文本为“验证码”。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“获取验证码”“获取语音验证码”，将“语音验证码”加粗。如图11.6所示。图11.6 注册表单界面11.4 设计流程step03拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），文本内容设置为“登录/注册”，字号为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.7所示。图11.7 “登录/注册”按钮及协议11.4 设计流程11.4.2网站注册表单校验图9.7 制作表格的表头step01拖曳一个“矩形2”元件到工作区域，设置填充颜色为（#333333），并设置其透明度为70%，如图11.8所示。图11.8 滑动校验弹窗底层页面11.4 设计流程图9.7 制作表格的表头step02拖曳一个“矩形1”元件到工作区域，将其宽度和高度分别设置为400和130，圆角半径设置为20。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“滑动校验”，字号设置为16号。拖曳一个“关闭”图标到工作区域，将其宽度和高度均设置为10。拖曳一个“矩形1”元件到工作区域，设置宽度和高度分别为380、50，将圆角半径设置为10，将其文本内容设置为“请按住滑块，拖到最后边”，字号设置为14号。拖曳一个“矩形1”元件到工作区域，设置宽度和高度为50、圆角半径为10，将边框颜色设置为（#03A613）。拖曳一个向右的双箭头图标到工作区域，设置宽度和高度为30，并设置填充颜色为（#7F7F7F），如图11.9所示。11.4 设计流程图11.9 滑动校验弹窗页面11.4 设计流程11.4.3倒计时交互设计图9.7 制作表格的表头step01新建一个全局变量“totaltime”，默认值为50，为其添加单击“短信验证码”时的触发事件，添加条件，如果“totaltime”变量值大于0，使变量值减1，然后为“获取验证码”重新设置文本内容，等待1s后，重新单击触发事件，如图11.10所示。图11.10 单击触发事件11.4 设计流程图9.7 制作表格的表头step02如果“totaltime”变量值等于0，设置“获取验证码”文本内容为“50s后可重新获取”，设置“totaltime”变量值为50，等待1s后，重新单击“短信验证码”触发事件，如图11.11所示。图11.11 重新获取验证码step03发布原型并检查效果，单击“获取验证码”时可以看到时间不断减少，时间减少到0后，重置时间为50s，这样就实现倒计时的交互效果了。11.4 设计流程11.4.4“登录”页面布局与交互设计去哪儿网站提供多种登录方式，分别是手机验证码登录、密码登录，以及扫码登录、微博登录、QQ登录、百度账号登录等，这里仅设计手机验证码登录及密码登录两种登录方式，通过单击文本标签，选择相应的登录方式进行登录，如图11.12和图11.13所示。图11.12 手机验证码登录图11.13 密码登录11.4 设计流程图9.7 制作表格的表头step01在页面区域新建一个页面“登录”，拖曳一个“图片”元件到工作区域，将其替换为“去哪儿logo”图片。拖曳一个“垂直线”元件到工作区域，设置其高度为20，将颜色设置为（#05CDE9）。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“水平线”元件到工作区域，设置颜色为（#05CDE9），将宽度设置为800，如图11.14所示。图11.14 登录状态栏11.4 设计流程图9.7 制作表格的表头step02拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“手机号登录/注册”“密码登录”，字号均设置为16号，其中“手机号登录/注册”为粗体、“密码登录”的颜色为（#AAAAAA），如图11.15所示。图11.15 两种登录方式11.4 设计流程图9.7 制作表格的表头step03拖曳一个“动态面板”元件到工作区域，将其命名为“登录显示区”，建立两种状态，分别为“手机号登录”“密码登录”，如图11.16所示。图11.16 “登录显示区”动态面板11.4 设计流程图9.7 制作表格的表头step04拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“新用户验证成功即自动注册”，字号设置为13号。拖曳3个“文本框”元件到工作区域，一个文本框的宽度和高度分别设置为100和40，文本内容设置为86；另一个文本框的宽度和高度分别设置为230和40，并设置其提示文本为“请输入手机号”；最后一个文本框的宽度和高度分别设置为260和40，并设置其提示文本为“验证码”。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“获取验证码”“获取语音验证码”，将“语音验证码”加粗，如图11.17所示。图11.17 “手机号登录”状态设计11.4 设计流程图9.7 制作表格的表头step05拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），将文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.18所示。图11.18 “登录/注册”按钮及相关协议政策11.4 设计流程图9.7 制作表格的表头step06进入“密码登录”状态，拖曳两个“文本框”元件到工作区域，将其宽度和高度分别设置为340和40，分别在文本框中添加提示文本“手机/邮箱/用户名”“密码”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“忘记密码？”，字号设置为13号。拖曳一个“按钮”元件到工作区域，将其宽度和高度分别设置为340和40，去掉边框并设置填充颜色为（#05CDE9），将文本内容设置为“登录/注册”，字号设置为16号。拖曳一个“复选框”元件到工作区域，将其文本内容设置为“已阅读并同意《去哪儿用户服务协议》、《隐私政策》”。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“其他方式登录”，如图11.19所示。图11.19 “密码登录”状态设计11.4 设计流程图9.7 制作表格的表头step07回到“登录”页面，选择“手机号登录/注册”，为其添加单击时的触发事件，设置“登录显示区”动态面板的状态为“手机号登录”，如图11.20所示。图11.20 为“手机号登录/注册”添加触发事件11.4 设计流程图9.7 制作表格的表头step08选择“密码登录”，为其添加单击时的触发事件，设置“登录显示区”动态面板的状态为“密码登录”，如图11.21所示。图11.21 为“密码登录”添加触发事件step09发布原型并检查效果，单击“手机号登录/注册”，显示的是手机号登录的内容；单击“密码登录”，显示的是密码登录的内容。11.4 设计流程11.4.5导航菜单母版设计去哪儿网站的导航菜单有很多内容，一级导航菜单有十几个，每个一级导航菜单下面有对应的二级导航菜单，如图11.22所示。在设计原型时，把导航菜单设计成母版，这样可以直接将其引用到其他页面中，不需要再重复制作，从而大大减少工作量，提高工作效率。图11.22 导航菜单11.4 设计流程导航菜单布局设计图9.7 制作表格的表头step01在母版区域新建一个母版，将其命名为“导航菜单”，双击进入“导航菜单”母版，拖曳一个“图片”元件到工作区域，用“1-状态栏”图片替换“图片”元件，将其坐标设置为（0,0）。拖曳一个“图片”元件到工作区域，用“0-背景”图片替换“图片”元件，将其宽度设置为1849，高度设置为50，坐标设置为（0,132），将其作为导航菜单背景，如图11.23所示。图11.23 状态栏及导航菜单背景11.4 设计流程图9.7 制作表格的表头step02拖曳12个“文本标签”元件到工作区域，将其文本内容分别设置为“首页”“机票”“酒店”“火车票”“度假”“团购”“门票”“当地人”“汽车票”“行程设计”“攻略”“旅游快讯”，将文字加粗，文字颜色设置为（#FFFFFF），字号设置为18号。将“首页”的坐标设置为（155,147），“旅游快讯”的坐标设置为（925,147），设定好第一个和最后一个“文本标签”元件的位置，使其他“文本标签”元件水平均匀分布，如图11.24所示。图11.24 一级菜单11.4 设计流程图9.7 制作表格的表头step03拖曳一个“矩形1”元件到工作区域，将其宽度设置为56，高度设置为50，坐标设置为（143,133），填充颜色设置为（#000000），不透明度设置为10%，将其命名为“首页菜单选中背景”。把“首页”置于顶层，使其位于“首页菜单选中背景”元件上面。复制“首页菜单选中背景”元件，将新元件命名为“菜单悬浮背景”，将其坐标设置为（83,133），并将其隐藏起来，如图11.25所示。图11.25 首页菜单选中背景11.4 设计流程图9.7 制作表格的表头step04拖曳一个“动态面板”元件到工作区域，将其名称修改为“二级导航菜单显示区”。建立两种状态，将它们分别命名为“机票二级导航菜单”“酒店二级导航菜单”，将它们的宽度设置为300，高度设置为50，坐标设置为（197,183），如图11.26所示。图11.26 二级导航菜单显示区11.4 设计流程图9.7 制作表格的表头step05进入“机票二级导航菜单”状态，拖曳一个“矩形1”元件到工作区域，将其宽度设置为200，高度设置为50，边框颜色设置为（#00CED1）。拖曳两个“文本标签”元件到工作区域，将其文本内容分别设置为“机票首页”“低价机票”，如图11.27所示。图11.27 机票二级导航菜单11.4 设计流程图9.7 制作表格的表头step06复制“机票二级导航菜单”的内容到“酒店二级导航菜单”状态，并修改导航菜单名称，如图11.28所示。图11.28 酒店二级导航菜单11.4 设计流程导航菜单交互设计图9.7 制作表格的表头step01将“二级导航菜单显示区”动态面板隐藏起来，在页面区域建立3个页面分别为“首页”“机票”“酒店”。在“导航菜单”母版中，选择“首页”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“首页”页面，如图11.29所示。图11.29 打开首页11.4 设计流程图9.7 制作表格的表头step02选择“机票”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“机票”页面。添加鼠标指针移入时的触发事件，鼠标指针移入时显示“二级导航菜单显示区”动态面板，设置动态面板状态为“机票二级导航菜单”。添加鼠标指针移出时的触发事件，隐藏“二级导航菜单显示区”动态面板，如图11.30所示。图11.30 “机票”导航菜单交互设计11.4 设计流程图9.7 制作表格的表头step03选择“酒店”一级导航菜单，为其添加单击时的触发事件，使其在新窗口打开“酒店”页面。添加鼠标指针移入时的触发事件，显示“二级导航菜单显示区”动态面板，设置动态面板状态为“酒店二级导航菜单”。添加鼠标指针移出时的触发事件，隐藏“二级导航菜单显示区”动态面板，如图11.31所示。图11.31 “酒店导航”菜单交互设计11.4 设计流程图9.7 制作表格的表头step04在母版区域的“导航菜单”母版上单击鼠标右键，在弹出的快捷菜单中选择“添加到页面”命令，在弹出的“添加母版到页面”对话框里将“导航菜单”母版引用到“首页”“机票”“酒店”页面，如图11.32所示。图11.32 将母版引用到页面step05进入“首页”页面可以看到引入的“导航菜单”母版，按“F5”键发布原型并检查效果。将鼠标指针移到“机票”或者“酒店”导航菜单上面时会出现二级菜单，将鼠标指针移出时二级菜单会隐藏起来，如图11.33所示。图11.33 发布原型11.4 设计流程11.4.6首页搜索区域导航菜单悬浮效果设计去哪儿网站首页里包含一个搜索区域，可以针对机票、酒店、火车票、度假、门票、团购、自由行进行检索，如图11.34所示。图11.34 搜索区域11.4 设计流程图9.7 制作表格的表头step01进入“首页”页面，拖曳一个“图片”元件到工作区域，用“2-搜索区域”图片替换“图片”元件，将其坐标设置为（143,233）。拖曳一个“动态面板”元件到工作区域，将其名称设置为“搜索导航显示区”，宽度设置为90，高度设置为53，坐标设置为（155,246），将状态命名为“导航悬浮内容”，如图11.35所示。图11.35 搜索导航显示区11.4 设计流程图9.7 制作表格的表头step02进入“导航悬浮内容”状态，拖曳一个“矩形1”元件到工作区域，将其宽度设置为90，高度设置为53，去除边框线。拖曳一个“文本标签”元件到工作区域，将其文本内容设置为“机票”，文字颜色设置为（#00D0D4），字号设置为18号，将其命名为“导航内容”，如图11.36所示。图11.36 导航悬浮内容11.4 设计流程图9.7 制作表格的表头step03回到“首页”页面，将“搜索导航显示区”动态面板隐藏起来，置于底层。拖曳一个“热区”元件到工作区域，将其放置在“机票”的上面，并添加鼠标指针移入时的触发事件，鼠标指针移入时显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,246），设置“导航内容”为“机票”，如图11.37所示。图11.37 “机票”悬浮交互11.4 设计流程图9.7 制作表格的表头step04拖曳一个“热区”元件到工作区域，将其放置在“酒店”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,299），设置“导航内容”为“酒店”，如图11.38所示。图11.38 “酒店”悬浮交互11.4 设计流程图9.7 制作表格的表头step05拖曳一个“热区”元件到工作区域，将其放置在“火车票”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,352），设置“导航内容”为“火车票”，如图11.39所示。图11.39 “火车票”悬浮交互11.4 设计流程图9.7 制作表格的表头step06拖曳一个“热区”元件到工作区域，将其放置在“度假”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导航显示区”动态面板，并将该动态面板置于顶层，移动“搜索导航显示区”动态面板至绝对位置（155,405），设置“导航内容”为“度假”，如图11.40所示。图11.40 “度假”悬浮交互11.4 设计流程图9.7 制作表格的表头step07拖曳一个“热区”元件到工作区域，将其放置在“门票”的上面，并添加鼠标指针移入时的触发事件，显示“搜索导