【Axure RP9】元件应用(图文并茂)----含登入,个人简历案例

目录 :

一,元件基本介绍

1.1 元件概述

1.2 元件操作

1.3 快捷键大全

二,基本元件的应用

2.1 形状

2.2 图片

2.3 文本

2.4 线段原件

2.5 热区

2.5.1 热区应用

三, 表单型元件的应用

3.1 文本框

3.2 文本域

3.3 下拉列表

3.4 列表框

3.5 复选框

3.6 单选按钮

四,表单案例

4.1 登入

4.1.1 组件

4.2 个人简历

4.2.1 组成元件


一,元件基本介绍

1.1 元件概述

  • 在Axure RP中,元件是构建原型图的基础模块。 将元件从元件库里拖拽到画布中,即可添加元件到你的原型图中。

  • 软件自带了三个官方元件库,分别是默认元件库(Default)、流程元件库(Flow)和图标元件库(Icons)

1.2 元件操作

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

  • 旋转:元件的旋转可以通过按下<Ctrl>键的同时,拉动元件任意一个边界点来实现

  • 圆角:矩形元件可以编辑圆角,通过鼠标指针拖动矩形左上方的小三角形图标即可改变圆角的大小

  • 改变形状:形状类元件都可以通过点击鼠标右键,在菜单中通过【选择形状】将当前形状改变为其他形状。

  • 改变尺寸:可以通过鼠标拖动指针拖动元件的边界点任意改变

  • 元件的尺寸;也可以按住<Shift>不放,同时鼠标指针拖动元件边界点等比例改变元件的尺寸

1.3 快捷键大全

在使用Axure RP9元件前我们需要来学习相关的快捷键 ,在我们后面学习中可以提高效率和原型图质量

  1. 隐藏工作区域网格:Ctrl+
  2. 快速复制粘贴:Ctrl+D  或者单击拖拽+Ctrl
  3. 选中图层移动到顶层: ctrl + shift + [
  4. 保存项目:Ctrl+O
  5. 新建工程:Ctrl+N
  6. 查找:Ctrl+F
  7. 替换:Ctrl+H
  8. 复制:Ctrl+C
  9. 剪切:Ctrl+X
  10. 粘贴:Ctrl+V
  11. 撤销:Ctrl+Z
  12. 重做:Ctrl+Y
  13. 全选:Ctrl+A
  14. 组件定位: Ctrl+k
  15. 原型预览:Fn+F5
  16. 保存图片比例: Shift+单击拖拽  
  17. 回位画布: Shift+9
  18. 另存为:Ctrl+Shift+S
  19. 退出:Alt+F4
  20. 打印:Ctrl+P
  21. 拼写检查:Fn+F7

二,基本元件的应用

2.1 形状

包括了矩形、圆形、矩形的应用比较广泛,它可以用来做很多的工作,比如作为页面的背景,只需要将矩形填充相应的颜色即可

2.2 图片

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

提示: 图片可以添加文字内容,需要在元件上点击鼠标右键,从菜单中选择【编辑文本】进入文字编辑状态

2.3 文本

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

文本标签: 使用该文本标签默认不会在画布显示边框

文本段落: 文字输入一行会自动跨行 , 不能跨空格

一级标题: 相比其他标题更大

二级标题: 比三级标题大 比一级标题小

2.4 线段原件

水平线、垂直线。选择水平线或垂直线,可以作为表示页面一些区域分割时使用,比如在两块不同区域之间添加一条水平线,来明显的区分

使用方法:将水平线或者垂直线拖拽到右侧画布中,然后按下 Ctrl 键,将鼠标置于线段末端,进行旋转

2.5 热区

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

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

2.5.1 热区应用

1.可以添加成链接,用作链接跳转,在一定程度上减少工作量

2.跳转到层或区域,比如滑动网页时回到顶部(跳转)

3.可以添加交互,比如翻看网页时,自动加载

4.用作跳转,如果每个标题都需要添加一个跳转链接太繁琐,可以添加一个热区 ,通过热区来达到跳转

案例:

通过热区实现跳转不同页面

三, 表单型元件的应用

表单是需要用户填写的,所以表单型元件都是用于获取用户输入数据的元件

3.1 文本框

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

3.2 文本域

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

3.3 下拉列表

用于多个选项的单项选择,往往也会有多个下拉

想添加选项, 双击编辑即可

3.4 列表框

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

注意:列表框元件与文本域元件在画布中外观一样,但是功能不一样。在交互功能面板中会显示元件的类型,注意分辨

3.5 复选框

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

3.6 单选按钮

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

比如: 个人简历选择男女性别的时候单选按钮只能选择一个, 肯定是不能选择两个的, 那怎么去让它只能选择一个呢. 

右击画布单选按钮----指定按钮单选的组---填写组名称

最后在另外一个单选按钮,右击画布复选框----指定按钮单选的组--下拉选择组名  这样就会默认这两个单选按钮为一组

四,表单案例

4.1 登入

4.1.1 组件

1个矩形   1张图片 1个圆形   4个线段  1个三级标题  2个文本标签  2个文本框  2个图标 

1个主要按钮  2个链接按钮

4.2 个人简历

4.2.1 组成元件

2个矩形    6个文本标签   3个文本框   2个单选  4个下拉列表  2个按钮 1个三级标题  1张图片

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

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

相关文章

Profibus、Profinet、Ethernet的详细对比

PROFINET 是一种新的以太网通讯系统&#xff0c;是由西门子公司和 Profibus 用户协会开发。 PROFINET 具有多制造商产品之间的通讯能力&#xff0c;自动化和工程模式&#xff0c;并针对分布式智能自动化系统进行了优化。其应用结果能够大大节省配置和调试费用。 PROFINET 系统集…

geemap学习笔记026:如何循环加载影像集合中的每一景影像,筛选,并且进行导出

前言 影像集合中通常包含多景可用的影像&#xff0c;但是我们有时候需要查看经过某一个区域的每一景影像&#xff0c;然后筛选最适合的一景&#xff0c;今天就来实现这个操作。 1 导入库并显示地图 import ee import geemapee.Initialize()2 加载Landsat 8数据 # 应用尺度缩…

CSS的基本选择器及高级选择器(附详细示例以及效果图)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器&#xff08;详解&#xff09;以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xf…

【计算思维】第14届蓝桥杯省赛计算思维U8组真题试卷

选择题 第 1 题 单选题 要把下面 4 张图片重新排列成蜗牛的画像&#xff0c;该如何排列这些图片?( ) A. B. C. D. 第 2 题 单选题 下图的几张牌&#xff0c;每次可以交换任意 2 张。 如将它们按照下面的顺序排列&#xff0c;最少需要交换( )次。 A.4 B.5 C.6 D.7 …

C++面向对象(OOP)编程-友元(友元函数和友元类)

本文主要介绍面向对象编程的友元的使用&#xff0c;以及友元的特性和分类&#xff0c;提供C代码。 1 为什么引进友元 面向对象编程&#xff08;OOP&#xff09;的三大特性中的封装&#xff0c;是通过类实现对数据的隐藏和封装。一般定义类的成员变量为私有成员&#xff0c;成员…

虚拟机/etc/fstab 变更只读模式ready-only处理

虚拟机误操作将/etc/fstab中的根目录注释掉了&#xff0c;重启虚机后虚机可以正常启动&#xff0c;但无法进行修改 # vi /etc/fstab 提示文件只读 无法进行操作 解决办法&#xff1a; 1、重启虚机&#xff0c;按e进入单用户模式 2、修改内核所在那行参数&#xff0c;将ro 修…

什么是FPGA原型验证?

EDA工具的使用主要分为设计、验证和制造三大类。验证工作贯穿整个芯片设计流程&#xff0c;可以说芯片的验证阶段占据了整个芯片开发的大部分时间。从芯片需求定义、功能设计开发到物理实现制造&#xff0c;每个环节都需要进行大量的验证。 现如今验证方法也越来越多&#xff…

力扣题:数字与字符串间转换-12.14

力扣题-12.14 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;442. 数组中重复的数据 解题思想&#xff1a;从字符串中能够正确提取数字即可 class Solution(object):def complexNumberMultiply(self, num1, num2):""":type num1:…

科技提升安全,基于YOLOv8全系列模型【n/s/m/l/x】开发构建商超扶梯场景下行人安全行为姿态检测识别系统

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

Flutter常用命令

一、环境安装 flutter --version 查看当前安装的flutter 版本 flutter upgrade 升级当前的flutter 版本 flutter doctor 检查环境安装是否完成 二、项目编译运行 flutter clean 清空build目录 flutter pub get 获取pub插件包 flutter run --设备名称 运行项目到指定设…

linux 内核同步互斥技术之原子变量

原子变量用来实现对整数的互斥访问&#xff0c;通常用来实现计数器。 例如&#xff0c;我们写一行代码把变量 a 加 1&#xff0c;编译器把代码编译成 3 条汇编指令。 &#xff08;1&#xff09;把变量 a 从内存加载到寄存器。 &#xff08;2&#xff09;把寄存器的值加 1。 &am…

CSDN新增的代码分析 一键注释新技能

一键注释 贴段Django代码 from django.urls import reversedef my_view(request):url reverse(index)return redirect(url) 贴段Vue代码 <template><div id"app"><input v-model.lazy"msg" type"text" name"" &g…

05.CSS前言

CSS前言 1.CSS产生背景 从 HTML 被发明开始&#xff0c;样式就以各种形式存在&#xff0c;最初的 HTML 只包含很少的显示属性随着 HTML 的成长&#xff0c;为了满足页面设计者的要求&#xff0c;HTML 添加了很多显示功能&#xff0c;例如文本格式化标签但是随着这些功能的增加…

Linux系统调用接口---使用write函数写文件

Linux系统调用接口—使用write函数写文件 1 wirte函数介绍 我们打开了一个文件&#xff0c;可以使用write函数往该文件中写入数据。当我们往该文件中写入N个字节数据&#xff0c;位置pos会从0变为N&#xff0c;当我们再次往该文件中写入M个字节数据&#xff0c;位置会变为NM。…

【沐风老师】科研绘图3DMAX病毒建模教程

3dMax在科研绘图方面也有广泛的应用&#xff0c;本教程就给大家讲解病毒的建模方法&#xff0c;下面直接进入教程&#xff1a; 3dMax病毒建模方法&#xff1a; 1.启动3dMax&#xff0c;在视口中创建一个“几何球体”。方法&#xff1a;右边命令面板->创建->几何体->…

IDEA对@Author、@Date 标签等的黄色警告问题

配置路径 seting --> Editor -->Inspections --> Java --> Javadoc -->Declaration has Javadoc problems设置--> 编辑器-->检查--> Java --> Javadoc -->javadoc声明问题-->附加javadoc标记参数 ,Author,Date

前端已死?探讨人工智能与低代码对前端的影响

文章目录 每日一句正能量前言前端行业究竟是好是坏&#xff1f;数字化转型的当下前端工程师该何去何从&#xff1f; 想要入行前端先认清这三个事实 后记 每日一句正能量 人的结构就是相互支撑&#xff0c;众人的事业需要每个人的参与。 前言 随着人工智能和低代码的崛起&#…

【Canvas】绘制风速热力图

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 风速热力图 前期工作 数据准备 数据稀疏问题 双线性插值 绘制色…

关于pytorch中的dim的理解

今天碰到一个代码看起来很简单&#xff0c;但是细究原理又感觉好像不太通不太对劲&#xff0c;就是多维tensor数据的操作&#xff0c;比如&#xff1a;y.sum(dim2)&#xff0c;乍一看很简单数据相加操作&#xff0c;但是仔细一想&#xff0c;这里在第3维度的数据到底是横向相加…

什么是前端开发中的跨站请求伪造(CSRF)攻击?如何防止它?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…