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

《如何用Axure快速制作APP交互原型》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、如何用Axure快速制作APP交互原型对于产品经理来说，熟练使用一些常用软件是一项十分必要的技能。其中，作为一个专业的快速原型设计工具，AxureRP无疑在产品人心中拥有一个难以撼动的地位。但就要PS一样，虽然足够专业，但同样也会存在使用灵活性的一些问题。今天我们就谈谈，如何用Axure快速制作APP交互原型，不对，更准确的说法应该是：如何用Axure快速制作一份有水准的APP交互原型。作为一名优秀的产品人不仅要保证效率，也要保证质量才行。首先抛出我的方法论：制作属于自己的元件库并要学会善用母版，熟悉A

2、PP设计规范并要有自己一套交互风格样式。我会以仿照「读读日报」IOS版做的一个交互原型稿为实例，表述整个制作过程的思路，希望能对你有所帮助。创建属于自己的元件库原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。

3、我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。比如，APP中经常会用到一些主页、分享、搜索、消息….各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。一、创建元件库“绿色文件”打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个另存为对话框，这里需要选择元件库文件的存储位置，并

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

5、已经做完，下边就进入到制作过程。二、元件库分组通过观察Axure默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了：common、forms、flow等等，这样能更方便我们找到目标元件的位置。同样，我们在制作元件库的时候，也可以进行分组，规则为：在页面导航面板上，所有的文件夹都是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做APP的元件库，那么我们可以分成：图标

6、、控件、框架3个常用分组，接下来就进入到具体元件的制作过程。三、编辑并制作元件我们以制作一个”我的“头像图标为例，首先在图标分组下，添加一个页面并命名为”我的“，双击进入到元件编辑页面，编辑操作就跟我们平时制作正常的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式，然后用Axure默认的基本形状元件，比如矩形、横线、圆形等，组合拼凑成最终比较理想的样子。首先我们要明确，Axure中没有类似PS中的布尔运算（能够自由的对多个形状进行编辑，比如合并、相交、减去顶层等），所以会给我们

7、制作元件，尤其是图标带来一定局限性，但好在交互原型并不要求苛刻的细节实现，只要我们能够很清楚的表示出产品形态，有比较整体的风格就可以了。并且我们用Axure基本形状自己勾画出来的图标，能很方便的调整颜色大小等，可以适用不同的交互文件，这就是从网上找现成的位图图标很难达到的便利性。回到“我的”图标制作，如图所示，我一共用到了三个基本形状来进行拼凑，最终组合成了我们经常能看到的一个图标样式，并且一眼就能明白它的含义。虽然没有更多的细节实现，但对于交互原型稿来说已经完全够用，关键是颜色大小等可以很灵活的进行修

8、改。按照这个思路，我们可以制作更多的图标出来，当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图，是我在画「读读日报」原型图时制作的一个元件库：元件库制作完成之后，然后就进入到最后一个步骤。四、载入自制元件库并使用元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件，同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能，然后找到制作完成的元件库文件“绿色图标”载入。载入之后，我们就