Axure-RP-8-交互原型设计案例教程第14章课件.pptx

1、第14章 发布交互原型A x u r e R P 8 交 互 原 型设 计 案 例 教 程（微 课 版）微课版执行【发布】【预览】（【F5】）命令或者在样式工具栏中单击【预览】按钮，即可预览当前的原型文件。如果用户电脑上安装了多款网页浏览器，则可以执行【发布】【预览选项】（【Ctrl+F5】）命令，在打开的【预览选项】对话框中选择相应的浏览器，如图14-1 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图 14-1 选择预览的浏览器默认状态下，预览原型时，网页浏览器的左边会自动

2、打开一个侧边栏，如图14-2 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图14-2 侧边栏如果想关闭侧边栏或者预览网页时最小化侧边栏，则可以在【预览选项】对话框中设置，如图14-3 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图 14-3 设置侧边栏要将自己设计的交互原型发布到Axure Share 网站中，首先需要注册一个账号，否则会弹出【登录】对话框，

3、如图14-4所示。如果你有自己的账号，则可以直接登录，如果没有账号，则可以通过该对话框创建一个账号。或者可以在样式工具栏中单击右侧的【登录】按钮登录或者注册账号，如图14-5 所示。登录成功后，样式工具栏中会显示你的用户名，如图14-6 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.2 在线预览图 14-4【登录】对话框Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图 14-5【

4、登录】对话框 图14-6 显示的用户账号现在可以执行【发布】【发布到Axure Share】（F6）命令或者在样式工具栏中单击【分享】按钮进行发布。在弹出的【发布到Axure Share】对话框中可以选择“创建一个新项目”，然后输入要发布项目的名称、密码和原型存放的文件夹，如图14-7 所示。单击【发布】按钮即可上传当前的原型文档，发布成功后会弹出一个对话框，上面显示原型发布到的地址，如图14-8 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览Axure RP 8 交互原型设计

5、案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图 14-7 设置【创建一个新项目】参数 图14-8 成功发布原型后的提示单击【复制】按钮可复制预览的网址给他人，只要电脑联网，就能在任何地方看到你的杰作了。如果设置，访问的密码（在发布原型时，密码是可选项），则在打开你的预览网页时会弹出要求输入密码的提示，如图14-9 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.1 14.1 预览交互原型预览交互原型14.1.1 本地预览图 14-9 输入访问密码为了更好地学习

6、如何生成说明书，先设计一个简单的交互原型，通过设计该原型了解设计过程，更好地掌握生成说明书时各个参数的含义。（1）新建Axure RP 文档并创建多个页面，分别命名各个页面，如图14-10 所示。（2）双击“目录”进入该页面编辑视图中，在顶部位置添加一个矩形元件并输入如图14-11 所示的文本。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说

7、明书生成交互原型说明书14.2.1 设计一个交互原型图 14-10 重命名页面 图14-11 创建矩形元件（3）右击矩形元件，从弹出的快捷菜单中选择【转换为母版】，在弹出的对话框中将拖放行为设置为“固定位置”，将母版命名为“教材名称”，如图14-12 所示。（4）选择页面中的母版元件，在右侧的【说明】子面板中输入图14-13 所示的文字。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发

8、布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型图 14-12 转为母版设置 图14-13 添加文字说明（5）使用鼠标从【页面】面板中将每个页面拖到目录页面视图中，页面中会自动生成带有链接功能的矩形元件（即引用页面），并且每个矩形元件上都自动标有对应页面的名称，如图14-14 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型图 14-14 生成引用页面（6）给每个元件命名并使用与步骤（4）相同的方法，对页面中的每

9、个章节标题添加说明文字，如图14-15 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型图 14-15 给元件命名并添加文字说明（7）双击“第一章Axure RP 基础”页面进入其页面编辑视图，从【母版】面板中将“教材名称”母版拖到页面中，然后创建一个三级标题元件并输入“本章重点”字样，使用与步骤（3）相同的方法将该元件转为母版，如图14-16 所示。（8）同样给该母版元件添加文字说明，如图14-17 所示。Axure RP 8 交互原型设计案例教程（微课版）

10、第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型图 14-16 创建第二个母版元件 图14-17 给母版添加文字说明（9）在页面中添加一些重点内容，给元件命名并添加说明文字，如图14-18 所示。（10）使用上面的方法对其他页面也添加相应的内容并添加文字说明，在此略过，不再重复介绍，请读者自行完成。（11）使用第14 章所学的知识建立一个自适

11、应视图，如图14-19 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.1 设计一个交互原型图 14-18 添加的其他文字及说明 图14-19 建立自适应视图生成Word 说明书的方法是：执行【发布】【生成Word 说明书】（【F9】）命令，打开如图14-20所示的【生成Word 说明书】对话框。Axur

12、e RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-20【生成Word 说明书】对话框下面介绍【生成Word 说明书】对话框中的参数。1.【常规】该参数可以指定保存Word 文档的位置。默认生成的Word 格式是.docx，需要使用Word 2007或者以上版本打开，如果使用Word 2003，则无法直接打开，需要安装支持.docx 格式的兼容包方可打开。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14

13、.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书2.【页面】该参数主要用于设置Axure RP 页面中的哪些内容出现在说明书中。（1）标题部分。该选项用于控制是否在说明书中显示说明书的标题，内容可以自定义，默认标题内容是“页面”，如果不选择该项，则在生成说明时不会出现该项内容。（2）包含站点地图列表。该项控制页面面板中的页面结构图是否显示在说明书中，默认是显示的，如果不选择该项，则生成的说明书中不会出现这些内容。（3）生成所有页面。选择该项，可以将【页面】面板中的所有页面都包含在说明书中，如果不勾选该项，则可以从下面的列表中选择要生成说明书的页面。Axure R

14、P 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书3.【母版】该参数与前面的【页面】设置基本类似，只是它专门控制Axure RP 的【母版】面板中的相关母版是否出现在说明书中。默认状态下，【母版】面板中的所有内容都出现在说明书中。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书在【母版】选项界面的下方还有几个参数，其作用分别如下。（1）只

15、包含生成页面使用的母版。（2）不生成类型为脱离的母版。（3）页面部分中记录母版：要看出该选项的作用，首先双击【母版】面板中的母版元件进入母版编辑页面，选择母版包含的元件，如母版中带文本的矩形元件，然后给该矩形命名并添加用例，如图14-21 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成W

16、ord 格式说明书图 14-21 给母版中的矩形命名并添加用例然后对选中的元件添加文字说明，如图14-22 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-22 给母版中的矩形添加说明接下来取消元件的选择状态并在【说明】子面板中输入针对页的说明文字，如图14-23 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word

17、 格式说明书图 14-23 给母版中的矩形所在的页面添加说明以上设置完成后，在生成Word 说明时，如果不勾选“页面部分中记录母版”选项，则在页面部分的元件表中显示的内容如图14-24 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图14-24 未选择“页面部分中记录母版”选项时的元件表如果如果不勾选“页面部分中记录母版”选项，则在页面部分的元件表中显示的内容如图14-25所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布

18、交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图14-25 选择“页面部分中记录母版”选项时的元件表注意在勾选“页面部分中记录母版”选项后，页面中的快照右上角的蓝色脚注图标上会出现一个“A”，如图14-26 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-26 选择“页面部分中记录母版”选项时导致脚注图标变化（4）只在首次使用时记录：如果同一个母版在多个页面中使用，则勾选该项

19、后，只在使用该母版的第一个页面的元件表中出现对该母版的记录，其余页面中虽然也可能用到了该母版，但元件表中不会记录该母版的信息。（5）不包含母版说明：首先需要弄清楚的是：此处所说的母版说明是指进入母版编辑状态的页面说明，并非是指母版所在页面的说明。如果不勾选该项，则在生成的Word 说明书的相关页面中会出现对母版的说明文字，如图14-27 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书Axure RP 8 交互原型设计案例教程（微课版）第第1414章章

20、发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-27 页面中出现的母版说明如果勾选“不包含母版说明”选项，则在生成的Word 说明书的相关页面中不会出现对母版的说明文字，如图14-28 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-28 页面中未出现母版说明文字4.【页面属性】该选项主要控制在Word 说明书中要显示的与页面相关的属性信息。（1）包含页面说明：选

21、择该选项，在【说明】子面板中输入的说明文字和自定义字段后输入的说明文字会显示在Word 说明书中。图14-29 所示是在【说明】子面板中输入的页面说明文字。生成Word 说明书后，在页面中会显示对应的页面说明文字，如图14-30 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格

22、式说明书图14-29 页面说明文字图 14-30 说明书中显示的页面说明文字如果不选择“包含页面说明”选项，则生成Word 说明后，在页面中不会出现这些页面说明文字，如图14-31 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书图 14-31 说明书中未显示页面说明文字5.【快照】（1）包含快照：勾选该项，则生成的Word 说明书中会包含Axure RP 原型中每个页面的快照。（2）快照标题：为生成的屏幕快照命名，默认名称为“用户界面”。（3）快照中

23、显示脚注：勾选该选项，则生成Word 说明书之后，在原型的快照图片上会显示脚注标号，如果不选该项，则快照中不会显示脚注标号。（4）显示快照边框：勾选该项，则说明书中的快照会显示一个黑色边框。（5）脚注不随快照缩放：如果不选择该项，则当输出的Word 说明书使用较大的页面版面（如A3 纸等）时，脚注编号会变大一些，当输出的说明书使用较小的页面版面（如32 开等）时，脚注编号会变小一些。如果勾选“脚注不随快照缩放”选项，则无论输出的说明书使用多大的尺寸，蓝色脚注都保持固定的尺寸。（6）应用默认页面载入时和元件载入时用例：如果使用了页面的【页面载入时】事件和元件的【载入时】事件，勾选该选项后，在生成

24、的Word 说明书中会显示载入的效果。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书（7）包含子菜单：如果在原型中使用了Axure RP 自带的经典菜单元件，那么选择“包含子菜单”选项会生成展开菜单的快照。如果不选择“包含子菜单”选项，则不会在快照中显示展开的菜单内容。（8）包含展开的树状菜单：如果在原型中使用了Axure RP 自带的树状菜单元件，那么选择“包含展开的树状菜单”选项会生成展开树状菜单的快照。如果不选择“包含展开的树状菜单”选项，则不会在快

25、照中显示展开的树状菜单内容。（9）在内联框架中显示默认页面：如果RP 页面中应用了内联框架且内联框架引用了页面或者指定了链接内容，则勾选该项后会在说明书中显示框架中的内容。（10）不使用背景样式：如果在原型中使用页面的【样式】子面板中的参数设置了页面背景样式（如设置了背景色或者背景图案等），则勾选此项后，在Word 说明书中不会出现设置的背景。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书6.【自适应视图】该栏参数可以控制在生成的Word 说明书中哪些自适

26、应视图生成快照，默认状态下，程序将生成所有自适应视图的快照。可以从列表中自定义要生成快照的自适应视图。7.【元件表】该栏参数提供了许多配置功能，可以管理Word 说明书中包含的元件说明信息。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式说明书8.【布局】设置该栏中的参数可以将生成的说明书分成单列显示成双列显示，默认状态下生成的说明书单列显示。9.【Word 母版】设置该栏中的参数，可以编辑、导入和创建新的Word 母版，而且可以将Word 中的样式与AxureR

27、P 中的样式一一对应。如果要编辑当前使用的Word 母版，则可以单击“编辑”链接，启动Word程序，可以根据需要设置Word 母版的内容，例如，可以输入中文的内容，将原来的英文替换掉或者改变Word 文档的大小等，设置完成后保存Word 母版即可。如果还有其他的Word 母版，则可以单击“导入”链接将其导入进来，这样在生成Word 说明书时会采用新导入的母版。如果要新建一个Word 母版，则可以单击“新建模板”链接。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.2 14.2 生成交互原型说明书生成交互原型说明书14.2.2 生成Word 格式

28、说明书Axure RP 在本地输出网页文件方法是：执行【发布】【生成HTML 文件】（F8）命令或者在样式工具栏中单击【HTML】按钮，打开如图14-32 所示的【生成HTML】对话框。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-32【生成HTML】对话框1.【常规】该栏参数主要指定HTML 文件存放的位置以及使用哪个浏览器预览网页。2.【自适应视图】该栏参数可指定在网页中显示哪些自适应视图，默认状态下，将在网页中输出所有设置的自适应视图。3.【页面】该栏参数可以指定在网

29、页中包含原型的哪些页面，默认状态下，将在网页中包含原型中的全部页面。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地4.【页面说明】该栏参数可以指定在网页中包含哪些页面说明的内容，默认状态下，将在网页中包含原型页面中添加的全部说明。显示页面说明名称：页面说明是指在页面的【说明】子面板中添加的页面说明文字，页面说明名称则是指如图14-33 所示的圈红的名称。选择“显示页面说明名称”选项，则在生成的网页文件中的侧边栏就会列出这些名字，如图14-34 所示。Axure RP 8 交互原型设计

30、案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-33 页面说明名称 图14-34 侧边栏中的页面说明名称5.【元件说明】该栏参数主要用于设置在网页中的元件说明选项。默认状态下，网页中包含原型中的所有元件说明内容。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将

31、原型发布到本地6.【交互】该栏中的参数可以控制原型中的交互在网页中的显示方式，参数如图14-35 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-35 交互参数栏（1）包含控制台：勾选该项，在生成的网页后，浏览器的侧边栏会显示CONSOLE（控制台）项，在该项中，可以显示页面中的交互内容，如图14-36 所示。如果不勾选“包含控制台”选项，则网页浏览器中不会出现CONSOLE（控制台）项，如图14-37 所示。Axure RP 8 交互原型设计案例教程（微课版）第第14

32、14章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-36 侧边栏显示控制台 图14-37 侧边栏不显示控制台（2）用例行为：该栏参数主要控制在浏览器中是否显示用例名称。例如，对一个元件添加了两个用例，如图14-38 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-38 一个元件添加两个用例始终显示用例名称：无论元件中的事件添加了多少个用例，在浏览器中预览网页时，当鼠标和元件进行交互时，都将弹出针对该元件事件的用例，

33、如图14-39 所示。只在同一事件包含多个用例时显示用例名称：勾选该项后，如果在同一个元件中的同一个事件中添加了多个用例，则使用鼠标和该元件交互时会弹出这些用例名称，如果在一个事件中只包含了一个用例，则不会弹出用例名称，如图14-40 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-39 一个元件添加两个用例 图1

34、4-40 一个元件添加两个用例（3）元件引用页：该栏中的两个参数可对引用页进行控制。生成引用页最简单的方法就是从【页面】面板中将某个页面图标拖曳到页面中，默认状态下，生成引用页的元件是矩形，如图14-41所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-41 生成引用页点击元件时打开引用页：勾选该项时，在网页浏览器中单击某个元件，如果该元件使用了引用页，则会打开引用的页面，如图14-42 所示。如果不勾选该项，则单击元件时不会打开引用页，如图14-43所示。Axure R

35、P 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-42 单击按钮会打开引用页 图14-43 单击按钮不会打开引用页7.【标志】可在浏览器侧边栏中设置要显示的标志图像和标题文字。标志：勾选该选项，可以在网页的侧边栏上显示指定的标志，单击【导入】按钮可以指定什么样的图像作为标志，单击【清除】按钮可以清除导入的标志。标题：勾选该选项，可以在下方的文本框中输入作为标题的文本。预览网页时，导入的标志图像和输入的标题文本将出现在网页侧边栏标志图像的下方。Axure RP 8 交互原型设计案例教程（微课版

36、）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地8.【Web 字体】所谓Web 字体，就是把放在网络上的一个字体文件嵌入当前网页上，客户端浏览该网页时，字体显示效果就像本机安装的效果一样。使用这种方法可以让在互联网中显示的网页文件正确地显示比较特殊的字体，而无需将特殊字体设置成图片格式。Web 字体栏参数如图14-44 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第

37、第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-44 Web 字体参数下面学习如何设置CSS 字体文件。首先在Axure RP 中为一段文本指定一款比较特殊字体，如“汉仪秀英体简”，该款字体效果如图14-45 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-45 在Axure RP 中指定特殊字体现在只需要输入文本，无需关注使用了什么字体，当然，默认状态下，Axure RP 会使用Arial 字体，如图1

38、4-46 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-46 在Axure RP 中输入文本单击【使用】按钮，弹出一个新的界面，在该界面中单击“CSS 模式”，然后在下方输入要使用秀英体的文本，如图14-48 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-47 搜索到的字体 图14-48 在CSS 模式中输入文本输入完毕后，单击下方的【生成】

39、按钮，即可生成相关代码，从代码中可以看到CSS 文件所在的目录位置，如图14-49 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-49 生成的代码中包含CSS 文件路径位置图14-49 中显示的CSS 文件的代码位置如下。/ 代码完整的内容，这就是我们需要的CSS 文件，如图14-50 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-50 CS

40、S 代码内容另外，还要注意现在网页浏览器地址栏中的地址在我们复制的地址前面自动添加了“http:”，如图14-51 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-51 自动添加的“http:”从CSS 代码中可以看到，Web 字体名称是“minijianxiuying68957a0dc16c8b”，如图14-52 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发

41、布到本地图 14-52 Web 字体的名称虽然该字体的名称过长，不便于记忆，但是只能使用这个名称，无法更改。现在需要将该字体名称复制下来，然后在Axure RP 中选择输入的文字并将复制的字体名称粘贴到样式工具栏的字体下拉列表框中，再按回车键确认，如图14-53 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-53 给文本指定字体按【F8】键打开【生成HTML】对话框，在【Web 字体】栏中新建一个Web 字体并将其命名为“minijianxiuying68957a0d

42、c16c8b”，这个名称必须和CSS 代码中的字体名称一致，然后选择“链接到CSS 文件”选项，并将CSS 代码的完整网址从网页浏览器地址栏复制到URL 文本框中，如图14-54 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-54 Web 字体参数设置设置完成后，单击“生成”按钮，可以在本地预览网页原型文件，无论你的电脑中是否安装秀英字体，打开网页浏览器后都能看到真实的秀英字体效果，如图14-55 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414

43、章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-55 在本地预览字体效果也可以将这个网页原型文件发布到Axure Share 进行在线预览，同样会显示真实的秀英字体效果，如图14-56 所示。font-face：选择该选项，可以将互联网中的CSS 代码复制过来或者输入自定义的CSS 代码。例如，可以将图14-50 中的CSS 代码内容复制过来，和前面的URL 设置一样，需要在每个“/”前面添加“http:”，如图14-57 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3

44、 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-56 在Axure Share 中预览字体效果 图14-57 搜索到的字体按【F5】键预览即可看到秀英字体的真实效果。除了使用其他Web 字体网站的CSS 代码外，还可以将特殊字体复制到网页输出文件夹中，然后自己编写CSS 文件或者代码，以显示正确的特殊字体，当需要在其他电脑上预览网页原型时，只需要将整个网页文件夹一起复制过去，而无需再安装这些字体，即可显示正确的字体效果。如果要将

45、CSS 字体文件放在本地的网页文件夹中，则需要进行下面的操作：首先在【样式工具栏】中给输入的文本指定一个字体名称，如输入“xiuying”，如图14-58 所示。将使用的后缀为TTF 的字体也命名为“xiuying”，然后将其放在网页文件原型所在的文件夹中，如图14-59 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图

46、14-58 自定义字体名称 图14-59 将命名的字体复制到网页文件夹中打开记事本程序并输入如图14-60 所示的代码。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-60 自定义代码将编辑好的记事本文件另存为“xiuying.css”，注意在保存类型中选择“所有文件”，如图14-61所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-61 保存为CSS

47、文件将保存的“xiuying.css”文件存放到网页原型文件夹的根目录中，使其位置与CSS 文件中的URL路径位置一致，如图14-62 所示。按【F8】键打开【生成HTML】对话框，在【常规】栏中将HTML 文件存放到网页原型文件夹中，如图14-63 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-62 保存的自定义CSS 文件 图14-63 指定网页输出位置在【Web 字体】栏中新建一个Web 字体并将其命名为“xiuying”，这个名称必须和命名的字体名称一致，然后

48、选择“链接到CSS 文件”选项，在URL 文本框中输入“xiuying.css”，如图14-64所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-64 设置Web 字体单击【生成】按钮，即可输出HTML 文件，在网页原型文件夹Web 中可以看到输出的网页文件、文件夹以及在前面步骤中复制的字体和自定义的CSS 文件，如图14-65 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.

49、1 将原型发布到本地图 14-65 网页文件夹中的文件现在如果没有自动打开浏览器预览网页效果，则可以双击网页文件夹中的“start.html”进行预览，预览效果如图14-66 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-66 预览的字体效果又该如何设置URL 呢？下面首先在网页原型文件Web 中建立一个“css”子文件夹并将“xiuying.css”文件移动到该子文件夹中，如图14-67 所示。对此，只需要修改两项即可解决这个问题：一项是修改CSS 文件代码中的UR

50、L，另一项是修改Web 字体URL 路径。打开“css”子文件夹中的“xiuying.css”文件，在url 后面的括弧中将原来的“xiuying.ttf”改为“./xiuying.ttf”，如图14-68 所示。Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地Axure RP 8 交互原型设计案例教程（微课版）第第1414章章发布交互原型发布交互原型14.3 14.3 发布原型发布原型14.3.1 将原型发布到本地图 14-67 将CSS 文件放在子文件夹中 图14-68 在CSS