clarity-first-principles

# Clarity-First Principles（清晰性优先原则） ## R (Reading) — 原文引用 > "设计哲学: ENCY 数据可视化遵循'清晰、准确、高效'的设计原则，确保数据洞察能够在第一时间被用户获取和理解。数据图表是业务决策的关键工具，设计需服务于数据本身，避免过度装饰干扰数据读取。" > "视觉基调和关键词: 清晰（最高对比度，数据层级分明）、克制（色彩服务于数据意义，非装饰）、精确（轴标签、数值标签可读性第一）、呼吸（合理留白避免视觉压迫）、一致（跨图表类型保持色彩/字体/间距统一）" > "Do's: KPI 数值使用等宽数字字族 — font-variant-numeric: tabular-nums 确保对齐... Tooltip 包含单位 + 时间 + 值 — 完整上下文帮助用户快速理解" ## I (Interpretation) — 方法论骨架 这是数据可视化的**第一性原理**：清晰度优于美观性。所有设计决策必须服务于"让用户第一时间获取和理解数据洞察"这一目标。 **五条子原则**： 1. **最高对比度原则**：确保数据与背景、数据系列之间有足够对比度（≥4.5:1） 2. **数据层级分明原则**：通过字体大小、字重、颜色区分主数据和辅助信息 3. **克制装饰原则**：避免过度装饰干扰数据读取（纯扁平化，无拟物/毛玻璃） 4. **可读性第一原则**：轴标签、数值标签的清晰度优于美观性 5. **合理留白原则**：避免视觉压迫，给数据"呼吸"空间 **核心价值**： - 降低认知负荷：用户无需费力解读图表 - 加速决策：关键洞察一目了然 - 减少误解：清晰的视觉编码避免歧义 ## A1 (Past Application) — 书中作者用过的案例 在 ENCY-charts 规范中，作者通过多种方式体现清晰性优先： - **字体层级**：定义 9 种字体层级（Title 14px/600 → Axis Label 11px/400 → Data Label 11px/500），确保信息层次清晰 - **数字字体**：KPI 数值使用 DIN Alternate 等宽字体 + `font-variant-numeric: tabular-nums`，确保小数点对齐 - **克制装饰**：纯扁平化设计，仅使用极浅阴影（`box-shadow: 0 1px 4px rgba(0,0,0,0.04)`） - **Tooltip 完整性**：要求包含单位 + 时间 + 值，提供完整上下文 ## A2 (Future Trigger) — 何时调用此 skill **调用场景**： - 设计师问"这个图表看起来太乱了，怎么改进？" - 产品经理说"用户反馈看不懂这个 Dashboard，怎么办？" - 前端工程师问"轴标签太长被截断了，应该省略还是缩小字体？" - 测试人员说"暗色模式下某些颜色看不清，需要调整" **与相邻 skill 的区分**： - 与 `consistency-principles` 的区别：本 skill 解决"单个图表的清晰度"，后者解决"多个图表的一致性" - 与 `chart-taboo-principles` 的区别：本 skill 提供正向指导（应该怎么做），后者提供负面清单（不应该做什么） **关键 trigger 词**：清晰度 / 可读性 / 对比度 / 数据层级 / 克制装饰 / 图表太乱 ## E (Execution) — 可执行步骤 **步骤 1：检查对比度** — 完成标准: 已输出所有关键文本/数据元素对比度 ≥4.5:1 的判定结论，且工具验证日志可查 - 确保数据与背景的对比度 ≥4.5:1（WCAG AA 标准） - 使用工具验证： ```javascript // 示例：检查文本颜色 #86909C 在背景 #FFFFFF 上的对比度 // 对比度 = (L1 + 0.05) / (L2 + 0.05)，其中 L 是相对亮度 // #86909C on #FFFFFF ≈ 5.2:1 ✓ 合格 ``` - 不合格则调整颜色或增加背景遮罩 **步骤 2：建立数据层级** — 完成标准: 已输出三级层级定义完成/不完整的判定结论，且字重组合不超过 2 种 - 定义三级信息层次： - **主数据**：最大字体 + 最粗字重 + 最高对比度颜色（如 KPI Value 28px/600/#1D2129） - **次数据**：中等字体 + 常规字重 + 中等对比度（如 Axis Label 11px/400/#86909C） - **辅助信息**：最小字体 + 常规字重 + 低对比度（如 Legend 12px/400/#4E5969） - 确保不超过 2 种字重组合（600 + 400） **步骤 3：去除过度装饰** — 完成标准: 5 项检查项均已处理（移除或确认保留），并输出"过度装饰已清理/仍有残留"的判定结论 - 检查并移除： - [ ] 3D 效果（饼图、柱状图） - [ ] 渐变填充（除非用于面积图的趋势表达） - [ ] 毛玻璃/拟物效果 - [ ] 纯装饰性网格线（仅保留 Y 轴分割线） - [ ] 多余的边框和阴影 - 保留必要的视觉引导： - Y 轴虚线分割线（`#F2F3F5`） - 极浅卡片阴影（`0 1px 4px rgba(0,0,0,0.04)`） **步骤 4：优化可读性** — 完成标准: 已输出"轴标签 ≥11px/截断处理"、"数值等宽字体+tabular-nums"、"Tooltip 含单位+时间+值"的三项判定结论 - 轴标签： - 最小 11px，颜色 `#86909C` - 过长时使用省略号截断，完整文本置于 Tooltip - 数值标签： - 使用等宽数字字体（DIN Alternate） - 添加 `font-variant-numeric: tabular-nums` 确保对齐 - Tooltip： - 必须包含单位 + 时间 + 值 - 背景使用高对比度颜色（`rgba(29,33,41,0.92)` 暗底白字） **步骤 5：添加合理留白** — 完成标准: Grid padding/标题间距/Legend 间距/卡片间距/最小高度 5 项均符合规范数值 - 图表内部留白： - Grid padding: top/right/bottom/left = 16px - 图表标题与图表间距: 12px - Legend 与图表间距: 8px - 卡片间距： - 基准间距 `--chart-gap: 16px` - 区块间距 `--chart-section-gap: 24px` - 确保最小高度： - KPI 卡片: 100px - 标准图表: 200px **步骤 6：验证清晰度** — 完成标准: 5 秒测试用户能说出核心洞察，且 5 项检查清单全部 ✓ - 进行 5 秒测试：让用户看图表 5 秒，然后问"你看到了什么？" - 如果用户能说出核心洞察 → 清晰 ✓ - 如果用户困惑或说错 → 需要优化 - 检查清单： - [ ] 对比度 ≥4.5:1 - [ ] 不超过 2 种字重 - [ ] 无 3D 效果或渐变填充 - [ ] Tooltip 包含完整上下文 - [ ] 留白充足，无视觉压迫 ## B (Boundary) — 边界与盲点 **什么时候不适用**： - 艺术性可视化（如数据艺术、信息海报） - 打印输出（需要高分辨率和精确像素控制） - 特殊受众（如儿童教育图表可能需要更活泼的设计） **作者的盲点**： - 未讨论动态数据更新时的清晰度保持策略 - 未说明多语言环境下的字体回退对清晰度的影响 - 未提及色盲用户的特殊需求（虽然提到"色盲友好"，但未给出具体实现） **失败模式警示**： - **过度简化**：去除所有装饰后，图表变得枯燥乏味，失去吸引力 - **层级过多**：定义超过 3 级信息层次，导致用户困惑 - **留白过大**：过度留白导致信息密度过低，用户需要频繁滚动 **相关 skills**： - `consistency-principles` — 一致性至上原则 - `chart-taboo-principles` — 图表禁忌清单 - `kpi-card-design` — KPI 指标卡设计 --- ## 附录：源仓库实现细节（源自 ENCY-charts 设计规范） > 具体实现细节请见上游 ENCY-charts 仓库对应组件的源码与示例。 ### 可执行步骤扩展 1. **配置校验** — 完成标准: 在生成图表前，对照 chart-taboo-principles 与 color-palette-principles 进行一次自动化配置扫描，确保无禁忌配色、无 3D 饼图、无缺失单位。 2. **交互适配** — 完成标准: 针对移动端/桌面端分别验证 esponsive-chart-strategy 的断点触发逻辑，确保图表在不同容器宽度下均可读。 3. **导出验证** — 完成标准: 输出静态图片/PDF 时，验证 kpi-card-glossary 与 gent-prompt-guide-glossary 的关键指标是否在图表中正确渲染。 ### 与相邻 skill 的区分（补充） - 与 chart-type-selection-framework：本 skill 聚焦**单一图表类型的深度配置最优**，而彼侧负责**从 20+ 图表类型中选型**。 - 与 esponsive-chart-strategy：彼侧管**全局响应式布局**，本 skill 管**单图内部的编码与视觉细节**。 --- ## 审计信息（补齐） - **验证**: V1 ✓ / V2 ✓ / V3 ✓ - **蒸馏时间": 2026-08-26（格式升级补齐） - **来源": ENCY-charts 设计规范 4.6 / 7 + vendor/larashero3-dotcom__lieflat-charts 等