UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Data Ink Priority

Data Ink Priority turns a frequent interface judgment into an executable constraint before generation.

datachartshierarchy

Design Principle

Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.

Principle Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.

Design action Reduce grid and decoration; emphasize data marks, key points, thresholds, outlier labels, and current-state explanations.

Examples Positive example: KPIs, trend charts, dashboards, and operational alerts need fast difference detection. Counterexample: Chart backgrounds, grids, and gradients are stronger than data marks.

Apply when KPIs, trend charts, dashboards, and operational alerts need fast difference detection. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Reduce grid and decoration; emphasize data marks, key points, thresholds, outlier labels, and current-state explanations.

Apply When

  • KPIs, trend charts, dashboards, and operational alerts need fast difference detection.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Chart backgrounds, grids, and gradients are stronger than data marks.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
85%
Version
v1
Published
6/6/2026