2.1 初识Axure RP

Axure RP是一款专业的快速原型设计工具，支持Windows和Mac OS，它可以让团队中负责需求定义、产品功能设计的产品经理、需求工程师和交互设计师快速创建Web网站或移动App的低保真线框图、高保真可交互原型、业务流程图和需求规格说明书，支持多人协作和版本管理。

2.1.1 菜单

Windows桌面程序中很常见的菜单部分，包括文件、编辑、视图、项目、布局、发布、团队、账户和帮助等菜单，如图2-1所示。这里先简要介绍每个菜单的内容，详细的使用方法和使用场景会在后续章节中介绍。

图2-1

文件：对Axure项目文件进行打开、新建、保存、导入和导出等常规操作。

编辑：对元件进行剪切、复制、粘贴、查找、替换、删除和撤销等操作。

视图：设置工具栏、功能区、遮罩、脚注、位置尺寸信息、草图效果和背景的显示与隐藏状态。

项目：设置元件/页面默认样式、说明字段、全局变量、对齐方式和DPI等内容。

布局：设置元件的层级关系、对齐、分布方式、栅格、辅助线和元件状态等内容。

发布：进行预览原型、发布至Axshare、生成HTML、生成说明文档等操作。

团队：创建、获取团队项目，管理团队项目，对团队项目进行签入、签出、提交更新、获取更新等操作。

账户：进行登录/登出Axure账号操作。

帮助：提供相关的帮助信息。

2.1.2 工具栏

工具栏中放置的是一些常用的操作按钮，包括项目文件操作按钮、元件编辑按钮、鼠标模式按钮、元件布局按钮、元件发布按钮和元件样式按钮，如图2-2所示，可以看到大部分的按钮在菜单中都能找到。

图2-2

项目文件操作按钮包括保存和打开按钮，元件编辑按钮包括剪切、粘贴、撤销和重做按钮，元件样式按钮包括字体、字号、颜色、边框样式、尺寸和位置等常规设置按钮，这些按钮的功能都比较明确，无须再做详细的解释。下面对工具栏中其他一些常用的按钮的功能进行说明。

相交选中：默认的选中模式，当拖动鼠标时，光标只要进入元件范围，松开光标即可选中该元件。

包含选中：当拖动鼠标时，光标经过的范围必须完全包含元件，松开鼠标才能选中该元件。

连接：用线或箭头连接元件之间的连接点，常用于绘制流程图。

钢笔：可以绘制简易的自定义形状。

边界点：用于改变自定义形状的边界。

切割：把一张图片切割成4份。

剪裁：把图片的四周裁剪掉，剩下中间的部分，也可以把图片的中间部分剪掉变成镂空效果。

缩放：按照10%～400%的比例显示设计区域部分。

顶层：把选中元件置于若干图层的最上方。

底层：把选中元件置于若干图层的最下方。

组合：将若干元件组合使用，组合后可以同时拖动、隐藏和显示组合内的元件，也可以为整个组合添加交互动作，支持组合嵌套。

取消组合：把组合恢复成单独的元件。

对齐：设置两个及两个以上元件的对齐方式，包括左对齐、左右居中、右对齐、顶部对齐、上下居中和底部对齐。

分布：设置3个及3个以上元件的分布方式，可以让这些元件在水平方向或竖直方向等间距分布。

锁定：元件被锁定后，将无法改变其位置和大小，当页面元件很多时可以防止误操作。

取消锁定：元件取消锁定后，可以对其进行其他操作。

开关左侧功能栏：设置页面、元件库和模板功能区的显示和隐藏。

开关右侧功能栏：设置检视和概要功能区的显示和隐藏。

预览：将原型在浏览器中打开。

共享：将原型发布到Axshare平台。

发布：预览、发布至Axshare、生成HTML文件和生成Word说明书等相关功能的操作集合。

登录：登录/登出Axshare账号。

2.1.3 功能区

1.页面列表（站点地图）

页面列表面板，有些版本中被翻译成站点地图，原型中所有的页面都会按照层级结构显示在这里，支持创建文件夹，可以将页面分类管理，如图2-3所示。原型预览时的主页默认为列表中的第一个页面。添加页面和文件夹、改变层级的方法如下。

图2-3

添加同级页面：单击图2-3中①处的“添加页面”按钮，可以添加所选页面的同级页面，也可以在某个页面上执行右键菜单命令【添加>上方添加页面/下方添加页面】。

添加子页面：在某个页面上执行右键菜单命令【添加>子页面】。

修改页面级别：在某个页面上执行右键菜单命令【移动】，快捷键为Ctrl+方向键。

修改页面顺序：在某个页面上执行右键菜单命令【移动>上移/下移】，快捷键为Ctrl+↑/Ctrl+↓。

添加文件夹：单击图2-3中②处的“添加文件夹”按钮，可以添加与所选页面同级的文件夹。需要把页面设置为文件夹的子页面，才能把页面放到文件夹中。

页面列表面板中的页面名称就是原型发布以后生成的HTML文件名称，如果需要把这些HTML文件部署到自己的服务器上或其他云平台上时，最好采用英文的命名方式；如果只需要在本地浏览或直接把原型发布至Axure的官方管理平台Axshare上供各方人员浏览时，可以使用中文名称。

2.元件库

界面原型由不同的元件组成，Axure默认提供3种不同类型的元件库，分别是Default元件库、Flow元件库和Icons元件库，把元件拖入设计区域即可使用，双击设计区域中的元件可以修改其文本内容。

（1）Default元件库：包含基本元件、表单元件、菜单和表格以及标记元件，如图2-4所示。其中基本元件、表单元件、菜单和表格组成了页面中的各种元素，标记元件起辅助作用，在界面原型中记录一些注释和说明。

图2-4

（2）Flow元件库：包含各种流程图元件。通过绘制流程图，可以梳理复杂的业务逻辑，让团队其他成员理解起来更加清晰、直观。

（3）Icons元件库：包含各种常用的图标，省去了在网上搜集素材的麻烦。需要说明的是，Icons元件库只是在原型中方便我们说明什么地方需要加入图标，在真实的产品中一般并不直接使用Axure中提供的图标样式，还是需要根据产品的整体视觉风格重新设计。

除了Axure默认提供的元件库，还可以根据实际需要设计自己的元件库，具体的操作方法在后续的章节中会详细介绍。

3.母版

当原型中有些元件需要重复使用时，可以把重复元件制作成母版，方便随时调用，也给修改、维护工作带来很多便利。母版面板和页面列表（站点地图）很像，也是以列表的形式展示，支持创建文件夹以便进行分类管理，如图2-5所示。

图2-5

4.设计区域

设计区域是Axure最主要的工作区域，用于排布元件位置、设置元件样式等，如图2-6所示。设计区域中有横向标尺和纵向标尺，最大支持20000像素×20000像素的原型，可以加入网格和参考线，进行辅助设计。需要说明的是，设计区域中的原型样式和发布后的原型样式可能并不完全相同。

图2-6

5.检视

检视面板下方又分为元件名称区域、属性面板、说明面板和样式面板，对元件和页面均有效，如图2-7所示。

图2-7

元件名称区域：每个有交互动作的元件都需要命名，方便在众多的元件中定位到特定的某一个。

属性面板：用来设置页面或元件的交互事件、页面或每个元件特有的属性。

说明面板：用来填写页面或元件的说明内容，说明的字段可以自定义。

样式面板：用来设置页面或元件的位置、尺寸、填充颜色和边框等样式。

6.概要

概要面板显示页面中所有元件的列表，包括元件名称和元件类型。可以筛选列表中显示的元件类型和排列顺序，默认的显示顺序是列表顶部的元件在原型中也处于顶部，列表底部的元件在原型中处于底部，可以单击该面板右上角的排序与筛选按钮修改设置，如图2-8所示。

图2-8

2.1.4 案例：制作第一张原型图

本节利用刚刚介绍的Axure RP8.0的各部分内容，设计一个如图2-9所示的简单的登录页面。熟悉一下新建项目、使用元件、编辑页面列表和保存项目等基础操作，并且感受一下使用Axure RP制作界面原型的独特魅力。

图2-9

1.新建文件

打开Axure RP8.0，在欢迎页面中单击“新建文件”按钮，创建第一个原型文件，如图2-10所示。

图2-10

2.布局登录页内容

登录页的内容在index页面中制作。

（1）制作页面头部内容，如图2-11所示。

图2-11

①拖入“矩形3”元件至设计区域，直接拖曳至位置（0,0），拖动元件四周的小方块修改尺寸为900像素×70像素，也可以在工具栏中直接修改参数。

②拖入“占位符”元件至设计区域，位置为（0,0），尺寸为160像素×70像素，双击修改其文本为“logo”。

（2）制作页面主体内容，如图2-12所示。

图2-12

①拖入“图片”元件至设计区域，位置为（100,120），尺寸为340像素×230像素。

②拖入两个“文本框”元件至设计区域，位置分别为（510,135）和（510,200），尺寸均为320像素×40像素，在各自的属性面板提示文字中输入“手机号/邮箱/用户名”和“密码”。

③拖入“主要按钮”元件至设计区域，位置为（510,262），尺寸为320像素×40像素，双击修改其文本为“登录”。

④拖入“文本标签”元件至设计区域，位置为（700,310），双击修改其文本为“没有账号？点我注册”。

（3）制作页面底部内容，如图2-13所示。

图2-13

①拖入“矩形2”元件至设计区域，位置为（0,380），尺寸为900像素×70像素。

②拖入3个“文本标签”元件至设计区域，位置分别为（351,406）、（421,406）、（490,406），双击修改各自的文本分别为“产品简介”“帮助中心”“联系我们”。

3.编辑页面结构

把制作的登录页中可能会有的跳转页面添加至页面列表面板，如图2-14所示。

图2-14

（1）把项目默认的index页面重命名为login；page1、page2和page3页面分别重命名为product_Introduction、help、contact，分别对应“产品简介”“帮助中心”“联系我们”页面。

（2）在login页面上执行右键菜单命令【添加>下方添加页面】，命名为register，对应注册页面。

4.保存项目

和其他的应用软件一样，单击菜单中的【文件>保存】（快捷键Ctrl+S），选择保存的位置，输入文件名，即可保存Axure RP项目。当前创建的是个人项目，项目文件扩展名为.rp（见图2-15），在后续的章节中会介绍团队项目，其文件扩展名为.rpprj。

图2-15

本案例的目的在于让读者能利用Axure RP这款软件简单地布局一些页面，读者也可以模仿一些成功的互联网产品案例制作其他的页面，熟悉Axure RP的各项基础操作，为后续的学习打下良好的基础。