审美工程 · 5 / 12 克制：给颜色和字体做预算 好看的界面大多不是加出来的，是省出来的。这一节给你一套预算表：一个主色加中性色、两种字重、一套圆角。超预算的东西再好看也砍。 主色预算 字重预算 圆角统一 一句话速览 一个主色、两种字重、一套圆角。往界面里加颜色看它变成年会海报，再一键做减法，感受高级感回来的瞬间 先给颜色和字体定个预算 预算制的规则很短： 一个主色 ，其余交给黑白灰的中性色； 两种字重 ，正文一档强调一档； 一套圆角 ，定一个数处处沿用。想加第二种彩色时，先问自己一句「它值不值得动预算」，多数时候答案是省下来。 「 每多加一种颜色，已有的每种颜色都在贬值。 」颜色的价值在于稀缺：只有一处玫红时，它就是全场焦点；有六种彩色时，谁都当不了焦点。
亲手把一张页面做丑 下面是一张克制版的活动页。连点五次「再加一种颜色」，看它一步步劣化；点满五次后，再一键做减法。
加色器 已加 0 笔
member.example.com/spring
限时 3 天 春季会员特惠 年度会员立减 40 元，老用户续费同价。 ¥99 / 年 立即开通 支持 7 天无理由退款
再加一种颜色
现在是克制版：主色只有按钮上的一块玫红，其余交给黑白灰。它凭什么好看？凭别的都在让路。
反着来：删到破坏为止 加色器演的是怎么变丑，减法游戏演怎么救回来。《About Face 4》给过一个可执行的办法： 删减东西，直到删掉某件破坏了设计为止，再把最后删掉的那件加回来 。下面这张促销卡堆了六件装饰，逐件点掉试试，哪件删了页面就破，你自然会知道。
减法游戏 已删 0 / 6
点下方的标签删掉对应装饰。六件都是装饰吗？未必，有两件是筋骨，删了就破。
sale.example.com
年终大促最后一天，错过再等一年！
HOT NEW
云相册专业版 原图无损备份，家人共享相册，跨设备自动同步。 领 ¥20 券 · 满 99 可用 · 叠加立减
立即订阅 拉好友砍一刀
跑马灯公告 HOT 贴纸 NEW 贴纸 优惠券条 第二个按钮 渐变底色 标题 主按钮
从你觉得最多余的那件下手。
差不多一样？那就做成一模一样 克制还有一条更细的纪律，管的是「差不多」。《About Face 4》把话说得很重： 不必要的差异是一致设计的大敌 。两个间距几乎一样，就调成同一个数；两种颜色几乎一样，就用同一个。每处差异的存在都要有理由，找不出理由，就消除它。下面这张卡藏着三处「差不多」，切换看收编前后。
差异收编器 点击切换
先在「随手写」状态下找找别扭的地方，再切到「收编后」对答案。
member.example.com/benefits
会员权益 工单优先响应，两小时内答复 新功能抢先体验，每月一批
专属客服 优先体验
随手写 收编后
三处「差不多」： 行距一处 12 一处 15，两枚标签的粉一深一浅，字号 13 和 13.5 混着用。单独看每处都说得过去，叠在一起就是股说不出的松散。
间距 14 和 16 同框，怎么办
同一张卡片里，两个平级段落的间距一处 14 一处 16 单选
量了设计稿，也没找出这俩间距为什么要不同。怎么处理？
A 保留，14 和 16 差得不多，读者看不出来 B 统一成同一个数 C 拉开成 8 和 24，让差异变明显 D 各加一个浅色边框，把段落框起来
颜色的音量键：饱和度 颜色预算管的是「几种」，饱和度管的是「多响」。《About Face 4》提醒过：高饱和的颜色个个都在喊，凑在一起就是 嘉年华效应 ，用户会被吵得不堪重负。同样三个标签，把饱和度当音量键推推看。
饱和度调音台 拖动滑块
tasks.example.com
本周任务 按优先级排好了，先做红的。
紧急修复 需求评审 周报整理
饱和度
35%
35% 上下是工作界面的舒适区： 分得清轻重，又不吵。
预算面板：超没超支一眼看穿 这回把三笔预算做成开关，任意组合，右下角的徽标实时告诉你超没超支。
预算面板 点击切换
workspace.example.com
团队协作空间 把文档、任务和讨论放进同一个工作区。
新功能 团队版
免费试用 查看定价
10 人以下团队免费
预算内
颜色数 1 主色 3 色 6 色 字重数 2 档 4 档 圆角 统一 12 随机
廉价感从哪来
界面显得廉价，最常见的原因是哪个 单选
A 字体不够贵 B 颜色太多且互相打架 C 没用最新的设计趋势 D 图标不够精致
本节要点
✓ 预算制三条： 一个主色加中性色、两种字重、一套圆角。想突破预算，先问值不值。 ✓ 每多一种颜色，已有的颜色都在贬值。 做减法比做加法更常出效果，删颜色是性价比最高的一步。 ✓ 觉得页面廉价，按顺序查： 先数彩色有几种，再数字重有几档，最后看圆角统不统一。 ✓ 两条可执行的纪律： 差不多一样就做成一模一样；拿不准要不要留，就删到破坏为止，再把最后删掉的那件加回来。
内容来源： 小山学堂「审美工程」专题原创；「不必要的差异是大敌」「删减到破坏为止」等设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。