ant-design/docs/spec/research-result.zh-CN.md
Tao Zhou 2e9354c3b3
docs: fix minor errors and improve readability ()
* docs: replace an abbreviation with a better word in direct.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: improve readability in lightweight.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: replace unnecessary abbreviations with translations in invitation.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix a typo, remove an extra space and replace an unnecessary abbreviation in transition.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: improve readability in visualization-page.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix a typo and improve readability in detail-page.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: improve readability in research-form.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: improve readability in research-list.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix a typo in research-result.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix a wrong img tag in research-navigation.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: improve readability in research-empty.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix punctuation inconsistency and improve readability in visual.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix typos and improve readability in motion.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

* docs: fix punctuation errors and improve readability in illustration.zh-CN.md

Signed-off-by: Tao Zhou <taozhou@umich.edu>

---------

Signed-off-by: Tao Zhou <taozhou@umich.edu>
2023-10-25 09:30:25 +08:00

139 lines
5.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
group: 设计模式 - 探索
type: 模板文档
order: 4
title: 结果页
---
结果页是用一个页面反馈操作结果,是反馈模式中最强的一种。
## 何时使用
当完成一个流程操作后,需给予用户明确的结果反馈时,例如分步表单的最后一步。<br/> 当有大量的信息需要在结果页展示时。
## 设计目标
向用户传达任务完成结果,引导用户进行下一步操作,通过有效的反馈建立起用户对系统的信任。
## 设计原则
<div class="design-inline-cards">
<div>
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*HHLnR5RgpWQAAAAAAAAAAABkARQnAQ" />
<div>
<h4>慎重使用</h4>
<p>结果页是比较重的反馈方式,仅适用于吸引用户注意程度强、信息量较大、页面永久停留的场景中,其余场景不建议使用。</p>
</div>
</div>
<div>
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*hglURJfVdHoAAAAAAAAAAABkARQnAQ" />
<div>
<h4>即时结束</h4>
<p>当结果状态为成功时,可以默认提供几秒(建议 3-5秒后自动跳转。</p>
</div>
</div>
<div>
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tJC7RZviqzwAAAAAAAAAAABkARQnAQ" />
<div>
<h4>精简信息</h4>
<p>结果页信息建议为提交动作触发后的结果,例如校验建议在表单中完成。结果页信息需精简,仅展示结果相关内容,特殊场景可以增加补充信息。</p>
</div>
</div>
</div>
## 设计建议
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*98B4QKjg-QoAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EgnGQ4zImuMAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lVo2RKb6mL4AAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4RFCTLatKrcAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」。
<br />
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*r7UFSLbqTdYAAAAAAAAAAABkARQnAQ" alt="正确示范">
<img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zXk0SI4qqYMAAAAAAAAAAABkARQnAQ" alt="错误示范">
</ImagePreview>
操作引导建议不超过 2 项,过多操作会对用户选择造成困扰。
<br />
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*9gvmRq3RmnQAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
轻量的反馈不建议使用结果页,可以使用全局提示、警告提示、通知提醒框等交互方式,详情参考反馈类设计指南。
<br />
<ImagePreview>
<img class="preview-img no-padding good" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*JY1kR4qIR1wAAAAAAAAAAABkARQnAQ" alt="正确示范">
</ImagePreview>
若结果状态为成功时,可在主按钮上告知用户几秒后自动跳转。
## 如何设计
### 基础布局
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PQotS7GJC1gAAAAAAAAAAABkARQnAQ">
</ImagePreview>
结果页可提供以下内容:
1. 结果反馈:明确告知用户提交结果;
2. 结果解释(可选):若需要对结果简要解释使用;
3. 建议操作:引导用户继续完成后续工作;
4. 补充信息(可选):在通知结果的同时,有补充信息需要反馈给用户;营销模块。
#### 模板 - 基础结果页
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uXFNR4eef2oAAAAAAAAAAABkARQnAQ">
</ImagePreview>
显示结果状态并引导用户进行下一步操作。
#### 模板 - 复杂结果页
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SWabTZptxEcAAAAAAAAAAABkARQnAQ">
</ImagePreview>
除结果状态和引导操作等基础信息外,同时展示相关推荐、流程进度、错误详情等信息。
#### 补充信息类型
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*avS5TZcMawwAAAAAAAAAAABkARQnAQ">
</ImagePreview>
## 延伸阅读
### 会用到哪些全局规则
- [反馈](/docs/spec/research-message-and-feedback)
### 会用到哪些模块或组件
- [表单页](/components/form-cn/)
### 外部参考文章
- [Fiori 消息反馈类组件规则](https://experience.sap.com/fiori-design-web/message-box/)
- [阿里云结果页设计](https://xconsole.aliyun-inc.com/scenes/resultpage)
- [CANVAS 消息反馈类组件规则](https://canvas.hubspot.com/components/alerts-messaging)
- [PREDIX 通知提醒框和警告组件规则](https://www.predix-ui.com/#/design/communication/notifications)