这不是Axure教程！（二）素材获取

素材，就是原始材料，作者写文章需要配图或小故事，设计师设计一张图片需要配色参考和画面内容，产品经理绘制原型也需要很多素材，本文汇总几种常用的获取方式。

为了更好的举例，先随便找一个网站，观察其页面涉及的素材，如下图某网站首页截图，网页及其对应原型里的元件会是：图标素材（图片）、文案素材（文本标签、矩形框）、图片素材（图片）、视频素材（图片、链接）。

所以我们知道，一个页面不会脱离这些元件。而元件的素材有下面这些方式可以获取。

一、复制大法：用别人做好的

复制大法涉及两种，一是整个复制别人的原型文件，二是复制别人原型中某个设计点。就像复制别人的文档或PPT一样。

比如APP，常见的布局都是固定在底部，你不可能把菜单栏放在左侧，所以只需改文字或图标。再如web端，常见布局是顶部导航，交互效果是鼠标移上后展示更多菜单，菜单可能横向也可纵向，内容布局也离不开左中右。

既然复制，那么关键点在于如何找到适合你的类似设计，这也是素材积累过程。需要平日有意识的收集，比较推荐的方式有二。

1）QQ群：

一个高质量的QQ群，力量不可小觑。有问题会帮你答疑，需要资源有人给你分享，群文件里常年更新文件，注意甄别和收集。当然，同时你也要回馈群友，帮人答疑或分享交流，来而不往非礼也。

2）网站类：

网站在精不在多，同类型有2-3个做参考已经足够。这些都是支持直接下载原型源文件的网站，平时多搜索关注即可

Axure中文网

Axure原创教程网

产品大牛网

如果无法获取源文件，只能拿到HTML文件，那么打开images就可以看到所有该文件使用过的图片。复制使用即可。

预览HTML文件结构

二、替代大法：用图片替代

我们做原型的目的是体现产品的功能与交互设计，给团队成员或客户爸爸演示。所以你只需保证实现这两个目的，你要知道别人并不关心你的原型用什么做的。因为其他人不负责这件事，他们都是结果导向，通常并不会关心过程。

当然，原型里本就有大量图片，我此处说的图片替代，是指本来需要逐步绘制的复杂元件，可以找图片替代，为你节省大量时间。

就一个素材库网站就够了，————阿里巴巴素材库————，感觉没有什么搜索不到。

根据需要可选择 SVG、AI、PNG三种格式，可自定义颜色和大小。

那么重点来了！

这些下载素材只能作为图片，如果你想编辑，又不想打开PS或Adobe那些大型软件，这里有个大招。

在Axure导入SVG图片后，右键可以【转换SVG图片为形状】。

形状，意思是你现在可以随意编辑，比如下面两种不同的复制方式，形状编辑的优势显而易见，更清晰更灵活。

转换成形状以后，你真的可以对他们为所欲为了。

三、自制大法

第三种方法更适用于熟练玩家，你已经对软件很熟练，你能快速画出想要的效果，那么你可以用Axure的形状绘制出你想要的任意效果。并不推荐新手这样做，因为的确很浪费时间，可能还会消耗你学软件的信心耐心。

如下，上面是网站原图，下面是自制图标

除了元件自制，还有两个关键是元件库和母版。

自制元件库的好处，一是为了统一页面交互效果，二是为了提高效率。

如果没有元件库，每一个有交互的元件都需要单独设置，浪费时间，而且可能会遗漏，后期检查也会非常麻烦。

元件库，在元件库区域标题右侧的菜单展开可查看到，可以新建、导入，甚至可以修改软件自带元件。

— — — — 系 列 目 录 — — — —

这不是Axure教程！（一）初步认识

这不是Axure教程！（二）素材获取

这不是Axure教程！（三）流程与标注

这不是Axure教程！（四）元件六要素与用例

这不是Axure教程！（五）变量与函数

这不是Axure教程！（六）动态面板之一:属性和动效

这不是Axure教程！（六）动态面板之二:经典实践

这不是Axure教程！（七）强大的中继器__1

— — — — 目  录  完 — — — —