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

Empty State Composition

Empty State Composition turns a frequent interface judgment into an executable constraint before generation.

empty-stateonboardinglayout

Design Principle

An empty state is not illustration filler; it is the first step into the workflow.

Principle An empty state is not illustration filler; it is the first step into the workflow.

Design action Preserve the real list or panel structure; provide a reason, one primary action, and one secondary action or learning link, avoiding pure decorative art.

Examples Positive example: Projects, resources, search results, notifications, or dashboards are empty. Counterexample: Only 'No data' is shown.

Apply when Projects, resources, search results, notifications, or dashboards are empty. 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

Preserve the real list or panel structure; provide a reason, one primary action, and one secondary action or learning link, avoiding pure decorative art.

Apply When

  • Projects, resources, search results, notifications, or dashboards are empty.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Only 'No data' is shown.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

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