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

news/2024/7/7 18:33:35

目录 :

一,元件基本介绍

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张图片


http://lihuaxi.xjx100.cn/news/1889731.html

相关文章

记录 | vscode禁止插件自动更新的方法

shift command p 打开然后输入 > setting.json&#xff0c;选择用户设置 在 settings.json 配置文件中增加一项&#xff1a; "extensions.autoUpdate": false,

Java数字化健康卫生智慧云HIS系统源码

基于云计算技术的B/S架构云HIS集挂号、处方、收费、取药、病历于一体,完全适配各类中小型医院、诊所。 一、云 HIS定义 1、云 HIS 系统是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫生管理要求&#xff0c;在一定区域范围内以数字化形式提供医疗卫生…

【lesson13】MySQL表的基本操作之create(创建),update(更新)和replace(替换)

文章目录 表的增删查改create测试建表基础测试 update测试建表基础测试 replace&#xff08;替换&#xff09;测试建表基础测试 表的增删查改 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; create 测试 建表…

富唯智能自动转运机器人——生产制造业的未来

富唯智能自动转运机器人&#xff0c;一款创新的自动化设备&#xff0c;以其独特的优势&#xff0c;为生产制造业带来了更高效的降本增效解决方案。我们坚信&#xff0c;随着科技的进步&#xff0c;富唯智能自动转运机器人将成为生产制造业的未来。 首先&#xff0c;富唯智能自动…

Excel: Python 如何干掉 VBA 系列 丙

以下内容为本人的学习笔记&#xff0c;如需要转载&#xff0c;请声明原文链接 微信公众号「ENG八戒」https://mp.weixin.qq.com/s/FgoU8CxofwY90f3IX2Tpww 获取网络动态数据 本文开始之前夸过海口&#xff0c;说要演示一下喂养家畜的饲料动态成本&#xff0c;其实由于行业数据…

微服务--07--Sentienl中使用的限流算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Sentienl中使用的限流算法1、计数器固定窗口算法2、计数器滑动窗口算法----&#xff08;默认&#xff09;3、漏桶算法----&#xff08;排队等待&#xff09;4、令牌…

***Cpolar配置外网访问和Dashy

Dashy是一个开源的自托管的导航页配置服务,具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你可以将自己常用的一些网站聚合起来放在一起,形成自己的导航页。一款功能超强大,颜值爆表的可定制专属导航页工具 结合cpolar内网工具,我们实现无需部署到公网服务器…

Editing Existing PDF Files in Java

Editing Existing PDF Files in Java 1. Overview In this article, we’ll see how to edit the content of an existing PDF file in Java. First, we’ll just add new content. Then, we’ll focus on removing or replacing some pre-existing content. 2. Adding the …