梳理系统内组件的尺寸，形成一定的秩序与规律。
原则
- 尺寸规律不适用于根据规则自动生成间距的特定场景，如栅格；
- 默认尺寸为 M；
高度
| 组件 | S | M | L |
|---|---|---|---|
| Button 按钮 | 24 | 32 | 40 |
| IconButton 图标按钮 | 24 | 32 | 40 |
| Input 输入框 | 24 | 32 | 40 |
| Select 选择器 | 24 | 32 | 40 |
| TimePicker 时间选择 | 24 | 32 | 40 |
| DataPicker 日期选择 | 24 | 32 | 40 |
| Search 搜索 | 24 | 32 | 40 |
| Checkbox 复选框 | - | 22 | - |
| Radio 单选框 | - | 22 | - |
| Switch 开关 | 16 | 22 | - |
| Dropdown 下拉菜单 | 24 | 32 | 40 |
| Pagination 分页 | 24 | 32 | - |
| Tab 选项卡 | 32 | 40 | - |
| Badge 徽标 | 16 | 20 | - |
| Status 状态 | - | 24 | - |
| Table 表格（表头） | 36 | 44 | - |
| Table 表格（单元格一行的情况下） | 36 | 44 | - |
| Collapse 折叠面板 | - | 44 | - |
| Progress 进度条 | - | 8 | - |
宽度
自适应宽度
按钮、单选框、复选框等无特别说明的组件，宽度随内容自适应。
最小宽度
定义一些组件或其浮层的最小宽度：
| 组件 | 最小宽度 |
|---|---|
| Menu 菜单浮层 | 120 |
| Dropdown 下拉菜单（浮层） | 160 |
| Popover 气泡卡片 | 240 |
| Popconfirm 气泡确认框 | 240 |
| Modal 弹窗（基础型） | 480 |
表单录入场景适配规则
给录入类组件设定一致的宽度视觉上看感觉会比较统一，但是会有种右侧区域缺了一大块的错觉。
实际业务场景中，大部分录入组件都有其合理的宽度，组件的宽度往往暗示着填写内容的长度，所以合理的宽度能给用户正确的预期：
参考AntDesign表单研究结论，以四个中文字宽的下拉框宽度为最小宽度XS，则XS = 102px，组件之间的间距设为8px，得到如下宽度设置规则：
| 尺寸 | 宽度 | 使用范围 |
|---|---|---|
| XS | 102px | 短数字、超短文本、超短下拉选项的录入，如数字选择器 |
| S | 212px | 较短文本、较短下拉选项的录入，如姓名、账户名、邮箱、ID等 |
| M | 322px | 标准输入框宽度，适于多数字段长度 |
| L | 432px | 较长字段的录入，如网址、文件路径、标签多选下拉框等 |
| XL | 542px | 段落文本的录入，如超长链接、备注等，通常预留多行空间 |
其中各尺寸之间的换算关系：
- S = XS×2 + Spacing
- M = XS×3 + Spacing×2 = S + XS + Spacing
- L = XS×4 + Spacing×3 = XS×2 + S + Spacing = XS + M + Spacing = S×2 + Spacing
- XL = XS×5 + Spacing×4 = XS×3 + S + Spacing = XS×2 + M + Spacing = XS + L + Spacing = XS + S×2 + Spacing = S + M + Spacing
= M + S + Spacing
应用宽度规则后（错落有致） VS 统一长度：
若有收获，就点个赞吧
0 人点赞
