Part 04

五条
永恒原则

THE CONSTITUTION

这五条原则是设计系统的「宪法」。无论未来采用什么视觉风格,它们都不可违背。

一条有效的原则必须满足三个标准:

01. 有立场

它必须排除某些做法,而不是"什么都好"

02. 可判定

面对具体设计稿,能明确判断是否符合

03. 有张力

它在两个都有道理的方向之间选了边

01

内容驱动形式

所有视觉决策都服务于信息传达。装饰元素必须能用功能来证明自己的存在——如果一个元素移除后信息传达不受影响,它就不应该存在。

符合违背
用色块区分不同信息层级
用色块"让页面不那么单调"
图标辅助用户理解功能
图标纯粹充当装饰
动效帮助用户理解状态变化
动效只是为了"酷"

判定方法:遮住这个元素,信息还能完整传达吗?如果能——删掉它。

02

数学般的秩序

设计不应该是随机的。尺寸、间距、字号、比例,都应该建立在可推导的数学关系上。

"目测差不多" 不是 对齐。

"感觉还行" 不是 间距。

"看着舒服" 不是 字号。

数学关系在用户的潜意识中建立信任感。你说不出来为什么某个页面看着"专业"——往往是因为它的所有数值都落在网格上。

判定方法:页面上的任何一个数值,能否用基数的整数倍来解释?如果不能——它需要被修正。

03

一致性高于创意

在同一产品内,同一语义的元素永远保持一致的视觉表达和交互行为。创意的空间在于"系统允许的范围内"——先遵守规则,再在规则之内寻找表达。

一致性不是追求"到处长得一样"。

一致性是: 同一语义 → 同一表达。不同语义 → 不同表达。

一致性维度

视觉一致
同类元素在任何页面的视觉表达相同
交互一致
同类操作的交互模式相同
语言一致
同一操作的文案措辞相同
结构一致
同类页面的信息架构相同

一致性的三个敌人

01

"这次特殊"综合征

每一个例外都以"特殊情况"出现。三个月后回头看,全是"特殊情况",没有规则。

02

渐变漂移

不是一次大改,是每次"微调一点"。1px 的偏差不伤大雅,50 次 1px 就是 50px。

03

隐性分叉

每个人心里都有一个"差不多"的标准,但这些标准互不相同。

判定方法:把两个同类页面并排放——它们像同一个产品吗?

04

可访问性是底线,不是额外工作

WCAG 2.1 AA 级不是"追求无障碍的加分项",而是"让正常视力的用户在阳光下也能看清"的最低标准。

Aa正文文字对比度 ≥ 4.5:1
Aa大文字对比度 ≥ 3:1
可交互元素对比度 ≥ 3:1,且可通过键盘操作

这些不是在设计完成后"检查一下"的事情,而是在设计开始时就必须内置的约束。

判定方法:用对比度检测工具扫一遍。不达标的,不上线。

05

约束即自由

这是最反直觉的一条,也是最重要的一条。

限制选项不会扼杀创意——它会催生创意。当你只有 3 种字号、5 种间距、1 个强调色可用时,你被迫在这些约束之内想出解决方案。而这些解决方案往往比"什么都能用"时想出来的更精炼、更优雅。

设计系统提供的不是牢笼,
而是边界清晰的游乐场。

判定方法:你是否在规则之内找到了解决方案?如果必须打破规则才能解决——先质疑需求,再质疑规则。

Design System Foundations
4 / 09