Axure RP原型设计案例教程04标注、预览和输出原型

AxureRP原型设计案例教程[AxureRP9]目录项目一原型设计基础项目二元件和元件库项目三元件样式和母版项目四标注、预览和输出原型项目五基础交互项目六使用动态面板实现交互项目七使用变量、条件和函数实现交互项目九音乐类App原型设计项目八使用中继器实现交互项目四任务一标注原型任务二预览和输出原型标注、预览和输出原型项目导读在AxureRP中，用户可以为绘制的原型添加注释，以标示原型各部分的规范及交互方式等，也可以通过多种方式输出原型，以便与他人在网上共享原型或者在线下分享原型。本项目将通过讲解标注、预览和输出原型的方法，带领读者学习如何制作原型说明文档及分享原型的方法。项目导读素质目标

培养系统思维，增强书面表达能力，学会用简洁明了的语言表达交互逻辑和设计思路。

坚持以用户为中心的设计理念，关注用户体验和细节表现，培养观察力和责任感。学习目标

掌握使用标记元件和“说明”面板标注原型的方法。

掌握预览原型的方法。

掌握输出原型的方法。

能够使用AxureRP绘制线框流程图。

能够制作简单的原型说明文档。项目目标任务一标注原型任务描述本任务首先带领读者学习标记元件和“说明”面板的使用方法，然后绘制商城类App线框流程图。任务准备全班同学每5人一组，各组选出组长。组长组织组员扫码观看“标注原型的概念和方法”视频，讨论并回答下列问题。问题1：标注原型是什么？标注原型的常用方法有哪些？问题2：标注原型的常用方法各自有什么优缺点？单击此处播放微课标注原型的概念和方法一、使用标记元件快照箭头便签标记一、使用标记元件快照元件快照元件主要以预览图像的方式在当前页面中显示其他页面或母版的内容，适用于绘制页面流程图。当快照元件所引用的页面或母版更新时，该元件中的预览图像也会自动更新。单击该按钮并单击“确定”按钮可删除引用的内容选中该单选按钮，可在下方列表区域选择要引用的母版要为快照元件添加引用页面或母版可双击快照元件或选中快照元件后单击“样式”面板“快照”区域的“添加引用页面”按钮打开“引用页面”对话框，在其中选择一个页面或母版，单击“确定”按钮，此时软件会自动缩放引用的预览图像，使其适应快照元件的尺寸一、使用标记元件快照元件

方法一：在该复选框下方的相应编辑框中输入数值。方法二：双击快照元件中的预览图像，当鼠标指针呈

形状时，拖动预览图像或按住“Alt”键的同时滚动鼠标滚轮。

调整预览图像在快照元件中的位置或缩放比例在“样式”面板中取消勾选“适应比例”复选框（默认为勾选状态），引用的预览图像将显示为原始尺寸一、使用标记元件便签元件便签元件通常用于对原型各部分的规格和功能进行解释、备注等，以便用户清晰、深入地了解原型。一、使用标记元件使用方法在原型的某一部分做一个标记在空白区域对做标记的部分进行详细解释二、使用“说明”面板1．为页面添加注释设置注释文本的格式输入注释文本时单击右上角的“格式”按钮显示格式设置项，使用它们。未选中任何元件时，单击“说明”面板中的“页面概述”编辑框并输入文本。二、使用“说明”面板2．为元件添加注释为注释分配元件未选中任何元件时，单击“说明”面板中的“说明”编辑框并输入文本。单击注释右上角的“指定元件+”按钮，在打开的“指定元件”列表中选择一个元件，可将该注释分配给所选元件。为所选元件添加注释，选中元件，单击“说明”面板中的“说明”编辑框并输入文本。二、使用“说明”面板2．为元件添加注释为元件添加注释时，软件会根据注释的添加顺序自动为对应的元件和注释分配相同的数字编号。此外，用户可以为一个元件添加多个注释。单击元件注释右上角的“包含文字与交互”按钮，在打开的列表中选择相应选项，可在注释文本下方为该元件添加的文本和交互自动生成详细注释。若使用包含文字与交互功能为元件添加注释，之后对元件的文本和交互所做的修改都将在注释中自动更新。知

识

库二、使用“说明”面板2．为元件添加注释调整注释的排序或层级方法一：在注释的空白位置按下鼠标左键并上下拖动，释放鼠标后注释的编号会自动更新方法二：右击注释的空白位置，在弹出的快捷菜单中选择“编辑序号”选项，输入新编号后按“Enter”键确认删除注释在“说明”面板中选择注释后按“Delete”键取消为注释分配的元件单击注释右上角的元件名称，在打开的“指定元件”列表中单击“取消指定元件”按钮提示在注释的右键快捷菜单中选择除“编辑序号”外的选项，也可对注释进行排序、改变层级、删除等操作。二、使用“说明”面板3．集中管理注释字段方法一：在“说明”面板中单击

按钮方法二：选择“项目”/“说明字段设置”选项01打开“说明字段设置”对话框集中管理元件注释字段和页面注释字段02对元件注释字段进行添加（可指定元件注释字段为文本、选项列表或数字3种类型）、排序、删除等操作，默认的元件注释字段为“说明”；对页面注释字段进行添加（页面注释字段只有文本类型）、排序、删除等操作，默认的页面注释字段为“页面概述”。二、使用“说明”面板3．集中管理注释字段01在该对话框左侧的“编辑字段集”区域单击“添加”按钮，添加一个字段集。选中添加的字段集，在右侧的“字段集中的字段”区域单击按钮，在打开的下拉列表（若“编辑元件说明”选项卡中没有已添加的注释字段，将无法打开该下拉列表）中选择已添加的元件注释字段。在“说明”面板的“字段集”下拉列表中选择不同的字段集以显示其包含的所有元件注释字段。添加字段集后02将多个元件注释字段组织到同一个字段集中。任务实施——绘制商城类App线框流程图单击此处播放微课绘制商城类App线框流程图通过绘制商城类App线框流程图，带领读者进一步练习标记元件和“说明”面板的使用方法。任务二预览和输出原型任务描述本任务首先带领读者学习预览原型、将原型导出为图片、通过链接查看原型，以及将原型生成为HTML文件和Word文档的方法，然后制作商城类App原型说明文档。全班同学每5人一组，各组选出组长。组长组织组员扫码观看“原型说明文档的编写原则”视频，讨论并回答下列问题。问题1：编写原型说明文档需要遵循哪些原则？问题2：你见过哪些优秀的原型说明文档？单击此处播放微课原型说明文档的编写原则任务准备一、预览原型方法一：选择“发布”/“预览”选项方法二：按“Ctrl+.”组合键方法三：单击基本工具栏中的“预览”按钮在打开的本机浏览器中查看原型效果单击工具栏左侧的按钮，可隐藏原型播放器工具栏单击同一位置的按钮，可恢复显示原型播放器工具栏一、预览原型查看原型的页面结构和注释等信息，还可以改变原型的显示方式在预览原型时，使用界面顶部的原型播放器工具栏单击工具栏中的按钮，可在打开的面板中查看原型的完整页面结构当前正在查看的页面名称单击该面板中的页面名称，可在浏览器中查看该页面单击该面板中的“<”和“>”按钮，或者按“<”和“>”键可以来回切换页面一、预览原型将鼠标指针移到原型的注释编号上，当鼠标指针呈形状时单击，可在打开的浮动面板中查看相应注释。再次单击注释编号，可关闭该浮动面板。

提

示若当前查看的页面添加了自适应视图，将在页面名称右侧显示视图名称，单击该名称，可在打开的下拉列表中选择需要显示的视图在该面板中单击元件注释，可在页面中突出显示该注释对应的元件。单击工具栏中的

按钮，可在打开的面板中查看当前页面和元件的注释单击工具栏中的

按钮，可在打开的面板中选择是否突出显示可交互元件、显示元件上的注释编号，以及调整原型的缩放比例一、预览原型单击工具栏中的

按钮，可在打开的面板中测试交互功能和排除交互故障单击“开始追踪”按钮，可按触发顺序记录原型所进行的交互。一、预览原型选择预览原型时使用的浏览器及原型播放器工具栏的显示状态选择“发布”/“预览选项”选项，在打开的“预览选项”对话框一般情况下，预览原型时会在默认浏览器中打开原型。二、将原型导出为图片在AxureRP中可以将绘制好的原型导出为图片，以便与他人分享原型或将图片应用于原型说明文档。在打开的“另存为”对话框中设置保存路径、文件名称和文件格式注意：在AxureRP中复制单个或多个元件后，将其粘贴到画图工具、Word文档或聊天工具窗口中，粘贴的内容会直接转换为一张图片。选择“文件”菜单中的相应选项，可将当前页面或当前文件中的所有页面导出为图片三、通过链接查看原型用户在线共享原型的功能将原型上传到AxureCloud中并生成访问链接通过生成的访问链接分享原型在AxureCloud中管理上传的文件打开“发布项目”对话框方法一：单击基本工具栏中的“共享”按钮方法二：选择“发布”/“发布到Axure云”选项方法三：按“F6”键单击该按钮可隐藏或打开右侧的“生成器”界面设置文件名称、文件在AxureCloud中的保存位置及浏览密码在该选项卡中可选择要上传的页面在该选项卡中可选择交互的执行方式在该选项卡中可选择是否上传元件说明和页面说明及其表示方式在该选项卡中可添加字体，以确保应用该字体的文本在所有设备上都能正常显示三、通过链接查看原型此时工作界面右下方会出现提示框，以显示发布状态，发布完成后会显示生成的访问链接开始上传原型0102查看上传的原型03在“发布项目”对话框中设置相关参数后，单击“发布”按钮单击该提示框中的链接，或者单击“CopyURL”按钮复制该链接并在浏览器中打开复制的链接若当前文件上传过原型，再次打开“发布项目”对话框，会显示之前生成的访问链接。更新对原型的修改，并保持链接不变单击“更新”按钮重新上传原型单击“PublishtonewURL”按钮四、将原型生成为HTML文件AxureRP支持将原型生成为HTML文件，以便相关人员在没有安装AxureRP软件或无法访问网络（原型中使用在线资源时除外）的情况下正常查看原型效果。在其中选择保存路径并设置相关参数打开“发布项目”对话框010203方法一：选择“发布”/“生成HTML文件”选项单击“PublishLocally（发布到本地）”按钮方法二：按“F8”键五、将原型生成为Word文档原型图可以使用户清楚地了解产品效果，从而降低沟通成本，并为之后的开发提供参考。但原型图只是产品雏形，即使做得再精细，也无法反映产品的全貌，以及有效指导后续设计和开发工作。此时，就需要设计师全面、深入地剖析原型，制作一份原型说明文档，以便团队协作。在打开的“生成说明书”对话框中设置相关参数原型设计完成后010203选择“发布”/“生成Word说明书”选项单击“CreateSpecification”按钮五、将原型生成为Word文档设置文档的保存路径和名称选择文档中要包含的页面及页面的组织方式选择文档中要包含的母版及母版的组织方式选择文档中要包含的有关页面和母版的注释、交互等信息设置文档中显示的页面和母版快照的布局选择文档中要显示的元件表并设置元件表的布局选择或编辑生成Word文档时所基于的模板设置文档中要显示内容的顺序和布局五、将原型生成为Word文档元件表以表格的形式显示原型中元件（须有名称或注释）的名称、注释和交互等信息。默认情况下，AxureRP生成的Word文档只包含一个元件表。用户可根据需要在“生成说明书”对话框的“Widgets”选项卡中添加和设置元件表。知识库你知道如何添加和设置元件表吗？任务实施——制作商城类App原型说明文档单击此处播放微课制作商城类App原型说明文档