Ant DesignDetail Pages display the complete data to users. Users can edit the information or do other operations.
Design Goals#
To increase the information viewing and searching efficiency. To raise the convenience of operation.
Design Principles#
Direct#
Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.
Clear hierarchy#
In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.
Concise#
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.
Typical Templates#
Basic Layouts#
Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.
Basic Detail Templates#
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#
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.
Complex Layouts#
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.
Advanced Detail Templates#
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.
Publish Process Templates#
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.
Design Suggestions#
How to choose template#
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.
Separation Methods#
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.
Non-column split lines: to separate relevant contents;
Full-column split lines: to divide the content into multiple parts;
Cards: to display information on one topic;
Tabs: to put the information into groups according to some feature, such as version, intention, phase, etc.
Content Components#
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: