Detail Page
Detail Page
- Ant Design
- Global Styles
- Design Patterns
- Design Patterns (Research)
- Overview
- Template Document
- Global Rules
- Visualization
- Motion
- Illustrations
Detail Pages display the complete data to users. Users can edit the information or do other operations.
To increase the information viewing and searching efficiency. To raise the convenience of operation.
Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.
In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.
Reduce the use of complex structures, try to use similar layouts and modules to reduce the interference of structural differences to users, and let them focus on information itself.
Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.
Basic layout templates display the main information on one whole card, using non-column split lines to separate the content into groups.
When to use
To display information with less content and low complexity.
Document Detail Templates display the detailed information of approval documents. They use cards to separate the modules with complex content.
When to use
To display approval process and detailed approval information, as well as some approval operations.
Related operations
Pass, reject, transfer, sign, suspend and withdraw.
Deal with complex details in the following way: Divide information with high complexity and weak correlation into multiple parts. And put the parts into groups according to their relativities, with tabs, steps, cards, etc.
When to use
When the detail page has large and complex content, it has to be split into multiple tabs to guide users to browse information.
Divide the content into steps, letting users to browse and operate step by step.
When to use
Such templates are suitable for developing and collaborating processes.
Based on information complexity and correlation model, choose related modes to present the information, and select suitable layouts to display the contents of detail pages.
Conclude the closeness of each information module according to the relevance among them. Usually, the more relevant the contents are, the closer they are to each other.
Select presentation modes of the information according to its types and complexity. Abased on the complexity from low to high, the followings are available components: