《Axure RP 9互联网产品原型设计PPT课件（共12章）第十一章 设计制作网页原型》由会员分享，可在线阅读，更多相关《Axure RP 9互联网产品原型设计PPT课件（共12章）第十一章 设计制作网页原型（75页珍藏版）》请在金锄头文库上搜索。
1、Axure RP 9互联网产品原型设计（慕课版）设计制作网页原型 设计制作邮箱加载页面 案例分析 当用户输入用户名和密码后，单击“登录”按钮，即可启动页面加载效果。页面加载完成后直接进入邮箱界面。为了便于用户查看效果，本案例中将加载时间设置得较长，制作时用户可以根据情况修改加载时间，实现更好的交互效果。 设计制作邮箱加载页面 案例效果 本产品原型案例中共包含了登录、加载和登录成功3 个页面，原型文件及其原型预览效果如下图所示。 设计制作邮箱加载页面 制作步骤 新建一个Axure RP 9文件。将“矩形1”元件拖曳到页面中，在“样式”面板中设置位置和尺寸并将其命名为“蓝色矩形” 。 设计制作邮箱
2、加载页面 制作步骤 在“样式”面板中设置元件的“填充”颜色为#FFFFFF，“线段”颜色为#A1A9B7。元件效果如下图所示。 设计制作邮箱加载页面 制作步骤 将“动态面板”元件拖曳到页面中并放置在“矩形1”元件上，设置其位置和尺寸如下图所示。双击进入动态面板编辑模式，将“矩形1”元件拖曳到页面中，并设置其样式如下图所示。 设计制作邮箱加载页面 制作步骤 “矩形”元件效果如下图所示。再次拖入一个“动态面板”元件，设置其名称为“进度”。 设计制作邮箱加载页面 制作步骤 双击进入动态面板编辑模式，拖入一个“矩形1”元件。“概要”面板如下图所示。 设计制作邮箱加载页面 制作步骤 返回page1页面，
3、将“文本标签”元件拖入页面中，在“样式”面板中设置各项参数。设置字体为Arial，字号为16，字体颜色为#333333，字体样式为粗体，输入文本内容，文本样式效果如下图所示。 设计制作邮箱加载页面 制作步骤 在“交互编辑器”对话框中添加“页面载入时”事件，再添加“移动”动作。再次添加“移动”动作。单击“确定”按钮，完成页面交互的添加。 设计制作邮箱加载页面 制作步骤 执行“发布预览”命令或按组合键【Ctrl+.】，预览交互效果如下图所示。在“页面”面板中将page1页面重命名为“进度”并新建一个名称为“登录”的页面。 设计制作邮箱加载页面 制作步骤 双击打开“登录”页面，将“图片”元件拖曳到页
4、面中，设置图片样式如下图所示。导入下图所示图片素材。 设计制作邮箱加载页面 制作步骤 将“热区”元件拖曳到页面中并覆盖在“登录”按钮上。在“交互编辑器”对话框中添加“单击时”事件，再添加“打开链接”动作，设置各项参数如下图所示。 设计制作邮箱加载页面 制作步骤 执行“发布预览”命令，预览原型效果如下图所示。单击“登录”按钮即可打开“进度”页面。新建一个名称为“邮箱”的页面，将一个“图片”元件拖入并导入图片。 设计制作邮箱加载页面 制作步骤 双击进入“进度”页面，在“交互编辑器”对话框中继续为页面添加“等待”动作，设置动作如下图所示。添加“打开链接”动作，设置动作。 设计制作邮箱加载页面 制作步
5、骤 执行“文件保存”命令，将原型项目保存。双击进入“登录”页面，单击工具栏上的“预览” 按钮，预览效果如下图所示。 设计制作微博用户评论页面 案例分析 首先使用“文本框”元件、“按钮”元件和“图片”元件完成基本页面的制作；使用“动态面板”元件完成弹出页面的制作；通过为“按钮”元件添加交互样式，实现鼠标指针悬停的按钮效果；最后，通过添加“显示/ 隐藏”动作， 完成页面效果的制作。 设计制作微博用户评论页面 案例效果 本产品原型案例只需制作一个页面即可完成交互效果，原型文件及其原型预览效果如下图所示。 设计制作微博用户评论页面 制作步骤 新建一个Axure RP 9文件。将“图片”元件拖曳到页面中
6、并导入图片素材。将“矩形2”元件拖曳到页面中，设置大小和位置。 设计制作微博用户评论页面 制作步骤 将“文本框”元件拖曳到页面中，单击“交互”面板中的“提示”选项，再单击“提示属性”选项，设置各项参数。使用“图片”元件和“复选框”元件完成下图所示的页面效果。 设计制作微博用户评论页面 制作步骤 将“按钮”元件拖入到页面中，在“样式”面板中修改“填充”颜色为#FF6600，圆角“半径” 为1，“边框”为无，按钮效果如下图所示。单击“交互”面板上的“鼠标悬停”选项，设置“填充颜色”为#FF6633。 设计制作微博用户评论页面 制作步骤 单击“完成”按钮。在页面中拖入一个“动态面板”元件。双击进入动
7、态面板编辑模式，拖入“图片”元件并导入图片素材。 设计制作微博用户评论页面 制作步骤 将“热区”元件拖曳到页面中，调整大小和位置。选中“热区”元件，在“交互编辑器”对话框中添加“单击时”事件，再添加“显示/隐藏”动作，设置动作各项参数如下图所示。 设计制作微博用户评论页面 制作步骤 返回page1页面，选中“动态面板”元件，单击工具栏上的“隐藏”按钮，效果如下图所示。选中“评论”按钮，在“交互编辑器”对话框中为其添加“单击时”事件，再添加“显示/隐藏”动作，设置动作各项参数如下图所示。 设计制作微博用户评论页面 制作步骤 在页面上单击鼠标左键，在“样式”面板中设置页面排列方式为居中对齐。执行“
8、发布生成HTML文件”命令，设置弹出的“发布项目”对话框中的各项参数如下图所示。 设计制作微博用户评论页面 制作步骤 单击“发布到本地”按钮，稍等片刻，即可在发布位置看到生成的HTML文件。双击page1.html文件，原型预览效果如下图所示。 设计制作课程购买页面 案例分析 用户可以在下拉列表中选择想要购买的课程。选择完成后，页面下方会自动显示所选课程。这种效果便于用户查看所选内容，避免不必要的错误。 设计制作课程购买页面 案例效果 本产品原型案例主要使用“下拉列表”元件和“文本标签”元件制作页面，原型文件及其原型预览效果如下图所示。 设计制作课程购买页面 制作步骤 新建一个Axure RP
9、 9文件。将“矩形1”元件拖曳到页面中，设置其名称为“背景”，“样式”面板如下图所示。设置元件的填充“颜色”为#FF9900，线段“颜色”为#797979，“线框”为1，按组合键【Ctrl+K】锁定“矩形”元件，元件效果如下图所示。 设计制作课程购买页面 制作步骤 将“文本标签”元件拖曳到页面中，输入文本并设置文本样式。将“下拉列表” 元件拖曳到页面中，设置其名称为“选择课程” 。 设计制作课程购买页面 制作步骤 双击进入“编辑下拉列表”对话框，单击“编辑多项”按钮，在弹出的“编辑多项”对话框中输入列表选项。双击“确定”按钮，“下拉列表”元件效果如下图所示。 设计制作课程购买页面 制作步骤 将
10、“文本标签”元件拖曳到页面中并修改文本内容。再次拖入一个“文本标签” 元件，设置其名称为“结果”。单击工具栏上的“隐藏”按钮将其隐藏。 设计制作课程购买页面 制作步骤 选中“选择课程”元件，在“交互编辑器”对话框中添加“选项改变时”事件，再添加“设置文本” 动作，设置动作各项参数如下图所示。再添加“显示/隐藏”动作，设置动作各项参数如下图所示。 设计制作课程购买页面 制作步骤 单击“确定”按钮。按组合键【Ctrl+.】预览产品原型，预览效果如下图所示。 使用并设置链接类动作 案例分析 链接动作有很多种方式，为了便于用户理解和运用。本案例将针对“当前窗口”“新窗口/ 新标签”“弹出窗口”“父级窗
11、口”“关闭窗口”和内联框架等链接类动作进行讲解，帮助用户深刻理解链接类动作。 使用并设置链接类动作 案例效果 本案例通过设置多种链接类动作，实现不同的超链接效果，链接当前窗口和内联框架的页面效果如图所示。 使用并设置链接类动作 制作步骤 新建一个Axure RP 9文件，将“图片”元件拖曳到页面中并导入下图所示的图片素材。拖入一个“文本标签”元件并修改文本内容。 使用并设置链接类动作 制作步骤 设置“图片”元件名称为“空间图片” 。在“交互编辑器”对话框中为其添加“单击时”事件，再添加“打开链接”动作，设置动作参数如下图所示。 使用并设置链接类动作 制作步骤 单击“确定”按钮，返回page1页
12、面。单击工具栏上的“预览”按钮，原型预览效果如图所示。 使用并设置链接类动作 制作步骤 在“页面”面板中添加一个名称为“新窗口”的页面。双击打开“新窗口”页面，将“按钮”元件拖曳到页面中并修改文本内容。 使用并设置链接类动作 制作步骤 选中“按钮”元件，为其添加“单击时”事件，再添加“打开链接”动作，设置动作参数如下图所示。单击工具栏上的“预览”按钮，原型预览效果如下图所示。 使用并设置链接类动作 制作步骤 新建“弹出窗口”页面。拖入一个“按钮”元件并修改文本。在“交互编辑器” 对话框中为“按钮”元件添加“单击时”事件，再添加“弹出窗口”动作，设置动作参数如下图所示。 使用并设置链接类动作 制
13、作步骤 单击“预览”按钮预览原型，预览效果如下图所示。新建“父级窗口”页面和“子页面”页面。 使用并设置链接类动作 制作步骤 双击进入“子页面”页面，拖入“图片”元件并导入图片素材。选中“图片”元件，在“交互编辑器”对话框中为其添加“单击时”事件，再添加“打开链接”动作，设置动作参数如下图所示。 使用并设置链接类动作 制作步骤 双击进入“父级窗口”页面，将“按钮”元件拖曳到页面中并修改文本内容。在“交互编辑器”对话框中为“按钮”元件添加“单击时”事件，再添加“打开链接”动作，设置动作参数如下图所示。 使用并设置链接类动作 制作步骤 单击“确定”按钮，返回“父级窗口”页面。单击工具栏上的“预览”
14、按钮，原型预览效果如下图所示。在“页面”面板中新建一个名称为“关闭窗口”的页面。 使用并设置链接类动作 制作步骤 双击打开“关闭窗口”页面，插入下图所示的图片素材。在“交互编辑器”对话框中为“图片”元件添加“单击时”事件，再添加“关闭窗口”动作。 使用并设置链接类动作 制作步骤 单击“确定”按钮，回到“关闭窗口”页面。执行“发布预览”命令，原型预览效果如下图所示。新建一个名为“内联框架”的页面。 使用并设置链接类动作 制作步骤 双击打开“内联框架”页面，将“内联框架”元件拖曳到页面中。将“表格”元件拖曳到页面中，设置并输入文本。 使用并设置链接类动作 制作步骤 单击选中第1个单元格，在“交互编
15、辑器”对话框中为第1个单元格添加“单击时”事件，再添加“框架中打开链接”动作，设置第1个单元格动作如下图所示。使用相同的方法设置第2个单元格动作。 使用并设置链接类动作 制作步骤 单击“确定”按钮，回到“内敛框架”页面，执行“文件保存”命令，保存文件。执行“发布预览”命令，原型预览效果如下图所示。 设计制作商品分类页面 案例分析 在Axure RP 9 中，制作通过单击实现页面切换效果时，通常使用“动态面板”元件制作页面，然后为其添加“单击时”事件和“设置面板状态”动作，实现单击不同元件显示动态面板不同页面的效果。 设计制作商品分类页面 案例效果 本案例使用“动态面板”制作4 个面板状态，通过
16、单击不同的菜单设置显示“动态面板”元件的不同状态，案例预览效果如图所示。 设计制作商品分类页面 制作步骤 新建一个Axure RP 9文件。将“矩形1”元件拖曳到页面中，设置位置和尺寸如图11-86所示。设置填充“颜色”为白色，线段“颜色”为#CCCCCC，线框为1，矩形效果如下图所示。 设计制作商品分类页面 制作步骤 将“动态面板”元件拖曳到页面中，设置其名称为“项目列表”，设置样式如下图所示。元件效果如下图所示。 设计制作商品分类页面 制作步骤 双击进入“动态面板”编辑模式，修改面板状态1名称为pic1，拖入“图片”元件并导入图片素材。再次添加3个面板状态并添加图片素材。 设计制作商品分类页面 制作步骤 返回page1页面，将“三级标题”元件拖曳到页面中，修改文本内容和元件样式如下图所示。单击“样式”面板中“线段”选项下的“可见性”图标，设置可见性如下图所示。 设计制作商品分类页面 制作步骤 使用相同的方法完成下图所示文本标题菜单的制作。选中“生活服务”元件，在“交互编辑器”对话框中为其添加“单击时”事件，再添加“设置面板状态”动作，设置动作如下图所示。 设计制作商品分类页面 制作
