产品经理必备-----Axure元件使用及案列

                                               

                                                     🎬 艳艳耶✌️:个人主页

                         🔥 个人专栏 :《产品经理管理项目周期及【Axure RP9】简介&安装&基本使用》

                                                      ⛺️ 越努力 ,越幸运

目录

一、Axure简介

二、Axure基本元件

2.1基本元件的使用

2.1.1 、形状元件

2.1.2、图片元件

2.1.3、占位符 

2.1.4、文本

2.1.5、线段元件

2.1.6、 热区文件

2.2、表单元件的使用

2.1.1、 文本框

2.1.2、 文本域

2.1.3、下拉列表

2.1.4、列表框

2.1.5、复选框

2.1.6单选按钮

2.3、菜单与表格元件的使用

2.3.1、树

2.3.2、表格

2.3.3、水平菜单

2.3.4、垂直菜单

三、 登录界面示例展示

四、个人简历


一、Axure简介

产品简介icon-default.png?t=N7T8https://blog.csdn.net/2301_76988707/article/details/132034860?spm=1001.2014.3001.5502

二、Axure基本元件

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

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

  默认元件库又分为基本元件,表单元件,菜单/表格,标记元件。

                            下面着重介绍前三个元件的使用。 

2.1基本元件的使用

基本元件是由形状元件、图片元件、线段元件及中继器构成

2.1.1 、形状元件

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

使用方式:

将元件添加到画布:在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开。

选中元件:单击选中➡在画布区域,用鼠标单击对应的元件即可选中。

框选➡鼠标移动到画布空白处,拖动鼠标,在形成的正方形区域中框住一个或多个元件,可以实现批量选中。

2.1.2、图片元件

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

使用方式:

插入图片:将图片元件直接拖拽到右侧画布,鼠标双击图片元件,选择一张本地图片点击打开,鼠标左键点击图片四周的方块点并按住拖放调整图片的大小。 

将图片元件等比例缩放:选中元件,在输入数值调整元件尺寸时,鼠标可以点击"🔒"小图标,让元件锁定宽高比例。也可以按住shift进行拉动。

2.1.3、占位符 

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

使用方法: 和形状元件的使用方法一样,选中某个元件之后,按住鼠标左键一直拖到工作区域使用即可。

2.1.4、文本

在网页中文本的名称是labe,用于页面中添加说明文字、文字链接或一些动态的提示。 

 使用方法:

设置元件文字边距/行距:将文本元件拖拽至右侧画布中,双击文本元件就可以编辑内容了。[行间距]和[边距]在画布右侧的文本样式面板中修改。

2.1.5、线段元件

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

使用方法:

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

效果图: 

2.1.6、 热区文件

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

热区的应用:

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

2.跳转到层或区域,比如滑动网页时回到顶部(跳转)。

3.可以添加交互,比如翻看网页时,自动加载。

4.用作跳转,如果每个标题都需要添加一个跳转链接太繁琐,可以添加一个热区 ,通过热区来达到跳转。

使用方法:

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

2.2、表单元件的使用

表单是需要用户填写的,所以表单元件都是用于获取用户输入数据的元件。

2.1.1、 文本框

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

2.1.2、 文本域

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

2.1.3、下拉列表

用于多个选项的单项选择

2.1.4、列表框

直接呈现选项的选择框,可以支持单选或多选。(列表框元件与文本域元件在画布中外观一样 ,注意分辨)

2.1.5、复选框

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

2.1.6单选按钮

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

2.3、菜单与表格元件的使用

菜单与表格元件在搭建对样式无要求或要求较低的线框图时,使用起来比较方便。

例如添加删除行、节点或菜单项等,可以在节点、单元格、或者菜单项上点击<鼠标右键>,在弹出的菜单中完成。

2.3.1、树

垂直方向的菜单,树形菜单可自定义节点前的图标,默认是三角形,Axure提供+/-和三角形两种图标,节点可以展开与折叠。

主要用于网站导航,多使用于网站后台。

2.3.2、表格

表格很常见,可以添加表格信息,表格框可以输入内容,每个表格都可以设置单独的事件,但是axure还不支持单元格的合并。

将表格元件拖拽至右侧画布中,每个表格单元都可以编辑文本内容,如果想新增行/列的话,选中一行或一列,右击鼠标选择新增对应的行/列即可,操作方法与excel一样。
 

2.3.3、水平菜单

常用于网页导航

2.3.4、垂直菜单

用法和水平菜单一致,但常用于后台系统的左侧边菜单导航。

操作方法和表格元件差不多,将垂直表格菜单拖拽至右侧画布中,每个表格单元可以编辑内容,增加表格单元的方法也是右击鼠标。

三、 登录界面示例展示

四、个人简历

今日小编就介绍到这里,后续还会更新,敬请期待!!!

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

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

相关文章

如何将Word中的表格图片转换为可编辑格式?

我们都知道&#xff0c;Word中的表格是一个非常有用的工具&#xff0c;可以让我们在文档中轻松添加和编辑各种数据。但有时候我们可能会遇到一个问题&#xff1a;当表格作为图片插入时&#xff0c;我们就不能直接编辑它了。这可怎么办呢&#xff1f; 别担心&#xff0c;我们有…

【算法】递归、搜索与回溯算法

文章目录 一. 名词解释1. 递归1.1 什么是递归&#xff1f;1.2 为什么会用到递归&#xff1f;1.3 如何理解递归&#xff1f;1.4 如何写好一个递归&#xff1f; 2. 遍历和搜索3. 回溯和剪枝 二. 递归系列专题1. 汉诺塔问题2. 合并两个有序链表3. 反转链表4. 两两交换链表中的节点…

3DSEE:AI驱动的3D模型语义搜索引擎

3DSEE &#xff08;3D SEmantic Engine&#xff09;是基于 AI 技术的 3D 模型语义搜索引擎&#xff0c;可以自动提取 3D 模型内涵的语义信息并存储入库&#xff0c;以帮助用户使用自然语言或关键字高效地检索 3D 模型。3DSEE 提供完善的二次开发 API&#xff0c;无论使用Java、…

大数据技术6:大数据技术栈

前言&#xff1a;大数据相关的技术名词特别多&#xff0c;这些技术栈之间的关系是什么&#xff0c;对初学者来说很难找到抓手。我一开始从后端转大数据的时候有点懵逼&#xff0c;整体接触了一遍之后才把大数据技术栈给弄明白了。 一、大数据技术栈 做大数据开发&#xff0c;无…

linux课程第二课------命令的简单的介绍2

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

如何用idm下载迅雷 2024最新详细解析

有许多小伙伴日常习惯用迅雷处理或者下载文件&#xff0c;对于普通用户&#xff0c;由于迅雷平台的限速&#xff0c;下载速度仅有几十kb。此外&#xff0c;还有一些小伙伴安装idm后软件界面是英文&#xff0c;那么如何用idm下载迅雷&#xff0c;idm怎么设置中文呢&#xff1f;今…

9:00面试,9:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到12月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40…

C++写文件时主动刷新磁盘文件大小

一.效果 如下图所示,test.log是我正在写入的文件。 二.实现 #include <fstream> #include <io.h> #include <iostream> #include <stdio.h>class OfSteamImmediately : public std::ofstream { public:OfSteamImmediately(){}~OfSteamImmediately()…

【项目小结】优点分析

一、 个人博客系统 一&#xff09;限制强制登录 问题&#xff1a;限制用户登录后才能进行相关操作解决&#xff1a; 1&#xff09;前端&#xff1a; ① 写一个函数用于判断登录状态&#xff0c;如果返回的状态码是200就不进行任何操作&#xff0c;否则Ajax实现页面的跳转操作…

ArkTS布局

布局 通过Row和Column容器来实现布局 通用属性 justifyContent 设置子元素在主轴方向的对齐格式 Column容器参数如下&#xff08;Row容器只是改变主轴方向&#xff0c;将每个图横过来理解即可&#xff09; alignItems 设置子元素在交叉轴方向的对齐格式 Row容器使用VerticalA…

【清晰明了】Jenkins邮件发送配置

自带邮件插件 首先要知道的是jenkins是自带邮件插件的&#xff0c;且不支持卸载。 下面开始配置自带邮件插件。 配置默认邮件管理员 系统管理 --> 系统配置&#xff0c;进行如下配置&#xff1a; 不配置管理员邮件地址报错如下 jakarta.mail.internet.AddressException:…

成绩统计(oj题)

一道考验细节的题 最后是&#xff1f;&#xff1a;运算符用错了 代码如下&#xff1a; #include<stdio.h> #include<string.h> typedef struct Grade{int num;int inv; }Grade; Grade tmp[10]; int n, m, g, interval[10] {0};int main(void) {scanf("%d%d…

SPRD Android 13 下拉状态栏菜单添加静音快捷键简单记录

SPRD Android 13 下拉状态栏菜单添加静音快捷键简单记录 需要修改文件具体修改补丁吐槽需要修改文件 frameworks/base/packages/SystemUI/res/values/config.xml frameworks/base/packages/SystemUI/src/com/android/systemui/qs/tileimpl/QSFactoryImpl.java frameworks/base…

【Python】手把手教你用tkinter设计图书管理登录UI界面(四)

上一篇&#xff1a;【Python】手把手教你用tkinter设计图书管理登录UI界面&#xff08;三&#xff09;-CSDN博客 下一篇&#xff1a; 本文主要阐述完成“用户密码找回”&#xff0c;诸位且看我如何实现吧&#xff01; 为了方便使用“已注册用户数据库.txt”的数据&#xff0…

Windows 11安装xray

需要先安装python&#xff0c;我这里已经安装好了&#xff0c;在命令行里边使用python --version可以看到自己的python版本。 xray的下载网址为https://github.com/chaitin/xray/releases&#xff0c;我根据自己的笔记本电脑配置&#xff0c;选择下载xray_windows_amd64.exe.…

静态代理,JDK动态代理,CGLIB代理原理详解

学习代理前要对反射有一定的了解 代理&#xff1a; 代理是一种设计模式&#xff0c;代理模式是一种结构型设计模式&#xff0c;它允许通过创建一个代理对象来控制对另一个对象的访问。代理对象充当了客户端与真实对象之间的中介&#xff0c;它可以在客户端和真实对象之间添加…

MySQL笔记-第08章_聚合函数

视频链接&#xff1a;【MySQL数据库入门到大牛&#xff0c;mysql安装到优化&#xff0c;百科全书级&#xff0c;全网天花板】 文章目录 第08章_聚合函数1. 聚合函数介绍1.1 AVG和SUM函数1.2 MIN和MAX函数1.3 COUNT函数 2. GROUP BY2.1 基本使用2.2 使用多个列分组2.3 GROUP BY中…

现代雷达车载应用——第2章 汽车雷达系统原理 2.2节

经典著作&#xff0c;值得一读&#xff0c;英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.2 汽车雷达架构 从顶层来看&#xff0c;基本的汽车雷达由发射器&#xff0c;接收器和天线组成。图2.2给出了一种简化的单通道连续波雷达结构[2]。这…

Excel——TEXTJOIN函数实现某一列值相等时合并其他列

一、TEXTJOIN函数介绍 公式TEXTJOIN(分隔符, 忽略空白单元格, 字符串1…) 分隔符&#xff1a;文本字符串&#xff0c;或者为空&#xff0c;或用双引号引起来的一个或多个字符&#xff0c;或对有效文本字符串的引用。如果提供一个数字&#xff0c;则将被视为文本。 忽略空白单…

Python 神奇解码器:pyWhat 库全面指南

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今数字化的世界中&#xff0c;理解和处理文本数据是许多应用程序的关键任务。而PyWhat库作为一个用于处理文本的Python库&#xff0c;提供了强大的功能&#xff0c;帮助开发者在文本中识别和提取有意义的信息…