Axure的元件库的使用以及详细案例

news2024/11/23 15:24:36

目录

元件库的使用

元件介绍

 元件的基本使用

 矩形、按钮、标题的使用​编辑

 图片的使用

图片以及热区的使用

表单元件的使用

 表格元件的使用

登录界面

个人简介界面


元件库的使用

元件介绍

Axure提供了一套丰富的元件库,用于快速创建原型中常见的UI界面元素和交互组件。

  1. 基本元件库:包含了常见的基础UI元素,如文本框、按钮、复选框、下拉列表等。这些元件可用于创建界面的基本组件。

  2. 表单元件库:包含了与表单相关的元素,如单选按钮、复选按钮、文本域、日期选择器等。这些元件可用于创建表单界面和用户输入交互。

  3. 导航元件库:包含了各种导航和菜单相关的元素,如导航栏、侧边栏、标签页、面包屑导航等。这些元件可用于创建页面导航和页面结构布局。

  4. 数据展示元件库:包括了数据展示相关的元素,如表格、列表、卡片、图表等。这些元件可用于展示数据和信息的方式。

  5. 弹出层元件库:包含了弹出层、对话框、提示框等元素,用于模拟用户与系统的交互弹出。

  6. 手势和动画元件库:包含了手势和动画相关的元素,如滑动效果、展开/收起效果、过渡效果等。这些元件可用于模拟用户的手势和创建动态交互效果。

 元件的基本使用

基础元件在 Axure RP 中分为以下几大类:

1.按钮元件(Button Widgets):包括按钮、链接按钮、复选框、单选框、开关等交互元素。

2.输入元件(Input Widgets):包括文本输入框、密码输入框、下拉框等用于用户输入的元素。

3.文本元件(Text Widgets):包括标题、段落、标签等用于展示文本内容的元素。

4.图片元件(Image Widgets):包括图片、图标等用于展示图像内容的元素。

5.容器元件(Container Widgets):包括面板、列表、表格等容器类型的元素,用于组织和布局其他元素。

6.导航元件(Navigation Widgets):包括菜单、导航栏、面包屑等用于导航的元素。

7.多媒体元件(Media Widgets):包括视频播放器、音频播放器等用于展示多媒体内容的元素。

 下面是基本元件:下面的黄色框基本上是一样的不过换一个样式即可,当需要某个元件时拖拉拽即可

 

 矩形、按钮、标题的使用

 图片的使用

支持多种图片格式:Axure支持导入多种图片格式,包括PNG、JPEG、GIF等,可以根据需要选择最适合的格式。

可以设置图片尺寸和位置:在Axure中,可以自由调整图片的尺寸和位置,以适应不同的设计需求。

可以添加链接:如果需要将图片作为超链接使用,可以在Axure中为图片添加链接,实现点击图片跳转到指定页面或网址的功能。(进阶玩法)

可以添加交互效果:通过Axure的交互设计功能,可以为图片添加鼠标悬停、点击等事件,实现各种交互效果。

支持图片样式调整:Axure中的图片元件也支持样式调整,用户可以设置边框、填充、阴影等属性,增强图片的视觉效果。

图片以及热区的使用

  • 拖击图片至显示区,然后双击在本地选择图片即可
  •  热区就是将热区放在特定的位置,再给热区设置交互时间,只有点击热区的范围内才会有设置的交互时间,其它地方没有

表单元件的使用

  • 文本框就像输入框一样,而文本域就是放大型的文本框,只要拖拉拽即可,二者的提示词在  右边的交互设计那里的提示里面
  • 下拉列表和列表框将其拖入待显示区之后双击即可编辑其内容
  • 复选框和单选框类似,但是因为单选框顾名思义只能选择一个,将单选框拖入显示区之后右击选择指定单选按钮组即可

 表格元件的使用

登录界面

利用Axure中的各种元件绘制的登录界面

 浏览器展示

个人简介界面

浏览器效果展示

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1306290.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

geemap学习笔记025:为地图中的底图数据添加颜色条(colorbar)

前言 为地图中的数据添加颜色条,有利于辅助地图的使用,本节就介绍一下如何在底图数据中添加颜色条。 1 导入库并显示地图 import ee import geemapee.Initialize() Map geemap.Map() Map2 添加普通颜色条以及分类颜色条 Map geemap.Map()dem ee.I…

深度学习中的各类评价指标

深度学习中的各类评价指标 1 Dice Loss2 Precision(精度)3 Recall(召回率)4 F-Score5 mAP 1 Dice Loss Dice Loss,也叫Soft Dice Coefficient,是一种用于图像分割任务的损失函数。它基于目标分割图像与模型…

希亦|鲸立|小吉内衣洗衣机好用吗?强势PK“洗护一体”王者!

随着人们的生活水平的提升,越来越多小伙伴来开始追求更高的生活水平,一些智能化的小家电就被发明出来,而且内衣洗衣机是其中一个。我们对内衣裤的清洗频次会高于普通衣服,大多数人会选择手洗内衣裤,都在手洗过程不仅会…

用户管理第2节课 -- idea 2023.2 创建表

一、懂得 1.1编码格式是防止乱码的,utf-8是完全够的,那几个基本没差别 网址: 【IDEA——连接MySQL数据库,创建库和表】_idea中数据库-CSDN博客 这些是MySQL数据库中的一些术语,可以简单解释如下: 1、col…

DICOM 文件中,VR,VL,SQ,图像二进制的几个注意点

DICOM 文件的结构,在网上有很多的学习资料,这里只介绍些容易混淆的概念,作为回看笔记。 1. 传输语法 每个传输语法,起都是表达的三个概念:大小端、显隐式、压缩算法 DICOM Implicit VR Little Endian: 1.2.840.1000…

现代岩土工程监测的利器:振弦采集仪

现代岩土工程监测的利器:振弦采集仪 振弦采集仪是一种用于工程监测的先进仪器,主要用于测量结构体的振动和应力变形情况。它采用振动传感器和数据采集系统相结合的方式,可以实时监测和记录结构体的振动频率、振幅、振动模态等参数&#xff0…

Linux----内核及发行版

1. Linux内核 Linux内核是操作系统内部操作和控制硬件设备的核心程序,它是由芬兰人林纳斯开发的。 内核效果图: 说明: 真正操作和控制硬件是由内核来完成的,操作系统是基于内核开发出来的。 2. Linux发行版 是Linux内核与各种常用软件的组合产品&am…

智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于水循环算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.水循环算法4.实验参数设定5.算法结果6.参考文…

【Proteus仿真】【51单片机】定时智能插座开关

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器,使LCD1602液晶,DS18B20温度传感器、按键、蜂鸣器、继电器开关、HC05蓝牙模块等。 主要功能: 系统运行后,LCD1602显示…

内网服务器部署maven私服简记

前言 很多企业希望创建自己的maven私服,但服务器无法和外网连通,所以这里介绍一套完整的内网部署nexus的解决方案。实现的方式也很简单,将下载好的nexus安装和项目所需的依赖仓库都上传到服务i去上去,通过脚本的方式实现批量导入…

【Spark精讲】Spark任务运行流程

Spark任务执行流程 部署模式是根据Drvier和Executor的运行位置的不同划分的。client模式提交任务与Driver进程在同一个节点上,而cluster模式提交任务与Driver进程不在同一个节点。 Client模式 Clinet模式是在spark-submit提交任务的节点上运行Driver进程。 …

Dockerfile部署Java项目挂载使用外部配置文件

Dockerfile部署Java项目挂载使用外部配置文件 技术博客 http://idea.coderyj.com/ 需求是由于java项目使用的是nacos 而且每次部署nacos服务器ip不一样导致要重新打包,想引入外部配置文件进行打包 1.需求是由于java项目使用的是nacos 而且每次部署nacos服务器ip不一样导致要重新…

16ASM 汇编基础与Debug使用

目录 硬件运行机制 微机系统硬件组成 计算机系统组成 8086CPU组织结构 DoxBox安装 Debug使用 R命令 D命令 E命令 U命令 T命令 A命令 标志寄存器 常用机器指令 硬件运行机制 下面是一个电子器件二极管,正向加电则通,反向加电则不通 利用二…

Android : 序列化 Serializable 简单应用

1.Serializable 介绍: Serializable 是 Java 中的一个接口,它用于标记一个类或对象可以被序列化(即可以转换为字节流以便在网络上传输或在磁盘上持久化)。 当一个类实现 Serializable 接口时,它的对象可以被序列化,这…

AI创新之美:AIGC探讨2024年春晚吉祥物龙辰辰的AI绘画之独特观点

🎬 鸽芷咕:个人主页 🔥 个人专栏:《粉丝福利》 《linux深造日志》 ⛺️生活的理想,就是为了理想的生活! 文章目录 引言一、龙辰辰事件概述二、为什么龙辰辰会被质疑AI创作?1.1 AI 作画的特点2.2 关于建行的合作宣传图…

命令执行RCE及其绕过详细总结(17000+字数!)

目录 操作系统连接符&#xff1a; 常见函数&#xff1a; 绕过过滤&#xff1a; 空格过滤绕过&#xff1a; 1、大括号{}&#xff1a; 2、$IFS代替空格&#xff1a; 3、重定向字符<&#xff0c;<> 4、%09绕过&#xff08;相当于Tab键&#xff09; 文件名过滤绕过…

FPGA使用乘法的方式

FPGA使用乘法的方式 方法一:直接使用乘法符“*” 源代码 module multiply(input [7:0] a,input [7:0] b,output wire [15:0] result);(*use_dsp48 = "yes"*) wire [15:0] result;assign result = a*b; endmodule仿真代码 module multiply_tb();reg [7:0] a; re…

讲座 | 颠覆传统摄像方式乃至计算机视觉的“脉冲视觉”

传统相机拍摄视频时其实是以一定帧率进行采样&#xff0c;视频其实还是一串图片的集合&#xff0c;因此低帧率时会觉得视频卡&#xff0c;拍摄高速运动物体时会有运动模糊等等问题。然而你能想象这一切都可以被“脉冲视觉”这一前沿技术改变吗&#xff1f; 今天下午听了北京大学…

Vue3-03-reactive() 响应式基本使用

reactive() 的简介 reactive() 是vue3 中进行响应式状态声明的另一种方式&#xff1b; 但是&#xff0c;它只能声明 【对象类型】的响应式变量&#xff0c;【不支持声明基本数据类型】。reactive() 与 ref() 一样&#xff0c;都是深度响应式的&#xff0c;即对象嵌套属性发生了…