mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 04:18:28 +08:00
cd5a81f752
* Update research-empty.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-exception.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-form.en-US.md Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> * Update research-list.en-US.md Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> * Update research-navigation.en-US.md Additional links to recommended external articles Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> * Update research-navigation.en-US.md Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> * Update research-overview.en-US.md Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> * Update research-result.en-US.md Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> * Update research-workbench.en-US.md Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com> --------- Signed-off-by: CodeCompilerConduct <1376397133guoli@gmail.com> Signed-off-by: CodeCompilerConduct <cs.guoli.huang@gmail.com>
110 lines
3.6 KiB
Markdown
110 lines
3.6 KiB
Markdown
---
|
|
group: Design Patterns (Research)
|
|
type: Template Document
|
|
order: 2
|
|
title: Workbench
|
|
skip: true
|
|
---
|
|
|
|
The workbench is often used as the homepage of an application, providing a convenient hub for users. It offers common information entry points, navigating to various functional modules of the application in a hub-and-spoke manner; it presents information that the user currently needs to focus on, shortening the path to key information; and allows users to directly perform some high-frequency tasks on the workbench.
|
|
|
|
---
|
|
|
|
## Design Goals
|
|
|
|
User-side: Provide shortcuts for handling and viewing information and necessary help for users;<br/> Product-side: Communicate better with users, appropriately promote new trends and operational content of the product.
|
|
|
|
## Design Principles
|
|
|
|
<div class="design-inline-cards">
|
|
<div>
|
|
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*aFiGRbIvuH4AAAAAAAAAAABkARQnAQ" />
|
|
<div>
|
|
<h4>Findability</h4>
|
|
<p>Can users locate the information they want?</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lTUuSKmd8WsAAAAAAAAAAABkARQnAQ" />
|
|
<div>
|
|
<h4>Reduce Memory Load</h4>
|
|
<p>Understand the core goals of users returning to the site and provide the shortest navigation paths to possible destinations.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
## How to Design
|
|
|
|
#### Template - Workbench
|
|
|
|
<ImagePreview>
|
|
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8s67TL62WEoAAAAAAAAAAABkARQnAQ">
|
|
</ImagePreview>
|
|
|
|
**When to Use**
|
|
|
|
- Shorten the navigation path for users returning to the site;
|
|
- Provide common navigation entry points for users.
|
|
|
|
**Involved Functions**
|
|
|
|
Help; Core Data; Shortcuts; To-Do List; Focus; Operational Modules.
|
|
|
|
**Design Suggestions**
|
|
|
|
- Display modules related to daily work, keeping the total number of modules between 5-9;
|
|
- Present the most frequently used content on the first screen whenever possible;
|
|
- Provide role-based differentiated views.
|
|
|
|
#### Template - New User Guide
|
|
|
|
<ImagePreview>
|
|
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*LQBmQauTEAsAAAAAAAAAAABkARQnAQ">
|
|
</ImagePreview>
|
|
|
|
**When to Use**
|
|
|
|
- When new users arrive at the platform and have not yet started any work, shorten the learning time for new users;
|
|
- When some modules have no content, refer to the "Empty State" guidelines.
|
|
|
|
**Involved Functions**
|
|
|
|
Help; Empty State Guide.
|
|
|
|
**Design Suggestions**
|
|
|
|
- Introduce the platform's purpose to users and guide them to start working;
|
|
- If users need to manage complex objects, provide a Demo preview entry;
|
|
|
|
### Design Suggestions
|
|
|
|
#### Choose the Right Navigation Method
|
|
|
|
This type of page generally provides two types of navigation forms.<br/>
|
|
|
|
① Users know the function they want to use and need to navigate to it. For example:
|
|
|
|
<div>
|
|
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*xlYoTIf8NpwAAAAAAAAAAABkARQnAQ">
|
|
</div>
|
|
|
|
② Discovery navigation, where users need to complete a task but do not know which function to use. For example:
|
|
|
|
<div>
|
|
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9nKdRJBAu8sAAAAAAAAAAABkARQnAQ">
|
|
</div>
|
|
|
|
#### Arrange Content by Usage Frequency
|
|
|
|
<ImagePreview>
|
|
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1tfiR5-xKUQAAAAAAAAAAABkARQnAQ">
|
|
</ImagePreview>
|
|
|
|
Arrange the content based on usage frequency in the daily work.
|
|
|
|
#### Consider Error States
|
|
|
|
See Error Page
|
|
|
|
> Additionally, whether to recommend personalized customization for users is still under exploration.
|