学习Axure RP原型设计

1 概述

原型设计是应用开发设计的第一要素。好的原型设计不只能够起到沟通的做用，并且对客户而言应用程序拥有更直观的体现。原型设计经过内容和结构展现以及界面布局编排，实如今开发前期用户与产品进行交互。提升用户对项目的承认度，有利于项目的推动。下面为你们介绍一款原型设计工具——Axure RP。

2 名词解释

Axure RP：Axure RP是一个专业的快速原型设计工具。Axure，表明美国Axure公司；RP则是Rapid Prototyping的缩写，译为快速原型。

3 工具介绍

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，负责定义需求和规格、设计功能和界面的专家可以快速建立应用软件或Web网站的线框图、流程图、原型和规格说明文档。做为专业的原型设计工具，它能快速、高效的建立原型，同时支持多人协做设计和版本控制管理。

3.1 应用范围

Axure的可视化工做环境可让你轻松快捷的以鼠标的方式建立带有注释的线框图。不用进行编程，就能够在线框图上定义简单链接和高级交互。在线框图的基础上，能够自动生成HTML（标准通用标记语言下的一个应用）原型和Word格式的规格。

Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。

3.2 经常使用功能

Axure的软件界面总的来讲，能够分为9大模块

1.  菜单栏：和大部分的软件界面同样，都是一些常规的文件、编辑、视图等。
2.  工具栏：是页面进行编辑的一些快捷操做，主要有字体设置、大小设置、页面显示大小和Axure自己自带的一些快捷操做等。
3.  站点地图：呈树状结构、能够添加、删除页面、也能够对设计中的页面进行重命名操做。
4.  部件区域：组件集中地带：矩形组件、图片组件、动态面板组件……使用方式是直接拖动部件到页面编辑区域。
5.  母版区域：共用，复用。
6.  页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施。
7.  页面交互区域：设置页面属性，交互样式。
8.  部件属性区域：组件的注视、组件的交互、组件的属性编辑。
9.  动态面板区域：设置动态面板的可视与隐藏。

 

3.3 环境搭建

输入https://www.axure.com.cn/网址，进入Axure官网里点击下载项，就能看的Axure RP的下载连接了。

下载完成后的安装包如图：

双击安装包会弹出安装向导

 

点击下一步

 

勾选“我赞成”，点击下一步。

 

选择安装路径点击下一步。

 

点击下一步

 

点击下一步

 

把运行的勾选项去掉，安装的是英文版，须要进行汉化，因此先不要运行。在网上找一个汉化包，汉化的过程网上都有，这里不作介绍了。安装完成后桌面会出现一个快捷方式，双击就能够打开Axure RP软件了。

4 样例讲解

4.1 前期准备

首先须要准备原型设计要用到的素材，输入网站http://www.agileai.com，到 数通畅联官网把须要用到的图片，logo，图标和文字下载下来备用。

1. 打开Axure RP软件，它和大多数的设计软件的布局类似，这里不一一介绍了。点击工程，选择页面样式编辑器，在页面样式编辑器里有对齐，字体选项，将页面调试为居中显示，字体选择宋体。

 

2. 点击布置，选择网格和辅助线，根据须要进行调试。网格和辅助线对设计会起到辅助做用。

 

4.2 编辑图片

1. 先从数通畅联官网首页的顶部开始，在库里拖拽图片到设计区。

 

2. 双击图片，会让你选择文件，选择数通畅联logo。

 

3. 效果图以下：

 

按一样的方式继续搭建顶部。接下来遇到关于图片的操做都如上所述，就再也不作讲解了。

4. 顶部设计好后点击预览按钮，就可在浏览器里预览效果了。

 

5. 预览效果如图：

 

6. 在页面处右键能够重命名，重命名后，在浏览器里预览时，会显示出页面名称。

 

4.3 导航菜单

1. 作导航，在库里选择菜单-水平，将其拖拽到设计区。

 

2. 默认是三个，点击右键能够新增菜单和子菜单。

 

3. 选中菜单，在右侧编辑区选择样式更改导航背景色和字体颜色。在编辑区上面能够给元件起名，建议采用英文命名，命名格式例如PasswordInput01或Password01，它的含义是序号01的密码输入框。格式说明：“Password”表示主要用途；“Input”表示元件类型，通常状况下可省略，当有不一样类型的同名元件须要区分或名称不能明确表达用途的时候使用；“01”表示出现多个同名元件时的编号；单词首字母大写的书写格式便于阅读

4. 导航编辑完后为其添加鼠标移动效果，如图：

 

5. 点击预览，查看效果。

 

4.4 滚动字幕

1. 作导航下面的当前位置。在库里拖拽矩形到设计区，长度和导航一致。添加图标，在库里选择单行文本，输入“当前位置：”和“首页”。

2. 在“当前位置”的右侧是滚动的文字，是动态的，在库里选择动态面板，调整大小，放到右侧。

 

3. 双击动态面板，弹出动态面板状态管理。点击“+”新增状态。

 

4. 双击State1，进入编辑页面，如图：

 

5. 选择单行文本拖动到动态面板上，并输入内容。设置鼠标悬停时，字体颜色为红色。

 

6. 三个状态都编辑完成后，返回原编辑页，在编辑区里双击载入时。

 

7. 弹出编辑框，在编辑框里设置动态面板的动做。如图：

 

8. 点击预览，就能看到滚动的效果了。

 

4.5 轮播图片

1. 作轮播图，轮播图也是动态的，一样也须要动态面板。将动态面板拖动致设计区，调整位置和大小，并设置状态。而后在添加一个图片切换指示按钮，也是用动态面板，添加状态，在每一个状态里显示不一样的指示样式。如图：

2. 点击右侧编辑区里的载入时，设动画效果。设置的参数要和轮播的图片对应。设置参数如图：

 

3. 点击预览，查看效果。

 

接下来配置轮播图下面的内容，配置这些内容时用上面讲到的技术就能够了，就不作过多说明了。

4.6 返回顶部

在最下面有一个回到顶部的按钮，在库里找个矩形和一个箭头，按快捷键Ctrl+G，将其组合，而后右键，转换为动态面板。

 

2. 在库里在选择一个占位符，放到最顶端，透明度设置为0。

 

3. 选择返回顶部按钮，设置鼠标单击时的参数，以下图：

 

4. 点击肯定，返回顶部按钮就设置完成了。

4.7 悬浮效果

作右侧的欢迎咨询，它是浮动在右侧的。按照欢迎咨询的样式编辑好后，转换为动态面板，选择固定到浏览器，设置参数如图：

 

2. 到这里，数通畅联官网首页的内容所有作完了，点击预览，就能够看到以假乱真的设计原型了。

 

4.8 生成文件

1. 预览没有问题后，点击发布按钮，生成html文件。

 

2. 弹出编辑框，选择生成路径，点击生成，就能够生成html文件了。

 

5 心得总结

原型设计是在项目的设计阶段进行的，原型设计对后期的项目开发启到了很是重要的做用，若是设计作的不到位，在开发阶段就会陷入困境。有一个好的原型设计，在和客户谈合做时也会启到很是好的效果，因此学会原型设计很是重要。

在这里只是简单的介绍了Axure RP工具的使用，它还有许多强大的功能，若是您感兴趣，能够到Axure RP官网进行学习。