Axure 9基本元件,表单及表格元件简介,表单案例

目录

一.基本元件

1.元件基本介绍

2.基本元件的使用

二.表单及表格元件

三.表单案例

四.简单简历绘制


一.基本元件

1.元件基本介绍

概述

-  在Axure RP中,元件是**构建原型图的基础模块**。 将元件从元件库里拖拽到画布中,即可添加元件到你的原型图中。
- 软件自带了三个官方元件库,分别是默认元件库(Default)、流程元件库(Flow)和图标元件库(Icons)。

元件操作 方法

- 使用:如果想使用某个元件,我们只需要将它从元件库中拖入画布摆放即可。

- 对齐:默认情况下,两个矩形元件并排摆放,中间的边框为两条边框的宽度,如果想保持一条边框的宽度,需要在【偏好设置】中,进行【元件对齐】的设置。
- 旋转:元件的旋转可以通过按下<Ctrl>键的同时,拉动元件任意一个边界点来实现。旋转之后,可以通过右键菜单【变换形状】-【重置文本到 0°】 
- 圆角:矩形元件可以编辑圆角,通过鼠标指针拖动矩形左上方的小三角形图标即可改变圆角的大小。  
- 改变形状:形状类元件都可以通过点击鼠标右键,在菜单中通过【选择形状】将当前形状改变为其他形状。 
- 改变尺寸:可以通过鼠标指针拖动元件的边界点任意改变
-  元件的尺寸;也可以按住<Shift>不放,同时鼠标指针拖动元件边界点等比改变元件的尺寸。 
- 复制元件:通过鼠标右键菜单的【复制】与【粘贴】,或者使用通用快捷键<Ctrl+C>键与<Ctrl+V>键可以完成画布间或者软件间的复制粘贴操作;同一画布中,可以通过<Ctrl+D>键进行复制;或者,按住<Ctrl>键不放,拖动元件到新的位置松开,完成复制与摆放的操作。   
- 编辑文字:部分元件可以添加文字内容。在未开启单键快捷键功能时,直接输入即可替换当前文字内容;开启单键快捷键功能时,需要双击元件或者在元件上点击按下回车键进入文字编辑状态。

2.基本元件的使用

> **【举例说明】积木,通过积木可以拼接出各种模型,元件亦是如此,可以通过元件的组合可以实现我们各种需求。**

**基本元件基本元件是由形状元件、图片元件、线段元件及中继器构成。**

形状

**包括了矩形、圆形、矩形的应用比较广泛,它可以用来做很多的工作,比如作为页面的背景,只需要将矩形填充相应的颜色即可;还可以把他制作为按钮、选项卡,使用的时候调整矩形的形状或调整圆角即可。**

![Axure RP基本元件介绍](Axure第2课笔记.assets/1636090410143.png)

**制作原型时,可以用它来代替对一些没有交互或者交互比较简单容易说明的区域;也可以做成关闭按钮。占位符在保真比较高的产品原型中作用不大。**

- 背景图
- 各种个性形状
- 表格
- 按钮
- 导航操作

> 我们还可以通过在元件上点击鼠标右键,通过菜单中的【选择形状】,让矩形变为圆形或占位符。 另外,形状元件还可以通过上下文菜单【变换形状】选项中的【转换为图片】,将形状元件转换为图片元件。 在Axure RP 9中,我们还可以为形状添加背景图片。形状元件一般用于页面中的背景、边框、按钮、分割线等。 

## 图片

![Axure RP基本元件介绍](Axure第2课笔记.assets/1636090410993.png)

**使用方法,图片元件的操作比较简单,可以通过双击选择本地磁盘中图片,将图片载入到编辑区,axure会自动提示将大图片进行优化,以避免原型文件过大。**

- LOGO
- 轮播
- ........

>  如果需要批量添加图片,可以通过多选本地磁盘中的图片素材文件并拖入的方式添加到 Axure RP 9 的画布中。
>
> 【提示】图片可以添加文字内容,需要在元件上点击鼠标右键,从菜单中选择【编辑文本】进入文字编辑状态。

## 文本

**文本元件包括文本标签、文本段落、一级标题、二级标题和三级标题,用来表示页面中的一些文字内容。**
实际上文本元件也是形状元件,给文本元件添加边框,就变成了矩形元件。 

## 热区

![Axure RP基本元件介绍](Axure第2课笔记.assets/1636090411313.png)

热区是一个透明的元件,通过属性设置就可实现类似超链接的功能。

常用操作:比如在一张图片中的两个位置上添加点击跳转的效果,就可以在这两个位置上放置两个热区,然后为热区添加点击跳转的交互。

> **热区的应用**
>
> 1.可以添加成链接,用作链接跳转,在一定程度上减少工作量。
>
> 2.跳转到层或区域,比如滑动网页时回到顶部(跳转)。
> 3.可以添加交互,比如翻看网页时,自动加载。
> 4.用作跳转,如果每个标题都需要添加一个跳转链接太繁琐,可以添加一个热区 ,通过热区来达到跳转。

二.表单及表格元件

## 文本框

用于输入一行文字内容。 比较常见的使用场景是用户登录功能中用户名与密码的输入框。​   

## 文本域 

​    文本域,也叫多行文本框,用于大量文字段落的输入。

## 下拉列表 

用于多个选项的单项选择,往往也会有多个下拉列表联合选择的出现。      

## 列表框

直接呈现选项的选择框,可以支持单选或多选。

> 注意:列表框元件与文本域元件在画布中外观一样,就像女装大佬,虽然长得像女人,但是功能不一样。在交互功能面板中会显示元件的类型,注意分辨

## 单选按钮 

用于多个选项的单项选择,有些时候可以用下拉列表替代。

## 复选框     

用于一个或多个选项的选择,可以选中和取消选中状态。 

# 菜单与表格元件的使用

菜单和表格元件都是绘制线框图的元件,方便易用。但是,因为样式编辑受限,所以高保真原型中很少使用。这些元件在画布中的很多操作基本通过右键菜单中完成,例如:行、列、节点、菜单项的添加、删除、移动等操作。

三.表单案例

四.简单简历绘制

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【洛谷算法题】P1422-小玉家的电费【入门2分支结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P1422-小玉家的电费【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格…

2023前端面试题总结:JavaScript篇完整版

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 JavaScript基础知识 JavaScript有哪些数据类型&#xff0c;它们的区别&#xff1f; Number&#xff08;数字&#xff09;: 用于表示数值&#xff0c;可…

【剑指offer|图解|二分查找】点名 + 统计目标成绩的出现次数

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、剑指offer每日一练 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️点名1.1 题目1.2 示例1.3 限制1.4 解题思路一c代码 1.5 解题思路二c代码 二. ⛳️统…

[算法每日一练]-双指针 (保姆级教程篇 1) #A-B数对 #求和 #元音字母 #最短连续子数组 #无重复字符的最长子串 #最小子串覆盖 #方块桶

目录 A-B数对 解法一&#xff1a;双指针 解法二&#xff1a;STL二分查找 解法三&#xff1a;map 求和 元音字母 最短连续子数组 无重复字符的最长子串 最小子串覆盖 方块桶 双指针特点&#xff1a;双指针绝不回头 A-B数对 解法一&#xff1a;双指针 先把数列排列成…

电脑出现msvcr120_1.dll丢失如何解决,怎么修复

一、msvcr120.dll_1.dll文件的作用&#xff1a; msvcr120.dll_1.dll是一个动态链接库文件&#xff0c;它是Microsoft Visual C Redistributable Package的一部分。该文件包含了许多常用的函数和类&#xff0c;这些函数和类被许多应用程序所共享和使用。因此&#xff0c;当您在…

成功的云转型之路需要考虑的基本因素

云计算如今已经变得无处不在&#xff0c;并显著影响着日常生活的各个方面。然而&#xff0c;重要的是要注意云计算技术是不断发展的。最近向远程工作的转变促使企业加快数字化转型&#xff0c;更多地采用云计算服务。 即使在新冠疫情消退之后&#xff0c;云计算技术的采用也获得…

【Hive】

一、Hive是什么 Hive是一款建立在Hadoop之上的开源数据仓库系统&#xff0c;将Hadoop文件中的结构化、半结构化数据文件映射成一张数据库表&#xff0c;同时提供了一种类SQL语言&#xff08;HQL&#xff09;&#xff0c;用于访问和分析存在Hadoop中的大型数据集。Hive的核心是将…

java代码编写twitter授权登录

在上一篇内容已经介绍了怎么申请twitter开放的API接口。 下面介绍怎么通过twitter提供的API&#xff0c;进行授权登录功能。 开发者页面设置 首先在开发者页面开启“用户认证设置”&#xff0c;点击edit进行信息编辑。 我的授权登录是个网页&#xff0c;并且只需要进行简单的…

Nginx快速入门

nginx准备 文本概述参考笔记 狂神&#xff1a;https://www.kuangstudy.com/bbs/1353634800149213186 前端vue打包 参考&#xff1a;https://blog.csdn.net/weixin_44813417/article/details/121329335 打包命令&#xff1a; npm run build:prod nginx 下载 网址&#x…

大模型应用_FastGPT

1 功能 整体功能&#xff0c;想解决什么问题 官方说明&#xff1a;FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01;个人体会…

竞赛保研 python 爬虫与协同过滤的新闻推荐系统

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; python 爬虫与协同过滤的新闻推荐系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&…

道路坑洞数据集(坑洞目标检测)VOC+YOLO格式650张

路面坑洞的形成原因是由于设计、施工、养护处理不当、控制不适和受气候、环境、地质、水文等自然因素影响&#xff0c;以及车辆的运行和车辆超载运行导致路面破损&#xff0c;出现坑洞的现象。 路面坑洞的分类&#xff1a; &#xff08;1&#xff09;路面混凝土板中坑洞&…

如何使用 Redis 快速实现分布式锁?

本文我们来讨论如何使用 Redis 快速实现分布式锁。 分布式锁有很多种解决方案&#xff0c;前面简单介绍过&#xff0c;Redis 可以通过 set key 方式来实现分布式锁&#xff0c;但实际情况要更加复杂&#xff0c;比如如何确保临界资源的串行执行&#xff0c;如何及时释放&#…

人工智能_机器学习065_SVM支持向量机KKT条件_深度理解KKT条件下的损失函数求解过程_公式详细推导_---人工智能工作笔记0105

之前我们已经说了KKT条件,其实就是用来解决 如何实现对,不等式条件下的,目标函数的求解问题,之前我们说的拉格朗日乘数法,是用来对 等式条件下的目标函数进行求解. KKT条件是这样做的,添加了一个阿尔法平方对吧,这个阿尔法平方肯定是大于0的,那么 可以结合下面的文章去看,也…

node-static 任意文件读取漏洞复现(CVE-2023-26111)

0x01 产品简介 node-static 是 Node.js 兼容 RFC 2616的 HTTP 静态文件服务器处理模块&#xff0c;提供内置的缓存支持。 0x02 漏洞概述 node-static 存在任意文件读取漏洞&#xff0c;攻击者可通过该漏洞读取系统重要文件&#xff08;如数据库配置文件、系统配置文件&#…

生信算法2 - DNA测序算法实践之序列统计

生信序列基本操作算法 建议在Jupyter实践&#xff0c;python版本3.9 1. 读取fastq序列 # fastq序列获取 !wget http://d28rh4a8wq0iu5.cloudfront.net/ads1/data/SRR835775_1.first1000.fastqdef readFastq(filename):# 序列列表sequences []# 质量值列表qualities []with…

一些程序源码及教程的网站合集~

很多时候我们需要一个快速上手的code demo及教程&#xff0c;除了最常用的【github】&#xff0c;一些中文网站可能会帮助我们更好上手~ 这里提供几个中文网站参考&#xff1a; 【51CTO】&#xff1a; Python 动态手势识别系统hmm 手势识别opencv_mob64ca140d96d9的技术博客…

5G工业物联网网关,比4G工业网关强在哪里?

​随着5G技术的广泛应用&#xff0c;越来越多的行业开始探索如何利用5G网络提升效率和创新能力。其中&#xff0c;工业物联网领域是受益最大的领域之一。作为连接物联网设备和网络的关键组件&#xff0c;5G工业物联网网关在这个变革中发挥着至关重要的作用。本文将深入探讨5G工…

【个人版】SpringBoot下Spring-Security核心概念解读【二】

Spring-Security HttpSecurity Spring-Security全局导读&#xff1a; 1、Security核心类设计 2、HttpSecurity结构和执行流程解读 3、Spring-Security个人落地篇 背景&#xff1a; Spring-Security框架的核心架构上一篇已经概述&#xff0c;展示其执行流程及逻辑&#xff0c;但…

科技提升安全,基于DETR【DEtection TRansformer】模型开发构建商超扶梯场景下行人安全行为姿态检测识别系统

在商超等人流量较为密集的场景下经常会报道出现一些行人在扶梯上摔倒、受伤等问题&#xff0c;随着AI技术的快速发展与不断普及&#xff0c;越来越多的商超、地铁等场景开始加装专用的安全检测预警系统&#xff0c;核心工作原理即使AI模型与摄像头图像视频流的实时计算&#xf…
最新文章