Axure系列(二)之 元件库的介绍以及个人简介案例展示

news2024/12/22 17:20:32

目录

一. 元件介绍

二. 基本元件的使用

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/1304816.html

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

相关文章

大模型元年压轴盛会定档12月28日,第十届WAVE SUMMIT即将启航

回望2023年&#xff0c;大语言模型或许将是科技史上最浓墨重彩的一笔。从技术、产业到生态&#xff0c;大语言模型在突飞猛进中加速重构万物。随着理解、生成、逻辑、记忆四大能力显著提升&#xff0c;大语言模型为通用人工智能带来曙光。 AI开发者们正在用算法和代码书写一个…

连连看游戏

连通块记忆性递归的综合运用 这里x&#xff0c;y的设置反我平常的习惯&#xff0c;搞得我有点晕 实际上可以一输入就交换x&#xff0c;y的数据的 如果设置y1为全局变量的话会warning&#xff1a; warning: built-in function y1 declared as non-function 所以我改成p和q了…

gin投票项目5

对应视频V3版本 1.优化用户注册的功能 增加扩展字段 1.增加一个UUID字段&#xff0c;vachar&#xff08;50&#xff09;。 2.增加一个UUID的唯一索引。 UUID具有全局唯一性&#xff1b; 方法&#xff1a;在数据库中新建一个列&#xff0c;名为uuid并移至主键下方&#xf…

CTF-misc(1)图片隐写

笔记目录 渗透测试工具(1)wireshark渗透测试工具(2)Nmap渗透测试工具(3)BurpsuiteAWD比赛(1)AWD入门攻略大纲CTF-Web(2)SQL注入CTF-Web(3)文件上传漏洞 图片隐写目录 (1)GIf和二维码隐写 二维码补全 二维码绘图 Gif规律分析 (2)文本附加图片隐写 (3)IHDR文件头修复图片宽高 (…

基于单片机智能视力保护台灯控制系统设计

**单片机设计介绍&#xff0c;基于单片机智能视力保护台灯控制系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机智能视力保护台灯控制系统是一种基于单片机技术的设备&#xff0c;在保证照明效果的同时&#xf…

企业API网关适用业务场景

什么是企业级API网关 企业级API网关是一种用于管理、保护和监控企业内部和外部API&#xff08;Application Programming Interface&#xff09;的解决方案。它提供了一套统一的接入点&#xff0c;帮助企业实现对API的安全性、流量控制、版本管理、监控和分析等方面的管理。企业…

STM32储存器和总线构架

一、引言 本篇文章旨在介绍STM32小容量、中容量和大容量的储存器和系统构架&#xff0c;文中涉及到一些专有名词和概念较为抽象和陌生&#xff0c;建议读者能够查阅相关资料和知识加深了解。 二、正文 &#xff08;一&#xff09;、系统构架 在小容量、中容量和 大容量产品中…

接口自动化测试之Yaml数据驱动封装!

一、数据驱动&#xff1a;pytest.mark.parametrize(&#xff09; 首先看个样本&#xff1a; import pytestclass TestData:# parametrize有两个值&#xff0c;一个是args_name:参数名&#xff0c;一个是args_value:参数值,可以有多个&#xff0c;进行数据解包# args_value可以…

Windows环境提示“‘mysql‘ 不是内部或外部命令,也不是可运行的程序或批处文理件” 简易记录

在Windows环境下使用DOS命令窗登入MYSQL&#xff0c;提示“mysql 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。” 这意味着系统无法找到 mysql.exe可执行文件&#xff0c;这是因为 MySQL 没有正确安装或未添加到系统PATH环境变量中所致。 处理方法&#x…

巧用ChatGPT系列丛书(由北京大学出版社出版)

前言 随着人工智能技术的迅速发展&#xff0c;越来越多的工具和应用程序被应用于职场中&#xff0c;以提高我们的工作效率。其中&#xff0c;ChatGPT作为一种先进的自然语言处理技术&#xff0c;正在逐渐引起人们的关注。 ✨巧用ChatGPT系列书籍&#xff1a; 《巧用chatGPT快…

文献速递:PET-影像组学专题--临床上在乳腺癌方面PET-MRI的进展

文献速递&#xff1a;PET-影像组学专题–临床上在乳腺癌方面PET-MRI的进展 01 文献速递介绍 成像在乳腺癌的筛查、诊断、分期和管理中扮演着关键角色。乳房X线摄影&#xff08;mammography&#xff09;、超声检查和动态增强乳腺MRI是主要的乳腺癌成像方法。对于怀疑或已知有…

【教程】开始使用ipaguard进行代码加固混淆

目录 前言 下载ipa代码混淆保护工具 获取ipaguard登录码 代码混淆 文件混淆 IPA重签名与安装测试 前言 iOS加固保护是直接针对ios ipa二进制文件的保护技术&#xff0c;可以对iOS APP中的可执行文件进行深度混淆、加密。使用任何工具都无法逆向、破解还原源文件。对APP进…

mysql数据恢复

使用MySQL第三方工具binlog2sql binlog2sql&#xff0c;一款基于python开发的开源工具&#xff0c;是由大众点评团队的DBA使用python开发出来的&#xff0c;从MySQL binlog解析出你要的SQL。根据不同选项&#xff0c;你可以得到原始SQL、回滚SQL、去除主键的INSERT SQL等。其功…

《Vue.js设计与实现》—Vue3响应系统的原理

一、响应式数据与副作用函数 1. 副作用函数 1-1 指令材料 在JavaScript中&#xff0c;副作用函数是指在执行过程中对外部环境产生可观察的变化或影响的函数。这种函数通常会修改全局变量、修改传入的参数、执行I/O操作&#xff08;如读写文件或发送网络请求&#xff09;、修…

Dockerfile创建镜像LNMP+WordPress

实验部署 INMPwordpress nginx 172.111.0.10 docker-nginx mysql 172.111.0.20 docker-mysql php 172.111.0.30 docker-php nginx 关闭防火墙和安全机制在opt目录创建nginx MySQL php目录 cd nginx mysql php vim Dockerfile#声明基础镜像 FROM centos:7 #安装依赖环境 R…

Datawhale 12月组队学习 leetcode基础 day1 枚举

这是一个新的专栏&#xff0c;主要是一些算法的基础&#xff0c;对想要刷leedcode的同学会有一定的帮助&#xff0c;如果在算法学习中遇到了问题&#xff0c;也可以直接评论或者私信博主&#xff0c;一定倾囊相助 进入正题&#xff0c;今天咱们要说的枚举算法&#xff0c;这是个…

NGINX高性能服务器与关键概念解析

目录 1 NGINX简介2 NGINX的特性3 正向代理4 反向代理5 负载均衡6 动静分离7 高可用8 结语 1 NGINX简介 NGINX&#xff08;“engine x”&#xff09;在网络服务器和代理服务器领域备受推崇。作为一款高性能的 HTTP 和反向代理服务器&#xff0c;它以轻量级、高并发处理能力以及…

供配电运维智能监控系统

供配电运维智能监控系统是一种针对供配电系统的智能监控设备&#xff0c;依托电易云-智慧电力物联网&#xff0c;旨在实现对供配电系统的实时监控、数据记录和分析&#xff0c;以及异常预警和故障检测等功能&#xff0c;以提高供配电系统的可靠性和稳定性。 该系统通常由以下部…

WhatsApp全球获客怎么做?

一、导语 随着全球数字化趋势的加速&#xff0c;WhatsApp作为一种即时通讯工具&#xff0c;已经成为了连接全球用户的桥梁。 对于企业和营销人员来说&#xff0c;利用WhatsApp拓展全球业务是一种非常有效的策略&#xff0c;本文将为您揭示WhatsApp全球获客的秘密&#xff0c;…

【小尘送书-第十三期】Python从入门到精通(第3版)(软件开发视频大讲堂)

大家好&#xff0c;我是小尘&#xff0c;欢迎你的关注&#xff01;大家可以一起交流学习&#xff01;欢迎大家在CSDN后台私信我&#xff01;一起讨论学习&#xff0c;讨论如何找到满意的工作&#xff01; &#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1…