这次我们来看一个和“写代码跑模型”完全不同的技能向内容妍妍老师发布的 Mono-color Design Skill。先别被英文名字劝退。Mono-color 就是“单色”这套技能解决的问题很具体当你的界面、海报、PPT 或者插画只需要一个主色相时怎么把画面做得有层次、有细节、有高级感而不是一片死板或者灰蒙蒙。很多设计师一提到“配色”就打开色相环来回换结果越换越乱单色设计正好是反过来的思路不换色相只换明度和饱和度。这篇文章会把 Mono-color Design Skill 拆开来讲。我们先说清楚什么是单色设计、为什么值得练然后给出一套可以直接上手的方法色相怎么选、明度怎么排、饱和度怎么控、中性色怎么补。再配合色板文件、UI 实操、品牌插画和数据可视化中的应用最后整理常见问题排查和一套可复用的工作流。全程不需要你换一台“高配电脑”或者安装什么模型环境这套技能真正需要的是一套可执行的色彩判断标准。本文最适合这几类读者做 UI/UX 的设计师想规范界面色彩层级的人做品牌视觉、PPT、信息图总是搞不定色彩统一的人以及刚入行、看到色环就头大、想建立一套稳定配色方法的初学者。1. Mono-color Design Skill 核心概念速览先说一个容易误解的点单色设计不是“整张图只用一种颜色”而是只使用一个色相Hue通过改变明度Lightness和饱和度Saturation来建立层次。能力项说明技能类型色彩设计方法论非软件工具核心原则一个色相 明度阶梯 饱和度控制 中性色补偿适用方向UI 界面、品牌视觉、插画、数据可视化、PPT、海报主要工具Figma、Adobe Color、Coolors、Photoshop、Illustrator、CSS 变量上手难度入门容易精进需要刻意练习核心产出一套可复用的单色色板、组件配色规则、设计令牌是否依赖 GPU否适合人群UI 设计师、品牌设计师、PPT 制作者、数据可视化工程师从这套技能的名字看“Skill”强调的是可迁移、可复用。它不是告诉你“这个按钮要用蓝色”而是告诉你一套判断方法在同一个色相下面背景该多亮、文字该多深、卡片该用什么明度、强调状态怎么弹出层次。这些规则一旦建立你可以把它从一个项目复制到另一个项目。2. 单色设计适合什么场景不适合什么场景2.1 适合场景统一性优先的视觉系统单色设计最大的优点是快速建立品牌感和秩序感。在 UI 界面中如果所有需要传达“主操作”的元素都落在同一个色相的不同明度上用户的注意力会非常自然地被引导到最高饱和或最高对比的那一个层级。比如表单页面里的“提交”按钮用了整张页面里最重的一档色用户不用想就知道该点哪里。数据可视化也很适合单色。一组柱状图如果每个柱子都换一个色相色相越多、歧义越大但用同一个色相的不同明度来区分数据系列视觉上既统一又能体现从低到高的趋势关系。类似的方法在品牌视觉、LOGO 辅助图形、PPT 风格页里也很常见。2.2 不适合场景多色表现和写实需求单色不等于万能。需要表达多类并列信息、需要强烈色彩情感对比的场景比如电商大促海报、写实插画、复杂的分类数据地图单色会显得表达力不足。不要把这套方法当成唯一真理它是工具箱里的一件高频工具不是所有问题的答案。另外使用单色设计时要注意版权和授权边界。如果你在设计里用到第三方素材、图片、字体或参考图需要确认这些素材的授权范围是否覆盖你的使用场景尤其是商用项目。本文涉及的色值和设计方法本身不构成素材授权只提供技术参考。3. 单色设计的方法论基础3.1 先选一个“够用”的色相单色设计的起点是确定主色相。这个选择不应该靠“我今天喜欢蓝色”来拍板而应该看项目的功能诉求。色相方向心理暗示常见适用场景蓝专业、稳定、理性企业服务、开发工具、金融、数据产品绿生长、健康、安全医疗、环保、金融增长、教育橙活力、温暖、促销电商、活动、内容社区红强提醒、热情限时促销、预警、重点强调紫创意、高端、神秘美妆、艺术、潮流品牌青/青绿清新、现代、技术感科技产品、开发者平台、智能硬件当然色相本身没有绝对好坏关键是你能否在这个色相上构建出足够多的明度层级。如果某个色相天生明度区间有限比如黄色提亮到极限会变白压暗到极限会变脏使用难度就更高。新手建议避开纯黄、纯绿这类明度区间窄的色相先从蓝色、青色、紫色上手。3.2 搭一个明度阶梯这是 Mono-color Design Skill 的核心动作。选定色相后不要只存一个色值而是生成一个从 50 到 900 的明度阶梯。以蓝色为例:root { --primary-50: #eef4ff; --primary-100: #dbe7ff; --primary-200: #b8d1ff; --primary-300: #8bb4ff; --primary-400: #5b92ff; --primary-500: #2f6bff; --primary-600: #1f4fd6; --primary-700: #1a3dab; --primary-800: #162d80; --primary-900: #10205c; }上面这组值是一种常见的蓝色单色阶梯50 档几乎接近白色适合做页面背景100 到 200 可以做浅色容器和分割线300 到 400 适合次级强调500 是主色一般用来放主按钮和关键选中态600 到 700 适合 hover 或正文里的重点文字800 到 900 接近深藏蓝可以做顶部栏、底部栏和重强调文字。这套阶梯建立之后你会发现一个规律极浅档负责“铺底”中档负责“交互”深档负责“文字和重量感”。单色设计的“立体感”不完全靠投影很多时候靠的是同一色相在不同区域上的明度差。3.3 用饱和度控制“情绪浓度”单色设计里饱和度不是越高越好。高饱和适合小面积强调低饱和适合大面积背景。如果满屏都是高饱和蓝色眼睛会很快疲劳信息层级也会被压平。比较稳妥的做法是大面积背景使用低饱和或接近灰的浅色中等面积的卡片和按钮使用主色档位小面积的图标、标签、强调点使用高饱和。这样既保留“红色相的统一性”又让画面有呼吸感。3.4 用中性色补偿但不抢戏单色设计不等于页面里只有一种颜色。为了让层级更清楚通常需要引入白色、浅灰、深灰这样的中性色。中性色在这套方法论里扮演“支撑结构”页面背景白色或浅灰视觉噪音最低。正文文字深灰或接近黑色避免纯黑过于生硬。边框和分割线浅灰比背景深一点点即可。深色模式深灰背景 浅色文字 主色点缀。中性色不要带太多色偏否则会干扰单色的主视觉。4. 工具与色板构建流程4.1 推荐工具工具用途说明Adobe Color生成色板、查看色相协调关系可以手动拖选色相生成单色色板Coolors快速生成色板支持锁定色相后生成明度变化Figma设计组件、变量管理支持 Design Tokens 风格的色板变量Photoshop调色、修图、检查画面层次适合海报和插画场景Illustrator插画、LOGO、印刷物料适合品牌应用4.2 构建流程第一步在 Adobe Color 或 Coolors 里选择一个基准色。第二步把色板模式切换为 Monochromatic得到同一色相的若干档位。第三步回到设计软件里手动调整每一档的明度和饱和度确保相邻档位之间有可感知的差异。第四步把颜色整理成设计令牌保存。以 JSON 格式保存为设计令牌方便开发同学直接使用{ color: { primary: { 50: #eef4ff, 100: #dbe7ff, 500: #2f6bff, 600: #1f4fd6, 900: #10205c }, neutral: { 0: #ffffff, 100: #f5f6fa, 500: #9ca3af, 900: #111827 } } }如果项目里用 CSS可以直接使用上一节给出的 CSS 变量。这种“设计令牌 变量”的方式是做单色设计系统必须养成的习惯不要在设计稿里写死任意色值所有颜色都从色板里取。5. 单色 UI 实操演练5.1 实操目标假设你现在要设计一个后台数据看板页面只有一次机会选择一个主色相。从上面的方法论看选择蓝色最稳妥。接下来按以下步骤搭建页面层级设计元素推荐色值作用页面背景#f5f6fa 或 --neutral-100低噪音底色卡片背景#ffffff内容承载标题文字#10205c 或 --primary-900重强调正文文字#111827 或 --neutral-900可读性优先辅助文字#9ca3af 或 --neutral-500次要信息主按钮#2f6bff 或 --primary-500核心动作主按钮悬停#1f4fd6 或 --primary-600反馈层级选中态#dbe7ff 或 --primary-100当前模块边框#e5e7eb卡片分隔5.2 操作步骤打开 Figma先建背景画板填充 --neutral-100。再画三张卡片填充白色给卡片加 1px 浅灰边框。卡片内部放标题和正文标题用 --primary-900正文用 --neutral-900辅助说明用 --neutral-500。然后页面右侧放一个主按钮填充 --primary-500文字白色。最后给当前激活的菜单项加一个 --primary-100 的背景和 2px 的 --primary-500 侧边条。这个过程走完后你会看到整个页面几乎没有“跑出色相”的元素但层次非常清楚。判断成功与否的标准很简单把页面缩成小图能不能一眼看到主按钮在哪里、当前菜单是哪一个、哪张卡片最重要。如果能说明层次做对了。5.3 判断失败时的排查点如果画面显得平通常是明度阶梯不够宽背景和卡片的明度差太小或者按钮没有用到足够深的色档。如果画面显得“脏”通常是饱和度没控制好大面积区域用了太高饱和的颜色导致视觉焦点被稀释。6. 单色品牌与插画应用单色设计在品牌视觉中的价值是把“识别度”压在色相上。一个品牌如果长期使用某一个特定的蓝色用户的记忆成本会非常低。苹果、Twitter、星巴克等品牌的视觉识别都有很强的单色属性这并非偶然。6.1 品牌应用做品牌提案时可以先定义一个“英雄色”然后围绕这个英雄色建立完整色板。比如品牌主色为 --primary-600辅助图形和背景分别使用 --primary-50 和 --primary-100。这样可以保证任何一张品牌物料放在一起视觉上都像同一个体系。6.2 插画应用插画里用单色重点在“形状分层”。不依靠不同色相区分前后景而是靠明度背景用最浅一档中间物体用中间档前景主体用最深档。这种方法很容易做出统一的插画风格也方便团队多人协作因为谁都清楚“从色板里取色”而不是临场发挥。6.3 数据可视化应用数据可视化用单色时要谨慎处理同一色相下不同档位的“顺序感”。比如一组趋势图旧数据用浅色新数据用深色这样读者会在潜意识里把深色当成“更近、更重”。如果数据类别之间没有顺序关系建议只用不同明度做区分并在图例里明确标注避免歧义。7. 常见问题与排查方法问题现象可能原因排查方式解决方案画面看起来平没有重点明度阶梯过窄所有元素都集中在中间几档查看色板上每一档是否拉开差重做明度阶梯扩大最深与最浅的差距颜色显脏像蒙了一层灰低明度区域使用了过高饱和度检查深色档的饱和度是否偏高压暗时同步降低饱和度满屏高饱和眼睛累大面积使用了主色档观察颜色覆盖面积大面积底色改用 50/100 档高饱和只留给小面积强调单色看起来太单调层次不足中性色没有参与检查是否只有颜色在做对比加入中性色背景、边框、深浅文字深色模式下看不清深色文字压到深色背景上对比度检测深色模式单独建一套浅色文字变量按钮 hover 状态不明显hover 色与默认色差异太小对比默认态和悬停态使用下降一档的色值如 500 到 600这里再给一个更客观的验证方式用对比度检查工具或脚本检测前景和背景的对比度。日常设计里正文文字与背景的对比度建议不低于 4.5:1大号文字和图形元素可以略低但不应低于 3:1。这样可以顺便把无障碍问题也解决掉了。8. 最佳实践与使用建议8.1 先做小范围验证不要一上来就在整套 VI 系统里强推单色。先选一个真实页面或一张海报搭好色板后用 30 分钟快速出两版方案一版按单色一版按多色放在一起对比。大多数情况下单色版会显得更“整”但你需要自己确认这是不是当前项目最需要的气质。8.2 把色板变成工程资产单色设计系统能不能真正落地关键看“取色是否可约束”。建议把色板同步到 Figma Variables、CSS Variables 或 Token 文件里并在代码评审时规定界面里不允许出现色板之外的色值。异常状态比如报错、成功、警告可以在单色体系之外单独建立语义色标记但核心视觉仍然用主色体系。8.3 每次设计结束后做一次“去色检查”把设计稿截图后去色看灰度模式下的层次是否正确。单色设计的一个隐藏优势是即使去色画面依然应该有清晰的明暗关系。如果去色后看不出重点说明明度层级还有问题。8.4 合规提醒如果单色设计中用到第三方字体、插画素材、人物肖像或品牌参考请务必确认授权范围。个人学习、教程演示和商业发布对素材授权的要求不同建议保留授权凭证和来源记录。尽量避免使用来源不明的图片或名人生成素材做商业宣传这是基本的合规意识。9. 学完之后怎么继续用把这套方法落到下一个项目里最容易的切入点不是“整套产品重构”而是先做一个小组件比如重置一个按钮、一张卡片或者一个导航栏。把选色、定阶梯、建变量的流程走一遍你就能感受到单色设计和“凭感觉选色”的区别。接下来可以逐步扩展到表单页、数据看板、品牌提案直到一个完整设计系统。最容易踩的坑其实不是“不会选色相”而是“选完色相后不舍得做明度分级”。记着这一条单色设计的核心不是色相本身而是同一色相下的层次空间。只要明度阶梯够宽、饱和度控制得当、中性色配合到位单色能做出比想象中更丰富的视觉表达。后续可以继续研究的方向包括把单色体系扩展到深色模式、把设计令牌接入前端组件库、用脚本自动校验对比度和色板规范性。Mono-color Design Skill 是一套起点低但纵深不小的能力值得拿来做一次完整的落地练习。