少而精的界面设计资料：官方形态、阅读入口与核心内容
AI 参与说明（Agent：Codex）：本文由 Codex 根据作者官网整理资料形态、公开阅读入口与内容提要，并进行中文编辑。核验日期为 2026-10-22；未获取付费正文，不将官网目录核验表述为全书或课程实测。执行入口为 Codex Desktop；模型完整标识与 reasoning effort 未取得任务级运行记录。
这四份资料分别补充界面设计、文字排版、CSS 实现与交互细节。Refactoring UI 以付费 PDF 书籍为主；Practical Typography 是可直接阅读的在线书；Josh W. Comeau 提供免费文章与付费在线课程；Rauno Freiberg 的 Invisible Details of Interaction Design 是免费网页长文。
资料形态一览
| 资料与官方入口 | 形态 | 免费与付费范围 | 主要解决的问题 |
|---|---|---|---|
| Refactoring UI | PDF 电子书，按套餐附视频与设计参考资源 | 完整书付费；官网可看目录，并有两章免费样章领取入口 | 界面怎样安排层级、间距、颜色与视觉重点 |
| Butterick’s Practical Typography | 第 2 版在线书 | 正文可直接阅读，作者鼓励读者付费支持；不提供官方 PDF 或 EPUB | 如何让文字与页面更容易阅读 |
| Josh W. Comeau 的 CSS 文章 / CSS for JavaScript Developers | 免费网页文章 / 付费交互课程 | 文章免费；完整课程付费，主要在网页中学习 | 为什么 CSS 会产生眼前的布局、层叠和视觉效果 |
| Invisible Details of Interaction Design | 免费网页长文，配有动态与交互示例 | 公开阅读全文 | 为什么一些细小的交互决定会影响操作手感 |
Refactoring UI：面向工程师的界面设计书
Refactoring UI 官网明确列出 PDF 格式，当前书籍为 218 页、50 个短章。它由 Adam Wathan 与 Steve Schoger 创作，官网提供完整目录；顶部的 Get two free chapters 是样章入口，完整正文需要购买。
核心内容可以沿着一张页面的改进过程理解：先从具体功能开始，再建立视觉层级，调整间距和尺寸，处理排版、颜色、深度、图片，最后补齐细节。它强调可直接应用的设计手法，例如用留白、背景差异或阴影帮助区分内容，减少过多边框带来的杂乱。
如果问题是“功能写好了，但页面看起来散乱、重点不突出”，这本书与问题最贴近。它的组件图库用于设计参考，官方 FAQ 明确说明不附 CSS 实现，不能把资源包当作可安装的组件库。上述内容依据官网介绍与目录整理。
Practical Typography：先改善正文阅读
Butterick’s Practical Typography可以按章节直接在线阅读，内容覆盖文字与标点、字体选择、文字格式、页面布局和文档示例。作者依靠读者付款与字体购买支持这本书；付款说明与为何没有 PDF都说明，付费支持不会换来 PDF 或电子书下载。
建议保留两个直达入口：
- Typography in ten minutes：从正文入手，优先检查字号、行距、行长与字体。这几项决定了大部分阅读体验。
- Summary of key rules：把关键规则压缩成清单，适合修改文章页、说明文档或表单时逐项对照。
继续深入时，再按问题查标题层级、字重与斜体、段落间距、表格和字体搭配。书中的例子与许多数值建议围绕西文排版，应用到中文或中英混排时，应结合实际字体与内容检查，不能直接当作中文排版规范。
Josh W. Comeau：用交互文章理解 CSS
CSS 文章目录是免费阅读入口；CSS for JavaScript Developers则是包含图文、视频、练习与项目的付费在线课程。官方课程介绍主要展示网页学习形式，本次未发现官方 PDF 教材入口。
CSS for JavaScript Developers is primarily about implementing existing designs with CSS. 这一定位来自官方课程 FAQ。
下面几篇文章会用到这些术语：
| 英文术语 | 中文名称 | 简要解释 |
|---|---|---|
| Layout algorithm | 布局算法 | 浏览器根据布局模式决定元素尺寸与位置的规则 |
| Stacking context | 层叠上下文 | 将一组元素的前后层级放在同一范围内比较的机制 |
| Focus ring | 焦点圈 | 标示当前获得焦点的控件，帮助键盘用户确认操作位置 |
按问题选择五篇免费文章
| 文章 | 核心内容 | 适合带着什么问题读 |
|---|---|---|
| Understanding Layout Algorithms | 将 CSS 理解为多种 Layout algorithm 的组合，解释属性为什么随布局环境改变行为 | 同一段样式为什么换个容器就失效？ |
| What The Heck, z-index?? | 用分组方式解释 Stacking context 与元素的前后关系 | 为什么不断增大层级数值，元素仍被挡住？ |
| Designing Beautiful Shadows in CSS | 用一致光源、多层阴影与协调的阴影颜色表达深度 | 为什么卡片阴影显得脏、厚重或方向不统一？ |
| An Interactive Guide to Flexbox | 通过交互解释轴向、对齐、增长、收缩、最小尺寸与换行 | 为什么元素被压缩、溢出或意外换行？ |
| Building a Magical 3D Button | 逐步构建按钮的按压、悬停、阴影、焦点提示与触摸细节 | 怎样让按钮既有按压反馈，也保留键盘操作提示？ |
如果关注的是 Focus ring，直接看最后一篇的 Focus outlines 小节。阴影文章主要解释视觉深度，焦点提示还承担操作反馈的职责。打开按钮文章后，可从文内目录跳到相应小节。
Rauno Freiberg：从具体交互观察操作手感
Invisible Details of Interaction Design发表于 2023 年 7 月，是一篇在线文章。作者明确把它定位为对日常交互细节的观察；它没有试图提供一套完整教程或通用规范。
值得关注的内容包括：熟悉的手势与可中断动作如何帮助理解操作；为什么高频命令菜单可能适合直接出现；手指遮挡内容时如何保持反馈可见；以及滚动、点击目标与上下文如何影响操作。文章配有动态示例，适合边看边比较这些差异。
阅读时可以追问：界面是否及时回应了输入，动作能否中断，重复操作是否让人等待。这是根据文章案例整理的观察方法；具体设计仍要结合使用频率和输入方式判断。
如何保持“少而精”
先读 Practical Typography 的十分钟入门，再读 Josh 的 Layout algorithm 与 Stacking context 两篇，最后打开 Rauno 的文章观察交互示例。这条免费路线分别覆盖文字、实现机制和操作反馈。
需要系统补充视觉设计方法时，再从 Refactoring UI 的官网目录与样章判断是否适合；需要系统补充 CSS 实现能力时，再看 Josh 的课程目录。练习时可以始终用同一张页面：检查正文阅读、视觉层级、布局行为和操作反馈，比不断增加收藏更容易发现自己缺哪一块。