专题篇章 · Taste Engineering:让产出值得留下

克制:给颜色和字体做预算

一个主色、两种字重、一套圆角。往界面里加颜色看它变成年会海报,再一键做减法,感受高级感回来的瞬间

本页解决的问题

先给结论

「克制:给颜色和字体做预算」要解决的关键问题是什么?

一个主色、两种字重、一套圆角。往界面里加颜色看它变成年会海报,再一键做减法,感受高级感回来的瞬间

判断标准

把品味变成产品可重复的行为。 有用的结果不是一句“我觉得更好”。它应该是一条看得见的规则、一个小例子,以及判断体验何时低于标准的方法。

下一步

记录一个前后对比,让别人不用听解释也能看懂质量线。

常见误区

表面更精致了,却没有减少用户的不确定感。

先给颜色和字体定个预算

预算制的规则很短:一个主色,其余交给黑白灰的中性色;两种字重,正文一档强调一档;一套圆角,定一个数处处沿用。想加第二种彩色时,先问自己一句「它值不值得动预算」,多数时候答案是省下来。

每多加一种颜色,已有的每种颜色都在贬值。」颜色的价值在于稀缺:只有一处玫红时,它就是全场焦点;有六种彩色时,谁都当不了焦点。
亲手把一张页面做丑

下面是一张克制版的活动页。连点五次「再加一种颜色」,看它一步步劣化;点满五次后,再一键做减法。

加色器 已加 0 笔
member.example.com/spring
限时 3 天
春季会员特惠
年度会员立减 40 元,老用户续费同价。
¥99 / 年
立即开通
支持 7 天无理由退款
现在是克制版:主色只有按钮上的一块玫红,其余交给黑白灰。它凭什么好看?凭别的都在让路。
反着来:删到破坏为止

加色器演的是怎么变丑,减法游戏演怎么救回来。《About Face 4》给过一个可执行的办法:删减东西,直到删掉某件破坏了设计为止,再把最后删掉的那件加回来。下面这张促销卡堆了六件装饰,逐件点掉试试,哪件删了页面就破,你自然会知道。

减法游戏 已删 0 / 6
点下方的标签删掉对应装饰。六件都是装饰吗?未必,有两件是筋骨,删了就破。
sale.example.com
年终大促最后一天,错过再等一年!
HOT NEW
云相册专业版
原图无损备份,家人共享相册,跨设备自动同步。
领 ¥20 券 · 满 99 可用 · 叠加立减
立即订阅 拉好友砍一刀
从你觉得最多余的那件下手。
差不多一样?那就做成一模一样

克制还有一条更细的纪律,管的是「差不多」。《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 人以下团队免费
预算内
颜色数
字重数
圆角
廉价感从哪来
界面显得廉价,最常见的原因是哪个 单选
A字体不够贵
B颜色太多且互相打架
C没用最新的设计趋势
D图标不够精致
本节要点

预算制三条:一个主色加中性色、两种字重、一套圆角。想突破预算,先问值不值。

每多一种颜色,已有的颜色都在贬值。做减法比做加法更常出效果,删颜色是性价比最高的一步。

觉得页面廉价,按顺序查:先数彩色有几种,再数字重有几档,最后看圆角统不统一。

两条可执行的纪律:差不多一样就做成一模一样;拿不准要不要留,就删到破坏为止,再把最后删掉的那件加回来。

内容来源:newwebplay AI「审美工程」专题原创;「不必要的差异是大敌」「删减到破坏为止」等设计原则整理自《About Face 4:交互设计精髓》第 17 章(Alan Cooper 等)。

从「先给颜色和字体定个预算」把感觉变成判断

「预算制的规则很短: 一个主色 ,其余交给黑白灰的中性色;」指出,AI 降低了做出“能用”成品的门槛,读者真正需要练的是看出哪里不对,并把感觉说成可以执行的要求。

观察用户的下一步,而不是只看表面

「下面是一张克制版的活动页。连点五次「再加一种颜色」,看它一步步劣化;点满五次后,再一键做减法」可以转成几个可观察的问题:用户是否知道现在发生了什么,是否知道下一步做什么,出错或空白时能否恢复,以及信息层级是否让重要内容先被看见。

漂亮不等于容易用

把「两条可执行的纪律: 差不多一样就做成一模一样;拿不准要不要留,就删到破坏为止,再把最后删掉的那件加回来」用在第二个页面或流程上,记录一个具体犹豫点和一个改动后的用户动作;能被观察到的变化,才是体验改善。

从「先给颜色和字体定个预算」走到「亲手把一张页面做丑」

「先给颜色和字体定个预算」先把问题落在「预算制的规则很短: 一个主色 ,其余交给黑白灰的中性色; 两种字重 ,正文一档强调一档; 一套圆角 ,定一个数处处沿用。想加第二种彩色时,先问自己一句「它值不值得动预算」,多数时候答案是省下来」上;到了「亲手把一张页面做丑」,讨论继续推进到「下面是一张克制版的活动页。连点五次「再加一种颜色」,看它一步步劣化;点满五次后,再一键做减法」。两段连起来,重点就不只是记住一个结论,而是看清它成立所依赖的条件。

把这条判断带到下一个场景

评估体验时,把抽象的“好看”或“顺手”换成用户动作:他是否看懂状态、找到了下一步、能从错误中恢复,并且愿意继续使用。

  • 「先给颜色和字体定个预算」:预算制的规则很短: 一个主色 ,其余交给黑白灰的中性色; 两种字重 ,正文一档强调一档; 一套圆角 ,定一个数处处沿用。想加第二种彩色时,先问自己一句「它值不值得动预算」,多数时候答案是省下来
  • 「亲手把一张页面做丑」:下面是一张克制版的活动页。连点五次「再加一种颜色」,看它一步步劣化;点满五次后,再一键做减法
  • 「最后的要点」:觉得页面廉价,按顺序查: 先数彩色有几种,再数字重有几档,最后看圆角统不统一

最后的「最后的要点」把讨论落到「觉得页面廉价,按顺序查: 先数彩色有几种,再数字重有几档,最后看圆角统不统一」。回看这条线索时,最值得保留的是:当输入、规模或风险改变,哪些判断需要重新做一遍。

标记为已学完 阅读进度会自动记录
← 上一篇下一篇 →

继续阅读

同一条线上的下一篇。

文章讨论

读到这里,留下一个判断。

把刚想明白的地方、还没想通的问题,留给下一位一起学习的人。

正在讨论 克制:给颜色和字体做预算 Taste Engineering:让产出值得留下
3条讨论文章讨论 · 与共学社区同步
在共学社区查看
AM
Asha Morgan内容编辑
观点实践记录

我把这篇文章里的一个判断改写成了今天可以验证的小实验。比记住结论更有用的是,知道下一步要观察什么。

文章讨论7 有帮助
LH
Lin Harper独立开发者
观点观点

读完以后我先回头找它成立的条件,而不是直接把方法搬进项目。这个顺序让后面的取舍清楚很多。

文章讨论5 有帮助
KM
Kiki Moore产品运营
问题问题

如果把这个判断放到真实工作里,最先需要补的约束是什么?我想知道从阅读到第一次实践之间,哪一步最值得先做。

文章讨论4 有帮助