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

Object Detail Layout

Object Detail Layout turns a frequent interface judgment into an executable constraint before generation.

detailobjectlayout

Design Principle

Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.

Principle Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.

Design action Show object name, status, and primary action at the top; group the body into summary, key attributes, history, and related objects.

Examples Positive example: Customer, order, project, knowledge, and asset details have state, history, and related data. Counterexample: The detail page is only a stack of fields.

Apply when Customer, order, project, knowledge, and asset details have state, history, and related data. 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

Show object name, status, and primary action at the top; group the body into summary, key attributes, history, and related objects.

Apply When

  • Customer, order, project, knowledge, and asset details have state, history, and related data.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • The detail page is only a stack of fields.
  • 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