Frontend UI Design · 深度版

前端 UI 设计：写给工程师的一套可推导系统

这份教程的立场:界面的"专业感"不是审美天赋,而是少数几条可推导的规则。它把"凭感觉调样式"换成"从尺度里做选择"。

基于 CSS 现代特性(2023–2025 baseline)· Tailwind v4 · WCAG 2.2 / 3(APCA 草案) 篇幅 7 章 · 约半天 代码 HTML/CSS 片段,浏览器可直接查看(未逐一本机渲染验证)

A适合谁

这份教程为一类具体的人写:能写出功能正确的前端,但界面总"差一口气"、说不清差在哪的工程师。要顺畅读下去,需要:

  • 能手写 HTML 与 CSS——理解盒模型、display、flex、选择器,不依赖组件库也能搭出页面。
  • 用过至少一个组件体系(Element/Antd/MUI/Bootstrap/Tailwind 任一),知道"调它的样式"是什么体验。
  • 愿意接受"设计有客观标准"这个前提——本教程不教你培养玄学品味,教你用可度量的规则做判断。

B不适合谁

  • 完全没碰过 CSS:先过一遍 web.dev Learn CSS,回来读会顺很多。
  • 找平面/品牌设计教程:这里聚焦屏幕界面(产品 UI),不覆盖 logo、印刷、插画。平面方向看《写给大家看的设计书》。
  • 要的是组件库 API 速查:那是文档的活。本教程教的是文档不讲的"为什么这样才好看"。
  • 资深产品设计师:这里的视觉原则对你是常识,可直接跳到 06 章的工程化与现代美学部分。

C读完之后你能做到什么

核心收获,一句话:你将能对着任何一个"说不出哪里不对、但就是显得业余"的界面,逐条指出问题出在视觉层级、间距、还是色彩明度,并用一套尺度把它修到专业——而不是无止境地微调像素。这正是文档教不了、要靠经验攒的判断力。

具体地,你能:

  • 诊断一个界面:说出它的视觉层级断在哪、为什么显得乱、哪两个元素的关系被空间表达错了。
  • 构建三套基础尺度:一条间距阶、一条模块化字阶、一组感知均匀(OKLCH)的色阶——而不是逐个挑数值。
  • 判别:在 Flexbox 与 Grid、原子化与语义化 CSS、WCAG 与 APCA 对比标准之间,按场景选择并讲清理由。
  • 落地:把设计决策沉淀成三层 design tokens,写出只动 transform/opacity、不触发重排的流畅动效。
  • 避坑:认出并改掉"AI 通用脸"(全居中 + 紫色渐变 + 到处 shadow-lg + 圆角拉满),让界面显得是"有人决定过"的。

一句话本质

界面的"专业感",是视觉层级(visual hierarchy)清晰的副产物;而清晰的层级,来自把无限的选择收敛成几套有限的尺度——间距阶、字阶、色阶——再用对比、对齐、留白去引导视线。所以 UI 设计是可推导的工程,不是天赋。

现状速览 · 截至 2026-06

稳定几十年的核心:视觉层级、对比、对齐、间距节奏、排版度量(行长 / 行高 / 字阶)——这些是人眼和阅读机制决定的,不会过时。

正在快速演进的工程层:OKLCH 色彩与 color-mix() 自 2023 起已是各大浏览器 baseline;容器查询(container queries)、:has()、subgrid 在 2023–2024 落地;Tailwind v4(2025,改为 CSS-first 的 @theme 配置)与 shadcn/ui 的"复制源码而非装依赖"模型重塑了实现方式;无障碍对比正从 WCAG 2.2 向 WCAG 3 的 APCA 算法过渡(截至 2026 初 APCA 仍是草案,WCAG 2.2 仍是落地标准)。

已被取代、别再学的旧做法:用 HSL 手调色阶、纯固定断点(@media 一把梭)的响应式、重投影(heavy drop-shadow)拟物风。

先读这个 · 关于"流畅感"的警告

这份教程会尽量好读。但"读起来顺"不等于"学会了"——设计尤其容易骗人,因为每张配图你都"看得懂"。当你出现下面三种念头时,停一下:

· "我读得很顺"——你认得这些词(对比、留白),不代表你能在自己的界面里指出它们缺在哪。
· "这些原则我都懂"——懂原则和能用尺子量出"这里间距不对"是两件事。
· "我没卡壳"——没卡壳通常意味着你在看图、没在动手判断。每章的自测和"亲手画一张图"才是真正在练的地方,别跳过。

D概念地图

视觉层级 · 一切设计的目的 先看哪里 · 谁和谁是一组 对比 · 对齐 · 接近 · 重复 · 留白 引导视线的五个杠杆（CRAP + 留白） 色彩 Color · OKLCH 文字 Typography 空间 Space · Layout 工程落地 design tokens · CSS · 动效 设计系统 规模化的一致 现代美学 避免"AI 通用脸" = 引导视线 被原则排布 沉淀为代码 / tokens 规模化 · 保持现代
图 0.1整张图从上往下是"目的 → 手段 → 材料 → 实现"的依赖链。注意三件事:① 箭头一律指向上方的"目的"——所有功夫最终都为视觉层级服务;② 色彩 / 文字 / 空间三种材料是平级的,没有先后,缺一不可;③ 越往下越接近代码,越往上越接近设计判断。从下往上读,正好是 01→06 章的学习顺序。

E学习路径建议

按你的目的选一条:

  • 系统补认知(推荐,你选的路径):从 01 顺着读到 06,每章做完自测再走。半天读完,层级 → 材料 → 落地 → 系统的链条会一次性接上。
  • 只想"会看会诊断":01(原则)→ 02(色彩)→ 03(排版)→ 04(布局)四章,再做 07 自测的判别题。跳过 05/06 的工程化。
  • 已有设计直觉、缺工程化:略读 01–04,重点啃 05(tokens / 动效 / 渲染管线)+ 06(设计系统 / 现代美学)。
  • 救火:手头界面就是丑,想立刻改:直接看 01 的"视觉层级"+ 02 的"中性灰阶"+ 04 的"间距阶",这三处改完通常能解决一半问题。

F目录

G学完之后

这份教程把"地基"打牢。继续往下,这几个方向各为你的 schema 添一块:

  • 交互与动效设计——在 05 章的动效基础上,系统学习微交互、状态过渡、手势,给"专业"再加"灵动"。
  • 无障碍(a11y)深水区——键盘焦点、ARIA、屏幕阅读器;在 02 章的对比之外,补齐可访问性的工程实现。
  • 数据可视化——把层级 / 对比 / 色彩原则迁移到图表,是另一套高价值表达手段。
  • 设计工具(Figma)——读懂设计稿、和设计师对齐 tokens,把本教程的概念接到团队协作上。
  • 品牌与版式——当你想让产品"有个性"而非只是"不丑",往平面 / 品牌设计延伸。