> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 测验漏斗设计设置：全局颜色、预设与品牌样式

> 在测验漏斗的 Design 设置中统一定义主色、辅助色、中性色和错误色，一键应用预设样式，让所有区块自动继承品牌风格、保持设计一致。

**Design**（设计）标签页用于定义**整个流程的外观和风格**。从颜色到排版再到组件样式，所有内容都可以根据你的品牌进行自定义。

LanderLab 不需要你逐个设置元素样式，而是采用**全局设计系统**，你的更改会自动应用到整个流程。

## 如何打开设计设置

你可以通过两种方式打开 Design：

* 点击左侧面板中的**调色板图标** → 设置全局样式
* 点击任意区块上的**三个点（•••）**，然后选择 **Design** → 直接进入设置

默认情况下，所有设计更改都会全局生效。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/images/image-5-1024x571.png?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=c04f4b9ca8b518854114f8aff5254b1f" alt="测验构建器中的 Design 全局样式设置面板" width="1024" height="571" data-path="images/image-5-1024x571.png" />
</Frame>

## 设计的工作原理

设计设置通过继承机制在整个流程中共享：

* 更改样式会自动更新所有同类区块
* 确保整个流程风格统一
* 避免重复编辑，节省时间

如有需要，你仍然可以在单个区块上覆盖样式。

## 颜色

**Colors**（颜色）面板用于定义流程的视觉识别。

### 主色

* **Primary Color** → 用于按钮、选中状态和关键操作
* **Secondary Color** → 用于点缀和高亮

### 中性色

* 黑色、白色和灰色调
* 用于文字、背景和结构

### 错误色

* 自动应用于校验错误和无效输入

💡 提示：先设置主色和辅助色，为品牌打下统一的基础。

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/change-color.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=48d0ac29a81869b1488a33eb8127f3ea" controls={true} data-path="videos/change-color.webm" />

## 字体

你的流程会自动继承其所在**落地页**的字体。

* 无需在流程内配置字体
* 保持整体视觉一致

💡 提示：在落地页层级定义字体，让所有流程都符合你的品牌风格。

## 预设

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/presets.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=1906a157a2f3a2031e57735d3ca3620a" controls={true} data-path="videos/presets.webm" />

预设（Presets）是预先设计好的样式，可以一键应用到区块上。

你无需从零开始搭建样式，而是可以：

* 应用一个预设
* 按需进行调整

### 示例

为 Multiple Choice 区块应用预设后，会自动设置：

* 颜色
* 间距
* 按钮样式

由于全局继承机制：

* 更新一个区块的样式会同时更新所有同类区块

## 为什么使用预设

* 设置更快
* 设计统一
* 无需设计经验

💡 提示：先从默认预设开始，之后再按需调整。这样可以让你的流程从一开始就简洁专业。

## 最佳实践

* 在搭建流程之前先设置颜色
* 在所有步骤中保持样式一致
* 避免对每个区块过度自定义
* 使用预设节省时间


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.