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

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

原型图的种类

线框图

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

高保真原型图

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

• 制作要素

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

• 制作技巧

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

需求文档

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

实例制作

线框图实例

微信发现界面效果图

制作技巧

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

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

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

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

高保真原型图实例

为微信增加听一听功能效果图

制作技巧

1. 学会使用分割图形，可以将图片分割为两部分
   
2. 拖拉图片，空出合适的空隙，插入box，调整一下即可
3. 在iconfont上找合适的图标

为多图添加交互功能

交互步骤

1. 添加热区在点击区域

2. 添加点击事件，选择跳转的页面即可，如要添加返回页面，直接选择右下角Back to…即可

3. 让唱片转起来

   • 截取唱片
     

   • 用长方形罩住唱片部分
     

   • 摁住小黄三角形直接往右拉，把得到的图覆盖原图唱片区域
     

   • 设置热区点击旋转事件（rotate）并如图设置参数（把none设为linear，意为线性旋转，1080为三圈）
     

   • 选择首页点击右上角preview即可开始预览

产品演示