飞搭系列 | 解锁轮播图、导航、分割线等静态组件妙用

161 阅读6分钟

前言

汉得飞搭aPaaS低代码平台(FEIDA,以下简称“飞搭”)是基于低代码理念打造的融合 aPaaS 平台,助力企业快速搭建业务应用。作为 HZERO 生态的重要组成部分,致力于充分融合 HZERO 的各平台能力,提供企业用户在线化灵活搭建业务应用的能力,支撑企业普惠化(低门槛、高协作)、敏态化(高效率)低成本化地快速响应市场变化,加速复杂业务场景落地。

概要介绍

在之前的系列文章中,已经为大家介绍了飞搭设计器中的部分组件,本篇将继续介绍飞搭设计器中的5种静态组件,结合页面配置,介绍组件的使用场景和功能:

  • 轮播图
    通过动态切换的方式吸引用户的注意力,引导用户点击并进一步探索。

  • 图文展示
    飞搭图文展示组件可以配置文字的字体、大小、颜色、段落、缩进等格式,结合图片更有效的展示信息。

  • 分割线
    飞搭提供了多种分割线的预置样式,运用分割线可以有效地划分区域、分隔不同内容区块,提高页面的可读性和美观度。

  • 占位符
    占位符可以运用在表单组件中,调整表单布局。

  • 导航
    导航可以起到引导和定位的作用,点击组件名称即可快速定位到指定位置。

一、静态组件作用场景

飞搭设计器为了更加灵活的配置页面布局,满足更多场景需求,预置了5种静态组件:轮播图、图文展示、分割线、占位符、导航。

01. 轮播图

轮播图组件通过动态切换的方式吸引用户的注意力,引导用户点击并进一步探索。

在电商网站的首页,轮播图常被用来展示最新的促销信息、热销商品或品牌故事;新闻资讯类网站也会利用轮播图快速展示重要新闻或专题报道,确保用户能第一时间获取到关键信息。

飞搭支持配置轮播图的多种切换方式,以及支持配置点击轮播图之后的页面跳转。

02. 图文展示

图文展示组件是一种更为详细和全面的内容呈现方式,通常应用在产品详情页、新闻资讯等场景中。

飞搭图文展示组件可以配置文字的字体、大小、颜色、段落、缩进等格式,对于文字重点信息进行强调,便于用户更好的对内容进行理解和记忆;图文结合的方式能够有效地传达信息,提升信息的展示效果。

03. 分割线

分割线组件是页面设计中的一种辅助元素。当页面内容较多且存在多个组件时,通过分割线能够有效地划分区域、分隔不同内容区块。

飞搭提供了多种分割线的预置样式,提高页面的可读性和美观度。通过合理的使用分割线,可以使页面布局更加清晰有序,且能引导用户的视线流动,从而提升用户的浏览体验。

04. 占位符

占位符组件可以调整表单字段布局。占位符用来占据页面上的某个位置,以便调整表单的字段布局。

05. 导航

导航组件引导用户快速查看页面目标信息。通过导航组件,用户在页面中可以轻松找到目标内容。

飞搭会根据页面已添加的组件自动生成导航菜单项,点击导航菜单项,即可定位到所选中的内容对应的页面位置,极大地提升了用户体验。

二、静态组件配置介绍

01. 场景一

通过轮播图和图文展示组件可以搭建一个飞搭产品新闻资讯页面。

设计器中添加轮播图组件然后上传轮播项的图片,就完成了轮播图的配置。

切换到轮播项的行为面板,还可以配置点击触发器,实现点击图片跳转到其他页面的效果。

在预览页面可以看到图片轮播的效果,点击图片跳转到飞搭工作台。

添加图文展示组件后,在图文展示组件中维护文字图片格式。

在预览页面可以看到产品新闻资讯的页面。

02. 场景二

通过分割线、占位符、导航栏可以配置出更加灵活易用的表单页面。

在表单页面添加分割线组件到页面中,配置分割线名称和样式,飞搭提供了多种分割线样式可供选择。

将占位符拖拽到表单中,拖拽占位符位置调整页面布局。

添加导航组件,组件将根据页面已有的组件自动生成导航菜单项。

在预览页面,表单按照设计的布局显示表单信息,点击导航项,页面可以快速定位到指定位置。

结语

飞搭低代码平台作为 HZERO 生态的重要组成部分,致力于充分融合 HZERO 的各平台能力,提供企业用户在线化灵活搭建业务应用的能力,支撑企业普惠化(低门槛、高协作)、敏态化(高效率)低成本化地快速响应市场变化,加速复杂业务场景落地。

本篇介绍了飞搭静态组件:轮播图、图文展示、分割线、占位符、导航。通过静态组件,可以使页面布局更加丰富灵动,给用户更便捷的操作体验。

接下来,我们将持续推出飞搭平台专题系列教程,帮助您更好地掌握飞搭平台的使用技巧,敬请期待!


联系我们

1. 如果您想了解飞搭更详细的功能介绍和产品信息请查阅我们的产品文档:
请在PC端打开 👉汉得焱牛开放平台

2. 如果您有疑问或者建议,可以通过开放平台进行工单反馈,问题分类请选择【产品/汉得aPaaS平台-飞搭】:
请在PC端打开👉汉得焱牛开放平台

3. 相关产品咨询或更多信息了解,欢迎联系我们。
邮箱:openhand@vip.hand-china.com