Axure元件库的介绍以及个人简介和登录界面案例展示

news2024/9/24 9:19:23

目录

一. 元件介绍

二. 基本元件的使用

2.1 形状元件

2.2 图片元件

2.3 占位符 

2.4 文本

2.5 线段元件

2.6 热区文件

三. 表单元件的使用

3.1 文本框

3.2 文本域

3.3 下拉列表

3.4 列表框

3.5 复选框

3.6 单选按钮

四. 菜单与表格元件的使用

4.1 树

4.2 表格

4.3 水平菜单

4.4 垂直菜单

五. 登录界面示例展示

六. 个人简历示例展示


一. 元件介绍

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

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

默认元件库又分为基本元件,表单元件,菜单/表格,标记元件。

下面着重介绍前三个元件的使用。 

二. 基本元件的使用

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

2.1 形状元件

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

操作:

 将元件添加到画布:在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开。

选中元件:单击选中➡在画布区域,用鼠标单击对应的元件即可选中。

框选➡鼠标移动到画布空白处,拖动鼠标,在形成的正方形区域中框住一个或多个元件,可以实现批量选中。

2.2 图片元件

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

  

操作:

插入图片:将图片元件直接拖拽到右侧画布,鼠标双击图片元件,选择一张本地图片点击打开,鼠标左键点击图片四周的方块点并按住拖放调整图片的大小。 

将图片元件等比例缩放:选中元件,在输入数值调整元件尺寸时,鼠标可以点击"🔒"小图标,让元件锁定宽高比例。也可以按住shift进行拉动。

2.3 占位符 

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

操作:

 和形状元件的使用方法一样,选中某个元件之后,按住鼠标左键一直拖到工作区域使用即可。

2.4 文本

在网页中文本的名称是labe,用于页面中添加说明文字、文字链接或一些动态的提示。 

操作:

 设置元件文字边距/行距:将文本元件拖拽至右侧画布中,双击文本元件就可以编辑内容了。[行间距]和[边距]在画布右侧的文本样式面板中修改。

2.5 线段元件

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

操作:

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

2.6 热区文件

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

操作:

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

热区的应用:

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

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

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

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

三. 表单元件的使用

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

3.1 文本框

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

3.2 文本域

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

3.3 下拉列表

用于多个选项的单项选择

3.4 列表框

直接呈现选项的选择框,可以支持单选或多选。(列表框元件与文本域元件在画布中外观一样 ,注意分辨)

3.5 复选框

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

3.6 单选按钮

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

四. 菜单与表格元件的使用

菜单与表格元件在搭建对样式无要求或要求较低的线框图时,使用起来比较方便。

例如添加删除行、节点或菜单项等,可以在节点、单元格、或者菜单项上点击<鼠标右键>,在弹出的菜单中完成。

4.1 树

垂直方向的菜单,树形菜单可自定义节点前的图标,默认是三角形,Axure提供+/-和三角形两种图标,节点可以展开与折叠。

主要用于网站导航,多使用于网站后台。

4.2 表格

表格很常见,可以添加表格信息,表格框可以输入内容,每个表格都可以设置单独的事件,但是axure还不支持单元格的合并。

将表格元件拖拽至右侧画布中,每个表格单元都可以编辑文本内容,如果想新增行/列的话,选中一行或一列,右击鼠标选择新增对应的行/列即可,操作方法与excel一样。

4.3 水平菜单

常用于网页导航

4.4 垂直菜单

用法和水平菜单一致,但常用于后台系统的左侧边菜单导航。

操作方法和表格元件差不多,将垂直表格菜单拖拽至右侧画布中,每个表格单元可以编辑内容,增加表格单元的方法也是右击鼠标。

五. 登录界面示例展示

以下登录界面运用了默认元件库中的矩形、复选框,图标元件库中的眼睛

六. 个人简历示例展示

以下个人简历运用了默认元件库中的矩形、图片、按钮、水平线、文本框、文本域、下拉列表、复选框、单选按钮。

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

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

相关文章

基于单片机智能家具无线遥控控制系统设计

**单片机设计介绍&#xff0c;基于单片机智能家具无线遥控控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能家具无线遥控控制系统设计可以实现对家具&#xff08;如灯具、窗帘、空调等&#xff09;的…

JOSEF 组合中间继电器 RXMM1-RK214003 DC220V 不带底座

系列型号 RXMM1 RK 214 002组合中间继电器&#xff1b;RXMM1 RK 214 003组合中间继电器; RXMM1 RK 214 004组合中间继电器&#xff1b;RXMM1 RK 214 005组合中间继电器; RXMM1 RK 214 006组合中间继电器&#xff1b; 1 用途 RXMM1系列组合中间继电器用于电力系统二次回路及…

手把手教你写 Compose 动画 -- 组件大小变化 API:animateContentSize

Jetpack Compose 提供了一系列功能强大且可扩展的 API&#xff0c;可用于在应用界面中轻松实现各种动画效果。这一系列文章会逐个介绍所有的动画 API&#xff0c;通过最直观的 Demo 示例&#xff0c;手把手教你怎么写动画以及带你了解动画背后的原理。 &#x1f4d1; 手把手教你…

【Python】解读a+=b 和 a=a+b是否一样?看完恍然大悟!

文章目录 前言一、可变对象和不可变对象总结 前言 在Python中&#xff0c;对于可变和不可变对象的行为差异是一个重要概念&#xff0c;特别是在涉及到和操作时。理解这一点对于编写高效且无误的代码至关重要。 一、可变对象和不可变对象 首先&#xff0c;让我们谈谈可变和不可…

Webstorm使用方法

标题一 安装步骤 1.打开JetBrans官方网站&#xff08;https://www.jetbrains.com/webstorm&#xff09;并下载适用于您操作系统的WebStorm安装程序 2.运行下载的安装程序 3.再安装程序中选择您想要安装WebStorm的位置&#xff0c;并接收软件许可协议 4.接下来您可以选择要安…

python中else的细节

if-else 首先我们都知道else可以和if共同使用&#xff0c;如果if条件没有执行&#xff0c;就会去执行else语句 a100 if a100:print("if 语句执行了") else:print("else语句执行了") a10 if a100:print("if 语句执行了") else:print("else…

计算机组成原理---浮点数的加减运算

这是本人的做法&#xff0c;不喜勿喷&#xff01;

mac 安装nvm以及切换node版本详细步骤

1、nvm介绍&#xff08;node版本管理工具&#xff09; nvm 可以让你通过命令行快速安装和使用不同版本的node 有时候项目太老&#xff0c;node版本太高,执行npm install命令会报错,可以借助nvm切换低版本的node。 2、安装nvm 在终端执行安装命令 curl -o- https://raw.gith…

Linux route命令详解

1、介绍 route命令用于显示和操作IP路由表&#xff0c;它允许用户查看当前系统的路由信息&#xff0c;添加新的路由、删除已有的路由等。 2、命令 2.1 命令选项 -n, --numeric&#xff1a;不解析主机名&#xff0c;直接显示IP地址。使用这个选项可以加快显示速度&#xff0…

蓝凌EIS智慧协同平台 SQL注入漏洞复现

0x01 产品简介 蓝凌EIS智慧协同平台是一款专为企业提供高效协同办公和团队合作的产品。该平台集成了各种协同工具和功能&#xff0c;旨在提升企业内部沟通、协作和信息共享的效率。 0x02 漏洞概述 由于蓝凌EIS智慧协同平台 UniformEntry.asp接口处未对用户输入的SQL语句进行…

DeepStream--调试Gstreamer

DeepStream是基于Gstreamer开发的。有时候需要在Gstreamer加日志&#xff0c;比如想在rtpjitterbuffer里加日志。 首先&#xff0c;执行gst-inspect-1.0 rtpjitterbuffer命令。 从结果中可以看到&#xff0c;rtpjitterbuffer插件的源码是gst-plugins-good&#xff0c;版本是1…

广州华锐互动:VR煤矿安全操作规程实训提升矿工安全意识与技能

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活带来了极大的便利。在煤矿行业&#xff0c;VR技术的应用也日益受到重视&#xff0c;尤其是在煤矿安全检查方面。为了提高矿工的安全意识和技能&#xff0…

springboot自定义starter步骤

引入相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-configuration-processor</artifactId><optional>true</optional> </dependency><dependency><groupId>org.pro…

(基础篇)通过node增删改查连接mysql数据库

一定要会最基础的sql建表一定要会最基础的sql建表一定要会最基础的sql建表 首先说一下准备工作 一、准备工具 1.mysql数据库Navicat可视化工具&#xff08;数据库表单已经建好&#xff09; 我这里用的小皮工具直接开启的本地mysql 2.vscode (不用说基本上都有) 3.node.js …

C语言学习----指针和数组

&#x1f308;这篇blog记录一下指针学习~ 主要是关于指针和数组之间的关系&#xff0c;还有指针的使用等~ &#x1f34e;指针变量是一个变量 其本身也有一个地址 也需要存放&#xff0c;就和int char等类型一样的&#xff0c;也需要有一个地址来存放它 &#x1f34c;而指针变量…

自动生成采集规则的网页采集器

传统的采集器配置采集规则&#xff0c;需要查看网页源码&#xff0c;这要求用户具备一定的编程知识&#xff0c;增加了使用难度&#xff0c;也让很多不懂代码的用户无法采集数据了。 然而&#xff0c;现在有一种智能网页采集器工具&#xff1a;简数采集器&#xff0c;无需懂代…

Mapreduce小试牛刀(2)--java api

1.同hdfs 的java api,我们首先要在IDE中建立一个maven项目 pom.xml中配置如下&#xff1a; <dependencies><dependency><groupId>org.apache.hadoop</groupId><artifactId>hadoop-mapreduce-client-common</artifactId><version>3.…

TS系列-keyof的妙用

案例1 1、如果&#xff0c;有一个接口&#xff0c;某个变量的类型&#xff0c;是这个接口的 key &#xff1f; keyof 后面可以跟 一个对象类型或者一个接口类型keyof 是把后面 对象或者接口 的 键 都提取出来&#xff0c;组成一个联合类型 interface IStudentAttr {name: stri…

低代码开发如何快速构建AI应用

随着人工智能&#xff08;AI&#xff09;的快速发展&#xff0c;越来越多的企业和开发者开始意识到AI在业务和应用中的重要性。然而&#xff0c;AI应用的开发通常被认为是复杂和耗时的过程&#xff0c;需要大量的编码和数据科学知识。为了解决这个问题&#xff0c;低代码开发平…

嵌入式C语言变量、数组、指针初始化的多种操作

在敲代码的时候&#xff0c;我们会给变量一个初始值&#xff0c;以防止因为编译器的原因造成变量初始值的不确定性。 对于数值类型的变量往往初始化为0&#xff0c;但对于其他类型的变量&#xff0c;如字符型、指针型等变量等该如何初始化呢&#xff1f; 数值类变量初始化 整…