为什么要进行 size修改？

进行 size 修改的主要原因有二，一是来自大量用户的反馈，希望能提供更小的尺寸，以提高页面的信息密度。例如吐槽默认的 40px 的 button 和 input 组件太大，一页摆不了多少东西。
二是 Element UI 原本的 size 系统存在一些不合理的地方，例如四个 size 中的 medium 较少应用，有点累赘。 padding的设定也有不够合理之处。

修改的方向

结合灵活，扩展的设计原则，修改的方向主要有两个，一是提供更小尺寸的组件，满足高信息密度需求。例如 提供24px 的 button、input，32px 的表格等。
二是让 参数变化和分布更为合理，有据可依，有规则可扩展。
三是尽可能的继承 Element UI 的相关参数，避免无意义的修改。

具体而言，将 size 体系由 default/medium/small/mini 切换为更自然的 large/default/small ，以 default 为基础，需要加大则选择 large，需要缩小则选择 small。需要更大或者更小的尺寸也能自由增加 x-large，x-small 等尺寸。

padding方面则优化为更通用的 4px体系，采用 4/8 px作为原子单位控制整个系统的 padding一致性。全局变化节奏定为大组件 padding也大，小组件 padding 也小的一致节奏。

字体方面，要不要添加更多16px 的 font-size到默认组件中是个核心问题。参考 Ant Design 的研究成果，14px 字体已经可以保证在多数常用显示器上的用户阅读效率最佳。加之本次修改的初衷是为了更好的满足高信息密度的需求，同时又要尽可能的继承 Element UI 的相关参数，避免无意义的修改等因素。综合考虑后选择不添加16px 的 font-size 到默认组件中。

修改的具体范围

主要涉及的组件为 Button、Radio、Checkbox 、Input、ISelect、DateTimePicker、From等表单组件和Table、Tag 等其他有 size 属性的组件。
主要涉及属性为padding、 margin等 padding属性修改、 font-size 等字体和图标大小修改等。

size属性命名的调整

去除 medium 属性

前文说过， medium 属性在实际生产中较少得到应用，显得有些累赘多余。而且切换为更自然的 large/default/small 的 size 体系后，用户如果需要更大或者更小的尺寸，可以自由的增加 x large，x small 等尺寸，也没有了 medium 属性的容身之处。
在语义上 medium 属性与 default 也有混淆之处，抛开实际的 size 参数，在语义上是很难区分 medium 和 default 谁大谁小的。

切换为large/default/small 属性

去除 medium 属性后，对剩余的 default/small/mini也做了调整。将 default 设定为默认的大小，然后再拓展更大的 large 或者更小的 small ，比 Element UI 中 default 就是最大属性要更自然。
Element UI 中的 mini属性，作为比 small 更小的 size，在新size体系中也不再出现，但可以作为扩展命名使用。建议更小的扩展命名为 mini，更大的扩展命名为 max。

参考

其中 Semi 的 RadioGroup 的 buttonSize 定为【 small、middle、large 】，为什么不和按钮一样定为【 small、default、large 】呢？名称不是统一更好吗哈哈，这个问题经过官方人员确认，是 API 设计问题，应该一致成【 small、middle、large 】的。

TDesign 的medium 参数加不加都一样。所以会有些有，有些没有。

名词说明

有个前端和设计协同的问题是，设计稿上的 20像素的左边距，在开发实现上可能是 19px padding+1px border，这个导致开发跟设计说的 padding 可能不完全相等。
为了简化沟通成本，当使用 【padding】 时，指的就是对应的前端 padding属性 设置的数值。当使用【间距】
时，指的就是对应的设计稿标注。

模板

Ant

Arco

Semi

TDesign

height 全局修改说明

Button 和 Input

以核心的button 和 input 组件为例，主要修改是去掉了 36px 的 medium 属性，将 28px的 mini属性修改为 24px。去掉 medium 属性的原因前文已经说过，将 28px 的 mini属性修改为 24px，主要是有以下几点原因：
一、提供小到 24px height的组件，以满足用户的高密度页面的需求。
二、24px height的 samll input，才方便嵌套进 32px 的 small table，使用原先的 28px height则太过拥挤。
三、 24px height更符合 8 倍数体系，24/32/40 的递进更有节奏美。

修改为 24px 的缺点：
一、点击区域略微缩小，但距离最小可点击区域限制 12*12 仍然有很大距离，不影响可用性。
二、相较于 28px height，在同样是 12px 字体的前提下略为拥挤一些，但嵌套进small表格等组件时适应性更好，更美观，利大于弊。

其他 Radio、CheckBox 的按钮样式高度应该与 button 保持一致。

Element UI

参考

Ant

Arco

Semi

TDesign

Ant

Arco

Semi

TDesign

Radio 和Checkbox

default

Elemnet UI中的 size 属性仅对按钮形式的 Radio 或带有边框的 Radio 有效，默认形式是无效的。Element Plus 中的 size 属性对默认形式也有效了，给默认形式增加了对应 size 的 height，方便在 From 中对齐。

Element UI

参考

Ant

Arco

Semi

TDesign

Button 样式

参考

Ant

Arco

Semi

TDesign

Table

以上参数是默认表格样式（仅文字）的总高度，当表格中有特殊元素如图标，tag等，需要加大内容容器时，则对应撑大总高度，此时总高度为单数。
Element UI 带排序和筛选功能的表头，出现了60.38 的这样的奇怪数字。这个原因待和开发了解研究。
当表格内容行高为 32px 时，对照如下。

Table 组件的 height 修改，除了 Table 自身的 icon、text 等元素，还需要考虑的 column 会内嵌各种元素，常见的例如内嵌 button、图片、input 等。
Table 组件采用了和 Button 组件一样的修改逻辑，将原先 36px 的 mini属性修改为 32px 的 small 属性，不至于因为24px 这样的 height 过小而导致无法嵌套button 等组件，也不会过大浪费空间。而且还符合 8 倍数体系，形成 48/40/32 的同类节奏组合。
当然，目前有许多组件库的 large table 在 56px 左右，像有赞的需要内嵌商品图的默认 large table 更是达到了 80px，对于这类更为宽松的表单需求，Element Plus 选择留给用户自行扩展实现。
还有一种逻辑是，对更小的 height 的需求比更宽松的 height 的需求更有必要性和功能意义。例如需要用户更紧凑的表格以一屏幕展示更多行内容，提高浏览操作效率。
而在用户为什么会需要更宽松的height呢？有两种可能，一种是内容少，界面允许更加宽松，选择更宽松的 size 以美化界面，提升阅读体验，这种美化需求的优先级按照设计原则的排序，是要低于查看完整表格的优先级的。另一种是内嵌了图片等需要较大height的元素，对于这种扩展提升性需求，我们选择让用户自行开发实现。

关于上下 padding 的规律变化方面，Element 选择了将文本行高设置为 23px，来取得既让总高度呈现为 48/44/40/36px 的规律4 倍数组合，又让上下间距取得 12/10/8/6 的规律双数组合。代价是内容无法在文本域内精确且像素完美的对齐，因为行高是单数。
而竞品们则普遍设定行高为双数，获得了精确且像素完美的对齐。代价是让总高度变成了单数。
两种选择各有优劣，并没有绝对最优选项。所以遵循 Element UI 的原有设定。 统一设置 23px 的默认内容行高，达成既让总高度呈现为 48/40/32 的规律 4 倍数组合，又让上下间距取得 12/8/4px 的规律 4 倍数组合。

参考

TDesign

Ant 注重的并非总高度的数值，而是 16/12/8px 的上下 padding 变化。
Arco 的上下 padding 变化为9/7/5/2。有点奇怪。前三个大小扣除 border 是 40/36/32，虽然差距略小，但还算有节奏，最后一个直接跳到 23.84px，有点突兀。
Semi 与 Ant类似，主要注重 16/12/8px 的上下 padding 变化。

Tag

Element UI

参考

Ant

Arco

Semi

TDesign

Avatar

其他组件参考核心组件的逻辑进行修改。
Avatar 组件的修改逻辑是将small avatar 设定为 24px，供常见组件内嵌使用，例如 default table ，将 default avatar设定为 32px，供大组件内嵌使用，例如large table。将 large avatar设定为 40px，供单独使用，作为用户详情页头像等重点用途。更大的头像（图片）需求，一般不属于批量内嵌，我们选择让用户自行开发实现。

Dropdown

Dropdow 的修改逻辑是给 default 和 large 较宽松的height，因为展开下拉菜单时一般都有相对充足的屏幕空间，宽松的height 可以提供更好的操作体验。另外将Element Plus 的 small height 设定为 24px，与 Element UI 的 miniheight 保持一致，为特殊情况提供小尺寸选项。

icon 和 text 的距离

全局逻辑

像 Radio、Table这样，icon 有独立承担操作职能的，采用 8px 作为最小间距单位，8px 是全局可操作元素的最小间距，再小的话，多操作体验很差。
像 button 、input 这样，icon 作为辅助说明的，采用递减策略，符合全局变化节奏，也为 small 模式省出更多空间。
例外情况：
像 Tag 的小元素，带的 icon 可能是操作可能是说明的，可以接受最低 4px 的间距。

Button

Element UI Button 组件的 icon 和 text 距离是统一5px，竞品多为统一 8px。为符合全局变化的节奏，为了 small 按钮拥有更紧凑的结构，Element Plus 选择了分开设置距离为 8/6/4 的组合。
之所以没选择 8/8/4 的组合是因为不符合全局节奏，12/8/4 的组合则使 large 间距太大了。为什么设定 6 这个非4 倍数的间距呢？因为4px体系的规则只是启发，而非限制。更多内容可以看下方的引用内容。

间距体系严格来讲不是叫做规范，而是规则。 我们建立的规则，优先8，然后4，如果都没有至少保证2（偶数原则），如多都不行比如分割线，则1。要是再出现极其另类的，0.5也可能用上。所以它们是降序 8>4>2>1>0.5>0.25>0.1。 上面间距这里，可以理解为：large是男生，default是女生，small是孩子， 数字就是鞋子尺码。如果女生穿男生8px的鞋子，其实是非常不适合和别扭的（40码以上大jiojio的情况不谈），所以这就是所谓的“遵从用户习惯”，“保证全局节奏”。 ——引用自牛 Mo 王

Element UI

参考

Ant

Arco

Smei

TDesign

Input

Element UI input 组件的 icon 和 text 距离是统一6px，，Element Plus 选择了分开设置距离为 8/6/4 的组合。是比较均衡的选择，符合全局变化节奏，宽松和紧凑的需求都能满足。

参考

Ant

Arco

Semi

TDesign
待确定

Table

Element UI 在表格多图标处理这里是比较粗糙的。

从Table 的 icon 很可能是要操作的角度讲，间距应该比 input 里面的指示性图标要大一些，才合理。
表格里虽然空间紧凑，但是紧凑的目的正是为了分配有限的空间到更需要的区域，所以不应该将 text和icon之间的间距压的太小。
竞品使用不同侧对齐的方式明显区分开了text 和 icon，我们不采用这个方案，那间距就更有必要给足了。
这里和 radio 一样，用了需要操作，不能再小的逻辑。 再大也不合适，太过于宽了，所以选择统一8px。
表格里情况复杂，统一 8px 也能给开发降低开发难度。

Ant 情况特殊，如果按照两个图标都是 14*14px 的外框的话，距离是 5px。在表格上记录为约等于 5px。

Radio 和Checkbox

radio 和checkbox 统一 8px。
原 icon 与 text 的 padding 为 10px，不符合 4 倍数体系，修改为 统一8 px。
为什么不分开设置呢？ 在【级联选择器-选择任意一级选项】的应用场景里，radio icon 是作为单独操作的控件存在的，与点击 text 有着不同的效果，所以需要更大的空间，8px 已经是最合适的距离了，再增加减少都不会更好。

Element UI

参考

Tag

Element Tagl的 icon 和 text 的间距应该是有问题的，这个变化规律很奇怪。
这里出现的 icon 主要是删除操作，拓展用法为在尾部或者首部添加图标作为辅助说明元素。因为总体元素较小，同时常态下一个 tag 内只会有 一个 icon操作。允许接受最低 4px 的间距。

Element UI

参考

Ant

Arco

Semi

TDesign

左右间距属性全局修改说明

以下 padding 属性无特别说都是特指左右 padding。

Button

default

当 Element UI 中的 button size=default 时，加上 border 的左右间距为padding:20px+border:1px=21px，这是不符合 4pt 体系的，多出来的 1 像素破坏了整体一致性和节奏，但没有实际意义，弊大于利。所以将左右 padding改为20px。前端结构为 padding:19px+border:1px。这里特别说明一下，因为设计稿中 border 属性不占位置的原因，前端看到的标注是加上border 的总宽度，需要结合具体情况判断 padding 是否需要减1px。

当 Element UI 中的 button size=mini时，左右 padding为padding:115px+border:1px=16px， 这与Element Plus 中的 button size=default时的左右 padding相等，不符合递减的节奏节奏，所以将其左右 padding改为 12px，前端结构为 padding:11px+border:1px。

参考

Ant

Arco

Smei

round

在Element UI 中，仅 round button size=default 时， padding 比 default button size=default 时大 3px，其余size 的 round button 按钮的padding 与 default button 均无差距，这并不一致。Element Plus 选择将所有 padding 修改为一致属性。优点是属性更一致，复杂度更低，更有利于开发和设计的协调与一致。缺点是略微牺牲方形按钮和圆形按钮之间的视觉均衡度，但因为两者极少一起出现，所以影响很小。

参考

Radio、CheckBox

按钮样式

按钮样式应该与 button 保持一致。

border

Elemnet UI 的 radio border 样式的左右间距是不对等的，有区分button 和 radio border 作用，Elemnet Plus 继承了这个特性，并按照全局节奏进行了优化。

Input

无 icon

Element UI 中不同 size 的 input 是同一个 padding 大小，跟 全局变化节奏不一致，也不符合高信息密度需求。在多列 input 嵌套在 table 中时，横向空间就更珍贵了，需要更小的 padding。

综上所述，将 Element Plus 的 input padding 设置为 16/12/8 的组合，符合 全局变化节奏，符合4pt 的 padding体系。

有 icon

有 icon 的情况下，Element UI 选择了让 icon 侧的间距更小一些，目的可能是减少占位文字之间的跳跃感，同时节约横向空间。设计上应该是统一设计为 10px 的，但是实际实现中出了一些问题，导致线上版本 的 small 和 mini实际上是 11px。
Ant、Arco 等间距不等的竞品都没有特意增加这个特性，为了简化设计细节，提升通用性和一致性，Element Plus选择去除这个细节，采用16/12/8 的间距组合。

Element

有无 icon 相关参考

ant 和 arco 都采用了有 icon 和无 icon 间距都一致的做法。

semi 采用了和 Elemnet 类似的方案，有 icon 时间距更小。值得一提的是 Semi没有 border的宽度。

有 Tag

Table

Element UI 中不同 size 的 table 是同一个 padding ，跟全局变化节奏不一致，也不符合高信息密度需求。在多列 table 中时，横向空间就更珍贵了，需要更小的 padding。
而在 large 下，table 内嵌内容可能会比 small 丰富很多，可以设定更大的 padding 而拥有更好的适应性和区分性。从内嵌内容的丰富程度这个角度对比，large input 和 small input 的差距并不如 table 这边这么显著。
还有一种逻辑是，对更小的 padding 的需求比更宽松的 size 的需求更有必要性和功能意义。在后台系统场景中，经常存在 10 多列乃至更多列的 table ，此时用户需要更紧凑的表单以一屏幕显示内容，否则就会出现体验极差的横向滚动条。

Tag

无 icon

Element UI

参考

Ant

Arco

Semi

TDesign

有 icon

Element UI

参考

Ant

Arco

Semi

TDesign

Dropdown

Dropdow 的padding修改逻辑和 height 一致，给 default 和 large 较宽松的height，因为展开下拉菜单时一般都有相对充足的屏幕空间，宽松的height 可以提供更好的操作体验。另外将Element Plus 的 small height 设定为 24px，与 Element UI 的 miniheight 保持一致，为特殊情况提供小尺寸选项。

font-size修改全局说明

button

button 的修改逻辑是放弃了Element UI 中为small button 设定的 13 px字体，修改为更常用，对齐更均衡的 14px。
参考 Ant Design 的研究成果，14px 字体已经可以保证在多数常用显示器上的用户阅读效率最佳。加之本次修改的初衷是为了更好的满足高信息密度的需求，同时又要尽可能的继承 Element UI 的相关参数，避免无意义的修改等因素。综合考虑后选择不添加16px 的 font-size 到默认组件中。

Elemnet

参考

Ant

Arco

Smei

Input

input 的修改逻辑是放弃了Element UI 中为 small input 设定的 13 px字体，修改为更常用，对齐更均衡的 14px。

Radio 和Checkbox

Element Plus 将 small-font-size 设定为 12px，和Elemnet UI 中一致，也符合全局节奏。

Element UI

参考

Table

Table 的修改逻辑是 将 Element UI 中为 small table设定的 12 px字体，修改为更大的 14px字体。主要是为了用 14px 字体提供比 12px 字体更好的识别度，用户如果需要更宽松的 padding 可以切换为large table 。

Tag

Element UI

参考

Ant

Arco

Semi

TDesign

Dropdown

Dropdown 的修改逻辑是放弃了Element UI 中为 small Dropdown 设定的 13 px字体，修改为更常用，对齐更均衡的 14px。

icon-size 修改全局说明

icon-size 的修改问题的核心，也是要不要增加 16px icon。 Elemnet Plus 的决策是增加。因为16px icon 是 Element Plus 原生图标的绘制尺寸，也是设计界的通用 icon 绘制尺寸。可以像素完美的呈现图标。所以将 Elemnet Plus 的 large 设置为 16px 图标。

Button

Elemnet UI

参考

Ant

Arco

Smei

一样都是 24px 的最小尺寸，有选择 16px 的，有选择 12px 的。可能是因为不同的需求导致了这个选择。
semi 的细节选择和 arco 不同，也可能是字节有意为之。需要两套不同风格的组件库。

Input

和 font-size 一样，放弃了Element UI 中为 small Dropdown 设定的 13 px图标，修改为更常用，对齐更均衡的 14px。

其他系统的参考

Radio 和Checkbox

Element Plus 将 small-icon-size 设定为 12px，和Elemnet UI 中一致，也符合全局节奏。
将large-icon-size 加大为 16px，符合全局节奏。

Element UI

参考

特殊点
Arco 的 icon 采用了 2px border 的设计。

Table

Table 的修改逻辑是 将 Element UI 中为 small table设定的 12 px icon ，修改为更大的 14px icon。large 则按全局原则加大为 16px。

Tag

Element UI

参考

TDesign 的 icon 是套着16px 的框架，但是 icon 实际占据面积只有 88，更像 1212 的图标。

Ant

Arco

Semi

TDesign

总结

Elemnet Plus 的设计原则是清晰、高效、一致、可控、反馈、灵活、扩展、美观，我们 主要在清晰、高效、一致性的问题上做了大量讨论、纠结和实验后，兼顾其他原则，尽量从各种规则限制中取当前的最优解，以敲定当前的规范。将复杂化的内容变得更便捷是我们EP团队的初衷，希望这次修改能给更多的用户带来更好体验。
最后，设计方案难免有考虑不足之处，欢迎留言讨论指导。