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. 聊天会话

• 组合
  • 多个块结合在一起，便于使用
  • 可以取消组合

4. 通信录

5. 我

6.事件组合

• 当多个页面有同一个菜单栏时，可以只设置一次热区，之后复制粘贴即可

四、动态面板

• 多个页面按照“状态划分”合成一个元件，然后通过某种“动作”驱动展示

  • 有三个状态status的面板灰黑蓝，通过动作Action来控制具体展示哪个状态
  • 动态面板=状态面板+动作

• 轮播图案例

  • 左右滑动
    • 一般用于tab切换，且一般都是顶部tab，例如新闻分类
    • 通过onSwpieLeft和Right控制多个state页面切换，达到tab切换
  • 上下滑动
    • 一般用于浏览页面
    • 通过OnDrag事件（锁定y轴）控制页面move动作，使页面上下滑动

• Axure的内联框架

  • 可放视频，地图，网页，URL地址
  • 截取适应的尺寸框架
  • 添加相应内嵌代码
    • 为什么CLOSE打不开界面了
      • 因为网络不好

• 阴影效果

  • 左上角外部阴影
  • 右下角外部阴影

• 菜单

  • Ant Design
  • 设置分组，设置条件
  • 推动效果

• 滚动评论与弹幕

  • 滚动的内容放在动态面板上

• 旋转效果

  • 设置全局变量
  • 有问题

• 改变默认字体

  • 项目–>元件样式管理
  • 思源字体

• 页面元件多，切换速度变慢

  • 放在动态面板里，一次性加载到内存里，减少刷新时间

• 文件自动备份与恢复

五、基本元件

• 拖动成正圆

  • shift+鼠标

• 不显示线框

  • 线宽：0
  • 线段格式：None

• 元件坐标是以元件左上角为准

• 概要

• ·显示某个具体界面的全部元件及层级关系

  • 可通过调整概要中的元件顺序，变更其显示顺序
  • 越后操作的元件，越优先显示

• 可以自制常用的元件库

  • 创建元件库
  • 导入元件库

• 母版区域

  • 和页面区域类似，管理原型中的所有母版
  • 需要重复使用的元件，建议创建为母版使用；
  • 若修改了母版，则所有页面中的母版元件将会被同步修改
  • 比如导航，标签栏等
  • 拖放行为
    • 选择位置，提高效率
  • 母版不能跨文件使用

• 交互

  • 页面交互
  • 元件交互

• 样式

  • 页面样式
  • 元件样式

• 低保真度：黑白

• 工具提示区别于说明\栅格化布局

• 单键快捷键
  

• 图片元件

  • 导入时，双击边框，令导入的图片大小一致

• 透明的不可见

• 热区

  • 增加可点击范围（移动端手指和网页端鼠标点击范围不同）
  • 在预览的时候，是由最下面一个元件决定预览底部范围
    • 可用热区锚定底部

• 动态面板

  • 常用于交互动作

• 内联框架

  • 内部页面
  • 外部URL

• 中继器

  • 大致框架相同的情况（模板相同，内容不同）

    • 提高效率

  • 针对表格的增删改查操作

六、表单元件

• 文本框

  • 可选择输入类型

• 文本域

• 下拉框

  • 可设置默认

• 列表框

  • 直接显示所有的可选项

• 复选，单选

• 当控制多个中只能选择一个时，可设置多个为一个组

七、 菜单表格

• 树
  • 点击可折叠
• 表格
• 水平菜单
• 垂直菜单

八、 标记元件

• 快照
• 箭头
• 便签
• 标记

九、 常用的交互设计

• 事件
  • 给元件增加交互时，就是增加事件
• 交互样式
  • 鼠标悬停，鼠标按下，获取焦点，可以直接触发
  • 选中和禁用，需要设置交互动作
• 鼠标和键盘交互
  • 当隐藏边框时，边框遮住了低层的边框
    • 减少其宽度两个像素，左右键移动，直至未遮掩
• 灯箱效果
  • 弹出界面，低层变暗
• 页面交互
  • 页面载入时
  • 窗口尺寸变化时
• 动态面板交互
  • 手势交互
  • 动态面板交互
• 中继器交互
  • 事件
    • 载入时
    • 每项加载时
    • 列表项尺寸改变
  • 场景
    • 商品页
  • 先设置模板，内部所有元件都命名
  • 设置样式，模板中表的每个属性，值可从excel复制粘贴
  • 通过交互式事件将表和模板联系起来
  • 还可添加排序
• 条件/情形
  • 条件判断
• 其他元件交互
  • 文本框交互动作
    • 文本改变时
  • 下拉列表交互
    • 选项改变时
  • 单选/复选交互
    • 类似于形状交互
  • ​ 树交互
    • 类似于单选/复选交互
• 链接动作
  • 打开链接
    • 打开新窗口
    • 当前窗口打开
  • 关闭窗口
  • 框架中打开链接
  • 滚动到元件（比如用动态面板返回顶部）
• 中继器动作
  • 增删改
  • 排序
  • 显示页面和项数设置
• 其他动作
  • 设置自适应视图
  • 设置变量值
  • 等待
  • 其他（在弹出窗口显示提示文字）
    • 在引用母版的界面，可以选择动作为（‘’其他‘’）
  • 触发事件（母版）
    • 在母版–>布局–>管理母版触发事件–>创建不同事件
    • 指定元件会引发的事件（自定义事件）
    • 在引用母版的界面，选择事件，并设置动作

十、 变量和函数

• 应用：光标移动处显示遮罩

• 对象

  • 当前元件，目标元件
  • 变量，中继器
  • 中继器数据集中的一行数据

• 属性

  • 宽，高，边界…
  • 字符串长度…

• 函数

  • 获得日期，获取绝对值，取整，取余…

• 局部变量

  • 使用场景多：比如中继器里添加行
  • 先创建,插入变量和函数
  • 只能作用于当前事件
  • 命名只能英文+数字，中文无效

• 全局变量

  • 适用范围广
  • 先创建（项目->全局变量->添加）
  • 可作用于整个文档，在任意界面调用或使用
  • 注意交互动作顺序

• 中继器的Item属性
  

  • isVisible
    • 设置中继器为多页显示
    • [[Target.text]] [[item.sal]](只有后者显示不全)

• 中继器的repeater属性
  

  • 搜索
    • indexof（‘searchvalue’，start）从左至右查询字符串在当前文本对象中首次出现的位置，未查询到则返回-1；

• 元件的属性
  

  • 注意获取的透明度是元件的透明度，而不是填充色的透明度

• 页面属性

  • PageName：获取当前页面的名称
  • 用于
    

• 窗口属性

• 鼠标指针
  

  • 应用： 比如滑动解锁

• 数字函数
  

• 字符串函数
  
  
  
  
  

• 数学函数

  • 进度条案例
    

• 日期函数
  
  

• 布尔运算