Axure线框图

Axure教程视频，0基础入门，2小时学会

视频地址: https://www.bilibili.com/video/BV1Yx411f7d6

原型图的作用

1. 描述互联网产品设计的文档
2. 项目中, 与相关部门沟通需求的工具(研发, 设计)
3. 敏捷开发中, 简化版的需求文档(PRD, MRD)

原型图的种类

1. 线框图: 制作快速, 低成本描述方案, 给设计更多空间
2. 高保真原型图: 制作耗时, 还原度高, 保证设计效果
3. 需求文档(PRD/MRD): 更多的业务逻辑说明指导研发

Axure的使用基础

菜单栏: 打开最近文档, 输出成图像, 其他的用的少
站点地图: home, page1, page2
元件库: 各种小组件
绘图区:
属性区/样式区:

软件倒是挺简单的, 拖拖拽拽.

用Axure画微信的朋友圈

首页截图一下手机朋友圈, 先模仿一些成熟的页面, 不要只是会画一些简单的格子.

把图片放到绘图区

背景颜色根据需要修改, 灰色或者白色, 灰色看边界比较清晰.

调整图像的尺寸, 为什么? axure中最大的尺寸就是72号字, 如果超过了这个就没法显示了, 所以还是把图像变小点, 可以等比缩放.

中间有个 ratio, 连在一起就是等比例缩放.

拽一个 box 过来, box 移动的时候组件在边缘都会出现对齐的参考线, 可以快速定位到已有组件的位置.

将我们要完成的内容和朋友圈的那个大小设置为一致.

去掉边框颜色.

用吸管工具可以快速取色.

小框

上边距好对, 下边距不好对, 可以使用标尺, 左键点击后, 按住不放, 然后往下拉, 拉到标尺线则可以对齐了.

可以拉很多的标尺线.

分隔线

可以拉标尺, 然后从元件库中弄一条线过去.

点击delete可以删除参考线.

另外可以调整线的颜色的深浅.

放图标

图标用圆形或者图片都可以, 根据个人喜好.

加上文字

字体的大小可以调整下.

如果位置想要很准的话, 可以拉动右侧的标尺, 来对齐.

作业: 用Axure绘制线框图

目标产品: 网易云音乐APP

目标页面: 播放页