如何用Axure快速制作APP交互原型

如何用Axure快速制作APP交互原型~

创建属于自己的元件库

原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混
乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？

还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。

比如，APP中经常会用到一些主页、分享、搜索、消息....各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。

一、创建元件库“绿色文件”

打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。

此时，我们可以看到，文件的后缀名为 .rplib，这个就是元件库的格式，而不同于创作交互原型时正常Axure文件的.rp格式。

输入文件名称和存储位置之后，点击保存，Axure将重新打开一个新页面进行元件的编辑。并且我们可以看到，新页面跟我们平时创造.rp正常文件的
页面一模一样，但不要混淆，此时页面编辑的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到，元件库.rplib文件图
标为”绿色“，不同于.rp文件的蓝色。

创建好元件库得”绿色文件“后，基本准备工作已经做完，下边就进入到制作过程。

二、元件库分组

通过观察Axure默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了：common、forms、flow等等，这样能更方便我们找到目标元件的位置。

同样，我们在制作元件库的时候，也可以进行分组，规则为：在页面导航面板上，所有的文件夹都是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。

分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做APP的元件库，那么我们可以分成：图标、控件、框架 3个常用分组，接下来就进入到具体元件的制作过程。

三、编辑并制作元件

我们以制作一个”我的“头像图标为例，首先在图标分组下，添加一个页面并命名为”我的“，双击进入到元件编辑页面，编辑操作就跟我们平时制作正常
的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式，然后用Axure默认的基本形状元件，比如矩形、横线、圆形等，组合拼
凑成最终比较理想的样子。

首先我们要明确，Axure中没有类似PS中的布尔运算（能够自由的对多个形状进行编辑，比如合并、相交、减去顶层等），所以会给我们制作元件，尤
其是图标带来一定局限性，但好在交互原型并不要求苛刻的细节实现，只要我们能够很清楚的表示出产品形态，有比较整体的风格就可以了。并且我们用Axure
基本形状自己勾画出来的图标，能很方便的调整颜色大小等，可以适用不同的交互文件，这就是从网上找现成的位图图标很难达到的便利性。

回到“我的”图标制作，如图所示，我一共用到了三个基本形状来进行拼凑，最终组合成了我们经常能看到的一个图标样式，并且一眼就能明白它的含义。虽然没有更多的细节实现，但对于交互原型稿来说已经完全够用，关键是颜色大小等可以很灵活的进行修改。

按照这个思路，我们可以制作更多的图标出来，当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图，是我在画「读读日报」原型图时制作的一个元件库：

元件库制作完成之后，然后就进入到最后一个步骤。

四、载入自制元件库并使用

元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件，同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能，然后找到制作完成的元件库文件“绿色图标”载入。

载入之后，我们就可以在「选择元件库」下拉选项中，找到刚刚载入的元件库并选中，然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。

怎么样，看到这里你应该学会了如何自制一个元件库了吧，希望你会花时间动手做一个。当然除了创建部件库，Axure有很多技巧都需要掌握，比如母版的功能。

学会善用母版

在产品的设计过程中，主导航往往出现在多个页面，比如APP的底部tab栏。当然不仅仅是导航，当我们频繁使用任何一组控件的时候，希望你不是一直都在复制和粘贴，永远记住，创建一个母版可能是更好的选择。

使用母版的便利性不单单体现在能够快速的使用一组控件，尤其是在设计后期，当我们需要修改某些基本控件的时候，母版带来的修改效率一定会让你深深的爱上这个功能，欲罢不能。

除了学会使用母版，更要学会善用母版。同样有一点希望能记住，不要把太大的组合对象变成母版。因为越是大的组合对象，越是有可能需要在母版的很多地
方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法，这样对母版的修改会更加的灵活，比如下图，将产品基本信息和可能购买状态分开成两
个母版，组合在一起成为产品的完整页面

制定一套自己的交互风格

学会了创建自己的元件库，也懂得了善用母版，当然还有其他很多Axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧，可是又该如何保证交付稿有统一的风格，达到较高的目标水准呢？

首先，我们要熟悉APP的设计规范，符合Android或者iOS的设计理念，对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符
合这个平台的特性，并且基于大家对相关平台的一些固有认知，很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。

基于对APP设计规范的熟悉，同时在制作过程中，要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好APP原型中，正文字体采
用 微软雅黑 颜色#333333 13字号、提示文字为微软雅黑 颜色#999999
10字号、固定的appbar行高为40px，内容据左侧屏幕边缘10px距离......

当然某些规范，比如字体也可以当成一个字体元件，放到我们自制的元件库中，总之要根据自己的情况灵活的运用。有了一套风格之后，加上创建的元件库随意修改颜色大小等，我相信制作出来的交互原型肯定是协调统一的整体。

读读日报原型制作

理论方法掌握了，需要实践的锻炼才能更好的吸收领悟。我参照「读读日报」iOS版，对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。

为了更有形象感，从网上找来一个iPhone手机的边框，并且创建自己的部件库，绘制了一些常用的图标和控件。然后设定了整体的风格，制作过程中也用到了几个母版提高效率，同时可以使用辅助线帮助自己保证部件的对齐、平均分布等，进而提高布局的美感。

总结

末尾再次抛出我开篇提到的，如何用Axure快速制作APP交互原型的方法论：制作属于自己的元件库并要学会善用母版，熟悉APP设计规范并要有自己一套交互风格样式。

axure工具的使用比较简单，下载一本电子书，看看基本就能掌握然后就是做一些案例，进行实战.
当然我这里也有小楼的从入门到精通的视频

创建属于自己的元件库

原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混
乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？

还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。

比如，APP中经常会用到一些主页、分享、搜索、消息....各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。

一、创建元件库“绿色文件”

打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。

此时，我们可以看到，文件的后缀名为 .rplib，这个就是元件库的格式，而不同于创作交互原型时正常Axure文件的.rp格式。

输入文件名称和存储位置之后，点击保存，Axure将重新打开一个新页面进行元件的编辑。并且我们可以看到，新页面跟我们平时创造.rp正常文件的
页面一模一样，但不要混淆，此时页面编辑的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到，元件库.rplib文件图
标为”绿色“，不同于.rp文件的蓝色。

创建好元件库得”绿色文件“后，基本准备工作已经做完，下边就进入到制作过程。

二、元件库分组

通过观察Axure默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了：common、forms、flow等等，这样能更方便我们找到目标元件的位置。

同样，我们在制作元件库的时候，也可以进行分组，规则为：在页面导航面板上，所有的文件夹都是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。

分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做APP的元件库，那么我们可以分成：图标、控件、框架 3个常用分组，接下来就进入到具体元件的制作过程。

三、编辑并制作元件

我们以制作一个”我的“头像图标为例，首先在图标分组下，添加一个页面并命名为”我的“，双击进入到元件编辑页面，编辑操作就跟我们平时制作正常
的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式，然后用Axure默认的基本形状元件，比如矩形、横线、圆形等，组合拼
凑成最终比较理想的样子。

首先我们要明确，Axure中没有类似PS中的布尔运算（能够自由的对多个形状进行编辑，比如合并、相交、减去顶层等），所以会给我们制作元件，尤
其是图标带来一定局限性，但好在交互原型并不要求苛刻的细节实现，只要我们能够很清楚的表示出产品形态，有比较整体的风格就可以了。并且我们用Axure
基本形状自己勾画出来的图标，能很方便的调整颜色大小等，可以适用不同的交互文件，这就是从网上找现成的位图图标很难达到的便利性。

回到“我的”图标制作，如图所示，我一共用到了三个基本形状来进行拼凑，最终组合成了我们经常能看到的一个图标样式，并且一眼就能明白它的含义。虽然没有更多的细节实现，但对于交互原型稿来说已经完全够用，关键是颜色大小等可以很灵活的进行修改。

按照这个思路，我们可以制作更多的图标出来，当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图，是我在画「读读日报」原型图时制作的一个元件库：

元件库制作完成之后，然后就进入到最后一个步骤。

四、载入自制元件库并使用

元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件，同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能，然后找到制作完成的元件库文件“绿色图标”载入。

载入之后，我们就可以在「选择元件库」下拉选项中，找到刚刚载入的元件库并选中，然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。

怎么样，看到这里你应该学会了如何自制一个元件库了吧，希望你会花时间动手做一个。当然除了创建部件库，Axure有很多技巧都需要掌握，比如母版的功能。

学会善用母版

在产品的设计过程中，主导航往往出现在多个页面，比如APP的底部tab栏。当然不仅仅是导航，当我们频繁使用任何一组控件的时候，希望你不是一直都在复制和粘贴，永远记住，创建一个母版可能是更好的选择。

使用母版的便利性不单单体现在能够快速的使用一组控件，尤其是在设计后期，当我们需要修改某些基本控件的时候，母版带来的修改效率一定会让你深深的爱上这个功能，欲罢不能。

除了学会使用母版，更要学会善用母版。同样有一点希望能记住，不要把太大的组合对象变成母版。因为越是大的组合对象，越是有可能需要在母版的很多地
方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法，这样对母版的修改会更加的灵活，比如下图，将产品基本信息和可能购买状态分开成两
个母版，组合在一起成为产品的完整页面

制定一套自己的交互风格

学会了创建自己的元件库，也懂得了善用母版，当然还有其他很多Axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧，可是又该如何保证交付稿有统一的风格，达到较高的目标水准呢？

首先，我们要熟悉APP的设计规范，符合Android或者iOS的设计理念，对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符
合这个平台的特性，并且基于大家对相关平台的一些固有认知，很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。

基于对APP设计规范的熟悉，同时在制作过程中，要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好APP原型中，正文字体采
用 微软雅黑 颜色#333333 13字号、提示文字为微软雅黑 颜色#999999
10字号、固定的appbar行高为40px，内容据左侧屏幕边缘10px距离......

当然某些规范，比如字体也可以当成一个字体元件，放到我们自制的元件库中，总之要根据自己的情况灵活的运用。有了一套风格之后，加上创建的元件库随意修改颜色大小等，我相信制作出来的交互原型肯定是协调统一的整体。

读读日报原型制作

理论方法掌握了，需要实践的锻炼才能更好的吸收领悟。我参照「读读日报」iOS版，对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。

为了更有形象感，从网上找来一个iPhone手机的边框，并且创建自己的部件库，绘制了一些常用的图标和控件。然后设定了整体的风格，制作过程中也用到了几个母版提高效率，同时可以使用辅助线帮助自己保证部件的对齐、平均分布等，进而提高布局的美感。

总结

末尾再次抛出我开篇提到的，如何用Axure快速制作APP交互原型的方法论：制作属于自己的元件库并要学会善用母版，熟悉APP设计规范并要有自己一套交互风格样式。

---

屏边苗族自治县13318888099： 如何用Axure快速制作APP交互原型 - ？
哀疮双骨： 1. 打开Axure,在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能,点击会弹出一个另存为对话框,这里需要选择元件库文件的存储位置,并需要输入元件库的名称.2. 此时,我们可以看到,文件的后缀名为 .rplib,这个就是元...

屏边苗族自治县13318888099： axure rp怎么生成app - ？
哀疮双骨： axure生成的html有以下几种方法查看类似于app效果交互: 1.将html文件托管,“产品大牛”网站可进行原型托管;托管后直接打开连接即可查看相应的交互 2.下个文件管理器,比如“文件全能王”等,把html文件传到文件管理器,打开相应页面,即可查看交互 3.如果有服务器,将html放到服务器,给个链接地址,即可查看

屏边苗族自治县13318888099： 使用Axure制作App原型应该怎样设置尺寸 - ？
哀疮双骨： 目前比较好的解决办法是:1.下载Axure 6.5Beta版.而且不好意思是英文版的.2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型3.按F5...

屏边苗族自治县13318888099： 如何用axure设计app界面 - ？
哀疮双骨： 这个问题问的好,axure 和PS AI 都是一种工具,网上教程太多了,axure画界面不难,里面有一些控件,可直接按住拖动到主界面就可以了.他主要不是设计界面,而是去做原型图,再添加一些交互.界面设计还是用sketch/xd/ps .

屏边苗族自治县13318888099： 如何用axure做一个手机app原型 - ？
哀疮双骨： 一、原型默认整体大小为640*960即可,位置为x为0、y为0起始,这样即可 二、下拉效果可以做,用动态面板来完成,可以上下拖拽. 三、可以放在web服务器上,就可以通过http的方式来访问.

屏边苗族自治县13318888099： 使用Axure制作App原型应该怎样设置尺寸 - ？
哀疮双骨： 直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可.如: iPhone4 320*480 iPhone5 320*568 Samsung Galaxy S4 360*640

屏边苗族自治县13318888099： 如何用axure实现手势交互效果 - ？
哀疮双骨： 交互三要素:目标,目的,行为.首先你选择你的目标,然后再右上角选择交互-鼠标点击时-就可以选择一些状态了(比如隐藏啊,什么的).

屏边苗族自治县13318888099： Axure8怎么设计点击按钮触发控件变化的交互效果 - ？
哀疮双骨： 1、双击打开RP Axure软件工具,默认显示index页面和page1、page2、page32、在元件库中找到“矩形1”,拖曳一个到编辑区域窗口,并设置宽度和高度3、拖曳一个“主要按钮”到编辑窗口,修改其内容为“改变背景颜色”,使宽度使用矩形框4、改变矩形框填充颜色,设置为绿色背景5、选中按钮,查看右侧属性设置框,双击“鼠标单击时”,打开用例编辑窗口6、选中元件“显示/隐藏”,设置显示或隐藏的效果,确定后单击“确定” 注意事项:注意按钮单击事件用例添加.注意显示和隐藏的效果实现.

屏边苗族自治县13318888099： Axure这个软件是做什么的.建模? - ？
哀疮双骨： Axure RP 是一套高度拟真的网站与APP 原型建构工具,可以让设计师们利用软件内的组件快速设计出产品原型,本身提供强大的交互支持,设计出的原型和实际产品在交互上体验感几乎没有区别.另外,软件也支持多人协作模式和版本控制管...

屏边苗族自治县13318888099： 如何高效输出移动app产品原型 - ？
哀疮双骨： 一、输出以界面为单位的产品流程图 高效输出,首先要保证产品的整体思路要正确,这点可以从产品流程图中体现出来.移动产品需要做到聚焦,因为手机界面的大小,用户的碎片化使用等等,所以一个界面上必然不可能出现太多的内容和行动...