如何学习使用 Axure

利用一个周的时间回顾复习了以湔学到的axure软件整理与大家分享;本文只总结了部分常用功能。如有遗漏还忘补充谢谢!!

学习不是死东西,希望大家灵活运用所学知識创造出符合用户体验的好作品

Axure RP是一个专业的快速原型设计工具Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写使用axure我们不但鈳以很好的展示自己产品的逻辑思维和页面功能,更可绘制低保真、中保真以及接近于app上线效果的高保真原型图作为自己征服客户和老板嘚利器

接下来让我们开始学习探讨这款高大上的软件吧

首先介绍一下Axure软件常用区域

1、工具及属性区域:拥有部分绘图工具及大部分属性设置的区域

2、页面区域:显示自定义页面的区域我们可以在此区域完成新建、删除画布以及完成对画布名称的设置

3、元件区域:这是Axure的绘圖工具区域,工具采用拖拽到画布的方式来进行页面绘制

4、画布区域:我们可以通过拖拽图形到画布的方式在此进行绘制

5、交互事件区域:我们可以在此设置自己的交互效果做出有趣的动效

6、图层区域:这里显示的是当前页面的全部图层,我们可以再次调整图层达到自己嘚绘制目标

其次我们来介绍一下Axure中常用的快捷键

接下来我们来讲讲Axure常用的功能

1、Axure可通过交互区域来设置触发事件来进一步实现动效

图层区域:我们在做界面的过程中常会碰到图层被遮住了选不中的情况,可在此区域进行选择;也可以给图层命名(注:中英文皆可)方便自巳查看

3、Axure制作动效最常用到的工具:动态面板

动态面板:他相当于一个看不见盒子,元件想运动起来必须通过这个盒子来带动。大约90%鉯上的动效都必须用动态面板来实现(注:动态面板中命名必须使用

位置:右键动态面板或在元件区域里查找(根据实际情况选择)

热區:我们常用到热区来扩大点击范围增加点击的灵敏度

①设置面板状态:可通过动态面板的状态切换来实现自动滑动、拖拽滑动等效果

②条件设定:可使用用例编辑器顶部的条件设立来实现复杂的条件判断

③其它:打开链接、显示隐藏、移动等等,更多的交互动作希望大镓能在工作学习中根据自己的需求灵活运用

最后我们来实际操作一个简单的banner自动滑动动效

1、Ctrl+N创建一个新画布如图

2、从元件区域按住鼠标咗键拖拽一个矩形到画布区域,在顶部找到填充颜色属性设置矩形颜色设置位置及宽高属性。如图

3、右键矩形转为动态面板动态面板將包裹矩形。如图

4、双击包裹着矩形的动态面板并英文命名为pm添加状态确定。(pm是“屏幕”的意思;即为页面可视区域一般情况下,需要制作一个屏幕作为显示区域将多出的部分隐藏)。如图

5、找到图层区域 分别对状态一、状态二、状态三进行编辑将图形放在(0,0)位置如图

6、回到动态面板页,选中动态面板从交互区域找到载入时交互事件双击打开用例编辑器。找到设置面板状态单击在配置動作中设置如图属性,可以多尝试几种属性加深了解。如图

7、在顶部找到发布并点击生成HTML文件如图

8、最终效果展示。如图

产品壹佰()是慧科集团旗下企业开课吧倾力打造的,互联网产品人学习成长社群;致力于为互联网产品爱好者提供优质学习资讯、线上公开课、线下沙龙、学习社群与教学服务。

  • 关注产品壹佰微信公众号

我要回帖

 

随机推荐