Chapter 07
自测与判别
全书把"专业 UI"拆成了一套可推导的规则:层级是目的(01),色彩 / 文字 / 空间是材料(02–04),工程把决策沉淀成 token 与动效(05),系统与美学负责规模与时效(06)。这一章不教新东西,只检验它是否真的进了你的判断。
三层梯度,共约 18 题。概念层查回忆,原理层查机制,应用判别层把多章的知识混在一个真实场景里,逼你做选择——这一层才是检验"会不会用"的地方。所有答案集中在文末一个折叠块里:做完一题再对,别边看边抄,那等于把这页又读了一遍。
一概念层 · 对应 01–05,查回忆
- 视觉权重(visual weight)由哪几个属性合成?它和"绝对大小"是一回事吗?01
- OKLCH 的三个分量分别是什么?为什么相同 L、不同色相的颜色看起来一样亮?02
- 正文文字的对比度下限是多少?大字 / UI 组件呢?02
- 模块化字阶用的是几何数列还是等差数列?基准 16、比例 1.25 的前三档是?03
- 正文行长的理想区间是多少字符?中文大致多少字?03
- 间距阶常以几为基数?写出从 4 到 64 的典型档位。04
- design tokens 三层分别叫什么、各自职责是什么?05
二原理层 · 查机制(为什么)
- 为什么"用间距分组比用边框分组更便宜"?说出背后的知觉机制。01
- HSL 的 L 为什么会"骗人"?它的定义是什么,导致了什么后果?02
- 行长 45–75 字符的上限,根因是什么阅读机制?03
- 为什么行高要随行长增大、随字号减小?各说一句牵制关系。03
- Flexbox 分配空间的三步是什么?
flex:1 1 0与flex:0 1 auto的差别?04 - 为什么
transform/opacity动画比width/left顺滑?用渲染管线四阶段解释。05 - 容器查询解决了媒体查询的什么固有局限?04
三应用判别层 · 跨章场景,逼你做选择(transfer)
每题都没有"标准 API 答案",要的是判断 + 依据。先写出你会怎么做、为什么,再看参考。
- 密集仪表盘显乱。一个后台仪表盘信息很多,用户反馈"看着乱、抓不住重点"。按什么顺序诊断?至少动用三章的工具。01 · 04 · 02
- "高级但看不清"的副标题。设计稿里副标题是很浅的灰(对比约 2.5:1),你觉得好看,但读不太清。你怎么取舍?有没有"既保持轻、又不牺牲可读"的办法?02 · 01
- 响应式卡片墙。一排卡片要随容器变窄而减少列数、自动换行。你用 Grid 还是 Flex?写出关键的一行 CSS,并说明为什么不选另一个。04
- 展开菜单卡顿。一个侧边菜单点击后从屏幕外滑入,你发现动画掉帧。最常见的根因是动了哪个属性?改成什么?05
- "一眼像 AI 做的"。同事说你的落地页"像模板"。它现在是:全居中、紫渐变 hero、emoji 特性、三张大圆角大阴影卡片。给出 4 个具体改造动作,各标依据哪一章。06 · 01 · 02
- 两个按钮都很显眼。一个表单底部有"保存"和"取消",现在两个都是实心强调色,用户不知道先按哪个。怎么改?背后是哪几条原则?01 · 02 · 05
合上教程,在纸上或 Excalidraw 里凭记忆画出这本书的概念地图(对应起点页的图 0.1):把"视觉层级"放在顶端,下面是五个原则、三种材料(色彩 / 文字 / 空间)、工程落地、设计系统与现代美学,用箭头标出谁服务于谁。画完回到 起点页对照——你画的图里,箭头方向对吗?三种材料是不是被画成了平级?有没有漏掉哪一层?
进阶版:挑一个你最近做过的真实界面,只用一支笔在截图上标出——它的视觉层级第一眼落在哪、哪两个本该成组的元素被空间分开了、有几条对齐轴。这一步把"读懂教程"变成"改得动自己的作品"。
✓参考答案
三层答案(三层都做完再展开)
概念层
- 由大小 × 明度对比 × 颜色饱和 × 周围留白合成,不是单一的绝对大小;降低邻居的权重也能让目标"跳出来"。
- L 明度、C 彩度、H 色相角。因为 OKLCH 感知均匀(基于 Oklab),L 直接对应人眼感知亮度,所以固定 L、变 H 得到一组等亮度颜色。
- 正文 4.5:1;大字(≥24px 或 ≥18.66px 加粗)与 UI 组件 / 图形 3:1。
- 几何数列(size = base × ration)。16 × 1.25:16、20、25(取整)。
- 45–75 字符,约 66 最佳;中文约 30–40 字。
- 基数 8(向下细分 4):4 / 8 / 12 / 16 / 24 / 32 / 48 / 64。
- primitive(原料 / 具体值)→ semantic(意图,如 color-primary)→ component(局部覆盖,如 button-bg)。
原理层
- 视觉系统在聚焦扫描前就靠空间距离(格式塔接近律)推断分组,比读边框更快更底层;边框是额外视觉元素、消耗对比预算,调间距不占任何笔墨。
- HSL 的 L 是 RGB 的数学中点 (max+min)/2,与人眼感知亮度无关;人眼对黄绿敏感、对蓝迟钝,所以同 L 不同色相明暗参差,手调成组色总"哪里不对"。
- 阅读是"扫视 + 回扫":行尾回扫到下一行行首是盲跳,行越长水平跨度越大、越易跳错行;太短则回扫过频、断词多。
- ① 行长越宽,回扫越难锁定下一行,需更大行高区分(行长↑→行高↑);② 字号越大,行内空白绝对量已足,比例要小,否则发散(字号↑→行高比例↓)。
- ① 按 flex-basis 排;② 算剩余空间(容器−Σbasis);③ 有余按 grow 瓜分、不足按 shrink×basis 吸收。
1 1 0basis 归零→按 grow 等分(等宽);0 1 auto不扩张、按内容、不足才缩。 - 改 left 从 Layout 全跑(重排、波及邻居)掉帧;改 transform/opacity 跳过 Layout、Paint,只在合成线程走 Composite(GPU),主线程不阻塞,稳定 60fps。
- 媒体查询只看视口宽度,无法让组件按自己实际所在的容器调整;容器查询让同一组件在宽 / 窄容器里各自适配,真正可复用。
应用判别层
- 按 01 章诊断流程走:① 最重要的元素(关键指标)有没有靠对比 / 大小跳出来?② 相关数据有没有靠接近性成组?③ 边缘对齐到尽量少的轴了吗?④ 同类卡片样式一致吗?⑤ 哪里挤——用 04 章间距阶把组间拉开、组内收紧;文字用 02 章灰阶分三层(标题 / 数值 / 标签),让数值最重。先层级、再分组、再留白,通常比"删数据"更解决问题。
- 对比 2.5:1 低于正文 4.5:1 的硬线,必须改。两条路:① 既然想要"轻",用更小的字号 + 字重来表达次要,而把明度提到至少 4.5:1(层级靠字号/字重维度,不全压在颜色上,呼应 03);② 若它是大字(≥24px),门槛降到 3:1,可保留更浅。核心:可读性是硬约束,"高级感"不能买它的单。
- Grid。一行:
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))——自动按容器宽决定列数、免 media query。不用 Flex wrap 是因为 Flex 换行后每行末尾的项难以对齐成整齐网格、且最后一行的项宽度会和上面不一致;二维对齐是 Grid 的主场。 - 多半在动
left或margin-left(从 Layout 重排,掉帧)。改成transform: translateX()(只触发 Composite,GPU),配 200ms ease-out;并在prefers-reduced-motion下关闭。 - 任选 4:① 全居中改左对齐到一条轴(01 对齐);② 去掉紫渐变、回归中性 + 一个有观点的 OKLCH 强调色(02 + 60-30-10);③ 大圆角大阴影改 1px 边框 + 极淡阴影、统一一套半径(06 + 05);④ 文案从空泛改具体、用一个字体家族 + 真实字重对比(03);⑤ 提高信息密度而非大留白堆一句标题(06)。
- 给"保存"和"取消"做出对比差:保存=主操作,实心强调色;取消=次操作,描边灰或纯文字(ghost)。背后:01 章"同等对比=选择困难"、02 章强调色稀缺、05 章 variant(primary/secondary)的制度化。让显眼的只有一个。
给一个真实界面做一次"全链路体检"
挑一个你正在做或常用的界面,按全书顺序过一遍体检表,每条写一句结论:① 层级——第一眼落点对吗?(01)② 色彩——文字三层明度够分吗?对比达标吗?(02)③ 排版——行长 / 行高 / 字阶有没有失控?(03)④ 空间——间距是不是只来自一条阶?(04)⑤ 落地——颜色 / 间距写死了还是 token?动效碰了 layout 属性吗?(05)⑥ 系统 / 美学——一致吗?有没有"通用脸"特征?(06)走完一遍,你就有了一张可执行的改进清单——这正是这本书想留给你的能力。