大家好！我是海哥。欢迎阅读学习《海哥交互行》精品课程。

今天给大家介绍一个我在工作中比较常用的一款软件、axure，在原型的制作中有很多的原型工具，如墨刀原型制作工具，mockplus、甚至ppt都可以做为原型工具。不过海哥还是比较喜欢使用axure工具，因为axure中的功能更全面。

手绘草图输出

最初原型的制作也可以用纸和笔也可以完成，因为这样可以快速的帮我们找到好的想法和解决方案，在草图的过程中，从而快速构建产品基础形态，理清页面之间的跳转逻辑，最后通过后期的原型工具在输出原型图。

Axure rp的界面操作：

现在我们就开始以axure作为我们要讲解的原型工具为例，带大家一起熟悉下axure的操作和基本功能吧！

1-主菜单工具栏：这里和大部分工具类软件相同，这里的菜单包含了所有的操作和功能。可以在这里设置不同的属性以及快捷操作。通过预览可以产看效果，通过共享和同事一起参与产品工作，通过发布，生成html文件来实现原型的输出。

2-主操作界面：这里主要是原型绘制的操作区域，所有的用到的元件都拖到该区域。

3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。

4-axure元件库：这里就是我们在工作中需要用到的组件库，在这里我们可以拖拽不同的组件来实现我们原型的绘制，我们平时最常用的也就那几样，比如各种形状组件、文字等等。可以通过添加等功能，添加常用各种组件模板，比如iphone系统各种组件以及安卓等，这样可以更快速的提高我们的原型制作。

5-母版管理：母版的作用就是把我们需要像页面的导航、页面的头部、删除等这种每一个页面都出现的的元素，通过把这些放在母版从不用去重复去操作，提高工作效率。

6-元件属性：这里通过我们为页面的添加的各种标签属性、样式、注释等等，以及各种交互效果的触发事件。

A-交互事件：在这里通过交互设计为各种组件添加各种交互设计，从而可以更真实的模拟用户在使用产品过程中的交互体验。

B-元件注释：在这里我们能够添加一些元件限定条件的注释。比如：文本框的话，可以添加注释指出输入字符长度不能超过20。

C-元件样式：在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的对齐、组合等设置。

7-页面概要、动态面板管理栏 : 动态面板是Axure的核心概念，使用好可以做出很好的效果。动态面板包括多个状态，每个状态里边可以放置不同的内容，通过事件切换状态，使页面表现不同状态的内容。

注：元件库、母版、动态面板（后面会单独讲解）

案例讲解

下面我通过一个案例为大家介绍如何实现交互原型的设计，这个案例来自我们自己品牌够牛官网。带大家从最草图到原型的输出，让大家快速的了解axure的各种工具以及快速的上手。在这里我会从网站设计需求到草图产出，在通过axure来完成整体的交互原型设计。

(官网上线效果）

产品需求分析：

做一个真正的产品项目的时候，我们需要做好前期的各种需求分析以及各种产品诉求等。我们会从品牌的理念定位和改版的意图，在这里我们够牛官网主要的改版意图是加强交互式3D展示，展示视频与3D的设计交互理念。以及品牌定位是什么，在我们的这个案例中我们的品牌定位是够“牛”+“一起变牛”，会定义品牌颜色红+白+深灰等色调。最后会要看我们平台会发布到哪里，因为不同平台在交互方式上会有很大的差别，比如网页的交互是不能直接用于移动端等等。主要是尺寸不同，给用户的使用体验方式所带来的差异性。

注：定位、核心、品牌、平台、意图

草图设计

通过前期对需要做的产品定位、品牌核心价值、意图、适用平台等分析清楚以后，我们就要开始着手原型交互设计了，在这了海哥我习惯用白纸笔来完成初步的构思。在向大家展示的这个案例中，我们可以看到初步的草图原型已经把我们的功能需求已经分模块展示出来了。由于够牛是一家专注用户体验的设计公司，所以在交互模式以及后期的设计会在形式上和其他的网站也会存在一种差异化。下面我们就一起来看看草图输出的形式。

Axure原型制作

下面我们会对照草图把我们需要的原型通过Axure工具把它做出来了。

我们需要新建一个我们所需要的尺寸，我们会做1200px以内。在原型的制作中虽然不要求我们需要做到很美观，但是我们还是需要去遵循交互设计规则，还是需要把原型尽量做到该对齐的还是需要对齐、注意大小关系、位置、层次清楚、交互逻辑明了，交互原型差不多都是以黑白稿为主。

重点：尺寸大小、位置关系、层次关系、大小关系、交互逻辑

（首页原型交互）

在这里我们只需要通过简单的展示矩形组以及文字组件就可以完成，我们会先做出顶部的展示区域，以矩

形占位符完成顶部立体牛视频背景图，通过文字组件完成顶部菜单的布局。内容区域部分，这里我们主要是通过不规则的排版，在这里我们不需要去考虑如何去排的好看，只需要告诉设计师这一块我们是需要通过不规则的排版布局来排版，这里也是通过矩形占位符和文字组件来完成并不需要要其他的组件，所以，矩形和文字是我们常用的组件了。

（首页原型交互）

接下来就是我们的案例列表页了，案例展示我们会用到动态面板，在这里就不在详细的展示动态面板了

，会在后面的课程中单独的介绍动态面板，因为动态面板也是我们做原型经常使用到的。动态面板主要是做鼠标移入案例时显示案例更多信息交互效果。

做完页面了我们还需要要为页面需要添加链接，各种交互事件。因为交互重点是流程，需要用各种链接各种交互设计的触发来引导用户去操作，从而完成每一个流程以及交互动作。比如我们在这里需要点击logo链接到首页，点击案例到案例列表页面跳转等操作。

最后一步就是如何的输出我们的原型文件，生成交互文档。我们会通过axure的右上角的发布中的生成Html文件来输出我们的交互文件。通过保存到自己想要的位置，就可以发个客户或者同事，一起参与产品的后期开发。

小结

通过本章节A1-半小时快速上手交互原型工具-工具篇的快速入门学习，我们对Axure的软件界面已经有了很基础的认识，我们如何运用Axure做交互原型设计，通过一个详细的案例讲述了如何从需求到草图设计，最后通过axure完成原型交互效果的设计。