产品入门第二讲: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 快速定位白色地区

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

文本框

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

文本域

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

下拉列表

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

列表联合选择的出现。

列表框

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

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

单选按钮

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

复选框

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

菜单与表格元件的使用

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

四.表单元件的案例

登录实例

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

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

相关文章

Android View闪烁动画AlphaAnimation,Kotlin

Android View闪烁动画AlphaAnimation&#xff0c;Kotlin private fun flickerAnimation(view: View?) {val animation: Animation AlphaAnimation(1f, 0f) //不透明到透明。animation.duration 500 // 1次过程时长。animation.interpolator LinearInterpolator() // 线性速…

Axure电商产品移动端交互原型,移动端高保真Axure原型图(RP源文件手机app界面UI设计模板)

本作品是一套 Axure8 高保真移动端电商APP产品原型模板&#xff0c;包含了用户中心、会员成长、优惠券、积分、互动社区、运营推广、内容推荐、商品展示、订单流程、订单管理、售后及服务等完整的电商体系功能架构和业务流程。 本模板由一百三十多个界面上千个交互元件及事件组…

如何在上架App之前设置证书并上传应用

App上架教程 在上架App之前想要进行真机测试的同学&#xff0c;请查看《iOS- 最全的真机测试教程》&#xff0c;里面包含如何让多台电脑同时上架App和真机调试。 P12文件的使用详解 注意&#xff1a; 同样可以在Build Setting 的sign中设置证书&#xff0c;但是有点麻烦&…

微信小程序:上传图片到别的域名文件下

效果 wxml <!-- 上传照片 --> <view class"addbtn"><view classpic name"fault_photo" wx:for"{{imgs}}" wx:for-item"item" wx:key"*this"><image classweui-uploader_img src"{{item}}"…

Kafka-客户端使用

理解Kafka正确使用方式 Kafka提供了两套客户端API&#xff0c;HighLevel API和LowLevel API。 HighLevel API封装了kafka的运行细节&#xff0c;使用起来比较简单&#xff0c;是企业开发过程中最常用的客户端API。 LowLevel API则需要客户端自己管理Kafka的运行细节&#xf…

得帆云为玉柴打造CRM售后服务管理系统,实现服务全过程管理|基于得帆云低代码的CRM案例系列

广西玉柴机器股份有限公司 广西玉柴机器股份有限公司始建于1992年&#xff0c;是国内行业首家赴境外上市的中外合资企业&#xff0c;产品远销亚欧美非等180多个国家和地区。公司总部设在广西玉林市&#xff0c;下辖11家子公司&#xff0c;生产基地布局广西、江苏、安徽、山东等…

交友系统:打造独具魅力的社交平台!APP小程序H5三端源码交付,支持二开!

随着社交媒体的兴起&#xff0c;交友系统成为了现代社会不可或缺的一部分。人们希望通过网络结识新朋友&#xff0c;拓展社交圈&#xff0c;寻找志同道合的伙伴&#xff0c;甚至找到自己的爱情。本文将为您介绍交友系统的定义、功能以及如何打造一个独具魅力的社交平台。 一个成…

类加载机制与反射

类加载机制与反射 一.虚拟机类加载机制 1.虚拟机类加载机制概述 虚拟机把描述类的数据从class文件加载到内存 将类的数据进行校验,转换解析和初始化 形成可以被java虚拟机直接使用的java类型 2.类加载过程 当程序要使用某个类时,如果该类还未被加载到内存中,系统会通过加…

Git 常用命令速查

一、 Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释git remote add origin git192.168.1.119:ndshowgit push origin mas…

centos卸载mysql库全流程

&#xff08;1&#xff09;暂停服务 systemctl stop mysqld &#xff08;2&#xff09;查看所有的安装包&#xff0c;将其卸载 rpm -qa |grep mysql rpm -q ( or --query) options -a 查询所有安装的软件包 &#xff08;3&#xff09;使用yum卸载安装的mysql [rootbo /…

科研论文中PPT图片格式选择与转换:EPS、SVG 和 PDF 的比较

当涉及论文中的图片格式时&#xff0c;导师可能要求使用 EPS 格式的图片。EPS&#xff08;Encapsulated PostScript&#xff09;是一种矢量图格式&#xff0c;它以 PostScript 语言描述图像&#xff0c;能够无损地缩放并保持图像清晰度。与像素图像格式&#xff08;如 PNG 和 J…

Qt搭建MQTT编程环境

QT 部署官方MQTT模块 在Qt Creator中&#xff0c;默认是没有部署Mqtt模块的&#xff0c;在使用QT编程之前&#xff0c;先把mqtt 模块部署到开发环境当中。参考博文&#xff1a;Qt开发技术&#xff1a;mqtt介绍、QtMqtt编译和开发环境搭建_长沙红胖子-CSDN博客 下载 Qt官方在g…

收款码在线生成系统源码/开源layui前端框架/附多套前端UI模板/三合一收款码生成系统源码

源码简介&#xff1a; 收款码在线生成系统源码&#xff0c;它是采用开源layui前端框架&#xff0c;并且它附多套前端UI模板&#xff0c;作为三合一收款码生成系统源码&#xff0c;界面简洁大方。 Layui前端的多合一收款码在线生成系统源码&#xff0c;附带了多套精美的前端UI…

数据库——安全性

智能2112杨阳 一、目的与要求&#xff1a; 1、设计用户子模式 2、根据实际需要创建用户角色及用户&#xff0c;并授权 3、针对不同级别的用户定义不同的视图&#xff0c;以保证系统的安全性 二、内容&#xff1a; 先创建四类用户角色&#xff1a; 管理员角色Cusm、客户角…

STM32——串口实验(非中断)

需求&#xff1a; 接受串口工具发送的字符串&#xff0c;并将其发送回串口工具。 硬件接线&#xff1a; TX -- A10 RX -- A9 一定要记得交叉接线&#xff01;&#xff01; 串口配置&#xff1a; 1. 选定串口 2. 选择模式 异步通讯 3. 串口配置 4. 使用MicroLIB库 从…

数据结构 | 大根堆

思维导图 代码 #include<stdio.h> #include<iostream> using namespace std; void HeapAdjust(int* arr, int start, int end) {int temp arr[start];for (int i 2 * start 1; i < end; i 2 * i 1) //end可以取到等于 因为它是最后一个元素{if (i<end…

Spring boot注解

1.RestController RestController 注解用于标识一个类,表示该类的所有方法都返回JSON或XML响应&#xff0c;而不是视图页面。它是Controller和ResponseBody的组合 2.RequestMapping RequestMapping 注解用于映射HTTP请求到控制器方法或类。它可以用于类级别和方法级别,用于定…

UI5 development on VS Studio code

今天来分享一下如何VS studio code 上UI5开发环境的搭建 1.安装Node.js 路径&#xff1a;Node.js 因安装步骤较为简单&#xff0c;故不在此赘述。 验证方法如下&#xff1a;WINR-->CMD--->node --version 出现下图即可 2. 安装UI5 CLI (为了后面我们方便使用UI5 的命令…

向ChatGPT提特殊问题,可提取原始训练数据!

随着ChatGPT等模型的参数越来越大&#xff0c;预训练数据也呈指数级增长。谷歌DeepMind、华盛顿大学、康奈尔大学等研究人员发现,无论是开源还是闭源模型&#xff0c;在训练过程中皆能记住一定数量的原始训练数据样本。 如果使用特定的恶意攻击&#xff0c;便能轻松地从模型中…

python pip 相关缓存清理(windows+linux)

pip会大量缓存&#xff0c;如果全部堆在系统盘&#xff0c;会造成别的无法使用 windows和linux通用 一、linux linux是在命令行操作 1.查看缓存位置 pip cache dir我这里默认是在/root/.cache/pip 2.查看大小 du -sh /root/.cache/pip结果如下&#xff1a; 3.清理&#…