Axure教程（一）——线框图与高保真原型图制作

前面我们学习了制作网页的技能，从这里开始我们来学习前端必备技能，就是用Axure来制作原型图，一方面我们能提前绘制出我们所需的页面，这在我们开发的时候能节省大量的时间，另一方面我们能通过给用户进行体验从而能够发现产品的问题，把问题在产品上线之前就解决，而不是上线后花大量的精力去不断的改进和优化产品。
这篇文章后我会出JavaScript的教程，并带有学习笔记，免费分享给大家。

原型图的种类

线框图

• 制作快速，低成本描述方案，给设计更多空间

高保真原型图

• 制作耗时，还原度高，保证设计效果

• 制作要素

1. 形状，尺寸：严格按照截图比例，参考线
2. 色彩：使用吸取颜色，注意渐变色
3. 贴图：寻找参考物，复制图片，截取，覆盖等
4. 交互动作：页面切换，响应范围，点击动效等
5. 演示效果：手机演示，原型托管，屏幕适配

• 制作技巧

1. 会截图，选取合适的参照物进行切割，不要重新发明轮子
2. 使用搜索引擎：iconfont、百度

需求文档

• 更多逻辑与业务说明，指导研发

实例制作

线框图实例

微信发现界面效果图

制作技巧

1. 图片一定要传原图，否则会失真，图片过大直接缩小制作即可，这样很多地方的缝隙都会消失

2. 背景色最好设置为灰色（#dddddd），这样效果更明显

3. 学会选择合适的图形进行构建

4. 需要均匀分布，摁住ctrl+鼠标单击选择水平均匀