产品经理之Axure的元件库使用详细案例

                                                     ⭐⭐ 产品经理专栏:产品专栏

                                                     ⭐⭐   个人主页:个人主页


目录

前言

一.Axure的元件库的使用

1.1 元件介绍

1.2 基本元件的使用

1.2.1 矩形、按钮、标题的使用

1.2.2 图片及热区的使用

1.3 表单元件及表格元件的使用

1.3.1表单元件的使用

1.3.2 表格元件的使用

 二.案例绘制

2.1 登录界面案例

2.2简历案例


前言

        继上篇博客的Axure的基本功能介绍,本篇和大家分享Axure的元件库的使用,以及运用登录、简介的原型图绘制的案例

一.Axure的元件库的使用

        1.1 元件介绍

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

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

      1. 基本元件库:包括常见的UI元素,如按钮、文本框、下拉菜单、复选框等,可以直接拖拽使用。用户可以根据需要自定义元素的样式和交互效果。

      2. 表单元件库:包括表单相关的元素,如输入框、单选框、多选框、日期选择器等。这些元素可以帮助用户快速创建表单页面,并模拟用户在表单上的交互。

      3. 导航元件库:包括菜单、导航栏、面包屑导航等元素,可以帮助用户设计网站或应用的导航结构,方便用户浏览和导航页面。

      4. 图表元件库:包括各种图表元素,如柱状图、折线图、饼图等,可以帮助用户创建数据可视化的图表,展示数据的趋势和关联。

      5. 布局元件库:包括网格、栅格、容器等元素,可以帮助用户快速创建页面的布局结构,方便元素的排列和组织。

      1.2 基本元件的使用

      下面是基本元件:下面的黄色框基本上是一样的不过换一个样式即可,当需要某个元件时拖拉拽即可

      ​ 1.2.1 矩形、按钮、标题的使用

 

       1.2.2 图片及热区的使用

  • 拖击图片至显示区,然后双击在本地选择图片即可
  •  热区就是将热区放在特定的位置,再给热区设置交互时间,只有点击热区的范围内才会有设置的交互时间,其它地方没有

    下述的案例交互时间还有许多,这是其中的一种

1.3 表单元件及表格元件的使用

        下面的Axure的表单元件及表格元件的常用元件,大家也可以在搜索框里面进行一个搜索

        

        1.3.1表单元件的使用

  • 文本框就像输入框一样,而文本域就是放大型的文本框,只要拖拉拽即可,二者的提示词在  右边的交互设计那里的提示里面
  • 下拉列表和列表框将其拖入待显示区之后双击即可编辑其内容
  • 复选框和单选框类似,但是因为单选框顾名思义只能选择一个,将单选框拖入显示区之后右击选择指定单选按钮组即可

 

1.3.2 表格元件的使用

         

 二.案例绘制

        2.1 登录界面案例

                下面的登录界面运用了图片、矩形、文本框、文本标签、按钮、图标等元件,将图片置于底层将其锁定,然后矩形放在图片上,最后在矩形里面运用基本元件绘制登录界面

        2.2简历案例

           下方案例运用了水平菜单,矩形,文本菜单,文本框,按钮等元件,切换效果运用了热区的点击交互事件,将个人信息、教育经历和工作经历分别写入单个画布中即可

               好啦~今天的分享就到这啦!! 

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

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

相关文章

VSCode解决本地浏览器需要跨域问题

这里写目录标题 测试用代码执行代码后控制台报错现象解决方案 测试用代码 先把测试用的代码贴出来 测试代码结构 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Com…

基于CNN+数据增强+残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)+数据集+模型(四)

系列文章目录 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xff08;一&#xff09; 基于CNN数据增强残差网络Resnet50的少样本高准确度猫咪种类识别—深度学习算法应用(含全部工程源码)数据集模型&#xf…

飞天使-docker知识点8-docker的资源限制

文章目录 容器资源限制示例 容器资源限制 Docker提供了多种资源限制的方式&#xff0c;可以根据应用程序的需求和系统资源的可用性进行选择。以下是一些常见的Docker资源限制及其使用情况&#xff1a;CPU限制&#xff1a;通过设置CPU的配额&#xff08;quota&#xff09;和周期…

YOLOv8-Seg改进:UniRepLKNetBlock 助力分割 | UniRepLKNet,通用感知大内核卷积网络, 2023.12

🚀🚀🚀本文改进: UniRepLKNet,通用感知大内核卷积网络,ImageNet-22K预训练,精度 和速度SOTA,ImageNet达到88%, COCO达到56.4 box AP,ADE20K达到55.6 mIoU UniRepLKNetBlock 与C2f进行结合使用 🚀🚀🚀YOLOv8-seg创新专栏:http://t.csdnimg.cn/KLSdv 学姐带…

安装NLTK Data

文章目录 NLTK离线安装1. 获取安装包2. 放置nltk_data文件3. Demo4. 参考链接 关注公众号&#xff1a;『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或CSDN滴滴我 nltk库是python语言为自然语言处理提供的一个功能强大&#xff0c;简单易用的函数库&a…

AUTOSAR组织引入了Rust语言的原因是什么?有哪些好处?与C++相比它有什么优点?并推荐一些入门学习Rust语言链接等

AUTOSAR(汽车开放系统架构)是一个由汽车制造商、供应商和其他来自电子、半导体和软件行业的公司组成的全球发展伙伴关系,自2003年以来一直致力于为汽车行业开发和引入开放、标准化的软件平台。 AUTOSAR 最近宣布成立一个新的工作组,用于探索在汽车软件中使用 Rust 编程语言…

python初试二

连接数据库 Django为多种数据库后台提供了统一的调用API。根据需求不同&#xff0c;Django可以选择不同的数据库后台。MySQL算是最常用的数据库。我们这里将Django和MySQL连接。 在Linux终端下启动mysql: $mysql -u root -p 在MySQL中创立Django项目的数据库&#xff1a; …

Python—KNN分类算法

原文: https://zhuanlan.zhihu.com/p/143092725 1. 概述 KNN 可以说是最简单的分类算法之一&#xff0c;同时&#xff0c;它也是最常用的分类算法之一。注意&#xff1a;KNN 算法是有监督学习中的分类算法&#xff0c;它看起来和另一个机器学习算法 K-means 有点像&#xff0…

山峰个数 - 华为OD统一考试

OD统一考试 分值: 100分 题解: Java / Python / C++ 题目描述 给定一个数组,数组中的每个元素代表该位置的海拔高度。0表示平地,>=1时表示属于某个山峰,山峰的定义为当某个位置的左右海拔均小于自己的海拔时,该位置为山峰。数组起始位置计算时可只满足一边的条件。 …

【Hive】——CLI客户端(bin/beeline,bin/hive)

1 HiveServer、HiveServer2 2 bin/hive 、bin/beeline 区别 3 bin/hive 客户端 hive-site.xml 配置远程 MateStore 地址 XML <?xml version"1.0" encoding"UTF-8" standalone"no"?> <?xml-stylesheet type"text/xsl" hre…

基于OHTPPS实现网站HTTPS访问

前言 笔者近期为网站配置HTTPS的域名&#xff0c;查找了大量方案&#xff0c;最近寻得一个不错的解决方式&#xff0c;通过OHTTPS获取免费的证书并部署到阿里云服务器上。 步骤 到OHTTPS官网注册账号 官方地址如下&#xff0c;读者可以先行到官网注册一下账号&#xff0c;笔…

学生管理系统 数据库版

1.写SQL语句 创建school_java数据库 创建student数据表包含 id、name姓名、tel电话、sex性别字段 往student表中加10条数据 2.写Java代码&#xff08;要求只用PreparedStatement对象&#xff0c;变化的值都用?代替&#xff09; 查询student表中所有学生信息 student表中新增三…

Android多国语言翻译 国际化

语言目录详细对应关系 Arabic, Egypt (ar-rEG) —————————–阿拉伯语&#xff0c;埃及 Arabic, Israel (ar-rIL) ——————————-阿拉伯语&#xff0c;以色列 Bulgarian, Bulgaria (bg-rBG) ———————保加利亚语&#xff0c;保加利亚 Catalan, Spain (ca-r…

解决移动端小程序事件穿透的问题

知识点&#xff1a;pointer-events 属性在移动端开发中经常用于处理事件的穿透和响应控制。 下面是对应的场景&#xff1a; 在地图上面写多个小图标&#xff0c;图标位于地图两侧并且都可以点击。要求点击图标时不触发地图的点击事件。如图&#xff1a; 相关代码如下&#xf…

C#串口通讯

在C#写串口通讯小程序时&#xff0c;可以使用System.IO.Ports命名空间提供的SerialPort类。下面是一个简单的例子&#xff0c;包含了一个基本的UI&#xff0c;用于设置串口参数和进行通讯。这里使用了Windows Forms&#xff08;WinForms&#xff09;来创建UI。 步骤&#xff1…

LabelStudio数据标注详细方法

文章目录 情感分析任务Label Studio使用指南1. label-studio 安装2. label-studio 项目创建3. 情感分析任务标注3.1 语句级情感分类任务3.2 属性级情感分析任务3.2.1 属性-情感极性-观点词抽取&#xff08;1&#xff09;Span类型标签&#xff08;2&#xff09;Relation类型标签…

PyTorch: 基于【VGG16】处理MNIST数据集的图像分类任务【准确率98.9%+】

目录 引言在Conda虚拟环境下安装pytorch步骤一&#xff1a;利用代码自动下载mnist数据集步骤二&#xff1a;搭建基于VGG16的图像分类模型步骤三&#xff1a;训练模型步骤四&#xff1a;测试模型运行结果后续模型的优化和改进建议完整代码结束语 引言 在本博客中&#xff0c;小…

antd+vue:tree组件:父级节点禁止选择并不展示选择框——基础积累

antdvue:tree组件&#xff1a;父级节点禁止选择并不展示选择框——基础积累 1.判断哪些是父节点&#xff0c;给父节点添加disabled属性——this.permissionList是数据源2.通过css样式来处理disabled的父节点3.完整代码如下&#xff1a; 最近在写后台管理系统的时候&#xff0c;…

C语言—每日选择题—Day47

第一题 1. 以下逗号表达式的值为&#xff08;&#xff09; (x 4 * 5, x * 5), x 25 A&#xff1a;25 B&#xff1a;20 C&#xff1a;100 D&#xff1a;45 答案及解析 D 本题考查的就是逗号表达式&#xff0c;逗号表达式是依次计算每个表达式&#xff0c;但是只输出最后一个表…

DRF从入门到精通一(DRF介绍、API接口、接口测试工具)

文章目录 DRF入门规范一、Web应用模式1.前后端混合开发模式2.前后端分离开发模式 二、API接口概念Json格式与XML格式的区别前端、前台、后端以及后台的区别 三、接口测试工具&#xff1a;Postman/Apifox DRF入门规范 DRF(django rest framework)是基于django的一个框架&#xf…