Axure的树元件如何增加

原件是爱所中的基本元素，原件归类在原件库中，除了系统提供的原件库之外，你也可以创建自己的原件库或购买第三方的原件库。要添加一个原件库， 点击原件库上的更多按钮，然后选择导入本地原件库，就可以选择原件库进行加载了。加载完成后，我们可以看到默认的原件库已经替换为新加载的原件库，也可以拖拽新原件库的原件到画布上。 你也可以选择浏览在线原件库。从 exo 官网购买第三方的原件库。 如果你已经加载了一个第三方的源源库，然后点击编辑源源库，就可以在新的页面编辑它。 你可以看到原建库的页面结构和普通的文件是一致的，也有文件夹和页面，每个文件夹对应一个原建库的分类，每个页面对应一个原建库的原件。 图片文件也可以加载。点击导入图片文件夹，又选择图片所在的文件夹进行加载，加载后就可以使用这些图片了。 除了可以在 extra 软件中加载原件库，你也可以右键原件库文件，然后用 extra ip 十打开。你可以选择是否将 加载的文件保存在原位置，或将其移动到 extra 文件架下，点击确定就是已加载了。 如果想将原件库从原件库面板上移除，选择移除原件库。 要创建一个新的原件库，点击文件新建原件库，就可以创建一个新的空白原件库。刚才我们已经提到，新原件库的编辑方式和编辑普通的文件类似，你可以创建文件夹和页面， 然后调整他们的位置。

大家好，我是大旭，一个希望能帮助到你的青年大叔，我们来继续学习 x 的基础知识。表单元件作为我们最常使用的元件，我们需要好好了解一下它的具体作用。其中属性最多的就是文本框，文本框元件包括了多个属性的，全责文本、密码、邮箱、数字、 uil、 搜索文件日期、月份、时间、密码文本在输入内容的时候是以秘文的形式去展示的，数字文本只能输入数字字符串，其他的是输入不进去的文件文本可以在本地上传文件，但是这是一个交互效果。 日期文本可以进行日期年月日的选择。时间文本可以按上下键来调节数字时间，其他文本邮箱、电话、幺二二月份基本可以正常输入，所有内容没有固定限制。当然我们在实际的很多应用场景当中需要一些提示的文案，那么我们需要在这里输入提示文案，比如请听输入密码。我们也可以选择隐藏这些 文案的一些方式。第一种，当我们输入字符串的时候消失。第二种，只要我们的光标在输入框内，提示文案就消失。勾选禁用这个输入框就无法再进行内容编辑了。多行文本框原件就不像文本框有那么多的属性了，其他都是与文本框一样的常规操作。下拉列表原件在双击时可以跳出一个弹框来进行立摆编辑。 点击添加可以添加下拉列表选项，如果对选项打勾，则表示这项内容将作为默认项。如果都不打勾，则默认的选项第一位就是第一选项，如果觉得这样一个一个添加比较麻烦，可以直接点击编辑多项，可以直接输入选项名称，然后回车下一项依次类推 进行多项编辑的时候更加方便。列表框原件与下拉列表原件操作和属性都一样，只不过在列表框里是允许同时多个选项的。单选按钮和副选按钮是我们非常常用的原件， 当我们选择单选按钮，复制多个预览之后，想要进行单选的操作，却发现这并不是单选，而是多选，那怎么该去操作呢？假如我们加入了四个选项是需要进行单选的，那么这四个选项就为一组全选之后在交货里选择单选按钮组进行命名，然后我们再预览一下 这次的选择就是四选一的单选了。复选按钮本身就是可以进行多项选择了，所以他就是正常的常规操作菜单。列表里的所有的原件都可以理解为是与 excel 一样的功能，都是添加、删除等这样的常规操作。 绘制圆形交互呆萌的时候用的并不算多。最后，如果想要把做的圆形图转换成图片的话，我们可以直接通过文件进行导出，无论是单页还是多页都是可以的。如果想进行交互呆萌的展示，我们就需要在发布里设置 hdml 文件。另外，低版本是无法打开高版本的文件的， 比如你这八百万的软件是无法打开九版本的原文件的。好了，以上就是我们这里关于所有 extra 的记录知识，我是大旭，希望能帮到你。

如何使用标尺、网格线、辅助线及原件吸附，提升圆形设计的能力？本节课我们主要讲解 x 标尺、网格线、辅助线及原件吸附的使用方法。 首先我们打开 x 软件，选择工具栏上的视图标尺、网格辅助线，也可以在画布空白处右键鼠标选择标尺。网格辅助线，我们可以看到相关的设置。点击显示标尺，我们可以看到画布左侧和顶部标尺显示或隐藏。 点击显示网格，我们可以看到画布中右网格线。网格线可以设置间距大小，默认十像素。 鼠标放在顶部或左侧的标尺上拖动创建辅助线，选择辅助线，可以设置锁定或删除锁定的辅助线。不可以 移动原件的对齐，我们在画布中拖入图片和矩形，拖动矩形改变大小， 我们移动图片可以对其到辅助线或移动辅助线对其图片操作，我们拖动举行对其图片时，会发现有红色线，提示距离进行吸附， 这就是原件拖动对齐吸附，我们也可以通过工具栏的对齐进行操作，左对齐，居中对齐，顶部对齐操作，根据实际设计原型的需求进行对齐，一般拖动原件就会自动对齐吸附提示 action。 标尺、网格线、辅助线及原件吸附就已经讲解完成。在产品原型设计时，我们通常使用拖动原件吸附到参考原件， 比较方便快速设计原型图。本节课程标尺、网格线、辅助线及原件吸附相关知识你学会了吗？请关注我！

大家好，今天呢给大家分享一下我们的元件面板的基本元件， 我们可以看到他前面的是三个一样的矩形，他们主要的区别就是他们的填充式，还有他们的描边不一样，我们可以拉出来看一下，我们可以看得到第一个拉出来的是白色的填充，还有他的描边， 那第二个拉出来的时候，他就没有描边填充这回事。 那我们一般是怎么考虑选择哪一个呢？一般看我们绘制的图形的时候，我们需不需要描边，如果我们不需要，那我们就直接拖拽第二个矩形就可以， 那这是我们的圆形，拉出来的是一个一百七乘一百七的圆形，当然我们的圆形也可以由我们的矩形去设置，等宽就他的宽高一样，设置完以后他就变成一个正方形， 那我们再给他再样式，面板这边有个圆角，我们一百七除以二，那我们给他个八十五，只要你比比他八十五大，比如你给个一百也可以，这样他就会变成一个圆。 所以有时候我们的原件不一定要固定采用哪一个，也可以通过其他原件去通过设置它的样式来达到同样的效果。 那第二个呢就是我们的图片，那我们图片我们可以看到， 那我们选中他的时候，我们可以看到他边缘的这八个点是黄色的，那这时候这个状态我们去选双击他的时候，我们可以选中我们的图片， 图片太大会导致程序运行缓慢，是否进行优化，那有时候我们的图片太大，你为了我们预览的时候比较顺畅，那你就选择是他就会进行优化，如果你选择否，那么他就会比较卡。 那有一种情况就是当我们的图片是 p n g 的时候，你一定要选择否，不然的话你的 p n g 图片被它进行 优化完以后，他就会图片就会变得混乱，所以同学们可以自己两个尝试的试一下， 那我们这边就点击进行优化，是我们可以看到它是不是变成一张 很大的图片，这就是图片，它原来的尺寸是幺九二零乘以一零八零。那如果我们我们撤退一下，如果我们想让他 填充完的图片是跟我们原来的图片的尺寸原尺寸是一样的，那我们该怎么设置呢？我们只需要鼠标移到这六个这八个点的上面点一下，这时候我们可以看 看到这八个点是不是变成白色的，看到没有，他的填充是变成白色的，那这个时候你再去双击图片，打开他，确定你看到我们加载进来的图片，他就会变成原来的尺寸去展示他， 所以这就是图片它使用的区别。 类似我们画那个 band 图的时候，我们设置好我们的 band 的尺寸完以后，我们就可以直接去替换我们的图片，这样的话我们不用再去调节它的尺寸。 那像我们的站位服务，特别是我们的产品经理，有时候我们画低保证的时候，我们需要告知 我们的视觉或者开发，到时他们这边象征的是图片啊， banner 啊或者图标啊，我们就可以用站位服去体现他。 类似我们的新闻列表我们就可以，比如我们通常的新闻列表，我们就可以拉一个站位符，然后再拉一个文本标签，那我们这样就可以高速开发，这是一个图片， 这样的话我们画低保证的时候就不需要去找一张图片，这样我们的效率会更快。我们的按钮 这个是 x 它自带的按钮的样式，它这边也分为主要按钮， 然后这是链接按钮，一般我们这种样式也是叫做侧腰按钮，这样也可以方便我们快速的去搭建我们的界面。那一般这种是用于我们的文字，我们的链接按钮，那我们可以看到 我们接下来的是我们的文本标间，它分为一级标题，二级标题，那它们的区别呢？就是 这几个文本标签，主要就是他们的字体的大小不一样，我们可以看一下，我们拉出来的他是三十二号的，这个拉出来他是二十四号，这个拉出来他是十八号， 然后我们的文本标签拉出来的是十四号，所以当我们需要绘制 的图形，我们的日体多大的时候，我们去拉对应的文本就可以了。 那接下来就是文本段落，文本段落一般就是像我们的我们的文章的详情页，我们就可以用文本段落这一个，因为它输入的时候它可以自动换函，比如我们输入 我们输入一段文字弯以后，他这边是十三号，我们可以去更改我们的日期大小，我们改为十六号吧， 你看我们复制它，你去粘贴它都会可以自动替换哈。那同样的，其实我们的文本标签跟我们的文本堕落它也是类似的， 我们把我们的粘贴的时候，我们看到他会一直往水平方向去延伸，那这时候我们只需要把我们的尺寸就他这边有八个点，我们选中这个点我们就可以去拖拽我们的 文本标线的宽度，那我们拖再弯以后，我们再去粘贴它，看到没有，它也其实也是可以自动去换行的。 那我们可以看到在我们的盖药面板这边我们选中它，看到没有，它其实跟我们的文本标签它这边的标识是一样的，所以 虽然他们的叫法不一样，但其实他们都是同个原件，同样的，我们可以发现我们矩形这边是不是他这边盖面板这边 括号里面写的是矩形，你看，但是我们来我们的文本标签，你看我们的文本标签，你看他们的区别，是不是这个没有文字，这个有文字没填充，那我们就给他个填充式， 填充式我们给个明显一点的，然后我们把它的宽度拉宽， 框完以后我们把文字去掉，那我们这时候再去发现看到没有他也变成一个矩形了， 那这边他又变成共用的一个原件属性，所以我们有时候画的时候就不用去特别去在意我们是拉文本标签还是矩形，其他都是 可以去绘制我们的原型的，那我们采用哪一个，就看我们到底是拉出来的东，我们要制作的东西有没有填充式啊？有没有描边啊？去取决于我们要采用哪个原件。 那我们的水平线，也就是我们一般画的分割线，我们可以设置它线段，这边的可以线它的粗细，那这边就是线段的颜色， 那这边就是我们要不要设置虚线还是什么的，还是实线，我们给这边给个二吧，然后我们的虚线给个明显的颜色， 看到没有？这就是线段的设置，当然它还可以设置它两边的箭头啊，这边一般用于我们圆形的标注说明的时候，我们可以采用这个来做， 我们可以去控制他两端展示的是什么图形，看到没有？还有我们绘制流程图的时候也是可以的， 那垂直线也是同样的道理。那接下来就是我们的日区，我们日区一般可以用来做干啥呢？ 它主要有一个特性，就是我们在预览的时候，我们可以看到它其实是看不见我们这个预区的，看到没有，我们刚 iphone 的日趋，它是看不见的，所以一般会用在当我们 想给一张图片，比如这是一张图片，我们想给这张图片的某个区域去添加交互的时候，那我们就可以用我们的日区 通过 p 字区去添加加户，添加完以后 我们就可以对这张图片去添加一些交互的动作，特别是我们绘制，假如我们视觉人员已经绘制的高保真， 那这时候我们想把高保真的图片把它交互串联起来，那这时候我们就可以采用日区给他固定到图片上面的某个区域，然后再去给他添加 交互，这样的话我们就可以达到我们的高保真的交互的串接。 那动态面板呢？一般它的实用性也是最广泛的一个元件， 一般类似我们的移动端呢，我们的 pc 端呢，它的 band 图啊，就经常需要用到我们的动态面板，因为动态面板它可以添加，你看它是不是像一个楼层，那它就可以去不同的楼层，它就可以去添加不同的原件， 这样的话我们就可以去控制它去切换我们的 band 图的图片。同样它动态面板它还有个它，你可以看一下 它的样式，这边可以去设置垂直滚动还是水平滚动，那这样的话当我们的内容想放在一个区域去滚动的时候，我们就可以把它转为动态面板， 就比如我们现在这段文字，我们再给它复制长一点， 那我们这段文字如果我们想给他固定的一定的宽度去滚动他，那我们就只需要把它右键转为动态面板，他默认的时候 是他自身的高度，我们可以看到他这边是自适应的，那我们只需要假如我们只需要在他在这个区域去滚动看到没有，他这时候自适应就已经勾选去掉了。但是我们这里因为 他默认是从不滚动，导致我们预览的时候他其实滚动不了的，我们可以看一下看到没有，他没有，没有显示那个滚动条， 那假如我们把它按为按时滚动，你看它水平和垂直方向就有了，这时候我们再去预览看到没有，这时候我们就可以去滚动它了，这是水平方向的，所以这就是动态面板的应用， 当然它还有很多的特殊用法，后面我们会详细的去讲解它。 那接下来是我们的内宁框架，我们的内宁框架 一般就是像我们的 pc 端会需要绘制很多页面，同时我们也需要绘制一些车导航，那我们讲我们后台页面涉及到上百或者几十个页面， 我们的车导航就需要去每个页面都去维护，所以这样的工作量是很大的。那我们可以使用的一种方法就是我们把这些导航，假如这边是顶部栏，这是车导航， 然后我们就可以使用我们的内连框架，通过点击我们的车导航去控制这个内连框架，因为它有 个可以去链接到某个页面，所以我们就可以通过测导航去链接具体到某个页面，这样的话我们就只需要画一个框架导航就可以了， 剩下的我们就只需要去绘制这个区域里面的内容，所以这样特别是我们修改侧导航或者顶部栏的时候，我们的效率就特别快， 详细用法也会在我们后期的实战中会教大家怎么去做。 那接下来是我们的终极器，我们可以看到我们拖出来的 它会这边是一个装置器，里面它是带有一个矩形，那我们可以看到它其实里面就是一个元件，但是它展示的时候却带有三个， 那这就是装机器它的特性，它可以去重复我们里面的原件。 那这种会用到什么场景呢？主要就是用在像我们绘制那种新闻列表图啊，因为它的样式是逐渐统一的嘛。还有我们的淘宝的商店啊，我们的商品列表页啊，只要我们的 页面它的列表构造是一致的或者是重复性的，那我们就 可以采用装置机器实现。你看我们，比如像我们，我们就假如是我们的商品吧，我们通常见到的是不是这样的，我们上面是图片，然后， 然后这边就是我们的文字，商品啊，名称啊， 我们把它描边去掉，只要改为零就可以了。那这边就是商品名称啊，那它的价格啊，整个两百块， 那我们待会看一下，我们只要关闭掉，看到没有，他就重复生成的三组，那我们 这边要产生多少主人？我们只需要在他的样式面板这边去配置我们的数据库就可以了。他这边其实就是把我们的中机器和我们这边的数据库去连接起来，我们这边修改了什么，他那边就展示什么。 假如我们这边写的鞋子看到没有，它里面这边就自动变为鞋子，因为这个是他默认自带的，我们可以看到他的交互， 点击我们的加护面板，看到没有它这边商品名称，这个商品名称它链接的是 it 里面的 clum 零，那我们看 clum 零是哪一个样式面板看到没有 clum 零， 所以它的意思就是让这个商品名称它的文本等于我们这一列， 它的文本去对应起来。你看当它等于二的时候，这边就等于二，等于三的时候第三个模板它就等于三，所以它们的关系是对立起来的， 那我们的价格如果也要对立起来，我们也是我们需要去添加给这个数据库去配置， 那他这边我们的这只能输入英文，如果你输入中文的时候，他会报错的，因为他这边是不支持输入中文的， 假装我们输入价格看到没有，他这边就会报错，所以我们这边就只能 输入我们的拼英文格式或者字母格式，那我们这边写一下，假如一百块，我这边想给他两百块，三百，你看我们数据配好了是不是？那我们现在就需要把它串联起来， 我们就把这个命名好，这个我们就给他命名个 价格好，命名好了以后我们再去写我们的交互，交互 你看他默认的已经交互事件已经给我们写好了，就是每项加载时，然后去设置文本，那现在我们只添加了商品名称，所以我们再去添加目标哪一个呢？价格， 你看目标就是价格，让他干嘛呢？设置他的文本，你看他默认是两百嘛，但是我们这边是需要链接他那个数据库里面的价格，所以我们要点击这个 f s， 点击完以后我们就可以去把这个之前的删掉，再去插入变量，看到没有？这就是我们刚才添加的这个点击确定确定看到没有，这边它的价格就跟我们这边设置的 是一样的，它是对应起来的，所以就说明我们设置的交互已经生效了， 这就是总机器的做法，当然它的实战性还有另外一个用法，就是我们 再画我们的后端，我们的列表表格的时候，我们就可以用到这个总机器， 然后装机器，他就有个真三减，所以我们如果需要绘制一种查询啊，增加表格的每一行啊，或者三减表格的某一行就是真三改查，这种就可以需要用到装机器去实现这种交互。 好了，这节课我们就讲解到这里，谢谢大家。

如何使用连接器连接原件及形状？今天我们主要连接器原件的使用方法。连接器是特殊的原件，用于连接流程图中的形状、图像和快照原件。 首先我们打开 x 软件，选择基本原件中的矩形，拖入画布，选择图片原件，拖入画布。选择站位幅原件，拖入画布 并进行排列。点击工具栏上面的连接器，鼠标移入到画布矩形框上的一个端点上，端点显示红色圆圈。点击端点，按住鼠标左键拖动到图片上， 此时会在顶部端点出行一个红色圆圈，鼠标移动到端点上，矩形和图片通过连接器就连接起来了。用同样的方法选择站位符连接图片， 我们发现连接的线段是直角形状，我们可以对连接的线段进行编辑样式填充，线段颜色为红色， 大小为二，线段类型为虚线。箭头样式可以调整，两端都带箭头方向。现在多个原件已经都连接上了，连接器的两端都毛定在目标原件上的连接点上。 我们在画布上移动图片原件时，我们发现连接器会自动保持连接状态。通过本节课连接器原件的使用方法，我们已经讲解完成连接器原件相关知识，你学会了吗？请点赞关注我！