数据先行于设计 是做什么的？
决定数据视图好坏的因素有三，且这三者都在编写标记之前就已确定：视图服务于什么决策、字段中实际有什么数据，以及用户想要哪种布局。跳过其中任何一步，都会产生一个看似完成、实则错误的视图。
何时使用
- 任何针对非自己创建的记录的卡片、面板、表格、仪表盘或详情视图
- 利益相关者说“显示 X”，而 X 是一个列名
- 你即将对某个字段进行汇总、截断、标记徽章、排序、着色或计数
- 你在两种布局同一信息的方式之间做选择
当数据是你自己的固定数据，或者视图只显示一个你已经打印过的值时，跳过此技能。
将要发布、共享或放入报告的图表或表格，在显示非自己创建的记录时，仍从这里开始。数据确定后，实用图表 负责处理其可读性：标题、真实的坐标轴、一个突出显示的数据序列、图片内的数据来源。
步骤 0：命名决策
在接触数据之前写一句话：“看这个的人正在决定 ___ 。” 如果你无法完成这句话，那你就是在构建数据垃圾场，布局问题也不会有答案。
- 每个字段必须通过改变该决策来证明其存在价值。 有趣但与决策无关的内容应放在详情视图中，而不是卡片上。
- 突出程度取决于决策权重，而非查询便利性。 最容易获取的字段并不值得最大的字号。
- 利益相关者说出一个列名，只告诉了你他们想要的数据，而不是决策。询问他们会根据该字段的值做出什么不同的行动。
步骤 1：剖析字段，再设计
在设计之前先查询。对于视图将显示的每个字段：
| 检查项 | 为什么它会改变设计 |
|---|---|
| 非空计数 | 每一行都为 NULL 的字段不需要卡片——它需要一个 bug 报告 |
| 不同值的数量 | 四个值用芯片集；四千个值用搜索框 |
| 长度：最小值 / 平均值 / p95 / 最大值 | 平均值隐藏了溢出——按 p95 大小调整容器，并有意决定尾部如何处理 |
| 在记录中的覆盖率 | 一张仅为 1.6% 的记录触发的卡片，本质上是一个带有罕见例外的空状态 |
| 每个父级的基数 | 每人一条笔记是段落；二十条是带有自身交互控件的列表 |
| 日期存在性 | 无法显示一个不携带日期的字段的过时性 |
| 词汇表 | 带有八种公司内部表述的自由文本需要规范化，而非直接渲染 |
| 存在比较对象 | 裸数字不可读——见下文 |
在提出设计之前，用数字陈述你的发现。
屏幕上的每个数字都需要一个比较对象
52 条笔记 告诉读者什么信息都没有：他们无法判断这是多还是少。52 条笔记（中位数 4） 是一个发现。在显示任何计数、总数或分数之前，找到其比较对象——中位数、目标、上一时期或集合的其余部分——并将它们一起展示。如果不存在比较对象，那就是该数字不应出现在屏幕上的证据。
极端情况是一个从不变化的数字：对每条记录都成立的计数，读起来像是一个发现，实则是噪音。
步骤 2：模拟选项，再构建
对于任何卡片形状的内容，从真实记录中制作几个静态模拟图，让用户选择。在那之后才开始构建。
- 用一句话说明每个选项的优化目标和代价
- 模拟图是一次性的 HTML，不是组件——不要将它们与数据绑定
模拟六种状态，而非一种
设计视图可能处于的每一种状态，每种状态都来自一条真实记录：
| 状态 | 从何处绘制 |
|---|---|
| 理想 | 典型记录——中位数的那条，而不是你挑选的那条 |
| 空 | 字段中没有任何内容的记录，以及一个完全没有记录的全新账户 |
| 部分 | 一些字段已填写，一些未填写——在真实数据中这是常见情况，而非例外 |
| 加载 | 数据到达之前占据空间的内容，大小与数据最终大小一致 |
| 错误 | 获取失败，或值格式错误无法渲染 |
| 完成 | 确认视图提供的某个操作确实发生了 |
然后是压力测试
数量极端（最繁忙、典型、空）并非唯一的极端。压力测试 是指数据存在、格式正确但令人痛苦：字段处理不当的名称、其状态使快乐徽章变成错误标识的记录、其摘要中仍包含已删除账户的人。挑选一条最可能使此视图出丑的记录并渲染它。
一页上的多个卡片：全部使用同一个图例
读者在第一张卡片上学会了某个颜色的含义，并将其应用于后续每张卡片。因此，在绘制一页上有多张卡片的任何视图之前，为整页编写一个类别表：每个类别的规范名称、固定顺序和一种颜色。每张卡片、图例和工具提示都使用它。
- 一种类别一种颜色；一种颜色一种类别。 一种颜色属于其类别，即使在该类别缺失的卡片上也是如此。将该颜色用于其他用途，即使是在从未显示原始类别的卡片上，也会告诉读者这两个东西是相同的。
- 一个类别一个名称。 一张卡片上的“全球健康与发展”和下一张卡片上的“全球发展与健康”会让读者怀疑它们是否是同一类别。
- 当卡片切分的是同一组记录时，使用统一的分类法。 在卡片增加自己的分类之前，检查它是否可以合并到页面已有的类别中。如果一张卡片真的需要更精细的划分，则给子类别使用父类别的深浅色调，而不是新的颜色。
- 真正不同的类别使用未用过的颜色，并添加副标题说明划分方式不同。切勿重复使用页面上已赋予其他类别的颜色。
- 所有图例中顺序一致，且“其他”总是最后，并始终使用相同的中性灰。
完成条件： 列出页面上所有的（标签、颜色）对，得到一一对应的关系。通过 grep 搜索标记或样式表中的颜色值，而不是查看渲染后的截图。
从数据中得出的渲染规则
- 空状态要做事情。 “暂无笔记”是死胡同。说明为何为空以及如何填充。用户第一天遇到的空状态是入门引导，值得设计。
- 表格中的数字： 右对齐、使用表格数字（
font-variant-numeric: tabular-nums）、整列保持相同精度、单位放在表头而不是每个单元格中重复。实用图表的规则 13 提供了其余内容：无网格线、高亮关键行、内联柱状图。 - 默认排序是一项设计决策。 按主键顺序排列记录是缺乏排序决定的表现。
常见错误
| 错误 | 后果 |
|---|---|
| 从架构进行设计 | 列存在；数据不存在 |
| 在没有命名决策的情况下构建 | 一切都被赋予同等重要性，因为没有哪个有理由更突出 |
| 给最容易获取的字段最大的突出度 | 布局描述了架构，而非任务 |
| 显示没有比较对象的数字 | 读者无法判断其好坏，于是不再查看 |
| 对始终成立的内容进行计数 | 从不变化的计数读起来像发现，实则是噪音 |
| 信任在查看数据之前编写的计划 | 你构建了计划中标明的东西，而非数据支持的东西 |
| 只模拟理想状态 | 设计在处理一无所有或半有半无的记录时崩溃 |
| 只测试数量极端 | 视图能承受最大的记录，却在普通记录上让某人难堪 |
| 只构建一个选项，因为它先被描述 | 用户无法选择他们从未见过的内容 |
| 逐卡片挑选颜色和标签 | 同一种蓝色在一页上代表两件事，读者会建立起不存在的联系 |
非明显部分的来源
- 决策优先，根据决策权重决定突出程度 —— Stephen Few, Information Dashboard Design
- 数字需要比较对象 —— 同上，关于上下文是使数字有意义的东西
- 六种状态 —— Scott Hurff 的 UI Stack
- 压力测试 —— Eric Meyer & Sara Wachter-Boettcher, Design for Real Life