第2章 设计先于编码

第 2 章 · 设计先于编码

章节摘要：本章的主线只有一句话——让猜数字 App 在任何一部手机上都显得"体面"。围绕这个目标，我们补上编码之前该懂的三课：Material Design 给出的设计语言、dp/sp 单位背后的屏幕适配原理、颜色字体图标的资源化与可访问性。读完你能解释"为什么不能拿 px 写尺寸"，并给 App 定一套自己的配色与字号。

一条主线

1.3 节结束时我们的 App 能玩了，但把它拖到一台小屏手机上：标题顶到边、按钮被切成两半、灰色提示文字老人看不清。本章沿着"先定设计语言 → 再解决不同屏幕的换算 → 最后把外观沉淀成资源"这条线走，这也是真实项目里界面从原型到体面的标准顺序。

沿途站点

• 2.1 Material Design 的四条设计原则：谷歌的设计语言不是教条，本章提炼"隐喻、动效、层次、适配"四条最影响开发的规则，看懂它们你就明白 Android 默认控件为什么长这样。
• 2.2 dp、sp 与屏幕适配：从像素、密度讲到密度无关像素的换算公式，解决"同一尺寸在不同手机上不一样大"的根本问题，是全册最值得吃透的一节。
• 2.3 颜色、字体、图标与可访问性：把外观从 XML 硬编码搬进资源文件，顺带补上对比度、触摸目标尺寸这些"少数用户也该被照顾"的工程意识。

拐点与结论

本章最大的认知转折在 2.2：屏幕上的物理尺寸和像素数不是一回事。 1080px 的宽和高在不同密度的屏幕上对应的物理长度完全不同，dp 才是把"物理感觉"带进 XML 的单位。理解了 dpi 换算，各种 px/dp/sp 的疑惑会一次性消解。

三条知识线的关系如下图，设计原则决定"长什么样"，单位决定"多大"，资源化决定"怎么统一管理"：

读完你应该

• 能说出 Material Design 四条原则各自对应的开发实践
• 能手算 48dp 在 480dpi 屏幕上等于多少像素
• 能解释 sp 与 dp 的唯一区别及"字号为什么必须用 sp"
• 能建出 colors、dimens、strings 资源并在布局中引用
• 能按可访问性清单检查触摸目标、对比度与无文本图片的标注

下一章的接力

设计规格定好了，下一章回到控件本身：TextView、EditText、Button 这些"砖块"到底各有哪些必会属性、怎么组合出表单与选择器——第 3 章开始逐块搬砖。

本章知识点清单与自查

可考核的知识点包括：说出 Material 四原则各自的检查动作、解释 dp 与 px 的换算关系及密度桶概念、说明 sp 与 dp 的区别及使用边界、完成 4 的倍数间距节奏表、给一组颜色做语义化命名并通过对比度红线、解释 WCAG 对触摸目标 48dp 的要求。自查方式很朴素：找一份自己以前写的布局，逐条过单位与颜色，能挑出三处以上问题的，本章就算学进去了。设计不是设计师的专利，而是开发者与用户之间的礼貌——这一章教的正是这份礼貌的最小集合。

为什么把设计放在组件之前讲？因为"先会摆控件再补审美"的路径几乎总要返工：没有单位概念写出的固定尺寸、没有令牌意识散落的硬编码颜色，都会在第一次适配与改版时变成债务。本章先立标尺与词汇，后文每一章的产出天然带着设计纪律——这是顺序上的省力，不是仪式上的讲究。

最后给一个章节定位：本章是全册的"度量衡"，后文每章产出的布局、样式、图标都要在本章立的标尺上接受检验——单位用对没有、颜色语义化没有、触摸目标达标没有。带着这三问往下读，第 3 章起的每个控件都多了一层验收视角。