美文网首页Axure原型设计产品经理@产品
这不是Axure教程!(二)素材获取

这不是Axure教程!(二)素材获取

作者: 我是王嘉译 | 来源:发表于2018-04-02 09:46 被阅读98次

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

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

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

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

复制大法涉及两种,一是整个复制别人的原型文件,二是复制别人原型中某个设计点。就像复制别人的文档或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

— — — — 目  录  完 — — — —

相关文章

网友评论

    本文标题:这不是Axure教程!(二)素材获取

    本文链接:https://www.haomeiwen.com/subject/bddthftx.html