「页面模板」使用说明|飞书低代码平台

飞书低代码平台结合广泛的应用解决方案，将通用的应用页面逻辑逐渐沉淀优化，再由专业的设计同学配以高品质的排版与交互，搭建出适合广大开发者使用的「页面模板」。

开发者在搭建相关页面时课直接复用「页面模板」，实现开箱即用，大大降低项目的开发成本；同时对于新手开发者，也可参考页面模板进行搭建学习。

本文为大家带来可直接上手使用的「页面模板」，同时模板会持续丰富迭代，欢迎实践体验～

桌面端

数据列表（3）

页面模板	交互逻辑	典型业务场景	效果演示
卡片列表	卡片点击：查看详细内容。滑动：浏览更多卡片。筛选和排序：按需查找内容。编辑和删除相关信息	电子商务：展示商品信息，用户可查看详情、购买等。社交媒体：呈现用户动态、照片等，可互动。内容平台：展示文章、视频等，点击进入详细页面。旅游应用：展示景点、行程等，点击了解更多。教育应用：展示课程、资料等，点击进入学习。	250px\|700px\|reset
基础列表	图片点击：点击图片可查看大图或进入详细内容页面。滑动浏览：用户可以通过滑动屏幕查看更多列表内容。筛选和排序：根据不同条件对列表进行筛选和排序。标记和收藏：用户可以对感兴趣的内容进行标记或收藏	新闻资讯展示：呈现各类新闻文章及相关图片。商品展示：展示不同商品的图片和信息。图片库：管理和浏览大量图片资源。社交媒体：展示用户发布的图片和文字内容。客户关系管理：展示客户信息及其他商机信息	250px\|700px\|reset
表格	排序：按照特定列对表格数据进行排序。筛选：根据条件筛选出符合要求的数据。分页：将大量数据进行分页展示。编辑：对表格中的数据进行修改。批量操作：如批量删除、批量修改等。导出：将表格数据导出为文件。	权限管理：通过表格展示和管理不同角色的权限信息。任务分配与跟踪：在表格中呈现任务分配情况及进度跟踪。库存管理：记录和管理库存数量、状态等信息。财务核算：展示财务数据，进行账目核对和统计。设备管理：管理设备信息、状态及维护记录等。项目管理：呈现项目相关信息，如任务、进度、人员等。员工信息管理：管理员工的基本信息、考勤、绩效等数据。	250px\|700px\|reset

详情页（3）

页面模板	交互逻辑	典型业务场景	效果演示
详情页	查看详情：点击进入查看详细的记录内容。编辑：对记录的内容进行修改和更新。关联查看：可以关联查看其他相关的记录或信息。搜索：通过搜索功能快速查找特定的记录。打印：将记录详情打印出来。	客户信息管理：查看和记录客户的详细资料、交易历史等。订单处理：记录订单的详细内容、状态变化等。产品档案管理：记录产品的技术规格、生产批次等详细信息。事件跟踪：记录事件的发生过程、处理情况等详细信息。	250px\|700px\|reset
用户主页	点击查看：点击用户发布的内容查看详细信息。关注与取消关注：对其他用户进行关注或取消关注操作。点赞与取消点赞：对内容进行点赞或取消点赞。评论与回复：对内容进行评论，并可回复其他用户的评论。私信交流：与其他用户进行私信沟通。个人设置：进入个人设置页面，修改个人信息等。	个人信息展示：展示用户的基本信息、头像、简介等。动态展示：呈现用户发布的动态、文章、照片等。社交互动：如关注、点赞、评论、私信等操作。	250px\|700px\|reset 250px\|700px\|reset
个人信息页	查看详细信息：点击具体内容可查看更多细节。点赞和评论：对展示的内容进行点赞和评论。分享：将个人主页的内容分享给他人。私信沟通：与其他用户进行私信交流。关注和取消关注：对其他用户进行关注或取消关注操作。编辑个人资料：修改个人信息和展示内容。站内其他热门推荐及排行	展示个人收藏：如收藏的文章、音乐、商品等。显示个人好友列表：展示与自己有联系的好友信息。呈现个人学习或工作经历：如教育背景、工作履历等。展示个人兴趣爱好：体现个人的独特喜好。记录个人成长历程：如阶段性的成就或变化。展示个人的社交关系网络：呈现与自己相关的社交圈子。作为个人品牌宣传的窗口：展示个人的专业形象和特色	250px\|700px\|reset 250px\|700px\|reset

门户（5）

页面模板	交互逻辑	典型业务场景	效果演示
企业内网	通过不同入口可进去相关专题页查看企业内部最新资讯点击查看培训和学习相关课程	内部沟通与协作：员工之间的交流、文件共享、会议安排等。知识管理：课程培训、文档存储、查询、编辑等。项目管理：任务分配、进度跟踪、资源协调等。人力资源管理：员工信息查询、考勤管理、培训记录等。财务管理：报销审批、预算管理等。	250px\|700px\|reset 250px\|700px\|reset
企业官网	导航浏览：通过导航栏方便地浏览不同页面。在线咨询：与客服进行实时交流。	展示企业形象和信息：包括企业介绍、产品服务、新闻动态等。产品展示与销售：呈现产品详情、价格、购买渠道等。客户案例展示：展示客户成功案例。招聘信息发布：发布招聘职位、投递简历等。	250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset
工作台	任务操作：如开始、暂停、完成任务等。数据查看与筛选：查看具体数据并进行筛选。	任务管理：呈现待办事项、任务进度等。数据统计与分析：展示关键业务数据和报表。流程审批：显示待审批事项和审批结果。	250px\|700px\|reset 250px\|700px\|reset
品牌官网	呈现产品详情、价格、购买渠道等。展示客户成功案例。展示团队成员	品牌展示：全方位展现品牌形象、价值观、历史等。产品与服务介绍：详细呈现各类产品和服务的特点、优势。新闻与资讯发布：发布企业动态、行业新闻等。	250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset
任务工作台	左侧：banner（轮播图）+数据概览+主要明细数据右侧：个人中心+系统通知	CRM-PC端主页 SRM-主页 PLM-PC端主页一店一群-PC端主页	250px\|700px\|reset

移动端

数据列表（3）

页面模板	交互逻辑	典型业务场景	效果演示
卡片列表	卡片点击：查看详细内容。滑动：浏览更多卡片。筛选和排序：按需查找内容。编辑和删除相关信息	电子商务：展示商品信息，用户可查看详情、购买等。社交媒体：呈现用户动态、照片等，可互动。内容平台：展示文章、视频等，点击进入详细页面。旅游应用：展示景点、行程等，点击了解更多。教育应用：展示课程、资料等，点击进入学习。	250px\|700px\|reset
基础列表	图片点击：点击图片可查看大图或进入详细内容页面。滑动浏览：用户可以通过滑动屏幕查看更多列表内容。筛选和排序：根据不同条件对列表进行筛选和排序。标记和收藏：用户可以对感兴趣的内容进行标记或收藏	新闻资讯展示：呈现各类新闻文章及相关图片。商品展示：展示不同商品的图片和信息。图片库：管理和浏览大量图片资源。社交媒体：展示用户发布的图片和文字内容。客户关系管理：展示客户信息及其他商机信息	250px\|700px\|reset
统计	列表点击：查看客户相关信息的详情	客户关系管理：展示客户信息及其他商机信息销售数据分析：分析销售额、订单量、客户分布等。	250px\|700px\|reset

详情页（3）

页面模板	交互逻辑	典型业务场景	效果演示
详情页	查看详情：点击进入查看详细的记录内容。编辑：对记录的内容进行修改和更新。关联查看：可以关联查看其他相关的记录或信息。搜索：通过搜索功能快速查找特定的记录。打印：将记录详情打印出来。	客户信息管理：查看和记录客户的详细资料、交易历史等。订单处理：记录订单的详细内容、状态变化等。产品档案管理：记录产品的技术规格、生产批次等详细信息。事件跟踪：记录事件的发生过程、处理情况等详细信息。	250px\|700px\|reset
用户主页	点击查看：点击用户发布的内容查看详细信息。关注与取消关注：对其他用户进行关注或取消关注操作。点赞与取消点赞：对内容进行点赞或取消点赞。评论与回复：对内容进行评论，并可回复其他用户的评论。私信交流：与其他用户进行私信沟通。个人设置：进入个人设置页面，修改个人信息等。	个人信息展示：展示用户的基本信息、头像、简介等。动态展示：呈现用户发布的动态、文章、照片等。社交互动：如关注、点赞、评论、私信等操作。	250px\|700px\|reset
个人工作台	新建记录：点击可新建一条任务记录查看列表：点击可查看详情数据	任务管理：呈现待办事项、任务进度等。数据统计与分析：展示关键业务数据和报表。流程审批：显示待审批事项和审批结果。	250px\|700px\|reset

门户（4）

页面模板	交互逻辑	典型业务场景	效果演示
企业内网	通过不同入口可进去相关专题页查看企业内部最新资讯点击查看培训和学习相关课程	内部沟通与协作：员工之间的交流、文件共享、会议安排等。知识管理：课程培训、文档存储、查询、编辑等。项目管理：任务分配、进度跟踪、资源协调等。人力资源管理：员工信息查询、考勤管理、培训记录等。财务管理：报销审批、预算管理等。	250px\|700px\|reset
企业官网	导航浏览：通过导航栏方便地浏览不同页面。在线咨询：与客服进行实时交流。	展示企业形象和信息：包括企业介绍、产品服务、新闻动态等。产品展示与销售：呈现产品详情、价格、购买渠道等。客户案例展示：展示客户成功案例。招聘信息发布：发布招聘职位、投递简历等。	250px\|700px\|reset
工作台	任务操作：如开始、暂停、完成任务等。数据查看与筛选：查看具体数据并进行筛选。	任务管理：呈现待办事项、任务进度等。数据统计与分析：展示关键业务数据和报表。流程审批：显示待审批事项和审批结果。	250px\|700px\|reset
任务工作台	上方banner-轮播图数据概览兼入口快捷入口多标签页图表列表	CRM-移动端主页 KMS-移动端主页 PLM-移动端主页一店一群-移动端主页	250px\|700px\|reset

使用说明

创建方式

使用页面模板	示例图
方式一：点击「新建页面」，出现新建页面模板弹窗	250px\|700px\|reset
方式二：在导航布局下点击「新建页面」，同「新建页面」	250px\|700px\|reset

数据请求说明

页面模板中展示的数据全部属于 demo data，开发者可自行创建数据源进行引用替换，demo data 则自动被代替，且不会显示在状态数据中。

250px|700px|reset

页面模板	交互逻辑	典型业务场景	效果演示
企业内网	通过不同入口可进去相关专题页查看企业内部最新资讯点击查看培训和学习相关课程	内部沟通与协作：员工之间的交流、文件共享、会议安排等。知识管理：课程培训、文档存储、查询、编辑等。项目管理：任务分配、进度跟踪、资源协调等。人力资源管理：员工信息查询、考勤管理、培训记录等。财务管理：报销审批、预算管理等。	250px\|700px\|reset 250px\|700px\|reset
企业官网	导航浏览：通过导航栏方便地浏览不同页面。在线咨询：与客服进行实时交流。	展示企业形象和信息：包括企业介绍、产品服务、新闻动态等。产品展示与销售：呈现产品详情、价格、购买渠道等。客户案例展示：展示客户成功案例。招聘信息发布：发布招聘职位、投递简历等。	250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset
工作台	任务操作：如开始、暂停、完成任务等。数据查看与筛选：查看具体数据并进行筛选。	任务管理：呈现待办事项、任务进度等。数据统计与分析：展示关键业务数据和报表。流程审批：显示待审批事项和审批结果。	250px\|700px\|reset 250px\|700px\|reset
品牌官网	呈现产品详情、价格、购买渠道等。展示客户成功案例。展示团队成员	品牌展示：全方位展现品牌形象、价值观、历史等。产品与服务介绍：详细呈现各类产品和服务的特点、优势。新闻与资讯发布：发布企业动态、行业新闻等。	250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset 250px\|700px\|reset
任务工作台	左侧：banner（轮播图）+数据概览+主要明细数据右侧：个人中心+系统通知	CRM-PC端主页 SRM-主页 PLM-PC端主页一店一群-PC端主页	250px\|700px\|reset

「页面模板」使用说明|飞书低代码平台

先进团队，先用飞书