产品入门第二讲:Axure产品元件库的使用

  📚📚 🏅我是默,一个在CSDN分享笔记的博主。📚📚 

​​​​

🌟在这里,我要推荐给大家我的专栏《Axure》。🎯🎯

🚀无论你是编程小白,还是有一定基础的程序员,这个专栏都能满足你的需求。我会用最简单易懂的语言,带你走进代码的世界,让你从零开始,一步步成为编程大师。🚀🏆

🌈让我们在代码的世界里畅游吧!🌈

🎁如果感觉还不错的话请记得给我点赞哦!🎁🎁

💖期待你的加入,一起学习,一起进步💖💖

​​ 

目录

一.Axure元件库的介绍

1.概述

2.元件操作

二.基本元件库

形状

图片

图片缩放

文本

热区

​编辑

​编辑

线段元件

画布灰色地区

三.表格元件以及表单元件

​编辑

文本框

文本域

下拉列表

列表框

单选按钮

复选框

菜单与表格元件的使用

四.表单元件的案例

登录实例


一.Axure元件库的介绍

1.概述

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

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

2.元件操作

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

  • 对齐:默认情况下,两个矩形元件并排摆放,中间的边框为两条边框的宽度,如果想保持一条边框的宽度,需要在【偏好设置】中,进行【元件对齐】的设置。

  • 旋转:元件的旋转可以通过按下<Ctrl>键的同时,拉动元件任意一个边界点来实现。旋转之后,可以通过右键菜单【变换形状】-【重置文本到 0°】

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

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

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

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

  • 复制元件:通过鼠标右键菜单的【复制】与【粘贴】,或者使用通用快捷键<Ctrl+C>键与<Ctrl+V>键可以完成画布间或者软件间的复制粘贴操作;同一画布中,可以通过<Ctrl+D>键进行复制;或者,按住<Ctrl>键不放,拖动元件到新的位置松开,完成复制与摆放的操作。

  • 编辑文字:部分元件可以添加文字内容。在未开启单键快捷键功能时,直接输入即可替换当前文字内容;开启单键快捷键功能时,需要双击元件或者在元件上点击按下回车键进入文字编辑状态。

二.基本元件库

1.基本元件使用

【举例说明】积木,通过积木可以拼接出各种模型,元件亦是如此,可以通过元件的组合可以实现我们各种需求。基本元件基本元件是由形状元件、图片元件、线段元件及中继器构成!

形状

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

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

  • 背景图

  • 各种个性形状

  • 表格

  • 按钮

  • 导航操作

  • .......

我们还可以通过在元件上点击鼠标右键,通过菜单中的【选择形状】,让矩形变为圆形或占位符。 另外,形状元件还可以通过上下文菜单【变换形状】选项中的【转换为图片】,将形状元件转换为图片元件。 在Axure RP 9中,我们还可以为形状添加背景图片。形状元件一般用于页面中的背景、边框、按钮、分割线等。

图片

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

图片缩放

手动调整图片的大小时,会失帧导致图片不美观

 

通过将图片锁定的方法让图片等比例缩放,当然也可以通过 shift键来操作等比例防缩

  • LOGO

  • 轮播

  • ........

如果需要批量添加图片,可以通过多选本地磁盘中的图片素材文件并拖入的方式添加到 Axure RP 9 的画布中。

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

文本

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

热区

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

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

热区的应用

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

2.跳转到层或区域,比如滑动网页时回到顶部(跳转)。 3.可以添加交互,比如翻看网页时,自动加载。 4.用作跳转,如果每个标题都需要添加一个跳转链接太繁琐,可以添加一个热区 ,通过热区来达到跳转。

新手在初期学习使用axure软件时,仅需要了解热区功能及应用

线段元件

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

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

画布灰色地区

 

但需要快速定位到白色部位时:可以通过crlt+9 快速定位白色地区

三.表格元件以及表单元件

文本框

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

文本域

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

下拉列表

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

列表联合选择的出现。

列表框

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

注意:列表框元件与文本域元件在画布中外观一样,就像女装大佬,虽然长得像女人,但是功能不一样。在交互功能面板中会显示元件的类型,注意分辨

单选按钮

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

复选框

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

菜单与表格元件的使用

菜单和表格元件都是绘制线框图的元件,方便易用。但是,因为样式编辑受限,所以高保真原型中很少使用。这些元件在画布中的很多操作基本通过右键菜单中完成,例如:行、列、节点、菜单项的添加、删除、移动等操作

四.表单元件的案例

登录实例

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

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

相关文章

西南科技大学数字电子技术实验六(智力竞赛抢答器的设计及FPGA实现)预习报告

一、计算/设计过程 说明&#xff1a;本实验是验证性实验&#xff0c;计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程&#xff0c;越详细越好。用公式输入法完成相关公式内容&#xff0c;不得贴手写图片。&#xff08;注意&#xff1a;从抽象公式直接得出结…

【Azure 架构师学习笔记】- Azure Databricks (3) - 再次认识DataBricks

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (2) -集群 前言 在对Databricks有了初步了解之后&#xff0c;如果要深入使用则需要对其进行更深层次的了解。 Databricks ADB 是一个统一的…

jdk+zookeeper+kafka 搭建kafka集群

环境资源包&#xff1a; jdk-8u341-linux-x64.tar.gz kafka_2.12-2.2.0.tgz zookeeper-3.4.14.tar.gz 一、安装jdk 因为kafka需要Java环境&#xff0c;所以优先配置jdk环境&#xff0c;若已经配置了java环境&#xff0c;此步骤可以忽略 [rootVM-120-2-centos ~]# tar -xvf j…

在Node.js中使用MongoDB连接数据库、创建集合

本文主要介绍在Node.js中使用MongoDB连接数据库、创建集合的方法。 目录 连接数据库使用原生驱动程序连接MongoDB数据库使用Mongoose连接MongoDB数据库 创建集合使用mongodb驱动程序 连接数据库 在Node.js中使用MongoDB连接数据库有两种方式&#xff1a;使用原生驱动程序和使用…

Redis持久化AOF详解

基础面试题 什么是AOF AOF&#xff08;Append-Only File&#xff09;用于将Redis服务器收到的写操作追加到日志文件&#xff0c;通过该机制可以保证服务器重启后依然可以依靠日志文件恢复数据。 它的工作过程大抵分为以下几步&#xff1a; 收到客户端的写入命令(例如SET、DE…

Hadoop学习总结(Hive的安装)

Hive的安装模式分为3种&#xff0c;分别是嵌入模式、本地模式、远程模式。 &#xff08;1&#xff09;嵌入模式&#xff1a;使用内嵌的 Derby 数据库存储元数据&#xff0c;这种方式是 Hive 的默认安装方式&#xff0c;配置简单&#xff0c;但是一次只能连接一个客户端&#xf…

2023.12.14 hive sql的聚合增强函数 grouping set

目录 1.建库建表 2.需求 3.使用union all来完成需求 4.聚合函数增强 grouping set 5.聚合增强函数cube ,rollup 6.rollup翻滚 7.聚合函数增强 -- grouping判断 1.建库建表 -- 建库 create database if not exists test; use test; -- 建表 create table test.t_cookie(month …

目标检测检测精度

在一个数据集检测中&#xff0c;会产生四类检测结果&#xff1a;TP、TN 、FP 、FN&#xff1a; T ——true 表示正确 F——false 表示错误 P—— positive 表示积极的&#xff0c;看成正例 N——negative 表示消极的&#xff0c;看成负例 我的理解&#xff1a;后面为预测结…

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

智能优化算法应用&#xff1a;基于象群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于象群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.象群算法4.实验参数设定5.算法结果6.参考文献7.MA…

C_10练习题答案

一、单项选择题(本大题共 20小题,每小题 2分,共 40分。在每小题给出的四个备选项中,选出一个正确的答案,并将所选项前的字母填写在答题纸的相应位置上。) 1,结构化程序由三种基本结构组成,三种基本结构组成的算法是(A) A.可以完成任何复杂的任务 B.只能完成部分复杂的任务…

【数据结构和算法】压缩字符串

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、题目描述 二、题解 2.1 方法一&#xff1a;双指针 三、代码 3.1 方法一&#xff1a;双指针 四、复杂度分析 前言 这是力扣…

计网Lesson9 - 链路协议和网络概述

文章目录 数据链路层协议Ethernet V2标准Ethernet V2帧格式Ethernet V2帧长度标准以太网帧 MAC 帧协议 PPP 协议PPP 概述PPP 帧 网络层网络层的设计选择 数据链路层协议 Ethernet V2标准 Ethernet V2帧格式 以太网帧格式说明&#xff1a; 6 6 6 字节目标地址 6 6 6 字节源地…

docker核心原理——unionfs、namespace、cgroup

docker 核心原理 docker的核心原理其实就是cgroupnamespaceunionfs 组合实现的隔离机制&#xff0c;资源控制等。 隔离机制 在容器进程启动之前重新挂载它的整个根⽬录“/”&#xff0c;⽤来为容器提供隔离后的执⾏环境⽂件系统通过Linux Namespace 创建隔离&#xff0c;决…

论文阅读:MonetDB/X100: Hyper-Pipelining Query Execution

目录 Abstract 1 Introduction 1.1 Outline 2 How CPU Work Abstract 在决策支持、OLAP和多媒体检索等计算密集型应用领域&#xff0c;数据库系统往往只能在现代cpu上实现较低的IPC(每周期指令)效率。本文首先以TPC-H基准为重点&#xff0c;深入研究了这种情况发生的原因。…

Debian 系统镜像下载

最近在看一些网络相关的文章需要用到 debian 11.x 的系统网上找了好多都发下载&#xff0c;在官网看一下 有个 11.8 的版本我无法下载&#xff0c;提示被最新的 debian-12.4.0 所代替&#xff0c;于是找到了这个链接 Index of /cdimage/unofficial/non-free/cd-including-fi…

计算机毕业设计 基于Web的城市旅游网站的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

【已解决】ModuleNotFoundError: No module named ‘tensorflow‘

问题描述 Traceback (most recent call last): File "dataset_tool.py", line 16, in <module> import tensorflow as tf ModuleNotFoundError: No module named tensorflow 如果直接pip install tensorflow&#xff0c;还会报错 解决办法 方法一 pip i…

MSF学习

之前的渗透测试中 其实很少用到 cs msf 但是在实际内网的时候 可以发现 msf cs 都是很好用的 所以现在我来学习一下 msf的使用方法 kali自带msf https://www.cnblogs.com/bmjoker/p/10051014.html 使用 msfconsole 启动即可 首先就是最正常的木马生成 所以这里其实只需…

hive聚合函数之JOIN原理及案例

1.数据准备 原始数据 创建dept.txt文件&#xff0c;并赋值如下内容&#xff0c;上传HDFS。 部门编号 部门名称 部门位置id 10 行政部 1700 20 财务部 1800 30 教学部 1900 40 销售部 1700创建emp.txt文件&#xff0c;并赋值如下内容&#xff0c;上传HDFS。 员工编号 姓名 岗…

es6学习(一):变量声明的方式对比:var,let,const

前言 在let和const出现之前,js可以使用var为变量命令,如果是函数也可以用function命名,甚至你可以直接不用任何关键字命名 var a 1function fn() { }b 2console.log(a)console.log(fn)console.log(b) 结果如下 var的特性 1.window环境下,var在最外层定义的变量会直接赋值给…