前面我们学习了制作网页的技能，从这里开始我们来学习前端必备技能，就是用Axure来制作原型图，一方面我们能提前绘制出我们所需的页面，这在我们开发的时候能节省大量的时间，另一方面我们能通过给用户进行体验从而能够发现产品的问题，把问题在产品上线之前就解决，而不是上线后花大量的精力去不断的改进和优化产品。
这篇文章后我会出JavaScript的教程，并带有学习笔记，免费分享给大家。
Axure教程（一）
- 原型图的种类
- 线框图
- 高保真原型图
- 需求文档
- 实例制作
- 线框图实例
- 微信发现界面效果图
- 制作技巧
- 高保真原型图实例
- 为微信增加听一听功能效果图
- 制作技巧
- 为多图添加交互功能
- 交互步骤
- 产品演示
原型图的种类
线框图
- 制作快速，低成本描述方案，给设计更多空间
高保真原型图
-
制作耗时，还原度高，保证设计效果
-
制作要素
- 形状，尺寸：严格按照截图比例，参考线
- 色彩：使用吸取颜色，注意渐变色
- 贴图：寻找参考物，复制图片，截取，覆盖等
- 交互动作：页面切换，响应范围，点击动效等
- 演示效果：手机演示，原型托管，屏幕适配
- 制作技巧
- 会截图，选取合适的参照物进行切割，不要重新发明轮子
- 使用搜索引擎：iconfont、百度
需求文档
- 更多逻辑与业务说明，指导研发
实例制作
线框图实例
微信发现界面效果图
制作技巧
-
图片一定要传原图，否则会失真，图片过大直接缩小制作即可，这样很多地方的缝隙都会消失
-
背景色最好设置为灰色（#dddddd），这样效果更明显
-
学会选择合适的图形进行构建
-
需要均匀分布，摁住ctrl+鼠标单击选择水平均匀分布
高保真原型图实例
为微信增加听一听功能效果图
制作技巧
- 学会使用分割图形，可以将图片分割为两部分
- 拖拉图片，空出合适的空隙，插入box，调整一下即可
- 在iconfont上找合适的图标
为多图添加交互功能
交互步骤
-
添加热区在点击区域
-
添加点击事件，选择跳转的页面即可，如要添加返回页面，直接选择右下角Back to…即可
-
让唱片转起来
-
截取唱片
-
用长方形罩住唱片部分
-
摁住小黄三角形直接往右拉，把得到的图覆盖原图唱片区域
-
设置热区点击旋转事件（rotate）并如图设置参数（把none设为linear，意为线性旋转，1080为三圈）
-
选择首页点击右上角preview即可开始预览
-
产品演示
