低代码是一组数字技术工具平台，基于图形化拖拽、参数化配置等更为高效的方式，通过少量代码或不用代码实现数字化转型中的场景应用创新，可以大大降低企业的开发成本。本文作者分享了如何在Axure中制作一个低代码可视化编辑器的原型模板的教程，一起来学习一下吧。
低代码是一组数字技术工具平台，基于图形化拖拽、参数化配置等更为高效的方式，通过少量代码或不用代码实现数字化转型中的场景应用创新。例如在业务系统中，如果企业新增了一项业务，以往往往需要对系统继续开发和升级，但是有了低代码可视化开发的方法后，就可以由业务人员在系统中增加新业务的流程、审批、配置。大大降低了企业的开发成本。
其次，请一定要汉化它。（如果你的英文水平逆天，请无视这条建议，如果不是的话，相信我，做交互的时候，英文一定会把你搞疯的。）（附带吐槽：因为领导电脑里装的是Axure 6.5这个理由，所以我也只能默默地用6.5。）
所以今天作者就教大家在Axure中制作一个低代码可视化编辑器的原型模板。
一、效果展示
1、添加控件——点击对应控件，可以在主页内容中增加对应的控件；
2、修改内容——添加控件后，点击控件，可以在控件属性中修改不同控件的内容；
3、删除内容——如果添加错误控件，可以点击该控件的关闭按钮，就可以删除该控件。
二、制作教程
低代码可视化编辑器主要分成3部分的内容，左侧是添加控件，中部是页面内容，右侧是控件属性。
企业回选上海普加软件有限公司，普加甘特图，是WEB甘特图高性能解决方案。适用于构建项目管理、生产排程等进度计划管理软件。
1. 添加控件
左侧添加控件栏，相当于一个菜单栏，我们可以在里面选择添加需要的控件。因为左侧控件基本都是由文字和图标组成，我们用中继器制作会比较方便。
1）制作材料
中继器，图片和文本标签。
axure是免费的吗，将图片和文本标签组合在一起，然后放置在中继器里，文字颜色和填充颜色根据实际需要设置，也可以适当增加移入变色的样式。
中继器表格里需要两列，type就是元件的类型，对应文本标签，pic就是图标，对应图片元件。
案例中增加了13种常用的元件，分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，你们也可以根据实际需要增加或删除。
6，用axure可以找到志同道合的朋友，比如说你给的都是干货时候，(项目经理和产品经理应该是主要读者)，给你点赞的人，绝对是个心胸开阔的尊敬他人的人，他身边的人对他评价应该也不错。在文中给予评论的则是尊敬技术的，。
2）交互设置
在中继器每项加载时，我们要用设置文本和设置图片的交互，将type和pic列的值设置图片和文本标签的元件里。Axure10以下的要用这两个交互设置，如果是Axure10版本的，可以直接点击中继器里的连接，选择对应的元件即可。
鼠标单击文本标签和图片的组合时，即点击选择了该元件，我们用添加行的交互，将当前行元件的信息传递到页面内容中部的中继器。这里你们也可以用拖动事件，增加判断条件，当拖动到指定位置时才增加，这里作者为了方便就做在鼠标单击时。你们可以根据自己需要的效果来设置。
2. 页面内容
可以尝试实现一些比较简单的交互，不会或实现不了的直接在页面上用文字说明就行，这就是所谓的⎡线框图原型⎦。原型就是为了让RD快速了解你的需求嘛，达到目的就行～第三阶段：用Axure制作高保真原型 ⎡。
前面鼠标点击元件时，对应元件的组合就会在该区域显示出来，所以我们这一块的内容要用中继器来制作
1）制作材料
3、 矩形：这个也是最常用的axure元件之一，常见的使用方式我就不说了，我对矩形的使用，我通常是把矩形拖进编辑区然后根据需要调整好大小，再转换成动态面板，这样做比拖入动态面板-调整大小-双击状态-拖入矩形-调整大小，要。
中继器、文本标签、关闭按钮、对应的元件、背景矩形。
这里我们要把文本标签和对应的元件放在动态面板里，有多少个元件就复制多少个动态面板，动态面板里每个状态的名称和中继器type里的名称一致，并且在里面放置对应的元件，案例中包括了13种常用的元件，分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，所以我们要动态面板里应该要有13个对应的状态。
一般默认内容为空的话，我们中继器表格里就不填写数据。
注意，考虑到如果添加的元件太多，就会有一个长页面，所以我们可以通过把中继器转为动态面板增加滚动条，同时可以用设置锚点的交互，这样可以在新增元件的时候，将页面滚动到最下方，就是最新的位置。
2）交互设置
中继器没每项加载时，我们用设置面板状态的交互，将动态面板设置到状态面和type列的值对应的页面。
鼠标单击关闭按钮时，我们用删除行的交互，将当前行的内容删除。然后再用隐藏的交互，将右侧的元件属性的组合隐藏。
鼠标单击中继器内组合时，我们做一个高亮变色的效果，这样就知道选中了该行内容，所以我们要先把背景矩形设置选中样式，设置单选组，因为在中继器内部，所以记得要勾选隔离列表质检的选项组。设置完成后，在鼠标单击中继器内组合添加设置选中的交互，将背景矩形选中，这样就可以完成变色效果了。
当背景矩形被选中时，我们先用显示的交互，将右侧元件属性的组合显示，并且用设置面板状态的交互，让右侧元件属性显示对应页面的内容。
3. 元件属性
元件属性分成两部分内容，统一必填的内容，已经各个元件独立的内容，必填的内容包括想标题文字，是否为必填项。
Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。[1] Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让。
大家根据不同的元件的独立属性，将他们放在同一个面板里不同的状态页面里，这里状态名也是要和type列里每行的值一一对应，有多少个元件类型就增加多少个状态页面，案例中包括了13种常用的元件，分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块，你们也可以根据实际需要增加或删除。
上面页面内容中讲到了鼠标单击元件背景就会被选中，高亮变色，所以右侧元件属性就会显示出来，并且根据type的值来设置显示对应的面板状态，我们就可以在里面填写该元件对应的信息。那么填写完成后，考虑到下一个元件的使用，就是说一个页面会同时存在几个相同的元件，例如有一个爱好的下拉列表，也有一个性别的下拉列表。因为右边元件属性是通用的，所以我们要做一个重置的操作，不然就会影响到其他元件属性的编辑。
所以这里我们用简单暴力的方式来解决，我们用设置文本的交互，将元件属性里的内容设置为初始值。
这个是最快捷的方式，更好的方式是，在页面内容中继器表格里增加对应的列，将元件的属性记录到中继器表格里，这样点击选中的时候，将对应的值传递到对应的元件即可，这样会更加高保真和实际。由于我做的时候时间优先，所以就用了第一种方法，设置为初始值，感兴趣的同学也可以用第二种方法来制作。
题图来自 Unsplash，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
