Axure元件的介绍使用与登录界面以及个人简历的绘制

news2024/12/23 17:29:44

目录

一.Axure元件介绍

1.1.简介

1.2.常见的元件

1.3.元件的操作 

二.基本元件的使用

2.1.矩形和圆形

2.2.图片

2.3.文本元件

2.4.热区

2.5.线段元件

三.表单型元件的使用

3.1.文本框

3.2.文本域

3.3.下拉列表

3.4.列表框

3.5.单选按钮

3.6.复选框

四.菜单和表单元件的使用

 五.简单的登录界面实操

 六.个人简历的绘制

                今天就到这里了哦!!!希望能帮到你哦!!!


一.Axure元件介绍

1.1.简介

  • 在Axure中,元件是可重复使用的交互式UI构建块,它们可以是单个UI元素或者是多个元素组合而成的组件。
  • Axure提供了丰富的预设UI元素,并允许用户创建自定义元件,以便在原型设计中进行重复使用。可以将元件理解为构建原型图的基本模块
  • 软件自带了三个官方元件库,分别是默认元件库(Default)流程元件库(Flow)图标元件库(Icons)

1.2.常见的元件

在Axure RP(原型设计工具)中,元件是构成用户界面的基本构建块,它们可以是页面上的各种UI元素、交互部件或者重复使用的模块。

  1. 部件(Widgets):

    • 包括按钮、文本框、下拉列表等常见的用户界面元素。
    • 用于构建页面的基本结构和交互元素。
  2. 形状(Shapes):

    • 包括矩形、圆形、箭头等各种形状,用于装饰和界面设计。
    • 可以通过修改属性和样式来自定义形状的外观。
  3. 框架(Masters):

    • 用于创建页面模板的元素,可以在多个页面上重复使用。
    • 适用于保持一致的页面结构和布局。
  4. 图像(Images):

    • 允许插入图片文件,用于显示图形、图标或背景。
    • 图片元素支持调整大小、裁剪等操作。
  5. 文本(Text):

    • 提供文本框和富文本编辑框,用于显示和输入文本内容。
    • 可以设置字体、颜色、对齐方式等属性。
  6. 链接(Links):

    • 用于创建页面间的跳转和交互,可模拟网站或应用的导航流程。
    • 可以添加点击事件,定义链接的目标页面。
  7. 交互元件(Interactive Elements):

    • 包括面板、手风琴、标签页等交互性强的元素。
    • 用于创建更丰富的用户体验和模拟应用程序的动态效果。
  8. 数据表格(Tables):

    • 允许创建和展示表格,用于模拟数据展示和用户界面的排列。
    • 可以包含文本、图像等内容。
  9. 装饰(Decorations):

    • 提供各种装饰性的元素,如分隔线、箭头等。
    • 用于美化界面和提供额外的设计元素。
  10. HTML(HTML小部件):

  • 允许嵌入自定义的HTML代码,拓展了元件的定制能力。
  • 适用于需要高度定制的元素或特殊的界面需求。

Axure的元件库提供了丰富的预定义元件,同时也支持用户创建和管理自己的元件,以便在设计中更好地重用和维护元素。这些元件共同构成了Axure中页面和交互设计的基础。

1.3.元件的操作 

在Axure RP中,有许多常见的元件操作,用于创建、编辑和管理页面元素。以下是一些常见的元件操作:

  1. 创建元件:

    • 使用工具栏中的相应工具,如按钮、文本框等,点击或拖动来在页面上创建元件。
  2. 编辑元件:

    • 双击元件以进入编辑模式,以修改文本、样式、链接等属性。
  3. 调整大小:

    • 通过拖动元件的边框或角点,调整元件的大小。
    • 在属性面板中手动设置元件的宽度和高度。
  4. 样式设置:

    • 使用样式编辑器调整元件的外观,包括颜色、字体、边框等。
    • 创建和应用样式以确保一致性。
  5. 复制和粘贴:

    • 使用快捷键或右键菜单复制元件,然后粘贴到同一页面或其他页面。
    • 可以创建元件的副本,以便在设计中重复使用。
  6. 组合和解散:

    • 将多个元件组合成一个组,以便一次性移动或调整。
    • 解散组以单独处理组内的元件。
  7. 交互设置:

    • 在交互面板中为元件添加交互动作,如点击、悬停等触发事件。
    • 设定目标页面、链接或其他交互细节。
  8. 对齐和分布:

    • 使用对齐和分布工具对元件进行精确排列,确保页面的布局整齐。
  9. 图层管理:

    • 使用图层面板调整元件的堆叠顺序,确保元件在正确的层级上显示。
  10. Master元件:

    • 将元件转换为Master(框架),以便在多个页面上重复使用。
    • 在其他页面上使用引用Master来添加Master的实例。
  11. 元件库的使用:

    • 利用Axure自带的元件库或创建自定义元件库,以便在项目中重复使用元件。
    • 将元件拖动到库中,或从库中拖动元件到页面上。
  12. 注释和文档:

    • 添加注释或文本框以说明元件的用途、状态或其他相关信息。
    • 利用Axure中的文档功能记录设计决策和说明。
  13. 图形元素:

    • 使用图形工具创建各种形状,如矩形、椭圆等,用于装饰和设计。

二.基本元件的使用

2.1.矩形和圆形

将矩形填充相应的颜色可以制作页面的背景;也可以调整为特定的形状可以制作成按钮或选项卡等交互元素。

2.2.图片

Axure中图片元件是用于显示静态图片的元素,可以通过插入本地或在线图片来使用。右击选择你所要的操作。还有按住Shift键鼠标控制大小不会变型,反之会变型。

2.3.文本元件

在Axure中,有几种常用的文本元件可用于不同级别和用途的文本显示,包括文本标签、文本段落、一级标题、二级标题和三级标题。实际上文本元件也是形状元件,给文本元件添加边框,就变成了矩形元件。 

 

2.4.热区

在Axure中,热区(Hotspot)是一种特殊的元件,用于创建可点击或交互的区域。通过添加热区,你可以为用户提供可交互的功能或导航,而不仅仅是静态的文本或图形展示。热区是一个透明的元件,通过属性设置就可实现类似超链接的功能。

 

 

2.5.线段元件

在Axure中,水平线和垂直线是特殊的线条元件,用于在界面设计中创建水平分隔线和垂直分隔线。这些线条元件可以帮助设计师更好地规划页面布局、分隔内容区域以及创建视觉引导线等。

 

三.表单型元件的使用

3.1.文本框

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

 

3.2.文本域

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

 

3.3.下拉列表

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

 

3.4.列表框

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

 

3.5.单选按钮

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

 

3.6.复选框

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

 

四.菜单和表单元件的使用

在Axure中,你可以使用菜单和表格元件来设计和创建交互式的菜单和表格。

  • 水平菜单(Horizontal Menu): 用于创建水平导航菜单,可以包含多个菜单项,通过鼠标悬停或点击进行交互。
  • 垂直菜单(Vertical Menu): 用于创建垂直导航菜单,可以包含多个菜单项,通过鼠标悬停或点击进行交互。
  • 树形菜单(Tree Menu): 用于创建层级结构的菜单,通常用于展示和管理多层次的导航或分类。
  • 表格(Table): 用于创建数据展示和编辑的表格,可以包含多行和多列,支持排序、筛选、分页等功能。

 五.简单的登录界面实操

 六.个人简历的绘制


                今天就到这里了哦!!!希望能帮到你哦!!!

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

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

相关文章

2007-2022年全国各省数字经济政策支持力度、ZF工作报告数据经济词频数据

2007-2022年全国各省数字经济政策支持力度、ZF工作报告数据经济词频数据, 1、时间:2007-2022年 2、范围:31省市 3、指标:行政区划代码、年份、地区、所属地域、文本总长度、仅中英文-文本总长度、文本总词频-全模式、文本总词频-精确模式、…

dockerfile基于NMP+wordpress创建镜像

内部通信地址 nginx 172.111.0.10 docker-nginx mysql 172.111.0.20 docker-mysql php 172.111.0.30 docker-php 1、创建单独目录 2、创建容器的自定义网络 docker network create --subnet172.111.0.0/16 --opt "com.docker.network.bridge.name"&quo…

19、命令模式(Command Pattern,不常用)

命令模式,将一个请求封装为一个对象(命令),使发出请求的责任和执行请求的责任分割开,有效降低系统的耦合度。这样两者之间通过命令对象进行沟通,这样方便将命令对象进行储存、传递、调用、增加与管理。命令…

磁力计LIS2MDL开发(1)----轮询获取磁力计数据

磁力计LIS2MDL开发.1--轮询获取磁力计数据 概述视频教学样品申请源码下载通信模式速率生成STM32CUBEMX串口配置IIC配置CS设置串口重定向参考程序初始换管脚获取ID复位操作BDU设置设置速率启用偏移消除开启温度补偿设置为连续模式轮询读取数据主程序演示 概述 本文将介绍如何使…

明道云在戴斯克,从业务整合到高效管理的秘诀

内容来自演讲:付震东 | 北京戴斯克商务有限公司 |数字化负责人 摘要 本文介绍了明道云在戴斯克公司的应用以及数字化转型过程中所起的作用。戴斯克公司使用明道云后,实现了系统落地速度、工作效率、决策方法和工作意识的提升。通过不断抽象…

集成开发之如何用好明道云

内容来自演讲:张嵩 | 苏州睿能科技有限公司 | 公司负责人 摘要 这篇文章介绍了作者所在公司如何利用明道云进行集成开发,并分享了四个实际案例。在第一个数字化实验室项目中,该公司使用明道云取代现有的STARLIMS商业软件,并实现…

微表情检测(四)----SL-Swin

SL-Swin: A Transformer-Based Deep Learning Approach for Macro- and Micro-Expression Spotting on Small-Size Expression Datasets 在本文中,我们致力于解决从视频中检测面部宏观和微观表情的问题,并通过使用深度学习方法分析光流特征提出了引人注…

XGBoost和LightGBM时间序列预测对比(备忘)

XGBoost和LightGBM都是目前非常流行的基于决策树的机器学习模型,它们都有着高效的性能表现,但是在某些情况下,它们也有着不同的特点。 XGBoost和LightGBM简单对比 训练速度 LightGBM相较于xgboost在训练速度方面有明显的优势。这是因为Ligh…

【Spring教程26】Spring框架实战:从零开始学习SpringMVC 之 bean加载控制

目录 1 问题分析2 思路分析3 环境准备4 设置bean加载控制5 知识点1:ComponentScan 欢迎大家回到《Java教程之Spring30天快速入门》,本教程所有示例均基于Maven实现,如果您对Maven还很陌生,请移步本人的博文《如何在windows11下安装…

智能优化算法应用:基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于哈里斯鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.哈里斯鹰算法4.实验参数设定5.算法结果6.…

【尘缘送书第七期】2023年度盘点:智能汽车 | 自动驾驶 | 车联网

【文末送书】今天推荐几本智能汽车 | 自动驾驶 | 车联网领域优质书籍。 目录 引言1 《智能汽车》2 《SoC底层软件低功耗系统设计与实现》3 《SoC设计指南》4 《蜂窝车联网与网联自动驾驶》5 《智能汽车网络安全权威指南(上册)》6 《智能汽车网络安全权威…

Keil 编译输出信息分析:Program size: Code, RO-data , RW-data, ZI-data

一般 MCU 包含的存储空间有:片内 Flash 与片内 RAM,RAM 相当于内存,Flash 相当于硬盘。编译器会将一个程序分类为好几个部分,分别存储在 MCU 不同的存储区。 如图所示,在Keil中编译工程成功后,在下面的Bul…

智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.闪电搜索算法4.实验参数设定5.算法结果6.…

NCNN 源码学习【二】:模型加载

​ 正文 这次先来看一段NCNN应用代码中,最先出现的部分,模型加载 ncnn::Net squeezenet; squeezenet.load_param("squeezenet_v1.1.param"); squeezenet.load_model("squeezenet_v1.1.bin");首先我们可以看到一个 ncnn的类Net&am…

【@Cacheable的使用,及设置过期时间 配置方式】

Cacheable的使用,及设置过期时间 配置方式 使用方式 使用方式 Cacheable(cacheNames “ssss#30” ,key “#aaa‘‘#beginTime’’#endTime”) cacheNames/value :用来指定缓存组件的名字key :缓存数据时使用的 key,可以用它来指…

【Oracle】backup备份时报错ORA-19809,ORA-9804

Oracle备份数据库时报错 ORA-19809: limit exceeded for recovery files ORA-19804: cannot reclaim 10305536 bytes disk space from 4385144832 limit 1.清理过时的备份: 使用RMAN删除不再需要的过时备份,以释放空间。执行以下命令: DEL…

模块一——双指针:11.盛最多水的容器

文章目录 题目解析算法原理解法一:暴力枚举(超时)解法二:双指针单调性 代码实现暴力枚举(超时)双指针单调性(时间复杂度为O(N),空间复杂度为O(1)) 题目解析 题目链接:11.盛最多水的容器 这道题…

uniapp实战 —— 轮播图【数字下标】(含组件封装,点击图片放大全屏预览)

组件封装 src\components\SUI_Swiper2.vue <script setup lang"ts"> import { ref } from vue const props defineProps({config: Object, })const activeIndex ref(0) const change: UniHelper.SwiperOnChange (e) > {activeIndex.value e.detail.cur…

C# Socket通信从入门到精通(14)——多个异步UDP客户端C#代码实现

前言: 在之前的文章C# Socket通信从入门到精通(13)——单个异步UDP客户端C#代码实现我介绍了单个异步Udp客户端的c#代码实现,但是有的时候,我们需要连接多个服务器,并且对于每个服务器,我们都有一些比如异步发送、异步接收的操作,那么这时候我们使用之前单个异步Udp客…

jmeter接口测试之登录测试

注册登录_登陆接口文档 1.登录 请求地址&#xff1a; POST xxxxxx/Home/Login 请求参数&#xff1a; args{LoginName:"mtest", // 登录名&#xff0c;可以为用户名或邮箱Password:"123456" // 密码" }响应数据&#xff1a; 成功 {"S…