Axure有哪些元件? Axure元件介绍以及使用

所属分类: 软件教程 / 图形图像 阅读数: 1550
收藏 0 赞 0 分享

Axure有哪些元件?经常使用Axure设计网页原型,下面我们就来看看Axure元件的使用方法。

一、矩形等各种形状的使用

1、添加元件到画布

在左侧元件库中,选择想要使用的元件>>按住鼠标左键不放拖入画布中

2、设置元件尺寸及位置

元件的位置与尺寸的调整有三种方式:直接拖拽调整、工具面板输入数值调整、检视功能区下的样式中修改

3、给元件命名

当我们使用到的元件非常多时,建议给每一个使用到元件进行命名,方便后期选择与修改。

4、设置元件的显隐

当一开始我们不要某个元件显示时,我们可以先将其隐藏,在需要时再让其显示。

5、设置元件填充色

6、设置元件阴影及边框样式

7、设置元件圆角

8、设置元件的水平/垂直翻转

9、设置元件的不透明度

元件的不透明度包括填充色不透明度和边框色不透明度两部分,在将填充以及边框样式的时候我们有提到,这里说另外一种方式。

10、设置字体、字号

11、设置行间距、项目符号以及段落对齐形式

12、设置元件文字填充

填充在这里指元件内文字与形状边缘之间填充的空隙。

13、设置元件/文本角度

14、设置文本链接

对于一段文字或者几个文字我们可以为其设置链接。例如,注册页中的用户协议、隐私条款。

15、改变形状元件的形状

16、给元件设置交互样式

在网页端,当鼠标移动到一个可以交互的文字或者button上时,我们需要给用户一个及时的反馈,这时候就需要对元件的在鼠标悬停下的交互样式进行设置。另外,需要时我们还可以设置元件选中、禁用和鼠标按下时的交互样式。

17、将元件转换为图像

一般情况下我们很少这样做,当元件中包含特殊字体时,为了避免在不含该字体的设备上浏览出错我们可以考虑将其转换为图片。

18、设置元件默认状态为禁用/选中

二、文本框

1、改变文本框为密码/文件等

2、给文本框设置提示

文字并修改提示样式一般在注册或登录一个网站/app时都会有关于注册的用户名及密码的说明文字,这部分说明文字就可以称之为提示文字。

3、设置文本框提示

触发提示触发是针对文本框中的提示文字的,关于何时提示文字被隐藏。

4、限制文本框的输入字符数

 

三、图片

1、插入本地图片

Axure RP自带图片元件,通过这个元件,我们可以添加本地图片到页面中。

操作方法是:将左侧元件库中的图片拖入到画布中>>双击图片图片元件。另外,也可以直接将本地照片拖入软件页面中。除了添加静态图片,还可以添加动图。但是要注意添加的动图大小一定不要太大,否则将无法正常显示。动图的添加方式与静态图片的添加方式基本一致。

2、在图片上插入文字

回忆之前我们讲到的给形状元件添加文字的方式为:双击形状元件。而对于图片,我们知道双击为插入本地图片。所以给图片添加文字的方式为:选中图片>>右击>>编辑文本。

3、分割图片

选中图片元件后,右击,在弹出的右键菜单中找到“分割图片

使用分割后,图片被分成几个部分。

4、裁剪图片

选中图片元件后,右击,在弹出的右键菜单中找到“裁剪图片”。

5、如上图,选择裁剪工具后右上角会出现四个选项:1. 裁剪、剪切、复制、取消。要注意裁剪、剪切、复制的区别。

四、列表框

下拉列表框中添加选项的方式如下图所示。列表框中选项的添加和删除是同样的操作。

五、单选按钮

设置单选按钮唯一选中

前面我们有介绍到单选按钮一般是两个或多个一起使用,那么该如何设置单选按钮唯一选中呢?这里我们以常见的性别选项来示例。

六、内联框架

1、利用内联框架嵌入网络视频

除了上述图片中的方法,还可以在“检视>>属性”下找到“选择框架目标”,同样会弹出上图中的“链接属性”面板。

2、设置预览图片

利用内联框架链接时,我们可以根据需要设置不同的预览图片,给用户一个预知提醒。

3、设置边框及滚动条

七、页面设置

不选中任何元件的情况下,在“检视>>样式”下可以对页面的样式进行修改,包括页面排列形式、背景颜色、背景图片及背景图片的对齐方式和重复形式,另外还有页面草图效果的设置。

八、查看原型

1、预览原型

在制作的过程中,画布中显示的效果并不是实际用户看到的效果,这就需要我们可以实时预览,Axure也提供了这种功能。

预览的快捷键为:F5。或在菜单栏进行如下操作“发布>>预览”。

此外,也可以对预览进行设置,操作说明如下图所示。

2、生成原型

生成原型一般生成的为HTML文件,快捷键为:F8。或进行如下操作“发布>>生成HTML文件”。弹出的“生成HTML”窗口与预览及预览设置窗口类似,这里不做介绍。

当我们只需要生成一部分页面时,我们可以选中上图弹窗中的“页面”选择需要生成的页面。

以上即是Axure元件相关知识,都是基础教程,给新手学习参考。

相关推荐:

axure8.0怎么使用元件库及母版?

Axure RP 8怎么控制矩形元件颠倒旋转?

Axure RP 8椭圆形元件怎么设置透明度阴影等属性?

更多精彩内容其他人还在看

如何利用后期打造出唯美灰色调

对于一张RAW格式的原片,你不能过曝,RAW的宽容度高,所以可以适当欠曝保留画面的细节,如何利用后期打造出唯美灰色调呢?下面就一起来看看吧
收藏 0 赞 0 分享

怎样使用曲线让画面更柔和技巧

怎样使用曲线让画面看起来更柔和呢?下面就和小编一起来学习一下吧,希望会对大家有所帮助的
收藏 0 赞 0 分享

CorelDraw X5的7个加速设置

这篇文章主要介绍了CorelDraw X5的7个加速设置,需要的朋友可以看看
收藏 0 赞 0 分享

光影魔术手素材中心怎么用

光影魔术手是国内最受欢迎的图像处理软件,被《电脑报》、天极、PCHOME等多家权威媒体及网站评为2007年最佳图像处理软件
收藏 0 赞 0 分享

美图秀秀自动抠图功能使用教程

很多人觉得抠图即考验耐心又考验技术,其实未必哦!美图秀秀的自动抠图功能让抠图操作变的省心省力,只需要鼠标在图片上划两下,想要的部分就自动抠出来了
收藏 0 赞 0 分享

Photoshop CS4无法关联.psd文件情况的解决办法介绍

Photoshop CS4无法关联.psd文件的主要现象表现在每次要打开一个.psd文件都要先打开Photoshop主程序,再Ctrl+O找到要打开的文件,这样不仅繁琐,而且降低了我们的工作效率。本文为大家介绍可以解决此问题的方法
收藏 0 赞 0 分享

美图看看完美呈现《霍比特人2》魔幻场景

“戒迷”们翘首期盼的《指环王》前传第二部《霍比特人:史矛革之战》终于上映了!这一部电影讲述了霍比特人比尔博
收藏 0 赞 0 分享

怎么使用iSee图片专家制作摇滚朋克风海报

今天教大家怎么使用iSee图片专家制作摇滚朋克风海报,喜欢的朋友可以一起来学习
收藏 0 赞 0 分享

光影魔术手中怎样批量压缩图片的图文详细教程

在外出旅游的时候,如果照相设备比较好,那么照出来的照片文件往往会很大,但是我们后来为了便于保存,或者是想上传到网上论坛上面的时候
收藏 0 赞 0 分享

光影魔术手怎么打马赛克

nEO iMAGING是一个对数码照片画质进行改善及效果处理的软件,如何使用光影魔术手打马赛克
收藏 0 赞 0 分享
查看更多