Axure笔记


填入图片

1、拖拽部件库中的image到页面编辑框,填入图片时,显示“自动调整选框”



Axure笔记_第1张图片

是:保持原图片大小

否:将图片变形为图片框大小

为了方便显示,将图片位置设置为x:300 y:100

2、在填入某些图片的时候,图片太大太高清,显示警告框如下,选择“是”即可


Axure笔记_第2张图片

快捷键

1、ctr+鼠标滚轮放大缩小

2、Space+鼠标左键手型

3、shift+变形箭头<->等比例缩放

4、ctr+shift+拖拽复制粘贴


几何图形

1、控制圆角

·拖拽小三角形左右滑动改变圆角大小。


Axure笔记_第3张图片

2、改变几何图形


Axure笔记_第4张图片



打组:相对位置保持不变的做好的部件可以先打组。(左边组合,右边取消组合)

要选择组合中的部件不必取消组合,先击部件组合,再点击要目标部件即可


左对齐、水平居中、右对齐、顶端对齐、垂直居中、底端对齐

注意:先选中参考部件,再选中对齐部件。

例如:要保持背景图像不动,小图标在背景图像中水平居中显示

先选中背景图像,再选中小图标,然后再点击水平居中。


置于顶层,置于底层,上移一层,下移一层

注意:后面置于顶层的要比前面的更高一层

动态面板中置于顶层只能动态面板中的顶部。


交互


一、动态面板交互

1、交互目标页面和目标动态面板必须命名便于区别,点击部件管理中的漏斗符号


Axure笔记_第5张图片
Axure笔记_第6张图片

 2、点击部件交互和注释中的交互事件,编辑交互效果。

Axure笔记_第7张图片

先选择交互动作,再配置动作。


Axure笔记_第8张图片

3、动态面板


Axure笔记_第9张图片

a、记得右击两下部件管理中的动态面板及state1更改名字,单击State1微信主界面进入动态面板编辑。


Axure笔记_第10张图片

动态面板:相当于一个什么也没有的线框容器

动态面板可以有很多种状态State,通过部件交互来切换状态

b、进入动态面板:双击状态

隐藏动态面板:单击动态面板旁边的按钮


c、新增状态

新增和复制


Axure笔记_第11张图片


d、可选中部分控件,将它转化为动态面板,并且可以修改动态面板的大小

4、热区hot spot

热区框选范围,将范围内部件组合成为共有一个交互的部件


Axure笔记_第12张图片
Axure笔记_第13张图片 Axure笔记_第14张图片

5、部件简单交互:右击部件->交互样式


Axure笔记_第15张图片

二、交互动作详解

案例一:沿y轴拖动动态面板

1、选中动态面板的交互:拖动动态面板时


Axure笔记_第16张图片
Axure笔记_第17张图片

选择动作为:移动

选择目标动态面板:微信内容面板

配置移动动作:y轴移动

2、设置弹回。

     利用rectangle建立顶端参考线(位于面板最顶部)和底端参考线(底部)。


Axure笔记_第18张图片
Axure笔记_第19张图片

选中触发动态面板:结束拖放动态面板时

新增条件:选择部件范围-顶部参考线

选择交互动作:部件-移动

选择目标动态面板:微信内容面板

配置移动动作:移动到绝对位置(动态面板的初始位置)


3、设置ELSE IF-IF

类似2,双击结束拖动动态面板时建立用例2,设置当动态面板触发到底部参考线时的交互效果。


Axure笔记_第20张图片

最后,注意,建立完用例2后,右击用例2,将ELSE IF切换为IF

4、动作也可以复制粘贴

直接右击用例中的动作-复制,然后粘贴到其他用例中,不要复制用例。

Axure笔记_第21张图片

5、母版:常常用到的部件组合模块可以转化为母版(右击,转换为母版)

要用的时候,直接从母版管理框中拖拽到页面,然后从母版中脱离即可

6、分割图像:右击,分割图像,刀子一下,选中不要的区域,delete

你可能感兴趣的:(Axure笔记)