关于Axure RP的一些学习小记录

• 最近有在学习Axure RP的使用与开发，Axure RP是一个专业的快速原型设计工具，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

---

Axure >> 原型工具，使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等。
通过Axure可以做到：
1、绘制交互图
点击按钮之后出现一块内容，可以出现交互效果，有着 “高保真 ” 的特点。
2、 静态网页【 没有数据交互】
可以绘制静态网页。有些网页由静态网页设计师通过设计原型图，然后转换成html+css代码，再通过js技术去获取后台数据。

而前端工程师掌握这门技巧，也是有所助益的。

当然常见的 Photoshop 工具也可以制作静态的图片，这个是属于UI设计师运用范畴内。

---

Axure之操作型

• 1.其他元件

  拖拽式展示即可。但是需要注意图片元件的使用，注意单选按钮元件的使用，如何产生互斥行为。

• 2.交互样式(仅对当前元件的样式进行更改)

  选中元件，鼠标右键，选择【交互样式…】，选择交互触发类型，选择要更改的交互样式。使用交互样式可以实现鼠标悬停更改字体颜色大小等效果。

• 3.交互动作(带有逻辑性)

   选中元件，在右侧交互面板选择交互事件类型，设置动作
  

  使用交互事件实现元件或元件组的显示与隐藏。

• 4.交互情形(带有逻辑性)

   设置交互动作，在交互动作中添加情形并设置情形对应的动作。
   即当某个元件的值满足条件A的时候则做A动作，满足条件B的时候则做B动作。
  

• 5.动态面板实现选项卡功能

  动态面板有多个状态，每个状态对应不同的内容，可以给每个状态中添加内容；再给元件绑定点击事件设置动态面板的状态；然后添加交互动作，就可以通过切换动态面板状态实现切换内容的效果。

• 6.母版
  模板是对项目中公共内容提取：
  1）定义母版
  2）将母版应用到页面中，在模板上右键，选择【添加到页面…】
  只要修改母版，每个页面的母版内容就会改变

---

7.中继器（动态表格） 【重点注意！】

---

中继器的操作主要用于动态表格

• (1)列表显示

  双击中继器设置重复的样本；选中中继器在样式里设置初始化显示数据；设置ItemLoad事件的操作。

• (2)删除行

  在样本中的删除按钮上绑定点击交互事件，选择删除行的操作，选择操作的中继器。

• (3)分页

  在中继器的样式里分页面板，可以设置分页显示。给上一页和下一页按钮绑定点击事件，选择中继器中的【设置当前选择页面】，在【页面那里选择下一页】。

• (4)新增

  绘制模态框，默认设置隐藏。

  用户点击新增按钮，模态框显示，用户输入数据，点击确定按钮，填充数据到数据集中(注意设置局部变量)，模态框关闭

  用户再次点击新增按钮，模态框的时候，模态框内有上次填充的值，需要清空，给新增按钮的点击交互里添加动作【设置文本】，设置要清空的元件的值为空。

---

附注说明：

前面设定的搜索功能实在有些刻板，对搜索条件进行了硬性规定，无法进行一个相似搜索。所以我们拓展学习了关于 “模糊搜索” 的操作方法。

模糊搜索，顾名思义就是指被搜索信息和搜索提问之间存在一定的差异，通过这种差异可以"模糊"地在搜索中找出含有搜索相关的内容。
例如，查找花这个字的时候，就会找出与之相似的桃花，梅花， 桂花，荷花等。

具体操作就是在动作选择【新增过滤器】，规则设置为字符串的indexOf>-1

具体设置如下：

 通过设置一个局部变量来代表搜索框内容，再通过字符串中的具体函数操作来查找搜索， [[Item.content.indexOf(value)>-1]]。

操作说明：

 字符串中选择了indexOf功能 [[Item.content.indexOf(value)>-1]]查找value所在位置的下标位置，找出搜索信息。
  查找过程举例：
    var str = '内容测试';
    str.indexOf('内容')   //0
    str.indexOf('容')   //1
    str.indexOf('测试')   //2
    str.indexOf('hello')  //-1

• 以上内容是在相关学习过程中，将老师上课所讲的内容汇总形成的笔记与见解，如有不足之处，欢迎大家进行指正与探讨。