素材,就是原始材料,作者写文章需要配图或小故事,设计师设计一张图片需要配色参考和画面内容,产品经理绘制原型也需要很多素材,本文汇总几种常用的获取方式。
为了更好的举例,先随便找一个网站,观察其页面涉及的素材,如下图某网站首页截图,网页及其对应原型里的元件会是:图标素材(图片)、文案素材(文本标签、矩形框)、图片素材(图片)、视频素材(图片、链接)。
所以我们知道,一个页面不会脱离这些元件。而元件的素材有下面这些方式可以获取。
一、复制大法:用别人做好的
复制大法涉及两种,一是整个复制别人的原型文件,二是复制别人原型中某个设计点。就像复制别人的文档或PPT一样。
比如APP,常见的布局都是固定在底部,你不可能把菜单栏放在左侧,所以只需改文字或图标。再如web端,常见布局是顶部导航,交互效果是鼠标移上后展示更多菜单,菜单可能横向也可纵向,内容布局也离不开左中右。
既然复制,那么关键点在于如何找到适合你的类似设计,这也是素材积累过程。需要平日有意识的收集,比较推荐的方式有二。
1)QQ群:
一个高质量的QQ群,力量不可小觑。有问题会帮你答疑,需要资源有人给你分享,群文件里常年更新文件,注意甄别和收集。当然,同时你也要回馈群友,帮人答疑或分享交流,来而不往非礼也。
2)网站类:
网站在精不在多,同类型有2-3个做参考已经足够。这些都是支持直接下载原型源文件的网站,平时多搜索关注即可
如果无法获取源文件,只能拿到HTML文件,那么打开images就可以看到所有该文件使用过的图片。复制使用即可。
预览HTML文件结构二、替代大法:用图片替代
我们做原型的目的是体现产品的功能与交互设计,给团队成员或客户爸爸演示。所以你只需保证实现这两个目的,你要知道别人并不关心你的原型用什么做的。因为其他人不负责这件事,他们都是结果导向,通常并不会关心过程。
当然,原型里本就有大量图片,我此处说的图片替代,是指本来需要逐步绘制的复杂元件,可以找图片替代,为你节省大量时间。
就一个素材库网站就够了,————阿里巴巴素材库————,感觉没有什么搜索不到。
根据需要可选择 SVG、AI、PNG三种格式,可自定义颜色和大小。
那么重点来了!
这些下载素材只能作为图片,如果你想编辑,又不想打开PS或Adobe那些大型软件,这里有个大招。
在Axure导入SVG图片后,右键可以【转换SVG图片为形状】。
形状,意思是你现在可以随意编辑,比如下面两种不同的复制方式,形状编辑的优势显而易见,更清晰更灵活。
转换成形状以后,你真的可以对他们为所欲为了。
三、自制大法
第三种方法更适用于熟练玩家,你已经对软件很熟练,你能快速画出想要的效果,那么你可以用Axure的形状绘制出你想要的任意效果。并不推荐新手这样做,因为的确很浪费时间,可能还会消耗你学软件的信心耐心。
如下,上面是网站原图,下面是自制图标
除了元件自制,还有两个关键是元件库和母版。
自制元件库的好处,一是为了统一页面交互效果,二是为了提高效率。
如果没有元件库,每一个有交互的元件都需要单独设置,浪费时间,而且可能会遗漏,后期检查也会非常麻烦。
元件库,在元件库区域标题右侧的菜单展开可查看到,可以新建、导入,甚至可以修改软件自带元件。
— — — — 系 列 目 录 — — — —
这不是Axure教程!(四)元件六要素与用例
这不是Axure教程!(五)变量与函数
— — — — 目 录 完 — — — —
网友评论