网页设计数学：精确布局和动画

在曼宁注册纸质书即可免费获得电子书。

“设计防弹布局的必要条件。”
—Chris Kardell，Centennial Bank

网页设计数学：精确布局和动画解释了良好前端设计背后的数学原理。作者 Paul McFedries 以其引人入胜的写作，清楚地阐明了数学如何在 CSS 和 JavaScript 中仔细应用，解决日常设计问题，例如分配空间、选择可访问的颜色、定位元素以及使动画感觉自然。当您了解颜色、几何和运动背后的计算时，您可以更精确地进行设计，更自信地调试行为，并创建既有吸引力又实用的界面。

您将从基础知识开始。前面的章节介绍了您所需的最少数学知识，然后立即将其连接到前端工具。从这里开始，本书进入了真实的布局系统，展示了 CSS 单元如何计算、继承如何影响大小、盒模型如何更改公式以及 Grid 和 Flexbox 如何分配空间。

中间的章节重点介绍定义现代网页设计的响应式和视觉决策。您将使用基于百分比和基于视口的布局、媒体查询逻辑、液体布局和自定义clamp()公式。您还将学习颜色的数学知识，包括颜色转换、和谐调色板、WCAG 对比度、Alpha 合成和混合模式。版式也受到同样的实际处理，包括字体大小、行高、行长、流体类型和模块化比例的公式。

后面的章节将讨论交互、运动和更丰富的 UI 效果的数学知识。您将使用三角函数进行圆形菜单、微调器、波浪路径和方向计算，以及矢量和几何图形来对齐组件、创建悬停和视差效果以及约束拖动。然后，本书将这一基础扩展到贝塞尔曲线、CSS 缓动、手势数学和基于滚动的动画。

网页设计数学是一本通过数学前端专业人员实际使用的精彩导览。每个概念的出现都是因为它解决了具体的设计或实现问题。 CSS 和 JavaScript 示例使解释接地气，而练习和解决方案则帮助您提高流畅度。您将欣赏本书如何逐层构建持久的心智模型，将基础知识与布局、颜色、排版、动画、交互和画布工作按顺序连接起来，作为实用参考。

内容

• CSS 和 JavaScript 数学基础
• 网格、Flexbox、响应式布局和流体大小调整
• 颜色、可访问性、排版和混合
• 几何、三角学、交互和动画数学

关于读者

适合了解 CSS 和 JavaScript 的开发人员、设计师和 UX/UI 专业人士。无需高级数学知识。

关于作者

Paul McFedries 已担任专业技术作家 30 多年。他是《Manning’s Web Design Playground, Second Edition》和《Build a Website with ChatGPT》的作者。他的 100 多本书在全球销量超过 400 万册。

目录

1 Web 开发数学基础知识
2 JavaScript 数学基础知识
3 CSS 数学基础知识
4 CSS 网格数学
5 Flexbox 数学
6 响应式设计的数学
7 颜色数学
8 文本和版式数学
9 面向 Web 开发人员的三角学
10 向量和UI 设计中的几何
11 使用贝塞尔曲线实现平滑动画
12 基于物理的动画
13 交互性和基于手势的 UI 数学
14 基于画布的数学和绘图