mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-27 02:18:34 +08:00
afedb4127f
* patch route * use data for promise * rename Article file * Article in TS * clean up * use collect * adjust css * card it * listing * res * hiring * add footer * english it * rm others * fix lint * fix navigation * add dropdown button * Header with TS * split input & logo * navigation out * use flex * flex everything * stretch * hide search when narrow * init category * global rules * more cat * pages * level 2 width * level 3 * level 4 * skip before ready * clean up * unqiue shadow variable * update eslintignore * update ignore * fix ssr * fix location param * replace images * shake more * fix top of navigation * remove home * reorder nav & adjust padding style * narrow res style * Update research-form-page.zh-CN.md (#21426) Co-authored-by: Golevka <huangsamfisher@163.com> * rm skip * narrow merge in * reset p style * update svg * fix lint * update ignore * update lint ignore * Update research-result-page.zh-CN.md (#21432) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-result-page.zh-CN.md * Update research-workbench.zh-CN.md (#21438) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md * Update research-list-page.zh-CN.md (#21441) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-list-page.zh-CN.md * padding use 40px * add responsive of ref * fix p margin * Update research-workbench.zh-CN.md * Update buttons.md (#21456) Co-authored-by: yingxirz <inseeing@gmail.com> * Update resources.en-US.md (#21457) * Update research-navigation.zh-CN.md (#21453) * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-navigation.zh-CN.md * Update research-empty.zh-CN.md (#21451) * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md * Update research-empty.zh-CN.md Co-authored-by: 二货机器人 <smith3816@gmail.com> * Update research-exception-page.zh-CN.md (#21452) * Update research-exception-page.zh-CN.md * Update research-exception-page.zh-CN.md * Update research-message-and-feedback.zh-CN.md (#21463) * Update research-message-and-feedback.zh-CN.md (#21467) * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * Update research-message-and-feedback.zh-CN.md * replace background * fix lines margin * home padding * patch minTilda doc * Update resources.zh-CN.md (#21503) * clean up * Update research-workbench.zh-CN.md (#21512) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-overview.zh-CN.md (#21513) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result-page.zh-CN.md (#21514) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-list-page.zh-CN.md (#21515) Co-authored-by: yingxirz <inseeing@gmail.com> * fix doc * Update research-message-and-feedback.zh-CN.md (#21516) * adjust home nav width * Update research-message-and-feedback.zh-CN.md (#21535) * Update research-form-page.zh-CN.md (#21554) Co-authored-by: Golevka <huangsamfisher@163.com> * patch file * clean up * update shadow.zh-CN update shadow.zh-CN * add shadow table * Update visual.zh-CN.md (#21577) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * Update docs/spec/shadow.zh-CN.md Co-Authored-By: 偏右 <afc163@gmail.com> * patch docs * fix doc * rm page suffix * fix style * mobile it * Update resources.en-US.md (#21561) * chart res * add qr code * adjust qr * Update visual.zh-CN.md (#21603) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * fix site qr * mobile height of it * book update * 3.x site link * isMobile is new cnotext * Update research-form.zh-CN.md (#21604) Co-authored-by: Golevka <huangsamfisher@163.com> * adjust form doc * mobile use link * adjust order * flush * fix ts * Update research-navigation.zh-CN.md (#21606) * Update research-navigation.zh-CN.md (#21609) * rm useless lines * add mobile icon * Update research-exception.zh-CN.md (#21612) * Update research-empty.zh-CN.md (#21610) * Update research-workbench.zh-CN.md * Update visual.zh-CN.md * adjust mobile icon * Update research-message-and-feedback.zh-CN.md (#21613) * Update research-list.zh-CN.md (#21617) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-workbench.zh-CN.md (#21618) Co-authored-by: yingxirz <inseeing@gmail.com> * Update visual.zh-CN.md (#21619) Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com> * Update research-result.zh-CN.md (#21620) Co-authored-by: mihaideyu <zxy1010414746@163.com> * Update research-form.zh-CN.md (#21615) * Update research-message-and-feedback.zh-CN.md (#21616) * Update research-list.zh-CN.md (#21621) Co-authored-by: yingxirz <inseeing@gmail.com> * Update research-result.zh-CN.md (#21624) Co-authored-by: mihaideyu <zxy1010414746@163.com> * update ref color * update zip file * fix mobile icon * rm skip dark * fix cat * update zip link * update zip link Co-authored-by: Golevka <huangsamfisher@163.com> Co-authored-by: mihaideyu <zxy1010414746@163.com> Co-authored-by: yingxirz <inseeing@gmail.com> Co-authored-by: 偏右 <afc163@gmail.com> Co-authored-by: myeunhyuk <39618466+myeunhyuk@users.noreply.github.com> Co-authored-by: minTilda <31951290+minTilda@users.noreply.github.com> Co-authored-by: ziyuan-174774 <61226089+ziyuan-174774@users.noreply.github.com> Co-authored-by: 竹尔 <54707870+AntDesigners@users.noreply.github.com> Co-authored-by: shuwenliu0116 <33922479+shuwenliu0116@users.noreply.github.com>
181 lines
8.4 KiB
Markdown
181 lines
8.4 KiB
Markdown
---
|
||
category:
|
||
zh-CN: 设计模式
|
||
en-US: Design Patterns
|
||
type:
|
||
zh-CN: 全局规则
|
||
en-US: Global Rules
|
||
order: 6
|
||
title:
|
||
zh-CN: 按钮
|
||
en-US: Button
|
||
---
|
||
|
||
## 设计目标
|
||
|
||
- 指导用户采取你希望他们采取的行动。
|
||
- 帮助用户避免犯错。
|
||
|
||
## 类型
|
||
|
||
### 常规按钮
|
||
|
||
<div>
|
||
<img alt="buttons" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wsXrT7yQH2MAAAAAAAAAAABkARQnAQ">
|
||
</div>
|
||
|
||
#### ① 次按钮
|
||
|
||
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
|
||
|
||
#### ② 主按钮
|
||
|
||
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
|
||
|
||
#### ③ 文字按钮
|
||
|
||
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列。
|
||
|
||
#### ④ 图标按钮
|
||
|
||
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。
|
||
|
||
- 需要在较小的空间内展示尽量多的按钮。
|
||
- 使用纯图标按钮必须有 Tooltip 提示按钮含义。
|
||
|
||
#### ⑤ 在按钮中添加图标
|
||
|
||
用于对按钮含义补充解释，提高按钮识别效率。
|
||
|
||
### 按钮强调
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
|
||
|
||
常规按钮类型呈现出不同的**强调程度**，使用者可以据此变化出合适的按钮类型：
|
||
|
||
### Do&Don't
|
||
|
||
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在一个按钮区放置超过一个主按钮">
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="正确示范" description="1、强调一个主要操作；<br/>2、操作无主次，次按钮是最安全的选择。。">
|
||
|
||
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="错误示范" description="不要在按钮中放置两个图标。">
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="正确示范" description="按照主次展示全部操作。<br/>将次要操作收纳至右侧下拉按钮中。">
|
||
|
||
|
||
|
||
|
||
### 特殊按钮
|
||
|
||
#### 虚线按钮 Dashed button
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
|
||
|
||
用于引导用户在一个区域中添加内容。
|
||
|
||
#### 危险按钮 Danger button
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
|
||
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="正确示范" description="用户的主要意图是删除，通过红色警示该操作存在风险。">
|
||
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="正确示范" description="当系统不推荐用户执行删除操作时，可将取消按钮设置为主按钮。">
|
||
|
||
警示用户该操作存在风险。
|
||
|
||
#### 幽灵按钮 Ghost button
|
||
|
||
置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
|
||
|
||
#### 行动号召按钮 Call to action
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
|
||
|
||
经常独立出现，行动号召按钮就像是电脑在对用户大声说“跟我来吧”，有点命令用户点击的意味，通常出现于 landing page 或者 一些引导性场景。最大可以将按钮放宽到与父区域等宽。一个屏幕空间中，建议只有一个行动号召按钮。
|
||
|
||
## 位置
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ">
|
||
|
||
将按钮区放置于用户浏览路径中，便于被用户发现，如 “F 浏览模式” 和 “Z 浏览模式” 。
|
||
|
||
### 如何确定按钮区的放置位置？
|
||
|
||
#### 页面/卡片/一组信息都能够呈现一个主题，主题的描述可以抽象为三个区域：
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ">
|
||
|
||
- Header：主题的标题和摘要信息内容区的导航等
|
||
- Body：具体内容
|
||
- Footer：主题的补充信息和工具栏等
|
||
|
||
将按钮区放置在不同的区域，有不同的含义：见右图。
|
||
|
||
也存在一些特殊情况，将“完成”主题类的动作放在 Header 区。例如，编辑器中为了最大化编辑空间，将“完成”类动作放到了右上角。
|
||
|
||
### 什么时候需要在 Footer 中放置按钮区？
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
|
||
|
||
- Body 区部分内容被折叠或隐藏，例如单屏无法展示完整内容；
|
||
- Body 区的内容复杂度高，例如有多个分组，分组中又有独立的按钮区，这时候需要将该主题的“完成”操作从 body 区区分出来，避免混淆按钮所能影响的内容范围。
|
||
|
||
简而言之，Footer 的存在就是为了要和 Body 区区分开来。
|
||
|
||
## 按钮顺序
|
||
|
||
### 按钮顺序
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
|
||
|
||
推荐操作是阅读的起点，折叠内容始终在最右侧。
|
||
|
||
**如何确定按钮顺序？**
|
||
|
||
- 对话习惯：按钮放置顺序类似于电脑和用户的对话，**优先询问用户可能需要执行的操作，或你希望用户执行的操作，最后向用户提供存在风险的操作**。
|
||
- 方向性含义：例如，具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。
|
||
|
||
### 按钮组
|
||
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="正确示范">
|
||
|
||
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="错误示范" description="连在一起的按钮组在外观上易与 Toggle Button 切换按钮混淆。">
|
||
|
||
多个按钮形成一组时，将按钮排列在一起即可。
|
||
|
||
### 按钮分组
|
||
|
||
当需要布置的按钮数量过多，可以把相关的动作组成一组，并采用相似的视觉设计。当某一个按钮是首要动作时仍可使用主按钮强调。
|
||
|
||
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
|
||
|
||
**按主次折叠部分按钮**
|
||
|
||
<br />
|
||
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="正确示范">
|
||
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="错误示范" description="无需分组时不要使用短竖线分割">
|
||
|
||
**平铺每个按钮**：优先推荐通过间距来区隔分组，也可以使用分割线来区隔视觉相似的按钮组。
|
||
|
||
## 文案
|
||
|
||
<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="正确示范">
|
||
|
||
<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="错误示范" description="应使用动词">
|
||
|
||
文案需清楚传达用户按下按钮时系统将执行的操作。
|
||
|
||
- 必须使用动词。（下拉按钮除外）
|
||
- 与语境紧密关联，用语简练。
|
||
|
||
Ant Design 组件中默认使用 “确定 / 取消”文案 ，但你仍然可以通过以下方式优化按钮文案：
|
||
|
||
- 描述任务结果。
|
||
|
||
> 发布、登录、注册
|
||
|
||
- 主要操作也为否定含义时，强调后果。
|
||
> 你确定要删除它吗？删除 / 取消
|