最近在跟进妍妍老师发布的 Mono-color Design Skill 这套内容顺着主题把自己手头几个设计项目重新过了一遍。先说我的判断单色设计不是“只用一个颜色”而是把整套视觉建立在一个主色相上用明度、饱和度、透明度、纹理和留白撑起层次。它最适合的场景是界面设计、数据可视化、品牌识别和海报排版解决的核心问题是配色决策成本高、多色搭配容易乱、整体调性很难统一。这不是课程笔记式复述而是我按这套思路从零跑完一轮后的实操记录。下面会依次讲清楚单色设计到底在解决什么、开工前要准备哪些工具和色彩模型、从主色到色阶怎么一步步落地、每个环节盯哪些参数、不同场景的差异以及我实际踩过和排查过的坑。1. 单色设计不是“只用一个颜色”先搞懂它解决什么问题1.1 很多人理解错的第一步“只用一种颜色”这个说法最容易误导人。真把单色设计落地到界面或者海报上你至少要面对同一色相下的多个明度等级、一组中性灰、还有不同透明度带来的叠加效果。比如主色相定为蓝色你仍然需要一套从很浅的蓝到很深的蓝连续变化的色阶再用极浅的背景色、中等饱和度的卡片色、深色文字去组织信息。如果只是把一个色值复制到所有元素上那叫单色填充不叫单色设计。设计之所以成立是因为用户能一眼区分标题、正文、背景、按钮和强调信息而这一切并不依赖多个色相靠的是明度和饱和度的变化。这里我把概念拆开讲色相决定“是什么颜色”明度决定“有多亮”饱和度决定“有多艳”。单色设计里色相基本固定明度和饱和度是主要工具。先想清楚这个概念后面所有操作才不会跑偏。1.2 单色设计省掉的是配色决策成本多色设计的难点不在于“哪个颜色好看”而在于协调成本。每多引入一个色相你都要考虑它跟主色、背景色、文字色、强调色之间的关系。这一套关系如果靠感觉去调很容易越调越乱。单色方案把问题收窄了主色相一旦确认剩下的工作就变成控制明度层级和饱和度高低。你不会在“这个橙色跟这个蓝色搭不搭”上消耗大量时间只需要检查“这个蓝色够不够深、对比度够不够”。它的可复用性也更强。同一套色阶可以继续用在另一个界面主题、另一张海报里只要主色相不变整套体系就能延续。1.3 适合学单色设计的人从我的经验看真正需要这项技能的人有四类第一类是 UI/UX 设计师做设计系统和组件库时单一色相比多色方案更好维护第二类是前端开发者在写主题变量、设计 Token 时单色色阶很容易映射成语义变量第三类是平面设计师做海报和品牌物料时单色更容易做出统一气质第四类是数据可视化从业者用明度编码连续变量可以避免花哨的渐变图例。如果你是初学者单色也是特别好的练手方向。它不需要你天生对颜色敏感因为规则已经很清楚对比度、灰度层次、色阶数量都可以被量化检查。相比之下多色搭配更依赖经验和审美单色则更依赖结构和逻辑。2. 开工之前先准备好工具、色彩模型和参考库2.1 常用工具和工作流单色设计不挑软件但不同工具适合干不同的事。我常用的组合是Figma 负责界面组件和色板维护Photoshop 处理位图和海报合成Illustrator 处理矢量图形和 Logo。前端在做主题变量时可以直接把色阶导出成一行行 Color Token。如果你不用这些软件在线色板工具也能完成大部分工作。常见做法是输入一个主色相让工具自动生成明度梯度再把颜色复制进设计稿。相比手工调工具生成的好处是色阶的明度变化更均匀不会出现两个相邻色阶看起来一模一样、又突然跳出去一档的情况。下表是一个我常用的工作划分设计环节工具示例主要用途色板整理Figma / 在线色板工具生成色阶、维护样式变量界面设计Figma / Sketch组件、页面布局、交互状态海报插画Photoshop / Illustrator位图处理、矢量图形、材质纹理前端落地VS Code 设计 Token把色值变成 CSS 变量或主题配置工具不是关键。关键是你要把色阶统一管理起来不要在设计稿里散落几十个手工吸取的颜色。2.2 先看懂 HSL再谈 HEX设计圈里大家常交换 HEX 值比如#3B82F6表示一个蓝色。HEX 对代码和标注很友好但它没法直接告诉你这个颜色“蓝里面带多少绿、亮不亮、艳不艳”。真正帮你理解单色的是 HSL 或 HSB。HSL 的三个维度分别是HHue色相范围 0 到 360 度。红色约 0 度黄色约 60 度绿色约 120 度青色约 180 度蓝色约 240 度洋红约 300 度。SSaturation饱和度范围 0 到 100%。0% 是灰100% 是最艳。LLightness明度范围 0 到 100%。0% 是黑100% 是白。单色设计要做的事用 HSL 来描述就是固定 H只调整 S 和 L。比如主色 H220饱和度 80%明度 50%得到一个中等蓝色同一个 H明度调到 92%就是一个很淡的蓝灰背景明度调到 20%就是接近黑的深蓝。这套逻辑在 HEX 格式里几乎看不出来但在 HSL 里一目了然。如果你想批量打印色阶可以用一个很简单的脚本。下面这段只是工具示例不依赖特定设计软件核心是把同一 H 值下的多个明度转成 HEXimport colorsys def make_scale(hue, saturation, lightness_list): colors [] for lightness in lightness_list: # colorsys.hls_to_rgb 的参数顺序是 H, L, S r, g, b colorsys.hls_to_rgb(hue / 360, lightness / 100, saturation / 100) r, g, b round(r * 255), round(g * 255), round(b * 255) colors.append(f#{r:02x}{g:02x}{b:02x}) return colors # 主色相 220饱和度 70%输出 8 级明度色阶 print(make_scale(220, 70, [95, 88, 78, 62, 45, 30, 18, 10]))脚本会打印 8 个颜色。注意脚本只负责转换不负责审美。生成结果好不好看仍然要靠人工判断。2.3 建一个单色灵感参考库很多人一开始不知道怎么选主色或者生成色阶后总觉得不如别人高级。这时候需要积累参考。我建议按主题建一个参考库专收“有明确色相倾向但不杂乱”的作品。来源可以是摄影作品、建筑设计、电影截图、海报收藏、优秀的网站或 App 截图。参考库怎么用不是抄颜色而是看你喜欢的作品里颜色之间的明度差是怎样分布的。有些作品很亮背景和前景的明度差很小整体温柔有些作品很暗靠一个高饱和的色彩点亮局部。你把这些规律概括出来再套到自己选的 H 值上比随机调色靠谱得多。建库的工具不重要文件夹、收藏夹、白板工具都可以。关键是每个作品后面写一句“我为什么觉得它好看”把视觉感受转成可执行的判断。3. 从主色到色阶一条可复现的单色设计流程3.1 第一步选定主色而不是选一个颜色单色设计的起点是确定一个主色相不是直接抓一个颜色开始用。好比你先确定“我要一个偏冷偏深的蓝色”再决定它到底有多深、多艳。这个顺序决定了后面整套色阶是否容易扩展。如果没有明确的主色倾向可以从品牌 Logo、产品图标、头图里用吸管取色。取完颜色后看一下它的 H 值落在哪个范围。比如 H 在 210 到 240 之间说明你的主色更偏冷静和技术感H 在 330 到 350 之间则偏暖偏活力。这个判断可以帮你确认方向。选定主色后不要直接用取到的色值当主色阶建议先稍微调整饱和度让它在不同背景下都不至于太刺眼或太脏。以界面设计为例主色通常不会选最饱和的那个因为大面积使用很刺眼饱和度在 60% 到 85% 之间的中等色往往更好用。3.2 第二步生成 5 到 10 级色阶色阶的生成逻辑很简单固定 H 和 S让 L 从一个低值逐步变到一个高值。常见的设计系统会把主色做成 10 级命名从 50 到 900数字越大颜色越深。这个命名方式的好处是你不需要记“浅蓝”“深蓝”这种模糊名称直接用 50、500、700 就能沟通。手动生成时可以先定两端最浅那一级大约对应明度 95% 左右用于背景最深那一级大约对应明度 20% 或 10%用于正文和深色组件。然后把中间值均匀分布明度间隔不要忽大忽小。如果感觉两级之间跳得太快就继续在中段补级。色阶命名明度建议常见用途5090%-95%页面背景、浅色底10080%-85%卡片底、浅色边框20070%-75%次级背景、图标底30055%-60%边框、分割线40045%-50%辅助按钮、次要图标50038%-42%主按钮、主要图标60030%-35%主色悬停、深色强调70020%-25%标题文字80010%-15%正文文字9005%-10%接近黑的深色上表是参考不是绝对值。不同品牌色相的可辨识度不同实际阶段可以根据视觉感受微调。重点是相邻色阶的明度差要稳定不要前面两级都很接近后面突然拉开一大截。3.3 第三步加入中性色和透明度单色设计不排斥灰阶。恰恰相反没有中性色支持的单色会非常累眼睛。页面里的纯白背景和深灰文字能让主色只出现在你想强调的地方。中性色不一定要纯黑纯白。冷色主色适合偏冷的中性灰暖色主色适合偏暖的中性灰。比如主色相是蓝色中性灰里可以带一点点蓝味这样整体的色温统一。你可以把 H 值调成跟主色一致饱和度调到 5% 以下再取不同明度得到一组带色相的灰。透明度也是单色设计的重要工具。同一个色阶降低透明度后可以产生更淡的叠加效果适合做遮罩、选中背景、蒙层。但要注意透明度叠加在复杂背景上时最终颜色会随背景变化不适合用在要求严格一致的组件上。3.4 第四步按层级分配颜色色阶生成后接下来是分配。核心原则是大面积用浅色重要元素用高饱和或中等明度色文字和关键信息用深色。一个典型的界面分配可以是背景用 50卡片用 100边框用 200主按钮用 500按钮悬停用 600正文用 800标题用 900。这样一组分配下来不需要额外加一个橙红色强调页面的信息层级也已经很清楚。这个环节最怕的是把主色 500 大面积铺满。饱和度较高的色阶适合做视觉焦点不适合做大面积背景。想突出主色反而要让主色周围保留足够的浅色空间形成对比。3.5 第五步用灰度图验证明度结构设计稿做完后先别急着发预览。把整个页面或海报转成灰度图快速检查明度层次。如果转成灰度后背景、卡片、文字还能清晰区分说明你的色阶结构是成立的。如果转成灰度后所有内容糊成一团说明明度分配不到位。对比度验证建议放到导出之前做。正文、辅助文字、按钮文字、边框这几类元素各抽查几组前景和背景色。工具会在正文和背景之间给出对比度数值。通常建议正文对比度不低于 4.5 比 1大号文本和图标不低于 3 比 1。这个标准不是审美偏好而是可读性的底线。4. 单色设计要盯住的参数和判断标准4.1 色相、饱和度、明度这三个参数怎么控制单色设计最核心的就是这三个维度。色相负责统一饱和度负责情绪明度负责层级。控制好这三者的关系单色才不会变得单调或混乱。饱和度控制建议分场景处理大面积背景的饱和度尽量低比如 0 到 15%颜色太艳会喧宾夺主主按钮和强调元素可以保持较高饱和度比如 60% 到 90%文字一般不建议使用高饱和颜色因为阅读久了容易疲劳。饱和度不是越高越好也不是越低越好它要配合明度一起看。明度控制的判断标准是色阶相邻两级之间的视觉变化要均匀。如果你发现两个色阶放在一起几乎分不出来说明这个区间梯度太密如果中间跳过了一级说明梯度太疏。4.2 对比度不是“感觉能看清”就行设计师看对比度容易凭感觉但用户设备、屏幕亮度、阅读距离各不相同感觉并不可靠。更稳妥的办法是用对比度工具实测。计算逻辑大致是先算前景和背景的相对亮度再取大数除以小数得到一个比值。4.5 比 1 和 3 比 1 是两个最常用的门槛。使用场景建议对比度大致说明正文文字4.5:1 以上小字号、正常字重下的可读性大号文字3:1 以上大字号或粗体文字图标和 UI 组件边界3:1 以上需要被用户识别为可点击区域选中态 / 焦点态与相邻背景明显区分不能只用颜色表达最好配合边框或描边如果某一个色阶在白底上始终达不到 4.5 比 1就换更深的色阶做文字不要硬调透明度。透明度的结果不稳定不同浏览器、不同显示设备的渲染会有差别。4.3 完整性检查除了颜色还要检查状态和边界单色设计容易漏掉的不是色板而是交互状态。UI 里至少要有默认、悬停、按下、禁用、选中、焦点几种状态。悬停通常用比主色深一号的 600按下可以更接近 700禁用则降低饱和度并提高明度。如果只做了默认态用户操作时体验会断档。所以不要只盯着静态稿要把组件状态都搭出来再统一检查对比度和层级。4.4 比例和分布大面积浅色小面积强调比例控制是单色设计的隐形标准。一个很有效的大致比例是大面积背景使用极浅的色阶或中性灰约占整体 60%-70%内容容器和卡片使用中浅色阶约占 20%-30%主色和强调元素占比不超过 10%。这不是数学公式但能避免“到处都在强调”的混乱感。需要特别提醒的是单色不等于把同一颜色放在所有地方。过多使用同一种明度会让页面失去层次过多使用高饱和色则会让视觉很挤。比例就是用来给色彩“留白”的工具。5. 不同场景下单色设计的实际差异5.1 UI 界面与组件库UI 可能是单色设计最受益的场景。设计系统里主色通常只要一组 10 级色阶再加上中性色、成功色、警告色、错误色就能覆盖大部分界面。单色有助于降低设计 Token 数量也让品牌识别更稳定。但 UI 里有一个常见矛盾成功、警告、错误天然是不同颜色如果硬要全部用同色相用户分不清。我的处理方式是主流程操作坚持用主色但状态反馈允许小范围色相偏移比如成功用绿色、错误用红色。这其实已经不是严格意义的单色而是“主色单色化 功能色分离”。如果你必须保持严格单色就要靠图标、文字前缀、形状来弥补状态差异。5.2 品牌视觉和海报海报和品牌物料使用单色更多是为了情绪和记忆点。单色海报的高级感不来自颜色数量而来自光影对比、字体层级、负空间和材质。比如一张深蓝色底、亮蓝色标题、白色正文的海报它们的关系更接近“明暗关系”而不是“配色关系”。做海报时可以多用透明度、渐变、纹理和噪点。这些手段不会破坏单色统一性反而会丰富画面细节。注意渐变不要跨到很远以外的另一个色相要尽量在同一色相附近偏移否则会破坏“单色”的整体感。5.3 数据可视化数据可视化对单色的要求更严格。连续型数据适合用同一色相的明度渐变用来表达从低到高的数值。这样既直观又不花哨。分类型数据如果类别很少比如三到四类可以用同一色相的多个不同明度层级如果类别很多单色区分度就不够建议搭配形状或标签或者引入辅助色。还有一个高频问题不要用同一色相的相近百分比颜色代表完全不同的系列比如 90% 饱和度和 85% 饱和度的两个蓝在图表里很难让人区分。数据可视化的目标是准确编码不是好看。更靠谱的方案是用明度阶梯拉开数据层级在关键位置加上数值标签。