Axure简单介绍:
Axure即为原型(prototype),这个词来自拉丁文的词proto,意谓“最初的”,意义是形式或模型。那么Axure有什么用呢?
Axure RP是一款专业的快速原型设计工具。通俗易解地讲就是帮助使用者可以快速的构造出我们需要的网页示意图、流程图、演示的网页文件等,可以在我们做项目前为我们大概地演示大体的框架页面,方便我们后面有序的设计出项目。
Axure这个软件功能强大,可以做出很多交互功能,得到我们需要的交互效果,可以直接通过拖拽画出原型、生成网页; Axure这个软件效果高,可以用快捷方便的方式,很快模拟出高保真页面原型。
Axure的安装与汉化:
安装:
Axure安装可以在以下网址下载,或者自行百度下载。
https://www.axure.com.cn/
选择适合自己的版本,目前已经更新到了第十版本,推荐使用本人正在使用的第九版本,因为比较稳定。直接跟着next走安装完成即可。
汉化:
汉化包可以在以下网址下载,,或者自行百度下载。
http://www.chanpinban.com/downloads/##
下载好之后呢会得到如下图所示的汉化包:
之后只需要把lang整个文件夹复制到你下载好的Axure的文件夹里面就可以了。这时候打开你的Axure就可以得到中文版的Axure了。
Axure的简单使用
通过Axure这个软件生成和打开的文件的后缀名是 .rp,
而一般Axure可以通过三种方式向人们展示:
1、直接保存导出.rp文件;
2、导出图片的方式:菜单栏——>文件——>导出图片
3、生成HTML方式:菜单栏——>发布——>生成HTML文件
(可能有些同学就会想着投机取巧代码直接用Axure生成不就好了吗?但是!生成的HTML代码会非常的凌乱,而且不利于后面的更改、接后台数据等,所以一般不建议采用第三种方式。)
接下来我们来简单的使用Axure吧。
新建元件库:
点击左上角的文件可打开或者新建元件库
管理元件库:
在页面中我们可以新建文件夹来管理我们的元件库
元件:
在左下角有系统自带来的基本元件,当然也可以导入我们需要的元件。在元件框右上角有个+号,点击可以导入我们需要的元件。
使用:
将你需要的元件通过鼠标拖拽来到我们的设计区域
在左边和顶部可以看到有x轴(自左向右)和y轴(自上向下),一般我们设计图片要注意xy轴的位置来设计我们需要的页面版式。
通过放大缩小也可以改变我们xy轴的大小距离。
点击右上角的预览可以在网页中看到我们设置的元件
例子1:from表单
1、在元件库中选择你需要的元件拖拽进入工作区域
2、下拉框
双击下拉框即弹出编辑列表,添加选项即可。
3、单选按钮
同时选中按钮,在交互中给予单选按钮组设置值,单选即可实现。
母版:
母版即是我们设定一个模板,把该模板的东西copy给其他子版。
如果需要修改,需要在母版中修改,无法在子版修改,在子版修改的话系统会自动跳到母版页面。
使用母版可以方便我们快捷的使用母版的东西去量产,迅速的生成页面。
母版的使用:
添加母版:
这时候我们将母版中的东西复制到子模版(page1)中,鼠标右键选择 “添加到页面中”
在弹出的添加母版框中选择子模版
这时候我们在子模版(page1)中可以看到和母版一模一样的内容
如果你需要修改,那么去到母版中修改即可。
交互:
交互的介绍:
交互即是通过我们设定元件的事件,给予动作(如:鼠标点击、键盘敲击)来完成我们需要的效果。比如点击一个方框或者按钮元件去弹出另外的一个元件。
交互的使用:
1、交互可以通过选中元件在右边弹出的交互框设置
2、也可以选中元件,鼠标右键选择交互样式进行设置
例子2:
我们要求通过鼠标点击圆形而使得方框消失。
1、选中圆形添加交互事件,选择显示/隐藏。
选择我们需要出发的元件目标,这里即是我们需要的矩形。
可以设置动画、时间间隔,这里我们设置向上滑动、500ms时间间隔,并确定。
这里可以看到我们设置完成的交互样式。
当然我们也可以通过交互编辑器设置我们的交互样式,双击我们的事件既可进入。
接下来我们去页面看看效果吧。
当我们点击圆形的时候,矩形消失了。
我们简单的交互就完成了。其他的交互动作你也可以去尝试一下,更有更多丰富的交互动作。
成品展示:
接下来看一下我今天的成品吧——红包
点击“开”使用了交互动作,把封面隐藏,红包显示出来。
提现按钮添加了交互中的连接,可以跳转你需要的页面,下面的分享QQ、连接、粘运气同。
总结:
Axure是前端中一个非常简单的设计软件,可以帮助我们快速的设计出我们需要的网页页面的大概模型,这样我们在做项目时有个模板参照,写起来逻辑性强,就会达到事半功倍的效果了。
Axure是前端学子的必须掌握的软件之一,而且入手门槛低。
————————————————
版权声明:本文为CSDN博主「小贤的前端」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wen110898/article/details/119181718