Axure RP 互联网产品原型设计课件 第11章 设计制作网页原型.pptxVIP

目录Contents了解互联网产品原型设计1了解AxureRP102页面管理与自适应视图3使用元件和元件库4元件的样式和交互5使用母版和动态面板6变量与表达式7函数的使用8使用中继器9团队合作与输出设计制作网页原型设计制作App原型101112

11设计制作网页原型

11.1设计制作QQ邮箱加载页面11.1.1案例分析当用户输入用户名和密码后，单击“登录”按钮，即可启动页面加载。页面加载完成后直接进入邮箱界面。为了便于用户查看效果，本案例中将加载时间设置得较长，制作时用户可以根据情况修改加载时间，实现更好的交互效果。

11.1设计制作QQ邮箱加载页面本产品原型案例中共包含了登录、加载和登录成功3个页面，原型文件及原型预览效果如图所示。11.1.2案例效果

01.新建一个AxureRP10文件，如图所示。将“矩形1”元件拖曳到页面中，在“样式”面板中设置其位置和尺寸并将其命名为“蓝色矩形”，如图所示。11.1.3制作步骤

02.在“样式”面板中设置元件的填充颜色为#FFFFFF、边框颜色为#A1A9B7，如图所示。元件效果如图所示。11.1.3制作步骤

03.将“动态面板”元件拖曳到页面中并放置在“矩形1”元件上，设置其位置和尺寸如图所示。双击进入动态面板编辑模式，将“矩形1”元件拖曳到页面中，并设置其样式如图所示。11.1.3制作步骤

04.矩形元件效果如图所示。再次拖入一个“动态面板”元件，设置其名称为“进度”，如图所示。11.1.3制作步骤

05.双击进入动态面板编辑模式，拖入一个“矩形1”元件，如图所示。“大纲”面板如图所示。11.1.3制作步骤

06.返回Page1页面，将“文本标签”元件拖入页面中，在“样式”面板中设置其各项参数，如图所示。设置字体为Arial、字号为16、字体颜色为#333333、字体样式为粗体，输入文本内容，文本样式效果如图所示。11.1.3制作步骤

07.在“交互编辑器”对话框中添加“页面载入”事件，再添加“移动”动作，如图所示。再次添加“移动”动作，如图所示。单击“确定”按钮，完成页面交互的添加。11.1.3制作步骤

08.执行“发布＞预览”命令或按组合键【Ctrl+.】，预览效果如图所示。在“页面”面板中将Page1页面重命名为“进度”并新建一个名称为“登录”的页面，如图所示。11.1.3制作步骤

09.双击打开“登录”页面，将“图片”元件拖曳到页面中，设置图片样式如图所示。导入如图所示的图片素材。11.1.3制作步骤

10.将“热区”元件拖曳到页面中并覆盖在“登录”按钮上，如图所示。在“交互编辑器”对话框中添加“单击”事件，再添加“打开链接”动作，设置各项参数如图所示。11.1.3制作步骤

11.执行“发布＞预览”命令，预览原型效果如图所示。单击“登录”按钮即可打开“进度”页面。新建一个名称为“邮箱”的页面，将一个“图片”元件拖入并导入图片素材，如图所示。11.1.3制作步骤

12.双击进入“进度”页面，在“交互编辑器”对话框中继续为页面添加“等待”动作，设置动作如图所示。添加“打开链接”动作，设置动作如图所示。11.1.3制作步骤

13.执行“文件＞保存”命令，将原型项目保存。双击进入“登录”页面，单击工具栏上的“预览”按钮，预览效果如图所示。11.1.3制作步骤

11.2设计制作微博用户评论页面11.2.1案例分析首先使用“文本框”元件、“按钮”元件和“图片”元件完成基本页面的制作；使用“动态面板”元件完成弹出页面的制作；为“按钮”元件添加交互样式，实现鼠标经过的按钮效果；最后，添加“显示/隐藏”动作，完成页面效果的制作。

本产品原型案例只需制作一个页面即可完成交互效果，原型文件及原型预览效果如图所示。11.2.2案例效果11.2设计制作微博用户评论页面

01.新建一个AxureRP10文件。将“图片”元件拖曳到页面中并导入图片素材，如图所示。将“矩形2”元件拖曳到页面中，设置其大小和位置，如图所示。11.2.3制作步骤

02.将“文本框”元件拖曳到页面中，在“交互”面板中设置“输入类型”和“提示文本”，如图所示。使用“图片”元件和“复选框”元件完成图所示的页面效果。11.2.3制作步骤

03.将“按钮”元件拖入页面中，在“样式”面板中修改“填充颜色”为#FF6600，设置圆角“半径”为1、“边框”为无，按钮效果如图所示。单击“交互”面板上的“鼠标经过样式”选项，设置“填充颜色”为#FF6633，如图所示。11.2.3制作步骤