Chapter 06
设计系统与现代美学
05 章把单个组件的 token 与状态做对了。这章把视角拉到规模与时间两个维度:几十上百个组件如何在规模上保持一致(设计系统),以及在当下如何不显土(现代美学,含避免"AI 通用脸")。
本章你将建立的 schema
- 设计系统 = token + 组件 + 模式 + 文档,把 01 章的"一致"从自律变成基础设施
- 现成系统(Material / HIG / Radix / shadcn)各自的定位与选用
- 2025–26 的当代审美:什么稳定、什么正流行、什么已过时(带日期)
- "AI 通用脸"的成因,与让界面显得"有人决定过"的具体动作
到这里,做对一个界面的能力已经齐了。还差两件让作品"专业且现代"的事:在团队和规模下守住一致,以及在审美上跟上当下、躲开那种一眼能看出是"默认值堆出来"的通用长相。
6.1设计系统:把一致变成基础设施
设计系统 = design tokens + 组件库 + 模式(patterns)+ 用法文档的集合,它把 01 章"重复 / 一致"从靠人记,升级成团队可复用、工具可强制的基础设施。
底层机制(比文档深一层):设计系统是一个分层的结构,越往下越基础、越少变,越往上越具体、越多变。tokens(05 章的色 / 字 / 间距)是地基;组件(variant×size×state)建在 token 上;模式是组件的常见组合(一个标准表单、一个空状态、一个数据列表);文档规定"何时用哪个"。它的根本作用是把"一致性"从个人自律(每个人都记得用同一个圆角)变成系统强制(圆角只有 token 里那一个值)——这正是 01 章那条"无意义的不一致 = 无意义的认知打断"在团队规模上的解法。
不必从零自建。四个成熟体系按定位选用:
| 系统 | 定位 | 何时选 |
|---|---|---|
| Material 3 | Google 的全套视觉 + 组件规范 | 要一套现成完整视觉语言、安卓 / 跨端 |
| Apple HIG | 苹果平台的人机界面指南 | 做 iOS / macOS,需贴合系统观感 |
| Radix Primitives | 无样式、可访问的组件原语 | 要自己掌控视觉,但不想重写可达性逻辑 |
| shadcn/ui | 把 Radix + Tailwind 组件源码复制进你的项目 | 要完全拥有并改造代码,而非装一个黑箱依赖 |
shadcn/ui(2023 起爆发)改变了组件库的分发方式:它不是 npm 依赖,而是用命令把组件源码复制到你的仓库,你拥有、可任意改。这与"装一个封装好的库"是相反的哲学——代价是自己维护,收益是没有黑箱、能深度定制。它建立在 Radix(可达性)+ Tailwind(05 章的 token 化原子)之上。
与下一节的关系:系统保证了"一致";但一致的东西同样会整齐地过时。下一步是时间维度——当下的审美长什么样。
6.2现代美学:什么稳定、什么在变、什么过时
视觉原则几十年不变,但"什么显得现代"是会过期的;当代(2025–26)的关键词是克制、柔和深度、大号排版与高密度的干净。
最值钱的一条当代手法:柔和深度
当代界面表达"浮起 / 分层",已经从 heavy drop-shadow(大而深的投影)转向1px 边框 + 极淡阴影。原因:大阴影是"廉价的立体感",而 1px 边框 + 微阴影更克制、更精确,也更贴合 02 章"用明度而非阴影表达层次"的暗色逻辑。
与下一节的关系:知道了当代手法,还要躲开一个更隐蔽的反面——那种"技术上都对,却一眼像 AI 生成"的通用长相。
6.3避免"AI 通用脸"
通用 AI / 模板界面的典型长相:全居中、紫靛渐变 hero、emoji 项目符号、千篇一律的圆角卡片网格、Inter + 大圆角 + 大阴影到处用——它显得通用,因为没有任何一个决定是"为这个产品专门做的"。
工程师(和 AI)默认会选"最安全的值":居中、流行字体、流行圆角、流行阴影。每个单看都没错,叠在一起就成了一张谁都见过、毫无个性的脸。让界面"有意图",不是更花哨,而是做出几个明确的、属于这个产品的选择。
具体反通用动作(可直接执行):
- 把
shadow-lg换成 1px 边框 + 极淡阴影——边框比大阴影更显"意图"(§6.2)。 - 选一个非 Inter 的字体,或至少做出真实的字重对比——字体是产品性格最快的来源(03 章)。
- 收敛到一套半径、一套阴影语言——全用 8px 或全用 12px,不要这儿圆那儿方(01 章重复)。
- 给一个有观点的强调色——别用默认的蓝 / 紫;用 OKLCH 挑一个属于这个产品的色(02 章)。
- 用不对称 / 非全居中打破"PPT 感"——左对齐到一条轴往往比全居中更有秩序也更专业(01 章对齐)。
- 给动效一点统一的个性——一套统一缓动,而不是默认 ease(05 章)。
- 提高信息密度——真实产品比落地页密;敢于在一屏放更多内容,而不是大留白堆一个大标题。
小时级压到分钟级
左边每个元素都"安全"——居中、渐变、emoji、药丸按钮、大阴影——叠起来就是一张通用脸。右边做了几个明确选择:左对齐、克制的单一强调色、1px 边框、具体而非空泛的文案、真实字重对比。后者一眼看上去"是有人做的",而不是"生成的"。
6.4收束:一致靠系统,现代靠"减"
两个维度,两条不同的策略。一致是工程问题——用 token + 组件 + 文档把它固化成基础设施,让不一致无法发生,而不是靠每个人记得对齐。现代则常常靠减而非加:删掉默认的大阴影、删掉多余的渐变、删掉到处乱用的圆角和颜色,收敛到少数几个明确的选择。"AI 通用脸"恰恰是"加"出来的——把所有安全默认叠在一起。
这一章也合上了全书的环:01 的层级与原则 → 02/03/04 的色彩 / 文字 / 空间三种材料 → 05 的工程落地 → 06 的规模与时间。一以贯之的是那句话——专业是把无限的选择收敛成有限的、明确的决定。07 章用一组判别题检验它是否真的长进了你的判断里。
§本章 self-check
先合上教程,把答案写下来再展开对照。
- 设计系统的四层是什么?为什么说它把"一致"从自律变成了基础设施?
- shadcn/ui 的分发方式和传统组件库(npm 依赖)有什么根本不同?各自的代价与收益?
- 当代表达"卡片浮起"为什么从重投影转向"1px 边框 + 极淡阴影"?这和 02 章哪条逻辑一致?
- "AI 通用脸"为什么会产生?列出至少 3 个让界面"有意图"的具体动作。
答案(先做完再展开)
- tokens → 组件 → 模式 → 文档(底到顶)。它用统一的 token 和可复用组件,使"一致"由系统强制(圆角只有一个值、颜色只能取自色阶),而不是靠每个人自觉,从而把一致从个人自律变成团队基础设施。
- shadcn 把组件源码复制进你的仓库,你拥有并可改;传统库是封装好的 npm 依赖。前者代价是自己维护、收益是无黑箱可深改;后者代价是黑箱、收益是省维护。
- 大阴影是"廉价立体感",1px 边框 + 微阴影更克制精确;且与 02 章"暗色用明度而非阴影表达层次"一致——都在弱化对厚重阴影的依赖。
- 因为默认会堆叠"最安全的值"(居中 / 流行字体 / 大圆角 / 大阴影 / 紫渐变),每个都不错但毫无个性。有意图的动作:换非默认字体或做真实字重对比、收敛到一套半径与阴影、选有观点的强调色、用左对齐 / 不对称替代全居中、提高信息密度。
把一张"AI 通用脸"落地页改造成"有意图"的版本
给定一个典型模板首页:居中的紫色渐变 hero + 大标题"让工作更高效" + emoji 三特性 + 药丸 CTA + 下面三张一模一样的圆角大阴影卡片。用本书的工具改造它,逐条说明你改了什么、依据哪一章:① 版式(对齐 / 密度);② 色彩(强调色 / 渐变);③ 排版(字体 / 字重 / 文案具体度);④ 深度语言(阴影 / 边框 / 圆角);⑤ 至少保留一处"克制的个性"让它不再像模板。
提示(卡住再展开)
① 把 hero 从全居中改左对齐到一条轴(01 对齐),提高密度别只放一句大标题(06)。② 去掉紫渐变,选一个有观点的 OKLCH 强调色,大面积回归中性(02 + 60-30-10)。③ 文案从"让工作更高效"换成具体承诺(如"把审批从 3 天压到 3 小时");用一个字体家族 + 真实字重对比,可考虑非 Inter 字体(03)。④ 卡片去掉大圆角大阴影,换 1px 边框 + 极淡阴影,统一到一套半径(06 + 05)。⑤ 个性可以是一个克制但独特的强调色 + 一套统一缓动的微交互(05),而不是更多装饰。