Axure高保真教程:低代码可视化编辑器(axure 可视化)

低代码是一组数字技术工具平台,基于图形化拖拽、参数化配置等更为高效的方式,通过少量代码或不用代码实现数字化转型中的场景应用创新,可以大大降低企业的开发成本。本文作者分享了如何在Axure中制作一个低代码可视化编辑器的原型模板的教程,一起来学习一下吧。

Axure高保真教程:低代码可视化编辑器(axure 可视化)

低代码是一组数字技术工具平台,基于图形化拖拽、参数化配置等更为高效的方式,通过少量代码或不用代码实现数字化转型中的场景应用创新。例如在业务系统中,如果企业新增了一项业务,以往往往需要对系统继续开发和升级,但是有了低代码可视化开发的方法后,就可以由业务人员在系统中增加新业务的流程、审批、配置。大大降低了企业的开发成本。

所以今天作者就教大家在Axure中制作一个低代码可视化编辑器的原型模板。

一、效果展示

1、添加控件——点击对应控件,可以在主页内容中增加对应的控件;

2、修改内容——添加控件后,点击控件,可以在控件属性中修改不同控件的内容;

3、删除内容——如果添加错误控件,可以点击该控件的关闭按钮,就可以删除该控件。

Axure高保真教程:低代码可视化编辑器(axure 可视化)

二、制作教程

低代码可视化编辑器主要分成3部分的内容,左侧是添加控件,中部是页面内容,右侧是控件属性。

1. 添加控件

左侧添加控件栏,相当于一个菜单栏,我们可以在里面选择添加需要的控件。因为左侧控件基本都是由文字和图标组成,我们用中继器制作会比较方便。

1)制作材料

中继器,图片和文本标签。

将图片和文本标签组合在一起,然后放置在中继器里,文字颜色和填充颜色根据实际需要设置,也可以适当增加移入变色的样式。

中继器表格里需要两列,type就是元件的类型,对应文本标签,pic就是图标,对应图片元件。

Axure高保真教程:低代码可视化编辑器(axure 可视化)

案例中增加了13种常用的元件,分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块,你们也可以根据实际需要增加或删除。

2)交互设置

在中继器每项加载时,我们要用设置文本和设置图片的交互,将type和pic列的值设置图片和文本标签的元件里。Axure10以下的要用这两个交互设置,如果是Axure10版本的,可以直接点击中继器里的连接,选择对应的元件即可。

Axure高保真教程:低代码可视化编辑器(axure 可视化)

鼠标单击文本标签和图片的组合时,即点击选择了该元件,我们用添加行的交互,将当前行元件的信息传递到页面内容中部的中继器。这里你们也可以用拖动事件,增加判断条件,当拖动到指定位置时才增加,这里作者为了方便就做在鼠标单击时。你们可以根据自己需要的效果来设置。

2. 页面内容

前面鼠标点击元件时,对应元件的组合就会在该区域显示出来,所以我们这一块的内容要用中继器来制作

1)制作材料

中继器、文本标签、关闭按钮、对应的元件、背景矩形。

这里我们要把文本标签和对应的元件放在动态面板里,有多少个元件就复制多少个动态面板,动态面板里每个状态的名称和中继器type里的名称一致,并且在里面放置对应的元件,案例中包括了13种常用的元件,分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块,所以我们要动态面板里应该要有13个对应的状态。

中继器表格里只需要有type一列,对应左侧元件中继器的type,上面提到鼠标单击左侧元件组合时,通过新增行的交互,将type列的值传递过来。后续我们通过交互,就可以显示对应的元件。

一般默认内容为空的话,我们中继器表格里就不填写数据。

注意,考虑到如果添加的元件太多,就会有一个长页面,所以我们可以通过把中继器转为动态面板增加滚动条,同时可以用设置锚点的交互,这样可以在新增元件的时候,将页面滚动到最下方,就是最新的位置。

2)交互设置

中继器没每项加载时,我们用设置面板状态的交互,将动态面板设置到状态面和type列的值对应的页面。

鼠标单击关闭按钮时,我们用删除行的交互,将当前行的内容删除。然后再用隐藏的交互,将右侧的元件属性的组合隐藏。

鼠标单击中继器内组合时,我们做一个高亮变色的效果,这样就知道选中了该行内容,所以我们要先把背景矩形设置选中样式,设置单选组,因为在中继器内部,所以记得要勾选隔离列表质检的选项组。设置完成后,在鼠标单击中继器内组合添加设置选中的交互,将背景矩形选中,这样就可以完成变色效果了。

当背景矩形被选中时,我们先用显示的交互,将右侧元件属性的组合显示,并且用设置面板状态的交互,让右侧元件属性显示对应页面的内容。

3. 元件属性

元件属性分成两部分内容,统一必填的内容,已经各个元件独立的内容,必填的内容包括想标题文字,是否为必填项。

独立的内容就要根据各个元件的属性,例如输入框就包括提示文字,下拉列表就包括了选项信息,上传控件就包括了限制上传的数量和文件大小……

Axure高保真教程:低代码可视化编辑器(axure 可视化)

大家根据不同的元件的独立属性,将他们放在同一个面板里不同的状态页面里,这里状态名也是要和type列里每行的值一一对应,有多少个元件类型就增加多少个状态页面,案例中包括了13种常用的元件,分别为单行输入框、多行输入框、数字输入框、密码输入框、月份选择器、日期选择器、时间选择器、单选按钮组、多选按钮组、下拉列表、文件上传、评分控件、滑动滑块,你们也可以根据实际需要增加或删除。

上面页面内容中讲到了鼠标单击元件背景就会被选中,高亮变色,所以右侧元件属性就会显示出来,并且根据type的值来设置显示对应的面板状态,我们就可以在里面填写该元件对应的信息。那么填写完成后,考虑到下一个元件的使用,就是说一个页面会同时存在几个相同的元件,例如有一个爱好的下拉列表,也有一个性别的下拉列表。因为右边元件属性是通用的,所以我们要做一个重置的操作,不然就会影响到其他元件属性的编辑。

所以这里我们用简单暴力的方式来解决,我们用设置文本的交互,将元件属性里的内容设置为初始值。

Axure高保真教程:低代码可视化编辑器(axure 可视化)

这个是最快捷的方式,更好的方式是,在页面内容中继器表格里增加对应的列,将元件的属性记录到中继器表格里,这样点击选中的时候,将对应的值传递到对应的元件即可,这样会更加高保真和实际。由于我做的时候时间优先,所以就用了第一种方法,设置为初始值,感兴趣的同学也可以用第二种方法来制作。

以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月14日 下午1:50
下一篇 2024年5月14日 下午2:02

相关推荐

  • 县里科工局是干什么的单位

    县里科工局是负责科技产业工作的一个单位,其主要职能包括: 1. 促进科技创新:县里科工局负责支持科技创新,包括组织科技创新大会、引进科技创新人才、推动科技创新载体建设等,以促进科技…

    联系我们 2024年12月3日
    39
  • 简历应该先写科研经历还是项目经历

    简历应该先写科研经历还是项目经历 在撰写简历时,确定简历的开头和主体是至关重要的。大多数人认为,应该先写项目经历,然后再写科研经历,因为这有助于突出项目经验和专业技能。然而,这种观…

    联系我们 2024年12月8日
    0
  • 电子商务项目管理软件

    电子商务项目管理软件:从概念到应用 随着电子商务的发展,越来越多的企业开始意识到项目管理的重要性。电子商务项目管理软件可以帮助企业更好地管理项目进度、成本和质量,提高项目的成功率和…

    联系我们 2024年9月18日
    25
  • 流程分类除了业务流程还有什么

    流程分类除了业务流程还有什么 随着信息技术的不断发展,我们日常生活中的业务流程也在不断地进行分类和优化。除了常见的业务流程分类如采购,生产,财务等,还有哪些分类呢?下面我们来谈一谈…

    联系我们 2024年12月5日
    0
  • 唐纳德 算法

    唐纳德·特朗普(Donald Trump)是一位备受争议的美国政治家,他在2016年总统选举中赢得了共和党人的提名,并在2020年的大选中成功当选总统。然而,他的政治观点和行为引发…

    联系我们 2024年12月3日
    5
  • 微信表白代码

    微信表白代码 随着微信的普及,越来越多的人开始使用微信进行社交。其中,微信表白代码成为了一种流行的表达方式。今天,我想和大家分享一下我的微信表白代码经历。 我和我的男友是在一个社交…

    联系我们 2024年12月5日
    0
  • 项目实施依赖的主要基础和科研条件是什么

    项目实施依赖的主要基础和科研条件是什么? 项目的成功实施需要多个条件的支持,其中最重要的基础和条件之一是科研条件。科研条件是指有足够的科学研究资源和设备,包括实验室、实验仪器、实验…

    联系我们 2024年12月10日
    0
  • 如何理解高中阶段两个课题研究(或项目设计)之间的关系

    高中阶段是两个课题研究(或项目设计)的重要阶段,也是学生思考和成长的关键时期。在这个阶段,学生需要掌握一定的理论知识,同时也需要实践操作和技能训练。因此,两个课题研究(或项目设计)…

    联系我们 2024年12月4日
    4
  • 如何向教授申请项目邮件呢

    尊敬的教授, 您好!我写信是想申请贵校的XXX项目。我知道这个项目非常受欢迎,但我相信我有能力为这个项目做出更大的贡献。 我是一名即将毕业的学生,在XXX专业获得了学士学位。在过去…

    联系我们 2024年12月3日
    1
  • 贵州省研究生科研基金项目

    贵州省研究生科研基金项目 摘要: 本项目旨在通过研究贵州省经济发展现状和问题,分析国内外相关领域的发展动态,提出符合贵州省实际的研究生科研基金项目。本文通过对贵州省经济背景和问题的…

    联系我们 2024年12月9日
    2