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

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元件相关知识,都是基础教程,给新手学习参考。

(0)

相关推荐

  • 如何在Axure中创建自己的元件库

    Axure最核心的功能就是通过原件的堆积,形成目标效果.网上目前有大量免费的各种"最全axure原件大全"之类的,里面的内容非常多且杂,很多其实都用不到,对于选择恐惧症来说,这么多 ...

  • Axure RP中的网页元件怎么显示与隐藏?

    用Axure设计的过程中,有时候元件太多,看起来很乱的感觉,这个时候我们都会想把它们都隐藏起来,下面请看详细操作步骤 1.下图是我画的一个矩形 2.选中要隐藏的元件 ,点击下图所示的右上角,将“隐藏” ...

  • Axure母版怎么使用? Axure母版功能详细介绍

    Axure RP设计网页的时候,如果后续要改动的时候工作量就比较大,这时候就需要使用母版功能,下面我们就来看看详细的教程. 1.先正常安装Axure RP工具,并且对该工具有一定的基础,对于一些基本的 ...

  • Axure怎么使用热区? axure热区的使用方法

    Axure中有很多功能不是很常用,今天我们就来介绍Axure中热区的使用方法. 1.热区鄙人暂时还没有太深入研究,但是还是感觉有些有点,比如图例中,并排横向有三个名片,若是要求点击邮箱,进入联系页面( ...

  • Axure怎么设计网页的登陆页面?

    Axure是一款功能强大的交互设计软件,作为产品小白入门时的必学软件,从做一个登录界面开始展开我们的学习历程. 这里我用的是Axure RP 8为大家演示如何制作一个登录界面.作为一个学习分享,如果有 ...

  • 如何在Axure中使用FontAwesome字体图标

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. FontAwesome应用在web网页开发中非常方便, ...

  • 最详细的教程axure新手入门:[1]Axure教程

    首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便.另外,因为汉化版本可能功能名称等略有差别,请自行理解. 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽 ...

  • Axure怎么查看页面的代码? Axure查看页面源代码的两种方法

    Axure中有两种方法可以查看代码,第一种使用浏览器开发者工具,第二种导出html5页面文件,下面我们就来看看详细的教程. 方法一: 1.选择发布--生成html文件,快捷键是F8: 2.选择一个文件 ...

  • Axure常用的快捷键有哪些? Axure 8快捷键汇总

    Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图.流程 ...