企业官网建设流程全解析

最近设计圈讨论比较多的，是妍妍老师发布的一套 Mono-color Design Skill，也就是单色设计技能。这套方法的核心思路非常直接：把设计方案从多色配色收敛到“单一色相 + 明度层级”，用颜色数量换设计秩序。它不依赖某个特定软件，不要求手绘能力，也不吃显卡配置，真正重要的是你对色相、明度、饱和度、面积比例的控制能力。

本文不打算把 Mono-color Design Skill 当成一个概念来聊，而是把它拆成一套可以落地的设计流程。你会看到：单色设计为什么值得做、色板怎么生成、在 Figma / Photoshop 里怎么建样式、前端代码里怎么用 CSS 变量接住这套体系、批量产出单色素材时用什么思路，以及常见的翻车原因怎么排查。

如果你是 UI 设计师、前端工程师、做数据可视化或者经常要用 AI 出图统一风格的内容创作者，这篇文章可以直接收藏。先给结论：单色设计不是偷懒，它是用约束换一致性，用明度换层次。下面展开讲。

1. 核心能力速览

可以把 Mono-color Design Skill 理解成一套“单色设计方法论 + 实操流程”，它输出的不是某个固定模板，而是一套可以反复使用的色彩系统构建方式。

这套体系能不能用，不看软件，不看硬件，看你对“色相固定之后，层级从哪里来”这个问题的理解程度。想清楚这一点，后面所有步骤都是执行层面的问题。

2. 为什么单色设计会形成一套独立技能

多色配色时，设计师天然会依赖“颜色不同”来区分信息。标题用红色、正文用黑色、辅助信息用灰色、强调按钮用蓝色，这是最常见的信息层级表达方式。但颜色一多，问题也随之而来：饱和度不一致、色相冲突、品牌色被淹没、不同屏显色差被放大。每次配色都要重新做平衡，而且很难沉淀成可复用的规则。

Mono-color Design Skill 的做法是反过来：把颜色数量砍到只剩一个色相，让层次完全由明度和饱和度承担。这样有几个明确好处：

第一，决策成本降低。你不需要再反复思考“这个蓝色和这个橙色搭不搭”，只需要控制同一个色相在不同明度下的表现。色板生成可以半自动化，后面第三部分会给具体脚本。

第二，一致性天然成立。单一色相本身就是最强的风格统一点。品牌色、背景、正文、边框、图表全都来自同一个色相阶梯，界面会天然形成“一个整体”的感觉，而不是多个孤立色块的拼接。

第三，信息层级没有被削弱，只是换了表达方式。多色设计里用“色相差异”区分信息，单色设计里用“明度差异”区分信息。深浅对比、面积对比、留白对比都能承担层级划分。对于数据可视化、后台看板这类高信息密度场景，单色体系尤其适合用来建立“主层次 + 次层次 + 辅助信息”的阅读顺序。

第四，技术实现更简单。前端落地时，一套色阶可以映射成一组 CSS 变量；暗黑模式切换只需要整体调整色阶的亮度范围。相比多色系统，单色系统的 Token 数量更少，交接更顺畅。

当然，单色不是万能的。需要强语义区分的地图、多分类对比报表、儿童向大面积多彩设计，这些场景不适合强行单色。更准确的说法是：单色设计适合拿来建立品牌感和秩序感，不适合拿来表达复杂分类信息。

3. 建立可复用的单色色板

Mono-color Design Skill 的第一步，通常是确定一个主色相，然后围绕这个色相生成完整的明度阶梯。这里不建议全部手工调色，推荐用 HSL 模型来做，把色相固定，只调整饱和度和亮度。

以蓝色系为例，主色相 H 固定在 210 附近，从接近黑色的深蓝到接近白色的浅蓝，生成一组 10 级色阶。表意色只是为了演示，实际项目中你可以替换成自己的品牌色。

这里的关键点不是记住某个具体数值，而是理解“0 - 100 的 L 值分布决定了整体画面是明亮还是沉稳”。如果产品走清爽风格，背景层应该集中在 L 值 90 到 98 的区间；如果走沉稳风格，背景层可以拉到 L 值 15 到 25 的区间。同一个色相，靠调整明度分布就能得到气质完全不同的两套界面。

想快速生成这类色阶，可以用一段简单的 Python 脚本，通过colorsys输出 CSS 变量或者 JSON 色版。下面这段脚本可以帮你快速产出一套从深到浅的单色阶：

import colorsys def hsl_to_hex(h, s, l): r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100) return '#{:02X}{:02X}{:02X}'.format( int(r * 255), int(g * 255), int(b * 255) ) def generate_scale(hue, saturations, lights): scale = {} for name, s, l in zip( ['950', '900', '800', '700', '600', '500', '400', '300', '200', '100', '50'], saturations, lights ): scale[name] = hsl_to_hex(hue, s, l) return scale hue = 210 saturations = [70, 75, 75, 70, 65, 60, 55, 50, 45, 40, 35] lights = [8, 14, 22, 32, 45, 55, 66, 76, 86, 94, 98] scale = generate_scale(hue, saturations, lights) for name, hex_color in scale.items(): print(f'Primary/{name}: {hex_color}')

这段代码不依赖第三方库，直接用 Python 自带的colorsys就能跑。你需要做的只是把 H 值换成品牌色对应的色相，再根据界面气质调整 S 和 L 的分布。生成结果可以直接粘进 Figma、导出到 CSS，或者作为后续批量出图的统一色板。

4. 在 Figma / Photoshop 里落地单色色板

拿到色阶之后，下一步是把它变成设计工具里可复用的“样式系统”，而不是每次手动填色。

4.1 Figma 中建立颜色样式

Figma 里推荐把色阶建成 Color Style，并采用清晰命名，方便后续组件引用和前端对齐。操作路径是：右侧面板选中一个矩形，设置填充色后在“Style”区域点击“Create style”，然后命名为Primary/500这样的格式。重复操作直到整个色阶都进入样式库。

命名规范很关键。建议使用“语义 + 数值”的方式，比如Text/Strong、Text/Secondary、Border/Default、Background/Page、Brand/Primary。不要使用“浅蓝”“深蓝”这类容易产生歧义的名称，因为色阶数字是唯一的，团队协作时不会出现“你用的蓝和我用的蓝不一样”的争议。

建好色板之后，直接把组件的填充、边框、文字颜色引用到这些 Style 上。这样后续想微调色相，只需要改 Color Style，所有引用到该样式的地方会同步更新。

4.2 Photoshop 中制作单色调色板

Photoshop 里的做法更偏素材处理。如果要做单色风格的海报、Banner 或封面，建议先建立色板预设。打开“色板”面板，点击右上角菜单，选择“预设管理器”，把上面生成的一组色阶以.aco格式导入，这样在整张画布上都能取到同一套颜色。

处理图片素材时，可以先用“色相/饱和度”调整图层，把“色相”滑块拖到目标色相区间，再降低“饱和度”到合理范围。这样做比直接“去色 + 蒙版”更可控，因为你能保留一定的色彩冷暖变化，而不是完全变成灰度图。更稳妥的判断是：先把饱和度降到 15 到 25，再统一色相，最后用曲线压出明度层次。批量处理时，这些操作可以录制成 Photoshop 动作，批量应用到整个文件夹的素材图上。

4.3 导出 Design Token

为了让设计和前端协作顺畅，建议把色板导出成 JSON 格式的 Design Token。Figma 目前原生支持变量的导出，你也可以手动维护一份 JSON。下面是一份最小示例：

{ "color": { "primary": { "50": "#F0F7FE", "100": "#D9E9FA", "200": "#B3D2F5", "300": "#85B5EE", "400": "#5595E5", "500": "#2E73D6", "600": "#1F5FB8", "700": "#194B91", "800": "#13396C", "900": "#0C2649", "950": "#071731" } } }

4.4 局部调整与导出格式

除了整组导入，也可以按需抽取局部色板直接用于项目。上方 JSON 是通用结构，不同工具导入时字段格式可能不同，实际使用中可在 Figma 变量面板里花少量时间建立映射，或导出后再按目标结构做一次转换。这个转换用脚本做最省事，后面第 7 节会给出批量替换的思路。

5. 界面设计的完整执行流程

色板就位后，真正体现 Mono-color Design Skill 价值的是“应用到界面”的过程。建议按以下步骤走，每一步都对应一个明确的验证点。

5.1 确定主色相和基础明度范围

先确认品牌主色是什么色相。如果项目没有品牌色，可以从产品气质反推：科技感产品可以落在蓝紫色相区间，偏温暖的产品可以落在橙褐色相区间，内容社区类产品常用蓝绿色相区间。主色相确定之后，整套色阶就固定了。

5.2 生成 10 级明度阶梯

这里补充说明一下：不同工具和设计系统里，色阶的分级数量不太一样。常见的有 50/100/200 这种 11 级分法，也有 100/200/300 这种独立色阶分法。对于 Mono-color Design Skill 来说，建议按实际项目的 Token 规模选择：小项目 6 级够用，复杂组件库可以铺到 11 级。关键指标是相邻色阶之间要有可感知的明度差，尤其在使用文字和背景时，一定要保证对比度达标。

5.3 分层：背景 / 内容 / 强调

把界面布局拆成四类元素：页面背景、内容卡片、主要文字、强调操作。页面背景用最浅的那一两级，比如 Primary/50 或 Primary/100；内容卡片用白色或 Primary/50；文字层级用 Primary/900 做标题，Primary/700 做正文，Primary/500 做辅助信息；强调按钮用 Primary/600 或 Primary/500，配合白色文字。

也可以用一层背景色快速查看整体气质，不需要把所有层都铺完。验证方法是：只看颜色不出线稿，看能否通过深浅快速分辨出标题、正文、按钮和背景。如果不能，说明明度差不够，需要把文字色阶往下压，或者把背景色阶往上提。

5.4 验证对比度和可读性

单色设计最容易出现的硬伤是：浅色背景上使用浅色文字，或者深色背景上的辅助文字明度不够。写正文颜色之前，建议先用对比度检查工具过一遍。按照通用无障碍标准，正文文字和背景的对比度尽量不低于 4.5:1，大号文字和图形元素可以适当放宽，但如果要做达标方案，尽量也往 3:1 以上靠。这个环节不建议凭感觉，因为不同显示器上同一组色阶的观感差异会很大。

5.5 素材统一处理

配图、图标、插画如果是从外部拿到的，颜色大概率不统一。Mono-color 思路下，建议对这类素材做统一处理：图标改成单色填充，配图加一层半透明主色蒙版，或者在“色相/饱和度”里统一色相。这不是把图片变成灰度图，而是把图片的色相拉向主色相的邻近区间，同时保留明度细节。这一步做完，整个页面的“同源感”会立刻提升。

5.6 评审与输出

最后做一轮完整评审。重点是看三点：最深色和最浅色之间是否有足够的跨度；强调元素是否在页面中“跳”出来；整套界面在不同屏幕亮度下是否出现大面积死黑或死白。确认没有问题后，再输出设计标注文件或者上传到 Figma 组件库。

6. 在代码层面实现单色主题

单色设计交付到前端时，最合适的载体是 CSS 变量。C 端的做法是：把整个色阶映射成--primary-50到--primary-950这样的变量，然后在组件里引用这些变量。这样后续换肤、暗黑模式、局部强调色都能通过改变量实现，不需要大范围改动组件代码。

下面是一份可运行的 CSS 示例，适合直接放在项目根样式中：

:root { --primary-50: #F0F7FE; --primary-100: #D9E9FA; --primary-200: #B3D2F5; --primary-300: #85B5EE; --primary-400: #5595E5; --primary-500: #2E73D6; --primary-600: #1F5FB8; --primary-700: #194B91; --primary-800: #13396C; --primary-900: #0C2649; --primary-950: #071731; } .page { background: var(--primary-50); color: var(--primary-900); } .card { background: #FFFFFF; border: 1px solid var(--primary-200); } .button { background: var(--primary-600); color: #FFFFFF; } .muted { color: var(--primary-500); }

如果是暗黑模式，不需要重新设计整套配色，只需要把明度阶梯“反转”一下。简单做法是定义一套暗黑模式下的变量覆盖，把背景改为 Primary/950，文字改为 Primary/50，卡片背景改为 Primary/900，边框改为 Primary/700。这样界面还是同一套色相体系，只是明度分布从“上浅下深”变成“上深下浅”。

SVG 图表和图标也建议引入变量控制。图表的主柱、折线、面积填充尽量只用两到三个变量：--primary-600做主数据，--primary-300做次级数据，--primary-50做背景网格。数据多了之后，优先用不同明度区分，而不是重新引入新色相。这样既保证风格统一，也不影响信息读取。

7. 批量生成与团队复用

单色体系的好处之一是特别适合批量操作。把色板确定下来之后，批量生成色板卡片、批量调整素材色相、批量输出不同主题预览图都很容易实现。

如果你需要给一组物料的封面批量替换成统一单色风格，可以用一段简单的 Python 脚本，结合 Pillow 库对整张图片做色相统一处理。下面是思路示例：

from PIL import Image def apply_mono_tint(input_path, output_path, target_hue=210, saturation_factor=0.4): """将图片统一到目标色相，降低原始饱和度，保留明度信息。""" img = Image.open(input_path).convert('L').convert('RGB') overlay = Image.new('RGB', img.size, f'hsl({target_hue}, 100%, 50%)') blended = Image.blend(img, overlay, alpha=saturation_factor) blended.save(output_path)

convert('L').convert('RGB')先把图片变成灰度图，再叠加一层目标色相，saturation_factor控制叠加强度。实际应用到真实项目时，建议保留原始图层和设置参数，先处理两到三张素材确认效果，再批量跑整个目录。批量处理常见的坑是：有的图片本身明暗反差很小，统一色相后层次感不足，这时候需要额外做一次色阶拉伸，而不是一味用蒙版。

在团队协作层面，Mono-color Design Skill 的落地可以拆成三层：设计侧维护 Figma Color Style；工程侧维护 CSS 变量或 Design Token JSON；产物通过 Storybook、文档站点或者简单的静态页面展示。建议在项目启动阶段就把这三层映射关系建立好，不要等设计全部做完再补 Token。

前端写代码时，如果要用 Tailwind 这类原子化框架，也可以把色板装进 config 文件。下面是一个 Tailwind 风格的配置片段：

/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { colors: { primary: { 50: '#F0F7FE', 100: '#D9E9FA', 200: '#B3D2F5', 300: '#85B5EE', 400: '#5595E5', 500: '#2E73D6', 600: '#1F5FB8', 700: '#194B91', 800: '#13396C', 900: '#0C2649', 950: '#071731' } } } } }

注意这里的色值只是演示用的示意色值，实际项目需要用自己生成的那组色板替换。配置好之后，页面里写bg-primary-600、text-primary-900就能直接引用单色体系。

8. 常见问题与排查方法

单色设计中还有一个很隐蔽的问题：同一组色阶在浅色背景上做标题时表现很好，但放到深色背景上会显得有点“飘”，因为色块周围的亮度变化会影响人对明度的感知。针对这个情况，建议在暗黑模式切换时单独微调文字色阶和背景色阶，不要直接复用同一套明度值。

9. 适用场景与使用边界

Mono-color Design Skill 的高频适用场景包括这几类：

• UI 界面设计：后台管理、SaaS 产品、移动端工具类 App，单色体系能让界面显得干净统一。
• 数据可视化：看板、图表、报表，用明度区分数据层级，比多色图表更容易聚焦。
• 品牌物料：Logo 延展、名片、海报，单色体系在打印和电子屏上的一致性更高。
• 演示文档：PPT 和 Keynote 里使用单色色板，页面风格更统一，不容易出现花里胡哨的拼接感。
• 暗黑模式：单色体系天然适合暗黑模式，因为只是明度范围的翻转。

不建议强行使用单色的场景主要是这些：

• 地图和地理信息可视化：多个分类区域往往需要通过色相区分，单色会让相邻区域难以辨认。
• 多分类强语义的数据报表：比如风险等级、状态变化、涨跌趋势，这类场景需要颜色本身承担语义，单色做不到。
• 面向低龄用户的界面：儿童产品通常需要高饱和、多色相来吸引注意力，单色体系容易显得过于冷静。

合规方面有一点需要提醒。做单色设计并不意味着对素材使用可以放松：商业用途的图片、字体、图标、插画都要确认授权范围；AI 生成素材时需要记录生成参数和所用工具；涉及真实人物肖像、品牌 Logo、内部数据元件的使用，更要先取得授权。单色只能统一视觉风格，不能规避版权和隐私问题。

10. 总结与下一步

妍妍老师发布的这套 Mono-color Design Skill，真正值得吸收的部分不是“只用一种颜色”这个结论，而是背后的执行逻辑：固定色相 -> 生成明度阶梯 -> 分层应用 -> 批量复用 -> 代码对接。这个流程把“配色好不好看”这种主观问题，拆解成了“明度差够不够、色阶跨度够不够、对比度达不达标”这些可以验证的客观问题。

建议你拿到这套方法后，先做三件事：第一，确定一个主色相，生成一套不少于 8 级的明度色阶；第二，在 Figma 或 CSS 变量里建立色板映射；第三，把目前手头最常用的一个页面按单色体系重新套一遍，看差异在哪里。先跑通最小闭环，再考虑铺开做组件库和暗黑模式，这样不至于一开始就陷入“哪种蓝更好看”的纠结里。

最容易踩的坑有两个：一是色阶跨度不够，导致整页灰蒙蒙一片；二是背景和文字的明度差控制不住，对比度不过关。这两个问题都可以通过量化检查来规避，不需要靠感觉反复调。

后续如果想把这套单色体系做得更深入，可以继续扩充的方向包括：把色板接入 Design Token 自动同步链路、在暗黑模式下做明度阶梯的自动反转、以及配合 AI 绘图工具批量生成同一色相风格的内容素材。单色设计的上限不在于颜色多少，而在于你对明度和层次的掌控能力，这套能力在任何设计工具里都能复用。