使用 Axure绘制原型

Axure是最常用的原型制作工作之一。无须任何HTML/CSS/JavaScript基础，你都可以使用Axure制作出具备良好交互效果的原型图。本系列笔记以金乌的《Axure RP7 网站和APP原型制作从入门到精通》一书为参考教材，系统地学习一下Axure这款原型工具软件及其背后的设计思想。

开篇之前先提几个基础问题：

（1）什么是用户体验设计？什么是交互设计？什么是视觉设计？它们之间有着怎样的关系？
（2）什么是 UE ？什么是 UX ？User Experience？Usability？衡量“用户体验”有哪些指标和要素？怎么理解“可用性”？
（3）线框图、原型、视觉稿这三者有哪些区别？使用场景是怎样的？

线框图：低保真图，通常以“黑白灰”线条来表达，制作速度快。
原型图：中高保真图，可以代表最终的产品，用于在利益相关者之间的沟通。
视觉稿：高保真图，具备良好的视觉效果。

如何理解“用户体验设计师（产品经理）这个角色？”

在大多数的公司中，企业对产品经理和用户体验设计师并没有明确的界限，甚至你可以把二者看成相同性质的角色。

产品经理“斡旋”于开发工程师、系统功能、视觉设计、用户、业务逻辑、项目经理、投资人之间，协调资源并推动产品的发展。作为产品经理，必须深刻理解利益相关者的视角（他们到底想要什么）并与其密切沟通，以营造无障碍的协作环境，让产品在可控范围内推进发展。

身为产品经理，我们必须综合表达许多不同的信息，而这些信息常常会相互矛盾或冲突。我们不仅要熟悉业务流程，要了解技术约束、资源约束等，要了解用户体验对软件程序性能的影响，还要反复地做用户研究和数据分析等。我们要在纷乱的多条件模式下找到至关重要的平衡，并创建出最佳的可行的用户体验。

事实上，任何工具都不过是一种为了实现产品目标的手段而已，Axure同样只是一款工具，在工作中最重要的元素恰恰不是这些工具，而是你本人和你的思想。

认识 Axure

1、Axure工作台上常用功能区域划分

菜单栏、工具栏、站点地图、部件面板、母版面板、部件交互和注释面板、部件属性和样式面板、部件管理面板、页面属性面板（包含页面注释、页面交互和页面样式3个选项卡）。视图 > 重置视图，可以重置Axure工作台。

（1）站点地图：用于增加、删除和组织原型中的页面。
（2）部件面板：用于管理Axure内建的部件库、第三方部件库、自定义的部件库。

2、Axure有哪些内置的常用部件？

线框图就是由一系列的部件组合而成，这和前端页面是一样的，页面由一系列的UI组件组合而成。不同的部件有着不同的功能属性，绘制原型的过程中要恰当选用这些部件。

• 基础部件：有图片image、H1~H6标题标签、文本text、矩形div、点位符、形状按钮button、线段等。
• 热区Hot Spot：它一个不可见的透明层，通常用于给页面区域或部件元素添加交互效果。
• 动态面板：它是一个基于特定状态来装载系列部件的容器，可以说它是原型设计中使用最为频繁的部件之一。
• 内联框架（Inline Frame）：用于向原型中嵌入视频、地图、HTML页面等。
• 中继器（Repeater）：用于显示重复的组件块，如商品列表、好友列表、数据表等。中继器由两部分组成，分别是中继器数据集（List）和中继器数据项（Item）。
• 表单类部件：文本段落TextArea、下拉列表DropList、列表选择框ListBox、复选框CheckBox、单选按钮RadioButton、提交按钮HTML-Button。
• 层级部件与表格：表格Table、树部件Tree、经典菜单Menu。

3、对Axure部件可以执行哪些操作？

• 基本操作：添加、移动、改变大小、旋转、添加文本超链接、组合多个组件、改变选择模式（相交选中、包含选中）。
• 样式操作：可以使用顶部工具栏、样式面板或者右键菜单对部件进行样式编辑；“格式刷”允许你快捷地复制特定部件的样式。
• 属性操作：使用“属性面板”可以为部件添加交互样式，即在特定条件下的视觉属性。不同的部件有着特定的额外的属性。

4、页面样式 Page Style 有哪些常用的操作？

• 使用“页面样式编辑器”
• 为页面添加“网格、辅助线、对齐辅助线”等
• 网络设置
• 对象对齐设置（Object Snap Settings）

项目 － 页面样式编辑器

布局 － 网格辅助线

5、Axure中的交互基础

在Axure中创建交互 Interactions需要包含以下3个构造模块，分别是：事件 Events、用例 Cases、动作 Actions。交互是由事件触发的，事件是用来执行动作的；交互设计的目的把静态的元素变成动态的，以提升产品的用户体验。

交互是Axure中的构建模块，用来把静态的线框图转换为可交互的HTML原型。每一个交互都是由3个最基本的单元构成，即什么时候When（事件）、在哪里Where（用例）、做什么What（动作）。

构成交互的3个基本单元

（1）事件Events（When）：交互在什么时候发生？交互由事件Events来驱动。在Axure中的事件可以分为两大类，其一是页面事件，其二是部件事件。一个事件中可以包括多个用例，多用例根据条件判断来决定执行哪一条用例路径。

事件

（2）用例Cases（Where）：用例是用户与应用程序或网站之间交互流程的抽象表达，每个用例中可以封装一个独立的路径。通常情况下，我们让原型按主路径来执行动作，但是为了响应用户的不同操作或其它条件，我们还需要制作可选路径来执行其它动作。Axure中的用例，正是用来给事件Event创建不同的执行路径。一个事件中可以包含一个或多个用例（多用例时需要根据条件逻辑来判断执行），一个用例又包含一个或多个动作。事实上，你可以把用例看成动作Actions的容器。

用例

（3）动作Actions（What）：动作是由用例定义的对事件的响应。Axure中的动作分为六大类，分别是链接、元部伯、变量、中继器和杂项。

---

本篇系统性地重新认识了Axure，并介绍了这款软件中常用的功能、常用的部件及其操作、以及交互基础知识。下一篇将详细介绍Axure母版、动态面板等。

---

本篇完：2019年6月10日