mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
2b947d0480
* feat: site previewImage * feat: site previewImage * feat: use image * feat: update doc * feat: delete align="right" * feat: update doc * feat: delete css * feat: update doc * feat: delete align="right" * feat: update doc
162 lines
6.1 KiB
Markdown
162 lines
6.1 KiB
Markdown
---
|
||
group: Design Patterns
|
||
type: Template Document
|
||
order: 3
|
||
title: Detail Page
|
||
---
|
||
|
||
Detail 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
|
||
|
||
<div class="design-inline-cards">
|
||
<div>
|
||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3CfhSZLxsIEAAAAAAAAAAABkARQnAQ" />
|
||
<div>
|
||
<h4>Direct</h4>
|
||
<p>Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lN6IRbhv8fIAAAAAAAAAAABkARQnAQ" />
|
||
<div>
|
||
<h4>Clear hierarchy</h4>
|
||
<p>In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jXDwQ6NF7dIAAAAAAAAAAABkARQnAQ" />
|
||
<div>
|
||
<h4>Concise</h4>
|
||
<p>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.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
## Typical Templates
|
||
|
||
### Basic Layouts
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/pCRKNg9k17/1bd63a4b-d1f4-4e07-b22a-d473846ffa4c.png">
|
||
</ImagePreview>
|
||
|
||
Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.
|
||
|
||
#### [Basic Detail Templates](https://preview.pro.ant.design/profile/basic)
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/mbOatwyvyE/0fb8dd2b-b0d6-4833-8eef-4b9bb403eece.png">
|
||
</ImagePreview>
|
||
|
||
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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/scYc%24%24mD8l/17738081-f446-417b-9b32-a8c30de2f221.png">
|
||
</ImagePreview>
|
||
|
||
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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/B76lyJVA80/3c938d7e-06a8-464c-b70c-5b2bebfcd638.png">
|
||
</ImagePreview>
|
||
|
||
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](https://preview.pro.ant.design/profile/advanced)
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/%241vXHbjQ2A/ad454bfb-55d8-43b1-b1fb-adfbc889045c.png">
|
||
</ImagePreview>
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/O0dPbOqGT0/07b6e341-2186-4a20-bc2c-513d91d3faa8.png">
|
||
</ImagePreview>
|
||
|
||
**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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/zMjpjg%24oaY/a9b7e996-ca9a-45d8-afbb-3c1727208629.png">
|
||
</ImagePreview>
|
||
|
||
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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/1uy%243Y6SRp/1a6ff7f8-4cd0-483b-b8a5-c8d49c63fa92.png">
|
||
</ImagePreview>
|
||
|
||
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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/gadw%26gZBCW/f8c03ba9-73ae-40f6-b687-c322ecf963cb.png">
|
||
</ImagePreview>
|
||
|
||
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
|
||
|
||
<ImagePreview>
|
||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/J7ccrSNpjz/89878d45-ca15-4a6a-853e-3281fe02f114.png">
|
||
</ImagePreview>
|
||
|
||
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:
|
||
|
||
## Read more
|
||
|
||
#### Related Global Rules
|
||
|
||
- [Data Format](/docs/spec/data-format)
|
||
- [Button](/docs/spec/buttons)
|
||
|
||
#### Related Modules or Components
|
||
|
||
- [Description](/components/descriptions/)
|
||
- [Collapse](/components/collapse/)
|
||
- [Table](/components/table/)
|
||
|
||
#### Reference
|
||
|
||
- [Fiori – How to Design an Object Page](https://blogs.sap.com/2017/08/06/fiori-elements-how-to-design-an-object-page/)
|
||
- [SAP Fiori 2.0: The Object Page —— Part 1: It's History](https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/)
|
||
- [Object Page Floorplan](https://experience.sap.com/fiori-design-web/object-page/)
|
||
- [Principle of Product Display in Supermarkets](https://experience.sap.com/fiori-design-web/object-page/)
|