关于Axure的基础知识

基础操作

1.上和左有尺子📏可拉下来方便对齐

2.圆 等比例缩放 shift➕拖动

直线 45度变化 shift➕鼠标拉动

3.设置图片/矩形圆角 此图形上方小倒三角 拉动

关于Axure的进阶知识

交互动效（Interaction）

什么是Axure交互动效（Interaction）

原型图中，元件与页面的动态效果（dynamic behaviors）

例如：点击按钮跳转页面，鼠标悬停背景变色等

交互动效（Interaction）的构成

1.目标🎯（target） 谁触发交互？ 元件

2.事件（event）什么动作触发？ 鼠标单击/鼠标悬停

3.动作（action）触发后执行什么？跳转到x页面（跳转到某个页面/显示某个元件）

4.情形（case） 触发条件 条件（文字等于xx/变量值大于xx）

动态面板

1. 制作按钮🔘：状态1状态2分别制作，设置动态面板状态，单击时to下一个（跳转到下一个状态）并循环（循环的意思是点赞点一下变成已赞再点一下变成原来的点赞 以此循环♻️）
2. 手机页面的滚动：需要滚动的地方设置动态面板-样式-动态面板设置-垂直滚动
3. 轮播图：下一项 /向后循环 /向左滑动

元件的显示与隐藏

可实现弹窗 推拉 底部向上 等效果

弹窗：在评论区控件那里放热区，点击这个热区时候将另一个窗口弹出⏏️

灯箱效果：在演示时候周围变灰 且点击周围灰的地方 弹窗会复原

axure11关于弹窗组合要选中图片➕热区两个（先要两个进行组合！！）一起的文件夹📁（如下图）

 点击-发送按钮🔘-隐藏也是隐藏的键盘组合文件夹📁

元件的交互样式（style effect）

1️⃣鼠标🖱️悬停、按下

比如说鼠标悬停在元件上是蓝色 按下是橙色

这叫元件样式的变化

2️⃣元件选中、禁用

利用别的按键来控制你需要哪个元件选中不选中的样式

3️⃣元件焦点获取

文本框：当你选中时，文本框便获得了焦点

操作：

鼠标悬停：矩形—交互—添加样式效果—鼠标经过（鼠标悬停）—填充—绿色

外部阴影

鼠标按下：同上 

选中：首先要在元件上设置点击选中

交互-新增交互-单击-设置选中-当前元件（值-true）

要是想得到再点一下不选中就将到达（to）设置为切换

表格：

效果：鼠标悬停在某一行的时候是浅蓝色，点击是深蓝色

样式效果：鼠标悬停（鼠标经过）/选中各选择填充颜色 

⚠️注意 这只是后面的效果 还需要建交互！！

每行设置交互-单击时设置选中-当前元件（可复制）

地图变色：svg格式

设置鼠标悬停和选中效果

表单元件

1. 如需文本框或文本域内输入的文字距离左侧有一定的距离：选中元件-样式-边距-调整L值
2. 设置文本框默认文本：元件-交互-input type
3. 设置提示文本：hint text
4. 当在文本域输入时，边框变为蓝色的一个交互效果：获取焦点-边框-蓝色
5. 单按钮默认只能是选一个：将几个按钮选中-交互-关联单选按钮组-命名即可/将几个按钮选中-右击-关联单选按钮组
6. 单选/复选 实现选中之后为蓝色：选中多元件-交互-样式效果-添加样式效果-选中-边框颜色-蓝色（老师的是线段改色--根据各版本不同自行查看）效果如下

   变为

表格

制作方法：

1️⃣自带的表格

2️⃣单纯用矩形拼（可实现鼠标悬停到单行 单行发生特效的效果 使得交互更加有趣）

小tips：输入文本时候 用标题 然后换行输入 调节行间距为矩形的高

內联框架（Inline Frame）

使用内联框架可以嵌入视频、网页等

内联框架：

1. 嵌入外部：网页（视频、演示效果）
2. 嵌入内部：组合显示

1️⃣外部视频（axure会根据你的内联框架尺寸自动识别成web端）

拖入内联框架-双击-外部url-b站-分享-嵌入代码-将引号内复制下来

例如：<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=115168826624367&bvid=BV17vaZz4EJE&cid=32250528866&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

则只需要player.bilibili.com/player.html?isOutside=true&aid=115168826624367&bvid=BV17vaZz4EJE&cid=32250528866&p=1

点击下方的实现上方播放器播放新的

操作方法：热区-新建交互-单击/鼠标按下-在框架内打开链接-内联框架-选择页面-链接到外部url-复制链接（方法同上）

2️⃣内部

导航	背景
	内联框架（内嵌到背景里）

链接到内部页面 再加上点击菜单时候设置选中效果 增加交互

导航菜单（元件推拉-显示与隐藏）

效果如下图：

操作：下面客户功能、功能b2、b3组合并取名二级菜单，一级菜单功能bbb-新建交互-单击-显示与隐藏-2级菜单-切换-显示动画 向下滑动- special behavior-向下推动-推拉动画：摆动

设置鼠标悬停➕选中的填充效果

选中时候注意添加：单机-设置选中-当前元件

此时三个都会被选中

想要有只选中一个的效果别忘记设置选项组！

设置刚开始的菜单是折叠的

点击页面-新建交互-页面载入-显示与隐藏-二级菜单

关于高保真图的使用图标   

网站：iconfont 阿里巴巴矢量图标库

操作方法：下载⏬—复制svg代码—粘贴

图标变清晰/改颜色：点击图标—变换图片—转换svg为形状