原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混
乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？
还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。
比如，APP中经常会用到一些主页、分享、搜索、消息各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。
一、创建元件库“绿色文件”
打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会d出一个另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。
此时，我们可以看到，文件的后缀名为 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。用这个软件，高保真或者低保真原型都能做的很好。那么，怎样的原型才适合团队交流？
毕竟绘制出来的原型并不是只给自己看的，还要讲解给团队里的成员，UI/前端/开发。特别是进行小组内评审的时候，通过演示原型，需要向他们讲解产品内部的逻辑、具体的页面、动效等，还要向他们询问设计是否合理，能否实现等，静心倾听他们的意见。这时候，原型就是一个思维传达的工具，将你的想法，翻译并灌输给你的团队成员。同样，原型是也团队的交流工具，针对绘制出来的原型，每个人都可以谈谈自己的看法，交流思想，完善原型不足的地方。
所以原型绘制出来，必须要有基本的交付标准。
一、原型设计的基本交付标准
1清楚------让他人能明白产品是干什么的，包括什么功能，有哪些页面。
需要清楚地表达页面有哪些内容模块
需要清楚地表达模块内部的构成元素
2清晰------让队友知道具体有哪些要求，指导他们如何做
1功能 *** 作
某一个功能可以进行哪些 *** 作，点击/鼠标悬浮/拖动等 *** 作，以及页面会有什么反应。（方便开发的工作）。
2 *** 作路径
有一些 *** 作是要跳转页面，跳转的路径需要标清楚，跳到哪去了，涉及哪些页面，页面之间是如何联系的。防止用户迷失。
3点击状态
一些链接，按钮，需要标明它初始的时候是什么样，鼠标悬浮有什么效果（颜色/下划线/提示语等），点击的样式变化，以及点击后的样式。（这些可以为前端的工作提供方便）
4信息组合
相关的信息需要组合在一起，比如一些基本信息，姓名/性别/年龄等最好放一块，不要分开。不相关的保持距离。
5位置排序
页面的布局应该适应用户的习惯，浏览方式、工作任务。突出强调重点，方便用户的工作。一些数据可以思考一下它们的排列方式，按什么排序，能方便用户查找，仍旧是“以用户为中心”。
3周全-----产品的各种细节，不能疏忽
1交互状态
某些重要的 *** 作，交互样式是怎样的，效果如何，最好单独抽出来做成高保真，演示给他人看，让他们对产品有深入的体验和感受。
2数据显示
原型上涉及的相关数据做好有真实的案例，将需要获取的关键数据全部展示出来，比如一篇文章，需要的数据：作者、发布时间、浏览量、喜欢数、收藏数等，方便开发准备必要的数据接口。
3异常考虑
需要考虑一些突发情况的应对，比如断网、加载太慢、数据已经被删除了、数据找不到了、没有访问权限等等情况。
4配套页面
产品里的一些功能可能和其他产品有关联，需要将可能涉及的其他页面包括到项目内。比如页面在wap上手机的浏览样式、一些发送给用户的消息/短信的内容和样式等等。
4基本审美
1对齐
2间距
3颜色
4字体
推荐大家看看《写给大家看的设计书》这类易上手的书籍。
5基本规范
1页面尺寸
web的宽度有960px、1000px、1200px，App有安卓、iphone5、iphone6等，需要与已有的产品保持统一的尺寸。
2字体大小
标题可以是18px或者16px，内容可以是14px。既要考虑用户是否看到清，又要考虑美观。
3颜色
原型不要有太多的颜色，坚持黑白灰，除非要突出，可以用其他的颜色。
4d窗
d唱的样式最好做统一，d窗名+内容+ *** 作按钮+关闭
5元件
不在原型正文添加过多的截图、图标样式，会对UI的设计造成干扰。
二Axure的快捷使用技巧
工欲善其事必先利其器，工具使用的越娴熟，才能节省大量时间用于方案的思考。下面将简要分享Axure绘制原型时的一些快捷 *** 作：
首先在顶部菜单栏中找到<视图>，把需要的部件显示，就可以设置了。
1组件库的建立（能提高效率，保证产品层面的统一一致）
2母版的使用（适用于多页面通用的部分，修改后，集体自动更新）
3设置页面样式（页面的字体、背景能一次性设置好）
4元件的交互样式
5元件组合
把要组合的原件用鼠标框在一起，按住ctrl+G，成为组合后就可方便复制拖动了。许下按住ctrl+shift+G，也可以点击选中后，点击下图的两个图标来组合和取消组合。
6对齐、居中、平均分布
选中要对其的内容，选择一种分布样式，就能快速得到整齐的原型样式，而不用一个个手动调整。
7输入框类型的设置（预设好类型）
一些输入框，可能需要设置默认文字，可以直接选中了输入框后，在原件属性里设置提示文字和一些限制。
8元件的提示语
有些文字需要有鼠标悬浮显示提示语的动作，可以直接在原件的属性里设置“原件提示”，输入要显示的内容，即可。
三、制作原型的过程
1梳理功能点-------------------将需求转化为功能清单，标出重要等级（前提是需求已经梳理清楚）
2规划产品结构----------------用Xmind或者笔和纸等工具画出产品有几个页面，每个页面包含哪些元素
3整理原型目录----------------用Axure添加原型的几个页面，考虑页面之间的跳转关系
4设计页面的布局（打格子）-----用不同的色块，方框来表示这部分将要表示什么板块，设计好页面的布局
5填充各模块的细节----------在方框里把具体的信息和数据填充完整
6增加少量的交互动作--------------体现在一些涉及到任务的 *** 作
7页面注释-------------完善交互说明
8审查自检------------------功能是否覆盖完全；页面有没有缺失；流程是否明确；状态是否完备
四、原型应用中的经验
因为我多是负责后台系统的优化，所以是直接和开发打交道，如果涉及前台页面，就需要UI先将原型做成，再由前端制作含有动效的demo，开发再按照demo开发。但是不论哪种，绘制出来的原型一定需要让队友都明白你的逻辑和要表达的重点。
第一次负责项目的时候，我用的是高保真，画完整的原型就花了一星期多，各种动作和交互，恨不得做个虚拟的产品。但是和开发讲了原型后，等来验收项目的时候，才发现，开发大部分都没有按照原型上的动作来，甚至连细节都有遗漏。一个个催着补上后，我开始思考这种方式是不是不太划算，太费事费力，结果又不太好。
后来我看了我上级绘制的原型，都是以静态页面为主，可以说是低保真，但是每一种情况都详细地用图文描述清楚，点击之后是什么样子，将要获取什么数据，失败了会怎么样都有。而且这种方式，完成的特别快。于是我就选取低保真模式的开始画原型，结果发现，开发有时候并不能将一些动作做好。
于是我开始“T式原型 ”。“T式原型 ”就是大部分是以低保真铺展开，将整个产品的逻辑都直接呈现出来，再在某些需要重点描述的地方用高保真描述深入。所以，我的原型大部分是以 低保真+注释说明和高保真+动作演示 的组合。 不过对于交互简单的产品来说，低保真模型足够了 。
每个产品绘制原型的习惯和风格都有所不同，但关键还是需要进行小组会议来向队友们讲解原型和逻辑，在开发的过程中，需要多沟通。
另外，分享大家关于AXURE学习的网站，可以在里面找到免费的软件安装包和教学课程。
>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）