飞书多维表格能用来搭美美的网页吗？今天这一篇手把手教你 [多维表格应用模式]

从今年开始，断断续续写过不少关于飞书多维表格的内容，也看到了多维表格的功能在不停地迭代和升级，比如工作流升级、AI能力的升级、工作配方，以及应用模式。

尤其是应用模式。之前在教别人用多维表格的时候，有一个很直观的痛点：即便是花了大力气搭出来的表格，用户还是觉得不会用，因为缺少了友好的前端页面入口。

刚好，多维表格应用模式就很好的弥补了这一点，用户不用再管复杂的表格逻辑，只需要操作简单的前端页面就好。

不过最近有朋友在问，这个应用模式，能搭出来一个网页的样子吗？

比如我自己有一些业务，我想写一个简单的类似官网的页面。

那么我们今天就来详细聊聊看，这个玩意，到底能不能搭出个像样的网页。

还是以我自己的需求为例：

因为平时会写一些多维表格、n8n工作流以及实战案例的课程放在小报童，但是总感觉很散，所以一直想做一个页面，把这些课程的介绍和列表聚合起来，用户看起来也方便

类似这样的效果：

那接下来就具体讲讲如何用应用模式来搭建出来这个页面。

如何搭建

（一）应用模式的核心逻辑

还是先说点枯燥的概念

从底层逻辑来看，应用模式本质上是为多维表格的数据层披上了一件更友好、更现代化的交互界面外衣。

  • 数据表：它承担了数据的存储、管理和自动化流程的运行。它是应用的信息和内容之源。
  • 应用模式：它负责将数据以用户友好的方式展示，并接受用户的操作指令。

这两者的结合，才构成了一个完整的、可供用户使用的多维表格应用系统。

这种模式的最大优势在于其打破数据孤岛的能力。你可以在一个应用内关联多个不同的表格文件，将复杂的业务全流程串联起来。更关键的是，这一切完全不需要编写代码，通过简单的拖拽操作就能搞定。这对于非编程背景的用户来说，极大地降低了开发门槛。

（二）搭建的步骤

1、建应用

如果你是一个初学者，可以试试直接在多维表格左下角 新建->应用，系统会根据你的数据结构，自动生成一个带有数据的示例应用。这种方式会让我们直接看到结果，省去了从头摸索的过程。

当然，它自己生成的那个，基本都得重头改，因为系统不知道我们的需求，如果我们想直接新建，那就直接在多维表格的主页里，点击新建应用，然后选择空间。

这就就当于给了我们一个空白的应用。

2、搭框架

（1）引入数据

空白应用创建好之后，我们就可以开始配置这个应用了

首先，我们要在这个空间里，把我们所需的多维表格或者表单之类的信息新建，或者同步过来

你可以理解为这是我们网页的数据来源。因为应用模式里，数据的来源其实都是从空间里的多维表格来的。

比如

我想在我的网页上放我的课程目录，然后这个课程我是建在一个多维表格里的

那么 ，我们就把这个多维表格，引入到我们新建的这个空间里

当然，如果你的应用需要更多的数据来源，你就把你所需的多维表格都引入进来就好

（2）导航结构

网页基本都是有导航的，这个导航基本就代表着我们的产品定位，所以一开始我们先想清楚我们的结构逻辑。

比如我把我的网页分为四个导航

  • “主页”：课程总览，个人介绍等关键信息。
  • “多维表格教程”：飞书多维表格的课程目录。
  • “n8n教程”：n8n自动化工作流的课程目录。
  • “实战案例”：AI自动化工作流的实战案例搭建课程目录。

我们可以添加页面，或者也页面组，这个页面你就可以理解为是导航了。

页面组的意思，其实就是当我们页面多了以后，可以把相关的页面收纳在一起。

另外，我们可以选择是侧边导航还是顶部导航，这个会影响到用户的操作习惯和体验。

一般业务系统，菜单比较多的，建议用侧边导航，如果是官网网页之类的，建议顶部导航。

看个人需求吧。

  • 顶部导航：
  • 侧边导航：

3、调视觉

如果说上一步的搭框架，是骨架的话，那么这一步调视觉，就是给他装上皮肤和血肉。

先看皮肤，用户进到网页第一眼看到的就是这身皮

（1）主题

系统预置了六套主题样式。我们都可以点一点一键切换看看效果。最后选择哪一个，主要还是看哪一套符合我们的业务场景。

同样的，我们还可以设置背景，选择颜色，或者背景图片

我们看看这六种主题样式：

（2）添加组件

皮肤有了，接着我们就要给它注入血肉。

这里就用到组件

我们点击左下角的“添加组件”，里面有很多组件可以用，我们直接点击，然后组件会自动出现在页面上，我们在页面拖拉拽就可以了，非常方便

这个组件列表是不是看着有些眼熟，是的，和多维表格里仪表盘的组件类似，当然应用模式这里会相对丰富一点，尤其是列表组件。

①列表组件

我们先看看列表组件，有这五种（普通列表、详情列表、卡片列表、聚合列表、折叠列表），每种的样式和使用定位都不大一样，我们简单来看看。

  • 普通列表：基础样式，它的样式怎么说呢，非常直观。如果你想很直观很干的展示某些信息，可以用普通列表。

比如我的课程列表，尝试了几种样式后，我觉得还是直观的最好

所以我就直接用了普通列表样式，根据类别进行了分组。

  • 详情列表：

如果用户可以沉浸式的阅读单条记录的详细内容时，详情列表可能就会比较友好

左侧栏是列表，右侧是详情，这样阅读某一条记录的详细内容时，就能够屏蔽其他干扰。

  • 卡片列表：

这种比较适合于需要强调视觉的数据（比如产品画册、产品介绍等），类似电商购物的场景，它可以用卡片方式直观的展示图片，点击还能放大图片。

  • 聚合列表：

如果我们的数据存在关联性，可以试试用聚合列表，我们可以把多个字段聚合在一起，作为一个整体展示，还可以拖拽调整列表的宽度。比如把图片、名称和简介聚合为一个整体展示，看起来就比较图文并茂了。

  • 折叠列表：

如果你的字段非常多，信息很复杂，就建议用折叠列表了。我们只需在外面展示重要信息，次要的信息都隐藏在下拉框里就行，用户需要看的时候，再按需点开查看。

②图片组件

网页少了图片怎么能行，要不看着跟文档似的。我们可以在应用模式里选择图片组件并添加。

比如我把我的公众号二维码图片放在这里

图片组件是多维表格仪表盘没有的组件。

当我们点开图片组件的配置界面后，才发现这里做的还是蛮细致的。

  • 可以设置图片标题
  • 可以添加多个图片

支持的格式也很丰富（支持上传JPG、PNG、JPEG、SVG、GIF和WebP等格式,图片大小不得超过20MB）

  • 还能设置图片样式和轮播效果

如果需要给官网上面放一个大大的banner位，搞几个美美的图片轮播，这个组件就完美的支持了。

③文本组件

比如我想搞一个个人简介，或者是标题，那么文本组件就很简单了。

其实用图片组件也可以，但是你首先得作图，文本组件的话，我们直接在里面编辑文字，调整文字大小和布局就好了。适合需要快速落地的场景。

④交互按钮

说到交互，很多时候只看数据没用，还得能操作。我们可以在列表视图或者主页面上，添加按钮。

加上自定义交互按钮，应用模式就更像系统了。而且我们还可以把按钮绑定到自己的工作流里。这个就很厉害了。

这里先不说数据的交互吧（主要我的网页暂时用不上这么复杂的东西），我先在网页加一个按钮，点击可以跳转到表单让用户来填写。

选择按钮组件并添加

然后我把按钮拖拽到这里，在配置界面，选择点击按钮要执行的操作，比如我这里就是让他打开一个表单链接

还可以修改按钮的样式。

点击后就打开了反馈页面

4、设权限

那么以上步骤，你跟着操作一遍之后，基本就可以搭建出一个简单的页面了。

最后再说说权限。

多维表格的高级权限做的很细致了，应用模式的权限，同样的也做的非常细致，而且重要的是应用模式有自己完全独立的权限体系。

也就是不会受到底层表格数据的权限的影响，用户可以自己在应用内重新建立一套权限规则。

我们通过角色管理，赋予不同角色不同的操作权限或数据权限，让不同角色各司其职。

好的，做完这一切，我们点击右上角的预览按钮

它很方便的地方在于能切换用户视角，也就是你输入其他用户的账号，在他的视角下来看页面是否正确

类似多维表格里高级权限的预览功能，

没有问题后，我们点击完成编辑。就可以把链接分享给其他人使用和查看了。

吨师傅 . AI自动化实验室

整体看下来，是不是觉得并不难，自己搭一个像模像样的页面或应用出来，只需要拖拉拽就行了。那么就试试自己动手搭两个页面实践看看。

最后，我们再说说应用模式的短板。

1.卡顿。不知道朋友们有没有遇到过，其实数据量不大的情况下，每次打开做好的页面，都会很卡，尤其是列表数据卡顿很严重，还是蛮影响用户体验的

2.毕竟是多维表格搭建出来的页面，并不能代替传统的网页，你不会被收录在搜索引擎里，也没法做SEO，也接不了支付等等，当然啦，没有这些是正常的，毕竟定位不同。只是如果你有这些诉求的话，就不要考虑用多维表格，如果你只是想快速做一个页面来做信息聚合和引流，那么多维表格是个非常不错的选择。

写在最后

最后再说一个事儿

多维表格可以作为单品来使用了，也就是说你不用下载飞书，不用绑定飞书其他的各种功能，就单独使用多维表格就好，这样就非常轻量化了。

宣布一个福利：

通过我的专属邀请码注册飞书多维表格，就可以免费获得三个月的专业版（除注册即送的1个月专业版（价值349元/年），额外加赠2个月，合计免费体验3个月。）

操作很简单

Step1：打开飞书多维表格单品的官方注册网址→https://fcna6swh3rtl.feishu.cn/share/base/form/shrcn8BkxqoKYeA6XyZZAB7zK73

Step2：输入手机验证码后，就可以跳转填写邀请码

邀请码：New2S2bI8sS2sT

Related Posts

31人评论了“飞书多维表格能用来搭美美的网页吗？今天这一篇手把手教你 [多维表格应用模式]”

  22. hepato burn

    **hepato burn**

    hepatoburn is a high-quality, plant-forward dietary blend created to nourish liver function, encourage a healthy metabolic rhythm, and support the bodys natural fat-processing pathways.

    回复
  25. tonic greens

    **tonic greens**

    tonic greens is a cutting-edge health blend made with a rich fusion of natural botanicals and superfoods, formulated to boost immune resilience and promote daily vitality.

    回复
  26. oradentum

    **oradentum**

    oradentum is a comprehensive 21-in-1 oral care formula designed to reinforce enamel, support gum vitality, and neutralize bad breath using a fusion of nature-derived, scientifically validated compounds.

    回复

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部