1-Axure

Axure学习

一、原型图

1. 原型图作用

• 描述互联网产品设计的文档
• 项目中，与相关部门沟通需求的工具（研发，设计）
• 敏捷开发中，简化版的需求文档（PRD，MRD）

2. 原型图种类

• 线框图：制作快速，低成本描述方案，给设计更多空间
• 高保真原型图：制作耗时，还原度高，保证设计效果
  • 静态
    • 形状、尺寸： 严格按照截图比例，参考线
    • 色彩：使用吸取颜色，注意渐变色
    • 贴图：寻找参考物，复制图片，截取，覆盖等
  • 技巧
    • 会截图，选取合适参考物进行切割，不要重新发明轮子
    • 使用搜索引擎
      • 矢量图：http://www.iconfont.cn/
      • 贴图：百度
  • 动态
    • 交互动作：页面切换，响应范围，点击动效等
    • 演示效果：手机演示，原型托管，屏幕适配
• 需求文档（PRD/MRD）:更多逻辑与业务说明，指导开发

二、Axure使用

1. Axure界面

• 菜单栏
• 站点地图
• 元件库
• 画布
• 属性/样式区

2. 实战–画一个朋友圈

• 模仿成熟页面最好
• 设置背景
• 拖动白色Box
  • 设置尺寸
• 去掉边缘线颜色
• 设置颜色
  • 用吸管工具
• 可按画布上，左标尺拉线对比Box大小，依次确定大致框架
• window放大缩小： ctrl+滑动鼠标轮
  • ctrl 拖动元件，复制
• 圆角： 选中框，点击黄色图角
• 切割替换
• 添加点击事件
  • 热区选择点击范围
  • 属性中添加事件
  • 点击预览
  • 设置返回时，可以直接选择返回上一级
• 添加图片旋转事件
  • 选择图片，覆盖
  • 热区选择激活点
  • 属性中添加用例，选择图片并设置

三、 Axure案例实战：微信

1. 系统登录

• 导入图片
• 比例等比设置
• 登陆失败覆盖型界面
  • 用同等大小黑色，透明度50%

2. 朋友圈

• 在iconfont里加矢量图标
• 选中
  • 局部选中
  • 想交选中

3. 聊天会话

• 组合
  • 多个块结合在一起，便于使用