axure原型设计入门

axure原型设计入门

axure是一款制作产品原型的软件，主要是产品经理先按照自己的想法设计好产品的各个页面及当前页面内的组件，组件间的交互方式等，然后做上传到网络或打包成网页，这样UI就很清楚PM的目的及意图从而更好的去实现界面设计。而程序员根据原型可以更好的去规划实现的框架。

当然，如果你是自由创业者，也可以制作原型图，让合作者或投资人更好的理解你的意图。

目前Axure常用的版本是7.0，8.0已经发布beta版，正式版尚未发布。

下面以8.0beta版来做基础的说明，不足、不完善之处还请指正谢谢。

第一步当然是下载、安装、汉化、激活。这些不再详述，百度一下有很多。笔者以前也谢了一个下载的经验，可以查看。

说一下基本的布局，8.0 比7.0有很多的改变：

图示标注区1：菜单栏

图示标注区2：发布区

图示标注区3：元件演示编辑区（对齐排版、大小、颜色等的编辑）

图示标注区4：页面栏目，发布后生成站点地图（可以取消显示）

图示标注区5：元件库（可以创建属于自己的元件库，也可以加载他人的元件库），元件库分类越清晰，内容越丰富，我们制作原型也就越快。

图示标注区6：页面工作区，发布后内容显示区

图示标注区7：为元件或页面添加交互事件，添加备注说明，设置编辑元件样式

图示标注区8：概要，当前页面的元件组织关系图，类似于Ps中的图层面板

图示标注区9：母版（使用DW做过网站应该会很清楚，母版类似于元件，且具备一处编辑多出同时修改的特性）。

下面的步骤，我们来简要说明一下每个标注区的用法：

图示标注区4：页面栏目

基本说明：可以将页面栏目理解为目录，为了更清晰的组织管理原型，在发布生成时，页面栏目生成：站点地图。

在页面栏目，我们可以创建文件夹及页面（见图示中的标注1），且可以拖动任意一个页面或文件夹，来改变他的级别（见图示中的标注2）：

图示标注区5：元件库

创建元件库（图一），并命名（图二）

保存成功后axure会自动打开元件库编辑面板（和原型库基本一致）：

按照“页面栏目”对库进行组织，说明：文件夹为元件库的分类标题

添加：按钮，文件夹。圆角按钮元件，直角按钮元件：

并按图组织：

关闭并保存元件库，回到工作区，按图示点击：刷新元件库（创建时默认已经加载）。成功后，见下图所示：1 为元件库名。2 为命名的文件夹名 ，3 位元件库名

以上完成了元件库的创建与编辑。

下面来看一下加载：

本地加载和下载元件库

点击“载入元件库”，会自动打开本地，找到存放元件库的地方既可。

点击“下载元件库”：会自动连接到Axure官网，并手动下载

该栏目包含：元件属性、元件备注、元件样式编辑

元件属性：

我们从创建的元件库中拖一个按钮到工作区，会见到下图所示的属性：

标注1：元件名（建议必须写，原因：同一元件使用较多时按钮名称区别）

标注2：交互事件，常用且非常重要，每类元件对应的交互事件略有不同，即元件的属性不一样

标注3：交互样式（鼠标滑过、点击、点击后）

说明栏，是对于元件的备注，可以添加备注，让UI或程序更好的理解你的意图：

样式栏：对当前元件的背景、边框、颜色、大小等进行设置：

母版具体属性：

1.具备元件的基本属性；

2.具备一次编辑母版，所有使用的地方，同一修改，常用于导航栏，页脚、页眉等处。

3.可以强制脱离母版作为普通元件进行编辑。

建议对母版的使用：以最小单位封装（封装的内容越多，意味着越容易发生改变，此时建议封装到元件库）；