AxureRP9网站与App原型设计(全彩慕课版)_教学教案

第1章 Axure原型设计概述

课时内容

Axure原型设计概述

教学目标

了解原型、Axure的软件界面及原型设计流程

课时

2

教学重点

三类原型的优缺点、Axure软件界面、原型设计流程

教学难点

Axure软件界面、原型设计流程

1.教学思路：通过实例引出原型的概念；通过实机操作讲解Axure RP 9 软件安装和软件界面；通过多媒体演示原型设计流程。

教学设计

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件、收集的原型实例

教学内容

信息化高速发展的今天，用户从过去没有太多软件可以使用到现在可以定制自己个性化的软件，用户有更多自己的想法和需求，但是并不能清晰、完整地表达自己需求，

而产品原型恰恰能快速地挖掘出用户的真实需求。

通过原型设计预先展示产品效果

1.1 原型

软件原型可以理解成软件的Demo（示范），它并不是一个可以最终使用的软件，而是通过某种物品（比如纸笔）或者某种工具（比如Axure）快速地勾勒出软件的大致结构，并添加一些交互效果，实现的模拟软件功能操作的范例。原型大致可以分为3类：草图原型、低保真原型以及高保真原型。

1.1.1 草图原型

草图原型

 缺点：产品经理或者设计师们在白板上制作的草图，他人难以理解其设计意图，因此与其他成员在沟通上存在障碍。

 优点：可以简单、快捷地描述出产品大概需求，记录瞬间的灵感。这样的原型适用于小项目、工期短、用户需求少的产品。

1.1.2 低保真原型

低保真原型

 缺点：美观上和交互效果上比较欠缺。

 优点：能够快速构建产品大致结构，提供基本交互效果，是一个团队成员间有效的沟通方式。

1.1.3 高保真原型

高保真原型

 缺点：需要投入大量的精力和时间。

 优点：可以模拟出真实软件的界面以及交互效果。

1.2 Axure RP 9 软件安装与汉化

Axure RP 9软件图标

从官网上下载Axure RP 9软件安装包，进行软件的安装。

（1）双击安装软件开始安装Axure RP 9原型设计工具，安装窗口出现欢迎语：Welcome to the Axure RP 9 Setup Wizard。

Axure RP 9开始安装

（2）勾选“I accept the terms in the License Agreement”复选框，同意Axure安装协

议，单击“Next”按钮继续安装。

同意安装协议

（3）选择软件存放路径，可以使用默认的安装路径也可自定义安装路径，之后单击“Next”按钮进行下一步。

选择安装路径

（4）持续单击“Next”按钮，直至出现下图所示的界面。

完成安装

（5）单击“Finish”按钮，打开Axure RP 9 原型设计工具。

Axure RP 9 界面

（6）在网络下载Axure RP 9 软件汉化包，软件汉化包会说明如何进行汉化操作，汉化后界面如图所示。

Axure RP 9 汉化界面

1.3 Axure RP 9 软件特色

（1）Axure RP 9软件重新设计

（2）Axure RP 9细节更完善

（3）Axure RP 9 管理更方便

（4）Axure RP 9 兼容性

（5）Axure RP 9 团队项目

1.4 认识Axure软件界面

运行Axure软件，开始认识Axure软件界面，软件界面大致可以分为6个区域，分别为菜单栏区域、工具栏区域、页面与概要区域、元件与母版区域、工作区域和检视区域。

软件界面

1.3.1 菜单栏区域

微课视频

菜单栏区域包括文件、编辑、视图、项目、布局、发布、团队、账号、帮助9个菜单项，提供软件的一些常规操作和功能。

菜单栏区域

菜单栏应用详解

1. 文件菜单

该菜单可完成的操作如下。

（1）可以新建工程、打开工程、保存工程以及新建元件库，该操作可以使用快捷键或者工具栏快速操作按钮完成。

（2）可以导入RP文件，可以打开团队项目、新建团队项目、获取团队项目。

（3）可以进行打印纸张尺寸设置、打印page 1页面、导出page 1图片。

（4）可以进行备份经常用到的操作，可以设置定时备份软件原型，避免制作过程中软件原型丢失。

文件菜单选项

2. 编辑菜单

该菜单可以完成撤销、重做、剪切、复制、粘贴等操作，由于这些操作可以使用快捷键来完成，所以很少会使用此菜单。

编辑菜单选项

3. 视图菜单

视图菜单中常用的选项组有工具栏、功能区和遮罩。工具栏选项组包括基本工具和样式工具。用户可以通过勾选的方式控制工具栏区域内容的显示，同时软件提供自定义工具栏功能，工具栏内容可以自行定义。

视图菜单选项 工具栏选项

功能区菜单包括7个区域：页面区域、元件区域、母版区域、交互区域、说明区域、样式区域、概要区域。通过勾选的方式可以控制该区域的显示与隐藏效果；Axure还提供开关左侧功能栏和开关右侧功能栏的功能。

在遮罩菜单中，用户能够通过勾选的方式来控制是否为隐藏对象、母版、动态面板、中继器、文本链接或热区添加遮罩效果。

功能区选项 遮罩选项

4. 项目菜单

项目菜单可以对元件、页面的样式进行编辑，设置自定义元件字段说明和页面字段说明，添加全局变量，并且自适应视图可以设置页面自适应，根据不同的页面大小显示不同的内容。

项目菜单选项

5. 布局菜单

布局菜单是用来处理元件和元件之间的组合关系、对齐方式、分布方式，并包含转换为母版或动态面板等功能，该操作可以通过工具栏区域的快捷操作来完成，很少会进入到布局菜单里来操作元件。

布局菜单选项

6. 发布菜单

发布菜单的功能如下。

（1）可以进行原型预览，对预览方式进行设置，选择打开浏览器的方式以及对工具栏进行设置。

（2）可以将原型发布到Axure云上面进行托管。

（3）以生成HTML文件的方式进行原型发布。

（4）生成需求规格说明书的Word文档。

（5）预览和生成原型文件。

发布菜单选项

7. 团队菜单

团队菜单可用于创建团队项目和获取团队项目，对团队项目工程进行团队协作管理，包括从团队目录获取全部变更、提交所有变更到团队目录、迁出全部、签入全部、撤销所有迁出等。

团队菜单选项

8. 账号菜单

账户菜单选项进行账户登录和代理服务器设置。

账户菜单选项

9. 帮助菜单

帮助菜单选项的功能如下。

（1）提供在线培训教学功能以及进入Axure论坛功能。

（2）获得软件使用授权的功能。

（3）软件检查更新功能以及提交软件意见和软件错误。

帮助菜单选项

1.3.2 工具栏区域

工具栏是使用频率最高的快捷工具，在原型设计过程中经常会用到快捷操作，理解工具栏的功能并掌握它的使用，可以提高原型制作的效率。工具栏区域分为基本工具栏和样式工具栏，同时提供自定义工具栏功能。

工具栏区域

1. 基本工具栏

（1）剪切、复制、粘贴快捷工具

剪切、复制、粘贴快捷工具按钮如图所示。

剪切、复制、粘贴快捷工具按钮

剪切：剪切功能，单击该快捷工具按钮可以剪切选中的元件，快捷键是Ctrl+X组合键。

复制：复制功能，单击该快捷按钮可以复制选中的元件，快捷键是Ctrl+C组合键。

剪贴板：粘贴功能，可以粘贴复制的元件。单击该快捷按钮，可以把复制的元件粘贴到工作区域，它的快捷键是Ctrl+V组合键。

撤销：撤销功能，单击该快捷工具可以撤销上一步的操作，快捷键是Ctrl+Z组合键。

重做：重做功能，单击该快捷工具可以重做上一步的操作，快捷键是Ctrl+Y组合键。

（2）选择模式、连接操作

元件的选择模式、连接方式快捷工具按钮如图所示。

选择模式、连接

选择模式：包括相交选中选择和包含选中选择，相交选中选择所选择的区域只要和元件有接触、有相交，该元件就会呈现为选中状态；而包含选中选择是只有所选择的区域把元件完全包含进来，该元件才会呈现选中状态。

连接：是用来连接两个元件，使用连接线把两个元件连接起来，该操作常被用来绘制流程图。

（3）插入操作

插入操作包括对绘画、矩形、圆形、线段、文本、图片、形状等插入操作。

插入操作

（4）布局操作

布局操作是用来设置页面中元件的布局，包括设置元件置于顶层、置于底层、组合、取消组合、比例缩放、对齐方式以及分布操作。

图1.32 布局操作

顶层、底层：可以将工作区域中的元件置于顶层或置于底层。

组合、取消组合：可以将不同元件设置为一个组合，这样在移动的时候，可以把组合的元件一起移动或者进行其他操作；同时也可以将一个组合拆散为单独的元件。

对齐方式：提供左对齐、居中对齐、右对齐、顶部对齐、中部对齐和底部对齐方式。

 左对齐：单击该按钮，元件以靠左对齐。

 居中对齐：单击该按钮，元件以左右居中方式对齐。

 右对齐：单击该按钮，元件以右对齐方式对齐。

 顶部对齐：单击该按钮，元件之间以顶部对齐方式对齐。

 中部对齐：单击该按钮，元件以垂直居中方式对齐。

 底部对齐：单击该按钮，元件以底部对齐方式对齐。

分布：包括水平分布和垂直分布两种分布方式；

 水平分布：单击该按钮，可以让选中的元件横向均匀分布。

 垂直分布：单击该按钮，可以让选中的元件纵向均匀分布。

（5）预览、共享、登录操作

工具栏还提供预览、共享、登录快捷操作按钮如图所示。

预览、共享、登录操作

预览：通过原型预览的方式在浏览器中显示，不生成本地原型文件。

共享：通过共享的方式创建团队项目，将其发布到Axure云上面，将工程共享起来。

登录：提供登录的快捷按钮。

2. 样式工具栏

样式工具栏可以为文本内容或者元件边框设置样式，可以设置文本的颜色、字号、字体，也可以给元件边框设置样式。

样式工具栏

Box1选项可以设置不同的标题。

Arial选项是用来设置文字的字体。

Normal选项是用来设置字体的样式，针对字体可以进行设置字号、颜色、样式等等操作。

快捷操作可以设置文字的对齐方式，左对齐、居中对齐、右对齐、两侧对象、顶部对齐、中部对齐、底部对齐。

快捷操作可以填充背景颜色，单击填充颜色区域，可以选择不同颜色进行填充。

快捷操作可以设置外部阴影，勾选阴影复选框，可以设置阴影的偏移位置，以及模糊程度，并且可以设置阴影的颜色。

快捷操作可以设置元件边框的颜色，包括单色、线性、径行不同类型。

快捷操作可以设置元件的线条样式，单击后会弹出的对话框中选择线条样式，线条可以是实心线，也可以是虚线。

快捷操作可以设置水平线元件和垂直线元件的箭头样式。

3. 自定义工具栏

工具栏提供许多的快捷按钮，但是有一些按钮是经常会用到的，有一些按钮可能很久都不

会用到一次，这时可以通过自定义工具栏，定义工具栏里显示什么快捷按钮。单击视图菜单的工具栏选项，选择自定义工具栏命令。

自定义工具栏

自定义工具栏可以自定义文件、模式、插入对象、工具、缩放、布局、组合、对齐、分布、锁定、视图选项、发布、账号等快捷工具按钮操作，可以根据自己的需要来定义这些快捷按钮。

1.3.3 页面与概要区域

页面与概要区域包含两部分内容，一部分用来显示软件页面的区域，从这里可以了解到软件的大致结构，有哪些页面，以及页面之间的关系。页面区域采用树状结构来显示页面，以Page1页为树的根节点，可以通过对页面进行增加、移动、删除等操作来管理软件原型的页面；另一部分是概要区域，它是用来管理页面上使用的元件，可以查看页面上使用了哪些元件并管理元件，比如可以管理动态面板，进行增加动态面板、移动动态面板以及删除动态面板等管理元件的操作。

页面区域 概要区域

1.3.4 元件与母版区域

1. 元件区域

元件区域为制作原型提供的一些基础元件，Axure RP 9原型设计工具默认线框图元件库、流程图元件库和图标元件库。

线框图元件组里提供39种线框图元件，分为4类：基本元件、表单元件菜单|表格和标记元件。常用的有矩形、图片、占位符、文本标签、水平线、垂直线、热区、动态面板、文本框、下拉列表、复选框、单选按钮元件。

线框图元件库

流程图元件库里提供37种流程图元件，有矩形、菱形、文件、括弧、半圆形、三角形、梯形、圆形、六边形、平行四边形、角色、数据库、快照等元件。

流程图元件库

图标元件库里提供了各种各样的图标元件，比如箭头图标、电池图标、日历图标等。

图标元件库

2. 母版区域

母版区域用来设计一些共用、复用的区域，例如网站尾部版权区域，可能每个页面都会用到版权信息；也可以用来设计导航菜单、特别是移动App的底部标签导航。在母版区域进行一次设计，在其他页面可以直接引用该设计，从而达到共用、复用的效果。

母版区域

1.3.5 工作区域

工作区域是用来绘制原型的画布，在该区域里可以完成原型的设计，就像画画时用的画纸，在画纸上可以随意发挥，工作区域就是绘制原型的画纸。

工作区域

1.3.6 检视区域

检视区域用于设计页面或者元件的样式、交互效果及说明；

可以设计页面、元件的样式，比如页面在浏览器中的对齐方式是居中对齐还是居左对齐，页面的背景色或者背景图片，还可以根据草图的效果对元件设置禁用、选中等属性，也可以给元件添加样式，设置元件的位置和大小，选择元件的字体、边框线、圆角半径、对齐方式。

可以添加页面交互效果，如添加页面载入时的触发事件、窗口尺寸改变时的触发事件、窗口滚动时的触发事件以及更多其他的事件。

可以填写页面或者元件注释说明，也可以自定义注释的名称。

样式设置 交互设置 说明设置

1.4 原型设计流程

1.4.1 需求分析

一般情况下，需求分析主要由产品经理或者需求分析师来完成，但是设计师最好也参与到

前期需求分析的过程中，这样就可以与产品经理对需求产生一致的理解，达成一致的意见。

如何进行需求分析呢？

（1）

用户等。

（2） 通过竞品分析，分析竞品的界面样式、操作流程、主要任务流程以及用户的需求，但不能直接照搬竞品的设计，其核心竞争力与我们的产品可能不同，解决的用户需求也有可能不同，所以不能直接抄袭。

（3） 通过分析用户的反馈和产品的数据，找到用户的需求和痛点，从而通过产品满足用户的需求。

通过用户调研的方式获取用户的需求，调研的方式有很多，如调查报告、访谈1.4.2 页面架构设计

1. 使用思维导图软件理清逻辑关系

获取到用户需求之后，就可以开始分析用户的需求，使用思维导图软件来理清用户的需求以及产品的各个功能模块、逻辑关系等内容。

猿题库App思维导图

2. 流程图表达主要流程任务

分析用户的需求，分析出用户使用产品可以完成的主要流程任务，要完成此流程任务用户每一步需要怎样操作。从而通过流程图分析出用户的主要流程任务，如图1.50所示。

猿题库App流程图

3. 产品信息架构设计

通过需求分析以及产品的思维导图、流程图设计，大致可以规划出产品的主要功能点，这些功能点就可以形成产品的初步信息架构，信息架构可以理解成盖房子的地基以及房子的框架。只有确定了地基和框架，才可能继续搭建上层建筑。比如要制作猿题库App产品原型，确定了它的“练习”功能、“试卷”功能、“发现”功能以及“我”功能就可以确定该产品的信息架构。

在Axure RP9里的页面区域可以对该信息架构进行管理，页面结构菜单采用树形菜单，层级分明，结构清晰，还能自动生成框架结构图，使用非常方便。

猿题库App信息架构设计

4. 页面布局设计

产品信息架构确定之后，综合思维导图的及主要流程图，就可以开始页面的布局设计，包括以下内容。

（1） 页面布局的总体结构，如页面是采用一列布局、两列布局还是多列布局以及页面采用几行布局等。

（2） 页面的导航设计，网站的导航是采用水平导航、垂直导航或者是其他的一些导航方式？移动App的导航栏是放置在顶部还是底部？采用几个导航标签？像猿题库App采用的是水平导航，导航栏放置在页面底部，使用4个导航标签。

猿题库App标签导航

（3） 根据思维导图和流程图规划出来的内容，细分到具体页面结构来设计，需要对每一个内容块的展示位置进行布局，比如猿题库App的练习模块是如何展示各个科目的。对页面内容结构的设计取决于设计人员对内容编排的把握，不同的布局会产生不同的效果，可以参照已有成熟产品的内容布局，因为已有产品经有足够的运营数据支持，具有较多的用户反馈。

猿题库App布局

1.4.3 低保真原型设计

理解用户的主要需求，完成主要任务流程设计，通过思维导图软件确定产品的大致内容，实现页面架构设计，即页面总体布局、导航菜单以及各个模块的设计后，就可以针对各个页面进行内容设计，也就是低保真原型设计。低保真原型设计就是需要遵循产品的总体结构，利用Axure原型设计工具，进行设计所示。

猿题库App低保真原型设计

1.4.4 原型评审

低保真原型设计之后，需要进行原型评审，各个部门会针对产品的需求对产品原型进行评审。每个人都有不同的偏好和侧重点，开发人员可能更关注于设计可行性，运营人员希望有足够的预留推广区域，视觉设计师注重美观性，产品经理希望产品尽快上线，就需要设计师在原型评审前考虑全面，设计方案有足够的说服力。

1.4.5 高保真原型设计

原型设计不仅可以制作低保真原型，同时也可以制作高保真原型，即把低保真原型经过视觉设计师制图、切图，然后制作出高保真原型。这钟原型可以用于向领导汇报或者设计概念性产品。

猿题库App高保真原型设计

（1）了解什么是软件原型以及软件原型的分类：草图原型、低保真原型、高保真原型，理解它们的优缺点以及适用的场合。

（2）学会Axure RP 9软件的安装。

小结

（3）认识Axure的软件界面，了解软件界面上的6个区域以及它们的含义和功能。

（4）理解原型设计流程，掌握需求分析、页面架构设计、低保真原型设计、原型评审以及高保真原型设计的概念和方法。

（1）导入一个RP文件到工程里。

（2）通过设置将原型设计软件界面某些区域隐藏起来，比如把母版区域或者练习

其他区域隐藏起来。

（3）拖曳一个矩形元件到工作区域，将矩形元件背景色填充为灰色（#666666），文本内容命名为“我是矩形元件”，字号设置为红色字体，顶部对齐，边框颜色设置为黄色（#FFFF00），边框线框加粗。

第2章 用页面区域管理页面

课时内容

用页面区域管理页面

教学目标

掌握页面区域、页面区域功能，学会规划软件栏目结构

课时

4

教学重点

页面区域功能

教学难点

页面区域功能

1.教学思路：通过实例引出页面区域的概念；通过多媒体演示和实机操作讲解页面区域功能；通过实战介绍网页栏目规划的方法。

教学设计

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件

教学内容

页面区域位于软件界面的左上方，是用来管理页面、显示页面的区域。





管理软件页面关系

软件的骨架，清晰展示软件的结构

管理页面层级

2.1 页面区域

2.1.1 页面区域的定义

页面区域由两部分组成，一部分是对页面的一些操作按钮，页面区域提供3个操作按钮，页面右键选项里提供更多操作按钮，称之为功能菜单；另一部分是页面，呈现树状结构，其与Windows系统文件存放目录结构相一致，通过父与子的页面关系，兄弟和兄弟的页面关系，把设计的产品页面关系整合起来，形成产品的文档关系。

页面区域的结构和功能

2.1.2 页面区域的意义

（1）

（2）

（3）

页面区域可以用来规划软件的功能单元或者软件的结构。

页面区域可以让使用者快速地了解软件的结构。

页面区域方便使用者快速地找到想要的页面。

2.1.3 使用页面区域注意事项

（1）

（2）

制作软件原型时要规划软件的功能菜单或者栏目结构。

页面的命名要有意义。

2.2 页面区域的功能使用

页面区域的功能使用包括两方面内容。

（1）功能菜单的使用。

（2）页面管理。

页面的功能菜单

检索页面：可以按页面名称进行页面区域检索。

当制作的原型比较大，页面比较多的时候，想通过页面区域找到某个页面，这时可以使用搜索按钮来搜索页面。例如想找到“index”页面，输入“index”时，就可以把“index”页面找出来。所以页面的命名一定要有意义，便于快速地找到想要的页面。

新建页面：为所选择的节点页面创建一个新的同级页面。

如果想给page1页面新建一个兄弟页面，首先选中page1页面，然后单击“新建页面”按钮，就可以创建一个同级页面。

新建文件夹：可以为所选择的节点页面创建一个新的同级文件夹，文件夹可以把页面管理起来，如同Windows文件夹一样，把相关文件放置在一起。

除了使用功能菜单来管理页面，也可以在页面上使用右键菜单选项来管理页面。

页面右键菜单选项

添加：可以新增页面之后同级页面、新增文件夹、新增子页面以及新增同级页面；它的使用和功能与菜单上的新增页面和新增文件夹是一样的。

移动：可以移动页面，调整页面的前后顺序关系和层级关系，其功能与功能菜单上的移动操作一致。

可以实现同等级页面的顺序调整。

如果想把page2页面放置在page1前面，右键单击page2页面，在弹出菜单中选择向上移动命令，就可以调整页面的前后顺序。

如果想把page1页面放置在page2后面，右键单击page2页面，在弹出菜单中，选择向下移动命令，就可以调整页面的前后顺序。

可以实现页面层级降级，如将所选页面的层级降级排列在上方的原等级页面的子页面。

如果想把page2页面作为page1页面的子页面，右键单击page2页面，在弹出菜单中，选择降级命令，就可以把page2移到page1页面下，作为page1页面的子页面。

可以实现页面层级升级，将所选页面的层级升级，升级为原父页面的同等级页面。

如果想把page1页面与index页面同级，右键单击page1页面，在弹出菜单中，选择升级命令，就可以把page1页面和index页面设置成同一个层级。

删除：将所选页面删除，同时删除其子页面，如果当前页面下含有子页面，Axure会自动提示当前页面有子页面，单击提示对话框中的“确认”按钮后会同时删除所有子页面。

不想要的页面或者文件夹可以通过删除命令来进行删除。

剪切、复制、粘贴：可以对文件夹和页面进行剪切、复制、粘贴操作。

在制作软件原型时，很多页面布局或者交互效果会比较相似，这时就可以通过复制菜单命令来复制页面或者复制页面及其分支，然后在该页面的基础上进行修改，就可以避免把一样的东西制作多次，从而可以减少工作量，提高制作原型的效率。

重命名：页面重新命名的方式有3种。

（1）双击页面，可以对页面进行重新命名。

（2）通过右键菜单里的重命名命令来重新命。

（3）通过快捷键F2进行页面的重新命名。

重复：重复包括文件夹重复和分支重复，当选中文件夹或者页面的时候，使用重复操作可以复制文件夹、页面或者分支。

图标类型：通过图标类型菜单选项可以修改页面或者流程图的图标类型图标的更改并不会影响页面的内容，它仅仅是更改一个图标，便于对页面的管理。

生成流程图：通过生成流程图菜单选项，可以生成纵向或者横向的流程图，选中index页面，右键在弹出菜单中选择生成流程图命令，生成纵向流程图。

纵向流程图

从流程图可以了解软件的功能结构以及从属关系，也可以生成横向的流程图，可以根据个人需求来选择生成流程图的类型。

在页面区域中，可以通过功能菜单来管理页面，也可以通过右键菜单命令来管理页面，它们的功能是一致的。

微课视频

2.3 实战——“蓝月亮”栏目规划

结合前两节学习的内容，做一个“蓝月亮”栏目的规划，通过本节内容的练习学会规划软件的页面结构，并且进一步加深对页面区域使用的理解。

打开浏览器，搜索蓝月亮官网。

“百度”栏目

规划详解解

蓝月亮官网

选择蓝月亮官网作为实例，因为它很有代表性。在制作软件原型时，特别是门户和应用系统软件，通常可以将软件的功能作为导航菜单划分的依据，即在制作原型的时候可以按导航菜单来建立页面区域的栏目结构。

蓝月亮官网可以看作企业门户的典型代表，它有6个一级菜单，也就是被划分为6个大的功能模块。

 首页：是很多网站都存在的模块，展示网站的综合信息；

 走进蓝月亮：也就是企业介绍，也是必有的一个模块；

 清洁之家：用来展示公司产品的，该模块可以根据实际情况来选择；如果有产品，可以划分出产品模块用来展示产品，如果没有，可以去掉该模块；

 科学洗涤：科普文章发布，可以看作网站的新闻发布，也可以根据实际情况来考虑；

 人力资源、联系我们：是很多门户网站都存在的两个功能模块。

经过上面分析，在蓝月亮官网的页面区域上需要建立6个一级菜单，在一级菜单下面有二级菜单，并且一级菜单默认显示的内容是二级菜单的第一个菜单内容。

 首页一级菜单没有二级菜单，就不需要建立子页面。

 “走进蓝月亮”一级菜单下面，有“关于我们”“企业文化”“社会责任”“蓝月亮的世界”，“走进蓝月亮”默认显示的内容是“关于我们”的内容。

 “清洁之家”一级菜单下面没有二级菜单，就不需要建立子页面。

 “科学洗涤”一级菜单下面没有二级菜单，就不需要建立子页面。

 “人力资源”一级菜单下面有“用人理念”“社会招聘”“校园招聘”“培训发展”“员工福利”5个二级菜单，“人力资源”默认显示的内容是“用人理念”的内容。

 “联系我们”一级菜单下面有“公司总部信息”“各地办事处”“订单物流查询”“供应商注册”4个二级菜单，“联系我们”默认显示的内容是“公司总部信息”的内容。

可以依据二级菜单建立相应的子页面，但是需要注意，可以使用父页面来显示二级菜单的第一个菜单内容，所以第一个菜单不需要建立子页面，而其他二级菜单需要建立相应的子页面进行原型设计。

下面打开Axure软件，开始“蓝月亮”栏目规划设计。

（1）将page1页面重新命名，命名为“蓝月亮”，在蓝月亮下面建立6个页面，分别命名为“首页”“走进蓝月亮”“清洁之家”“科学洗涤”“人力资源”“联系我们”。

蓝月亮一级菜单

（2）在“走进蓝月亮”页面新增3个子页面，可以通过两种方式新增页面，一是通过功能菜单，另一种是通过右键菜单选项新增页面，分别命名新增子页面为“企业文化”“社会责任”“蓝月亮的世界”。

“走进蓝月亮”二级菜单

（3）在“人力资源”页面新增4个子页面，分别将其命名为“社会招聘”“校园招聘”“培训发展”“员工福利”，可以把暂时不需要展示的子页面收缩起来。

“人力资源”二级菜单

（4）在“联系我们”页面新增3个子页面，分别将其命名为“各地办事处”“订单物流查询”“供应商注册”。

“联系我们”二级菜单

这样就把蓝月亮官网的栏目结构建立完成，然后可以按照各个功能模块进行原型设计，可以根据栏目结构生成流程图，从而看出软件的大致结构以及从属关系。

蓝月亮官网流程图

（1）了解什么是页面区域。页面区域是由功能菜单和页面两部分组成，可以通过页面区域管理软件的页面关系。

小结

（2）通过功能菜单和右键菜单选项来管理页面，包括新增页面、移动页面、删除页面以及搜索页面等操作等。

（3）学会如何规划软件栏目结构。

通过页面区域规划“清华大学门户”网站栏目。

导航菜单包括首页、清华新闻、学校概况（校长致辞、学校沿革、历任领导、现任领导、组织机构、统计资料）、院系设置、师资队伍、教育教学（本科生教育、研究生教育、留学生教育、继续教育）、科学研究（科研项目、科研机构、科研合作、科研成果与知识产权、学术交流）、招生就业（本科生招生、研究生招生、留学生招生、学生职业发展）、人才招聘（招聘计划、招聘信息、我要应聘）、图书馆、走进清华（校园生活、校园风光、实用信息）。

注意：括号里的是当前菜单的二级菜单。

练习

第3章 用Axure元件库搭积木

课时内容

用Axure元件库搭积木

课时

6

教学目标

掌握线框图、流程图元件的含义和使用，学会载入元件库和自定义元件库

教学重点

线框图、流程图元件的含义和使用

教学难点

线框图、流程图元件的含义和使用

1.教学思路：通过实例引入元件的概念；通过多媒体演示和实机操讲解元件库的使用；通过个人简历表实战进行各类元件的综合应用。

教学设计

2.教学手段：多媒体+计算机

3.教学资料：教材、多媒体课件

教学内容

Axure RP 9默认内置了线框图元件库、流程图元件库、图标元件库，除了使用内置的元件库，也可以载入第三方元件库以及自定义元件库。

用元件“搭积木”

3.1 绘制线框图所用的元件

Axure RP 9原型设计软件里默认内置39种线框图元件，分为4类：基本元件有20种，表单类元件有6种，菜单|表格元件有4种，标记元件有9种。

基本元件

表单元件

菜单|表格元件

标记元件

线框图元件库

3.1.1 基本元件的使用

基本元件包括矩形1元件、矩形2元件、矩形3元件、椭圆形元件、图片元件、占位符元件、按钮元件、主要按钮元件、链接按钮元件、一级标题元件、二级标题元件、三级标题元件、文本标签元件、文本段落元件、水平线、垂直线元件、热区元件、动态面板元件、内部框架元件、中继器元件。最后3个元件，由于使用比较复杂，交互效果丰富，使用频率非常高，后面的章节将详细介绍。

基本元件

1. 矩形元件和占位符元件、椭圆形元件的使用

矩形元件和占位符元件可以用来做很多工作，在本质上这两种元件没有太大的区别，这两种元件都可以用来制作一个横向、纵向的菜单，或者制作一个背景图。这两种元件的区别在于占位符元件更强调占位作用，如果想表达页面区域某个位置放什么，可以放一个占位符，清晰明了表达该区域的含义。椭圆形元件的使用和矩形元件的使用方式一样，只不过形状不同。

（1）“矩形1”元件是白色（#FFFFFF）背景、“矩形2”元件是浅灰色（#F2F2F2），“矩形3”元件是灰色（#E4E4E4）背景，根据不同背景颜色需求，使用不同矩形元件。拖曳“矩形3”到工作区域，将其高度设置为300，“矩形3”元件可以作为背景图使用。

实战演练

制作灰色背景图

（2）矩形元件可以设计成各种各样的形状，如果想把上图中的正方形灰色背景，制作成圆形的灰色背景，在正方形背景图上右键单击，在弹出的快捷菜单中选择形状命令，会弹出用矩形可以制作的各种形状，选中圆形图标，原正方形背景就变为一个圆形灰色背景。

调整形状

除了圆形，可以根据自己需要，把矩形元件调整为其他形状，比如向上三角形、五角星、水滴、方括号等形状。

（3）利用“矩形1”元件制作导航菜单，拖曳4个“矩形1”元件到工作区域，将其水平放置，分别双击4个元件重命名为“菜单一”“菜单二”“菜单三”“菜单四”。使用Ctrl+A组合键，全选4个矩形元件，通过工具栏按钮设置每个矩形元件的高度为40，宽度为100。

矩形元件制作导航菜单

2. 图片元件的使用

图片元件，可以用来进行图片占位。在设计软件原型的时候，往往会包含一些图片的展示，包括图标或者某个商品图片，但是还没有想好应该放什么图片，或者等待UI设计人员来

设计图片，这时可以使用图片元件，来表达在软件的某个区域要使用图片来显示。

实战演练

（1）拖曳“图片”元件到工作区域，双击图片，选择要插入的图片，如果插入的图片过大，Axure会弹出提示对话框“图片太大会导致程序运行缓慢，是否进行优化？”，如图3.8所示。

图像太大提示

（2）在对话框中，单击“是”按钮，对图片进行优化，降低图片的画质。否则图片将以原质量显示。

插入图片

（3）调整图片的尺寸大小有两种方式：一种是在图片上单击，图片出现边框，通过上下左右拖动边框调整图片尺寸；另一种方式是在工具栏的W和H框里设置图片的大小，调整其他元件的尺寸大小也是同样的方式。

调整图片尺寸大小

（4）Axure提供分割图像功能，在图片上右键单击选择分割图像命令，可以对选中的图片进行分割操作，包括十字切割、横向切割、纵向切割3种切法。

分割图像

当仅需要图片的某一区域或者某一部分的时候，可以使用分割图像功能，把想要的区域分割出来。

3. 按钮元件的使用

按钮元件分为按钮元件、主要按钮元件以及链接按钮元件，根据需求在不同场合使用不同按钮元件。

按钮元件

4. 标题元件的使用

标题元件可以用来作为一段文字的标题，也可以用来作为某个区域的说明文字，一般设计简历的时候，常把个人信息、教育经历、工作经验这类文字加粗起强调作用，这时就可以使用标题元件。

Axure提供一级标题、二级标题、三级标题3个元件，一级标题元件是32号字、加粗、黑色（#333333）；二级标题元件是24号字、加粗、黑色（#333333）；三级标题元件是18号字、加粗、黑色（#333333）。

一级标题、二级标题和三级标题元件

5. 文本标签元件和文本段落元件的使用

文本标签元件是单行文本元件，文本段落元件是文本域元件，如果只有一行文本选择文本标签元件，如果有多行文本可以使用文本段落元件。

文本标签和文本段落元件

6. 水平线和垂直线元件的使用

水平线和垂直线是两个很灵活的元件，用它们可以设置一条水平线或者垂直线.可以利用工具栏快捷按钮编辑这两个元件的颜色、线框、线条样式和箭头方向。

水平线和垂直线元件

7. 热区元件的使用

在购物网站上，经常可以看到组合装或者套装的商品，它们是一体图片，单击商品图片显示的是整体的商品信息，如果只想知道上衣的商品信息，或者裤子的商品信息，可以使用热区

元件。

分别在上衣和裤子上添加热区元件，也就是增加两个单击的锚点，单击热区元件就可以显示不同的商品信息。

热区元件

热区元件用到的频率非常高，特别是在做一些移动App的时候。

3.1.2 表单元件的使用

微课视频

表单元件是在设计表单时候经常会用到的元件，比如设计登录表单、注册表单等表单，就可以使用表单型元件来设计表单。表单型元件包括文本框元件、文本域元件、下拉列表元件、列表框元件、复选框元件、单选按钮元件。

表单型元件

的使用

表单元件

1. 文本框元件和文本域元件的使用

文本框元件用于收集表单内容，其形式为单行输入文本框；文本域元件，可以实现多行文本的输入。

文本框和文本域元件

在登录网站的时候，经常会在输入框里看到“请输入用户名、手机号或者邮箱”等提示信息。文本框元件同样可以填写提示信息，在文本框输入内容时，提示文字会自然消失。右键单击文本框远见，在弹出的菜单里可以设置文本框的输入类型，可以设置成文本、密码、邮箱、数字等类型。

文本框类型

在文本框里可以设置提示文字的样式，比如提示文字为“请输入用户名”，字体颜色为浅灰色（#CCCCCC），可以在检视区域选择交互面板，在提示选项组中设置文字样式，在提示属性里设置提示文字。

提示样式及提示文字

可以设置文本框元件可以输入的最大文字数，同时也可以设置文本框为只读或者禁用，可以根据自己的需要来设置。

文本框属性

在检视面板同样可以设置文本域元件的提示文本、只读属性和禁用属性，但是不能设置文本域内的输入类型以及最大文字数。

文本域元件设置

2. 下拉列表元件和列表框元件的使用

下拉列表元件，是经常用到的下拉菜单，它只能显示一个下拉菜单选项；而列表框元件，是可以显示多个下拉菜单选项的元件。如果页面区域有限，可以使用下拉菜单元件；如果页面区域比较大，仅放置一个下拉列表，会空留很多地方，页面整个布局不美观，就可以使用列表框元件。

下拉列表元件和列表框元件

实战演练

（1）拖曳一个“下拉列表”元件到工作区域，双击此元件，弹出编辑下拉列表对话框，单击“添加”按钮新增一个菜单选项，单击菜单选项可以对其重新命名，将其命名为“北京”，再新增一个下拉选项，命名为“上海”。

编辑下拉列表对话框

（2）单击“上移”和“下移”按钮可以调整下拉菜单选项的顺序，单击“删除”按钮可以删除选项。

调整选项顺序和删除选项

（4）单击“编辑多项”按钮，弹出编辑多项对话框，每行代表一个下拉菜单选项。

添加多个选项对话框

（5）如果想把某个选项作为默认显示的选项，只需要在复选框前面勾选，默认显示的就是当前勾选的下拉菜单选项。

设置默认选项

（6）列表框的操作方式和下拉列表的操作方式一样，单击“添加”按钮同样可以新增菜单选项，可以向上移动、向下移动、删除一个、或者多个下拉菜单选项，但是它允许默认允许选中多个选项。

列表框设置默认选项

3. 复选框元件和单选按钮元件的使用

如果希望允许选择多个选项，这时可以使用复选框元件，如果每次只想选择一个选项，可以使用单选按钮元件。

复选框和单选按钮元件

3.1.3 菜单|表格元件的使用

菜单|表格元件包括树元件、表格元件、水平菜单元件和垂直菜单元件。

菜单|表格元件

1. 树元件的使用

可以用树元件来设计树结构或其他有层次的结构，例如页面区域的页面结构。新增子节点、调整树的层级关系以及删除子节点等等操作都是通过右键菜单里的选项来设置。

树元件

2. 表格元件的使用

表格元件，用来显示数据的记录，是使用频率比较高的一个元件，它通过右键菜单里的选项来完成操作。

表格元件

3. 水平菜单和垂直菜单元件的使用

水平菜单和垂直菜单元件，是用来制作导航菜单的元件，它可以制作横向或纵向的菜单元件，它通过右键菜单里的选项来完成设计操作的。

水平和垂直菜单元件

3.1.4 标记元件的使用

标记元件包括快照元件、水平箭头元件、垂直箭头元件、便签1元件、便签2元件、便签3元件、便签4元件、圆形标记元件和水滴标记元件。

标记元件

快照元件，是把页面通过快照的方式完整地显示出来。例如在index页面，分别添加一级标题、二级标题、三级标题元件；然后在page1页面里拖曳快照元件并双击，引用index页面；可以看到快照元件里显示的是index页面的内容，并且可以调整快照元件显示的页面大小。

快照元件

水平箭头元件和垂直箭头元件经常被用作水平或垂直方向上的箭头；便签元件经常用来给页面添加便签说明；圆形标记和水滴标记常被用作标记。

3.2 绘制流程图所用的元件

Axure RP 9原型设计软件默认内置37种流程图元件，常用的元件有矩形、菱形、文件、括弧、半圆形、三角形、梯形、圆形、六边形、平行四边形、角色、数据库、快照等元件。

流程图元件库

流程图元件都代表着自己的特点和意义，在使用流程图元件之前，要知道常用的元件所代表的意思，才能画出规范的流程图。

 矩形元件：代表要执行的处理动作，用作执行框。

 圆角矩形元件：代表流程的开始或者结束，用作起始框或者结束框。

 菱形元件：代表决策或者判断，用作判别框。

 文件元件：代表一个文件，用作文件的输入或者输出。

 括弧元件：代表说明一个流程的操作或者特殊行为。

 平行四边形元件：代表数据的操作，用作数据的输入或者输出操作。

 角色元件：代表流程的执行角色，角色可以是人也可以是系统。

 数据库元件：代表系统的数据库。

 快照元件：用来显示其他页面内容。

大家在上学的时候，经常会参加一些在线考试，下面使用流程图元件来绘制考试的过程。

实战演练

在线考试系统流程图

（1）把当前工程保存起来，将其命名为“在线考试系统流程图”，把index页面重新命名为“在线考试系统流程图”，删除其他页面。选择流程图元件库，拖曳一个“圆角矩形”元件作为流程的开始，将圆角矩形的文本内容重新命名为“开始”。

选择流程图元件库

（2）拖曳一个“角色”元件到工作区域，代表参加考试的人员。选择连接模式，将圆角矩形元件和角色元件连接起来，可以给连接线添加向右的箭头并设置样式。然后拖曳一个“矩形”元件到工作区域，将其文本内容重新命名为“访问网站”，用连接线把角色元件与矩形元

件连接起来。

访问网站

（3）接着进行登录网站设置。拖曳一个“矩形”元件到工作区域，将其命名为“登录网站”，登录时，需要输入用户名和密码，系统会将用户名和密码与数据库里的信息比对，来决定用户是否能登录到系统里，用连接线把“访问网站”和“登录网站”连接起来。

登录网站

（4）拖曳一个“数据库”元件到工作区域，用其来代表数据库。将登录时输入的用户名和密码与数据库进行比对，比对完成后数据库会返回用户能否登录的信息，这是一个双向的操作，需要一个双向箭头。

数据库

（5）拖曳一个“菱形”元件到工作区域，用作登录的验证。登录验证有两种情况，验证通过和验证不通过。如果用户名和密码都输入正确，就可以登录到系统里进行在线考试，拖曳一个矩形元件，将其文本内容重命名为“开始考试”；如果登录校验失败，就需要重新登录。

登录验证

（6）考试完需要提交试卷。拖曳一个“矩形”元件到工作区域，将其文本内容重命名为

“提交试卷”，然后添加一段说明文字，使用“括弧”元件加以说明：“如果考试时间大于120分钟，系统将自动提交试卷”。

提交试卷

（7）提交完试卷，系统会进行批改。拖曳一个“平行四边形”元件到工作区域，将其作为数据的输入，批改的时候也需要与数据库打交道，因此其与数据库的连接线也是双向的。

批改试卷

（8）提交试卷后导出试卷。批改完试卷之后，需要输出汇总的分数，同样拖曳一个“平行四边形”元件，将其作为数据的输出，把它重命名为“汇总分数”，汇总分数后可以导出试卷，使用“文件”元件来代表导出的试卷，最后拖曳一个“圆角矩形”元件到工作区域，结束流程。

结束流程

（9）按F5键发布原型，通过绘制在线考试系统的流程图，就可以清晰地表述在线考试系统的操作流程，这样在绘制线框图的时候，设计思路就会很清晰，可以高效、快速地绘制原型。

发布原型

3.3 丰富的图标元件库

图标元件库把常用的一些图标放置在图标元件库里，包括通讯录图标、箭头指向图标、电池电量图标等。在绘制原型的时候，可以使用该元件库里的图标，而不需要到其他地方去寻找。

图标元件库

3.4 载入元件库和自定义元件库

Axure在元件管理区域默认提供线框图元件库、流程图元件库和图标元件库，但是在制作原型的过程中，这3类元件库并不能完全满足设计原型的需求。如果设计移动应用软件，需要使用Andriod元件库或者iOS元件库；设计其他的软件，可能使用其他的元件库；有时候甚至现成的元件库还是不能满足需求，需要自己来制作元件库，即自定义元件库。

3.4.1 载入元件库

在Axure元件区域，单击选择元件库，可看到默认的线框图元件库、流程图元件库和图标元件库，部分元件库的名称翻译并不是很完善。

元件库

如果设计移动应用软件，要用到Andriod元件库，就需要添加一个Andriod元件库到软件里。

（1）寻找元件库有3种方式：第1种是到Axure官网上下载，官网上提供的元件库都是以“.rplib”为后缀名的；第2种是网上搜索，很多原型论坛或者原型爱好者都会发布一些元件库；第3种是可以自己制作元件库，制作自己想要的、常用的元件。

（2）单击“添加元件库”按钮，弹出“文件选择库”窗口，找到事先准备好的元件库，单击打开，就可以将元件库载入到软件里。

实战演练

添加元件库