如何用Aure快速制作APP交互原型.pdfVIP

如何用 Axure 快速制作 APP 交互原型 对于产品经理来说，熟练使用一些常用软件是一项十分必要的技能。其中，作为一个专业的快速原 型设计工具， Axure RP 无疑在产品人心中拥有一个难以撼动的地位。但就要 PS 一样，虽然足够 专业，但同样也会存在使用灵活性的一些问题。 今天我们就谈谈，如何用 Axure 快速制作 APP 交互原型，不对，更准确的说法应该是：如何用 Axure 快速制作一份有水准的 APP 交互原型。作为一名优秀的产品人不仅要保证效率，也要保证质量才行 。 首先抛出我的方法论： 制作属于自己的元件库并要学会善用母版，熟悉 APP 设计规范并要有自己一 套交互风格样式 。我会以仿照「读读日报」 IOS 版做的一个交互原型稿为实例，表述整个制作过程 的思路，希望能对你有所帮助。 创建属于自己的元件库 原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。 Axure 自 带的只是一些最基本的元件，而网上的元件库庞杂混乱，很难找到满足需求并且称心的元件，并且 大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要 求呢？ 还好 Axure 提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通 过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据 实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。 比如， APP 中经常会用到一些主页、分享、搜索、消息 ….各种图标，或者我们每次遇到喜欢的图标 ，都可以用 Axure 画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。 一、创建元件库 绿色文件“ ” 打开Axure ，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个 另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。 此时，我们可以看到，文件的后缀名为 .rplib ，这个就是元件库的格式，而不同于创作交互原型时正 常Axure 文件的 .rp格式。 输入文件名称和存储位置之后，点击保存， Axure 将重新打开一个新页面进行元件的编辑。并且我们 可以看到，新页面跟我们平时创造 .rp正常文件的页面一模一样，但不要混淆，此时页面编辑的是我 们在正常 .rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到，元件库 .rplib文件 图标为 ”绿色 ，不同于“ .rp文件的蓝色。 创建好元件库得 ”绿色文件 后，基本准备工作已经做完，下边就进入到制作过程。“ 二、元件库分组 通过观察 Axure 默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分 成了： common 、forms 、flow 等等，这样能更方便我们找到目标元件的位置。 同样，我们在制作元件库的时候，也可以进行分组，规则为： 在页面导航面板上，所有的文件夹都 是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。 分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做 APP 的元件库，那么我们可以分成：图标、控件、框架 3 个常用分组，接下来就进入到具体元件的制作 过程。 三、编辑并制作元件 我们以制作一个 ”我的 头像图标为例，首先在图标分组下，添加一个页面并命名为“ ”我的 “，双击进入 到元件编辑页面，编辑操作就跟我们平时制作正常的 .rp文件一模一样。我们我们可以参考一些 app 中常常采用的 ”我的 “图标样式，然后用 Axure 默认的基本形状元件，比如矩形、横线、圆形等，组合 拼凑成最终比较理想的样子。 首先我们要明确， Axur